style: 全局 UI 主题皮肤重构与样式模块化
引入 Element Plus 主题定制和主题皮肤 composable，将全局 样式拆分为组件级独立 CSS 文件（侧边栏、顶栏、工作台等）， 统一色彩变量和间距规范，重构所有视图和组件样式以适配新 主题系统，优化图表和知识图谱组件视觉表现，提取审计和差 旅报销相关子组件。
This commit is contained in:
caoxiaozhu
@@ -34,15 +34,15 @@
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.status-tabs button.active { color: #059669; }
|
||||
.status-tabs button.active { color: var(--theme-primary-active); }
|
||||
|
||||
.status-tabs button.active::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0; right: 0; bottom: -1px;
|
||||
height: 3px;
|
||||
border-radius: 999px 999px 0 0;
|
||||
background: #10b981;
|
||||
border-radius: 2px 2px 0 0;
|
||||
background: var(--theme-primary);
|
||||
}
|
||||
|
||||
.list-toolbar {
|
||||
@@ -86,8 +86,8 @@
|
||||
}
|
||||
|
||||
.list-search input:focus {
|
||||
border-color: #10b981;
|
||||
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14);
|
||||
border-color: var(--theme-primary);
|
||||
box-shadow: 0 0 0 3px var(--theme-focus-ring);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@@ -108,7 +108,7 @@
|
||||
}
|
||||
|
||||
.filter-btn { min-width: 104px; justify-content: space-between; }
|
||||
.filter-btn:hover, .page-size:hover { border-color: rgba(16, 185, 129, .32); color: #0f9f78; }
|
||||
.filter-btn:hover, .page-size:hover { border-color: rgba(var(--theme-primary-rgb), .32); color: var(--theme-primary-active); }
|
||||
|
||||
.hint { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; color: #64748b; font-size: 13px; }
|
||||
|
||||
@@ -119,7 +119,7 @@
|
||||
overflow-y: auto;
|
||||
border: 1px solid #edf2f7;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(180deg, #fcfefd 0%, #f4f8f6 100%);
|
||||
background: linear-gradient(180deg, #fcfeff 0%, #f4f8fc 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
@@ -145,13 +145,13 @@
|
||||
padding: 28px 20px;
|
||||
text-align: center;
|
||||
color: #64748b;
|
||||
background: linear-gradient(180deg, #fcfffd 0%, #f5f9f7 100%);
|
||||
background: linear-gradient(180deg, #fcfeff 0%, #f5f9fc 100%);
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.table-state .mdi {
|
||||
font-size: 28px;
|
||||
color: #10b981;
|
||||
color: var(--theme-primary);
|
||||
}
|
||||
|
||||
.table-state strong {
|
||||
@@ -167,7 +167,7 @@
|
||||
}
|
||||
|
||||
.table-state.error .mdi {
|
||||
color: #ef4444;
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.state-action {
|
||||
@@ -176,10 +176,10 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 14px;
|
||||
border: 1px solid rgba(16, 185, 129, 0.28);
|
||||
border: 1px solid rgba(var(--theme-primary-rgb), 0.28);
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: #059669;
|
||||
color: var(--theme-primary-active);
|
||||
font-size: 13px;
|
||||
font-weight: 760;
|
||||
}
|
||||
@@ -207,11 +207,11 @@ th {
|
||||
|
||||
tbody tr { cursor: pointer; }
|
||||
tbody tr:hover, tbody tr.spotlight {
|
||||
background: linear-gradient(90deg, rgba(16, 185, 129, .08), rgba(16, 185, 129, .03));
|
||||
background: linear-gradient(90deg, rgba(var(--theme-primary-rgb), .08), rgba(var(--theme-primary-rgb), .03));
|
||||
}
|
||||
tbody tr:last-child td { border-bottom: 0; }
|
||||
|
||||
.doc-id { color: #1d4ed8; font-weight: 800; }
|
||||
.doc-id { color: var(--theme-primary-active); font-weight: 800; }
|
||||
|
||||
.person { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
|
||||
|
||||
@@ -219,7 +219,7 @@ tbody tr:last-child td { border-bottom: 0; }
|
||||
width: 24px; height: 24px;
|
||||
display: grid; place-items: center;
|
||||
border-radius: 999px;
|
||||
background: #dbeafe; color: #1d4ed8;
|
||||
background: var(--theme-primary-soft); color: var(--theme-primary-active);
|
||||
font-size: 12px; font-weight: 900;
|
||||
}
|
||||
|
||||
@@ -231,26 +231,26 @@ tbody tr:last-child td { border-bottom: 0; }
|
||||
font-size: 12px; font-weight: 750; white-space: nowrap;
|
||||
}
|
||||
|
||||
.risk-tag.low { background: #dcfce7; color: #059669; }
|
||||
.risk-tag.medium { background: #ffedd5; color: #f97316; }
|
||||
.risk-tag.high { background: #fee2e2; color: #ef4444; }
|
||||
.risk-tag.low { background: var(--success-soft); color: var(--success); }
|
||||
.risk-tag.medium { background: var(--warning-soft); color: var(--warning-active); }
|
||||
.risk-tag.high { background: var(--danger-soft); color: var(--danger); }
|
||||
|
||||
.sla { font-size: 13px; font-weight: 850; }
|
||||
.sla.safe { color: #059669; }
|
||||
.sla.warning { color: #f97316; }
|
||||
.sla.danger { color: #ef4444; }
|
||||
.sla.safe { color: var(--success); }
|
||||
.sla.warning { color: var(--warning-active); }
|
||||
.sla.danger { color: var(--danger); }
|
||||
|
||||
.status-tag.pending { background: #eff6ff; color: #2563eb; }
|
||||
.status-tag.urgent { background: #fff7ed; color: #f97316; }
|
||||
.status-tag.done { background: #ecfdf5; color: #059669; }
|
||||
.status-tag.pending { background: var(--theme-primary-soft); color: var(--theme-primary-active); }
|
||||
.status-tag.urgent { background: var(--warning-soft); color: var(--warning-active); }
|
||||
.status-tag.done { background: var(--success-soft); color: var(--success); }
|
||||
|
||||
.more-btn {
|
||||
width: auto; height: auto;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
border: 0; background: transparent;
|
||||
color: #2563eb; font-size: 13px; font-weight: 800;
|
||||
color: var(--theme-primary-active); font-size: 13px; font-weight: 800;
|
||||
}
|
||||
.more-btn:hover { color: #059669; }
|
||||
.more-btn:hover { color: var(--theme-primary-active); }
|
||||
|
||||
.list-foot {
|
||||
display: grid;
|
||||
@@ -272,8 +272,8 @@ tbody tr:last-child td { border-bottom: 0; }
|
||||
font-size: 14px; font-weight: 800;
|
||||
transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
|
||||
}
|
||||
.pager button:hover:not(.active) { background: #fff; color: #059669; box-shadow: 0 1px 4px rgba(15, 23, 42, .08); }
|
||||
.pager button.active { background: #059669; color: #fff; box-shadow: 0 8px 16px rgba(5, 150, 105, .20); }
|
||||
.pager button:hover:not(.active) { background: #fff; color: var(--theme-primary-active); box-shadow: 0 1px 4px rgba(15, 23, 42, .08); }
|
||||
.pager button.active { background: var(--theme-primary); color: #fff; box-shadow: 0 8px 16px var(--theme-primary-shadow); }
|
||||
.pager span { color: #64748b; font-weight: 800; }
|
||||
|
||||
.page-size {
|
||||
@@ -318,8 +318,8 @@ tbody tr:last-child td { border-bottom: 0; }
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(135deg, #dbeafe, #ecfdf5);
|
||||
color: #0f766e;
|
||||
background: linear-gradient(135deg, var(--theme-primary-soft-strong), var(--theme-primary-soft));
|
||||
color: var(--theme-primary-active);
|
||||
font-size: 26px;
|
||||
font-weight: 900;
|
||||
}
|
||||
@@ -334,8 +334,8 @@ tbody tr:last-child td { border-bottom: 0; }
|
||||
margin-left: 8px;
|
||||
padding: 3px 9px;
|
||||
border-radius: 6px;
|
||||
background: #dcfce7;
|
||||
color: #059669;
|
||||
background: var(--theme-primary-soft);
|
||||
color: var(--theme-primary-active);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@@ -377,16 +377,16 @@ tbody tr:last-child td { border-bottom: 0; }
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.risk-pill.high { background: #fee2e2; color: #ef4444; }
|
||||
.risk-pill.medium { background: #ffedd5; color: #f97316; }
|
||||
.risk-pill.low { background: #dcfce7; color: #059669; }
|
||||
.state-pill { background: #dbeafe; color: #2563eb; }
|
||||
.risk-pill.high { background: var(--danger-soft); color: var(--danger); }
|
||||
.risk-pill.medium { background: var(--warning-soft); color: var(--warning-active); }
|
||||
.risk-pill.low { background: var(--success-soft); color: var(--success); }
|
||||
.state-pill { background: var(--theme-primary-soft); color: var(--theme-primary-active); }
|
||||
|
||||
.countdown {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: #f97316 !important;
|
||||
color: var(--warning-active) !important;
|
||||
}
|
||||
|
||||
.hero-summary-panel {
|
||||
@@ -417,7 +417,7 @@ tbody tr:last-child td { border-bottom: 0; }
|
||||
}
|
||||
|
||||
.hero-summary-icon {
|
||||
color: #059669;
|
||||
color: var(--theme-primary);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@@ -456,8 +456,8 @@ tbody tr:last-child td { border-bottom: 0; }
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
background: #10b981;
|
||||
box-shadow: 0 0 0 4px rgba(16, 185, 129, .12);
|
||||
background: var(--theme-primary);
|
||||
box-shadow: 0 0 0 4px rgba(var(--theme-primary-rgb), .12);
|
||||
}
|
||||
|
||||
.progress-line {
|
||||
@@ -485,7 +485,7 @@ tbody tr:last-child td { border-bottom: 0; }
|
||||
background: #dbe4ee;
|
||||
}
|
||||
|
||||
.progress-step.active::before { background: #10b981; }
|
||||
.progress-step.active::before { background: var(--theme-primary); }
|
||||
.progress-step:first-child::before { left: 50%; }
|
||||
.progress-step:last-child::before { right: 50%; }
|
||||
|
||||
@@ -507,20 +507,20 @@ tbody tr:last-child td { border-bottom: 0; }
|
||||
position: absolute;
|
||||
inset: -4px;
|
||||
z-index: -1;
|
||||
border: 2px solid rgba(16, 185, 129, .42);
|
||||
border: 2px solid rgba(var(--theme-primary-rgb), .42);
|
||||
border-radius: 999px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.progress-step.active span {
|
||||
background: #059669;
|
||||
background: var(--theme-primary-active);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.progress-step.current span {
|
||||
background: #10b981 !important;
|
||||
background: var(--theme-primary) !important;
|
||||
color: #fff !important;
|
||||
box-shadow: 0 0 0 4px rgba(16, 185, 129, .15) !important;
|
||||
box-shadow: 0 0 0 4px rgba(var(--theme-primary-rgb), .15) !important;
|
||||
animation: breathe-dot 3s ease-in-out infinite !important;
|
||||
transform-origin: center !important;
|
||||
}
|
||||
@@ -528,11 +528,11 @@ tbody tr:last-child td { border-bottom: 0; }
|
||||
@keyframes breathe-dot {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 4px 12px rgba(16, 185, 129, .3), 0 0 0 4px rgba(16, 185, 129, .15);
|
||||
box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb), .3), 0 0 0 4px rgba(var(--theme-primary-rgb), .15);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.12);
|
||||
box-shadow: 0 4px 20px rgba(16, 185, 129, .5), 0 0 0 10px rgba(16, 185, 129, .08);
|
||||
box-shadow: 0 4px 20px rgba(var(--theme-primary-rgb), .5), 0 0 0 10px rgba(var(--theme-primary-rgb), .08);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -541,11 +541,11 @@ tbody tr:last-child td { border-bottom: 0; }
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.progress-step.current strong { color: #059669; }
|
||||
.progress-step.current strong { color: var(--theme-primary-active); }
|
||||
.progress-step small { font-size: 11px; }
|
||||
|
||||
.progress-step.current small {
|
||||
color: #059669;
|
||||
color: var(--theme-primary-active);
|
||||
}
|
||||
|
||||
.detail-grid {
|
||||
@@ -596,9 +596,9 @@ tbody tr:last-child td { border-bottom: 0; }
|
||||
min-width: 102px;
|
||||
min-height: 34px;
|
||||
padding: 0 12px;
|
||||
border-radius: 999px;
|
||||
background: #ecfdf5;
|
||||
color: #047857;
|
||||
border-radius: 4px;
|
||||
background: var(--theme-primary-soft);
|
||||
color: var(--theme-primary-active);
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
}
|
||||
@@ -689,19 +689,19 @@ tbody tr:last-child td { border-bottom: 0; }
|
||||
width: max-content;
|
||||
margin-top: 7px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.over-tag.ok {
|
||||
background: #ecfdf5;
|
||||
color: #059669;
|
||||
background: var(--success-soft);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.over-tag.bad {
|
||||
background: #fef2f2;
|
||||
color: #ef4444;
|
||||
background: var(--danger-soft);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.expense-attachment-main {
|
||||
@@ -717,22 +717,22 @@ tbody tr:last-child td { border-bottom: 0; }
|
||||
align-items: center;
|
||||
min-height: 24px;
|
||||
padding: 0 8px;
|
||||
border-radius: 999px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.attachment-pill.ok { background: #ecfdf5; color: #059669; }
|
||||
.attachment-pill.partial { background: #fff7ed; color: #ea580c; }
|
||||
.attachment-pill.missing { background: #fef2f2; color: #ef4444; }
|
||||
.attachment-pill.neutral { background: #eef2ff; color: #4f46e5; }
|
||||
.attachment-pill.ok { background: var(--success-soft); color: var(--success); }
|
||||
.attachment-pill.partial { background: var(--warning-soft); color: var(--warning-active); }
|
||||
.attachment-pill.missing { background: var(--danger-soft); color: var(--danger); }
|
||||
.attachment-pill.neutral { background: var(--info-soft); color: var(--info); }
|
||||
|
||||
.inline-action {
|
||||
min-height: 24px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid #dbe4ee;
|
||||
border-radius: 999px;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
font-size: 11px;
|
||||
@@ -740,13 +740,13 @@ tbody tr:last-child td { border-bottom: 0; }
|
||||
}
|
||||
|
||||
.inline-action:hover {
|
||||
border-color: rgba(16, 185, 129, .36);
|
||||
color: #047857;
|
||||
border-color: rgba(var(--theme-primary-rgb), .36);
|
||||
color: var(--theme-primary-active);
|
||||
}
|
||||
|
||||
.risk-inline-tag.low { background: #ecfdf5; color: #059669; }
|
||||
.risk-inline-tag.medium { background: #fff7ed; color: #ea580c; }
|
||||
.risk-inline-tag.high { background: #fef2f2; color: #dc2626; }
|
||||
.risk-inline-tag.low { background: var(--success-soft); color: var(--success); }
|
||||
.risk-inline-tag.medium { background: var(--warning-soft); color: var(--warning-active); }
|
||||
.risk-inline-tag.high { background: var(--danger-soft); color: var(--danger-hover); }
|
||||
|
||||
.expense-risk p {
|
||||
margin-top: 6px;
|
||||
@@ -773,7 +773,7 @@ tbody tr:last-child td { border-bottom: 0; }
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 10px;
|
||||
border-radius: 999px;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
border: 1px solid #e2e8f0;
|
||||
color: #334155;
|
||||
@@ -782,7 +782,7 @@ tbody tr:last-child td { border-bottom: 0; }
|
||||
}
|
||||
|
||||
.expense-file-chip i {
|
||||
color: #059669;
|
||||
color: var(--theme-primary);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@@ -814,13 +814,13 @@ tbody tr:last-child td { border-bottom: 0; }
|
||||
}
|
||||
|
||||
.detail-attachment.missing {
|
||||
border-color: #fb923c;
|
||||
border-color: var(--warning-line);
|
||||
border-style: dashed;
|
||||
background: #fff7ed;
|
||||
background: var(--warning-soft);
|
||||
}
|
||||
|
||||
.detail-attachment i { color: #059669; font-size: 24px; }
|
||||
.detail-attachment.missing i { color: #f97316; }
|
||||
.detail-attachment i { color: var(--theme-primary); font-size: 24px; }
|
||||
.detail-attachment.missing i { color: var(--warning-active); }
|
||||
|
||||
.detail-attachment strong {
|
||||
display: block;
|
||||
@@ -862,7 +862,7 @@ tbody tr:last-child td { border-bottom: 0; }
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.risk-card header b { color: #ef4444; }
|
||||
.risk-card header b { color: var(--danger); }
|
||||
|
||||
.risk-list {
|
||||
display: grid;
|
||||
@@ -883,9 +883,9 @@ tbody tr:last-child td { border-bottom: 0; }
|
||||
}
|
||||
|
||||
.risk-list div:last-child { border-bottom: 0; }
|
||||
.risk-list i { color: #f97316; }
|
||||
.risk-list b.high { color: #ef4444; }
|
||||
.risk-list b.medium { color: #f97316; }
|
||||
.risk-list i { color: var(--warning-active); }
|
||||
.risk-list b.high { color: var(--danger); }
|
||||
.risk-list b.medium { color: var(--warning-active); }
|
||||
|
||||
.risk-note {
|
||||
margin-top: 12px;
|
||||
@@ -951,24 +951,24 @@ tbody tr:last-child td { border-bottom: 0; }
|
||||
|
||||
.approve-action {
|
||||
min-width: 92px;
|
||||
border: 1px solid #059669;
|
||||
background: #059669;
|
||||
border: 1px solid var(--theme-primary);
|
||||
background: var(--theme-primary);
|
||||
color: #fff;
|
||||
box-shadow: 0 4px 10px rgba(5, 150, 105, .14);
|
||||
box-shadow: 0 4px 10px var(--theme-primary-shadow);
|
||||
}
|
||||
|
||||
.reject-action {
|
||||
min-width: 86px;
|
||||
border: 1px solid #fecaca;
|
||||
border: 1px solid var(--danger-line);
|
||||
background: #fff;
|
||||
color: #ef4444;
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.supplement-action {
|
||||
min-width: 86px;
|
||||
border: 1px solid #fed7aa;
|
||||
border: 1px solid var(--warning-line);
|
||||
background: #fff;
|
||||
color: #ea580c;
|
||||
color: var(--warning-active);
|
||||
}
|
||||
|
||||
/* ────────── Detail Modal Overlay ────────── */
|
||||
@@ -1020,9 +1020,9 @@ tbody tr:last-child td { border-bottom: 0; }
|
||||
.req-badge {
|
||||
padding: 6px 14px;
|
||||
border-radius: 3px;
|
||||
background: #eff6ff;
|
||||
border-left: 3px solid #1d4ed8;
|
||||
color: #1d4ed8;
|
||||
background: var(--theme-primary-soft);
|
||||
border-left: 3px solid var(--theme-primary-active);
|
||||
color: var(--theme-primary-active);
|
||||
font-size: 13px;
|
||||
font-weight: 850;
|
||||
letter-spacing: .02em;
|
||||
@@ -1058,23 +1058,23 @@ tbody tr:last-child td { border-bottom: 0; }
|
||||
}
|
||||
|
||||
.header-indicator.high {
|
||||
background: #fee2e2;
|
||||
color: #dc2626;
|
||||
background: var(--danger-soft);
|
||||
color: var(--danger-hover);
|
||||
}
|
||||
|
||||
.header-indicator.medium {
|
||||
background: #ffedd5;
|
||||
color: #ea580c;
|
||||
background: var(--warning-soft);
|
||||
color: var(--warning-active);
|
||||
}
|
||||
|
||||
.header-indicator.low {
|
||||
background: #dcfce7;
|
||||
color: #059669;
|
||||
background: var(--success-soft);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.header-indicator.status {
|
||||
background: #dbeafe;
|
||||
color: #1d4ed8;
|
||||
background: var(--theme-primary-soft);
|
||||
color: var(--theme-primary-active);
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
@@ -1128,14 +1128,14 @@ tbody tr:last-child td { border-bottom: 0; }
|
||||
|
||||
.progress-node.done .node-dot,
|
||||
.progress-node.active .node-dot {
|
||||
background: #059669;
|
||||
background: var(--theme-primary-active);
|
||||
color: #fff;
|
||||
box-shadow: 0 4px 12px rgba(5, 150, 105, .25);
|
||||
box-shadow: 0 4px 12px var(--theme-primary-shadow);
|
||||
}
|
||||
|
||||
.progress-node.current .node-dot {
|
||||
background: #10b981;
|
||||
box-shadow: 0 4px 12px rgba(5, 150, 105, .25), 0 0 0 5px rgba(5, 150, 105, .1);
|
||||
background: var(--theme-primary);
|
||||
box-shadow: 0 4px 12px var(--theme-primary-shadow), 0 0 0 5px rgba(var(--theme-primary-rgb), .1);
|
||||
animation: breathe-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@@ -1143,12 +1143,12 @@ tbody tr:last-child td { border-bottom: 0; }
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
box-shadow: 0 4px 12px rgba(5, 150, 105, .25), 0 0 0 4px rgba(5, 150, 105, .15);
|
||||
box-shadow: 0 4px 12px var(--theme-primary-shadow), 0 0 0 4px rgba(var(--theme-primary-rgb), .15);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 4px 12px rgba(5, 150, 105, .4), 0 0 0 10px rgba(5, 150, 105, .08);
|
||||
box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb), .4), 0 0 0 10px rgba(var(--theme-primary-rgb), .08);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1166,7 +1166,7 @@ tbody tr:last-child td { border-bottom: 0; }
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.progress-node.current .node-label strong { color: #059669; }
|
||||
.progress-node.current .node-label strong { color: var(--theme-primary-active); }
|
||||
|
||||
.node-label small {
|
||||
color: #94a3b8;
|
||||
@@ -1185,7 +1185,7 @@ tbody tr:last-child td { border-bottom: 0; }
|
||||
transition: background 300ms ease;
|
||||
}
|
||||
|
||||
.node-line.filled { background: #10b981; }
|
||||
.node-line.filled { background: var(--theme-primary); }
|
||||
|
||||
/* ── Modal Body ── */
|
||||
.modal-body {
|
||||
@@ -1220,10 +1220,10 @@ tbody tr:last-child td { border-bottom: 0; }
|
||||
transition: background 160ms ease;
|
||||
}
|
||||
|
||||
.metric-block:hover { background: #fafffe; }
|
||||
.metric-block:hover { background: #f8fbff; }
|
||||
|
||||
.metric-block.amount {
|
||||
background: #ecfdf5;
|
||||
background: var(--theme-primary-soft);
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
@@ -1245,9 +1245,9 @@ tbody tr:last-child td { border-bottom: 0; }
|
||||
}
|
||||
|
||||
.metric-value.sla { display: flex; align-items: center; gap: 6px; font-size: 20px; }
|
||||
.metric-value.sla.safe { color: #059669; }
|
||||
.metric-value.sla.warning { color: #f59e0b; }
|
||||
.metric-value.sla.danger { color: #ef4444; }
|
||||
.metric-value.sla.safe { color: var(--success); }
|
||||
.metric-value.sla.warning { color: var(--warning); }
|
||||
.metric-value.sla.danger { color: var(--danger); }
|
||||
|
||||
/* ── Content Card ── */
|
||||
.content-card {
|
||||
@@ -1284,7 +1284,7 @@ tbody tr:last-child td { border-bottom: 0; }
|
||||
}
|
||||
|
||||
.card-title i {
|
||||
color: #059669;
|
||||
color: var(--theme-primary);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@@ -1297,15 +1297,15 @@ tbody tr:last-child td { border-bottom: 0; }
|
||||
.card-badge {
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
background: #f0fdf4;
|
||||
color: #059669;
|
||||
background: var(--theme-primary-soft);
|
||||
color: var(--theme-primary-active);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.card-badge.warn {
|
||||
background: #fff7ed;
|
||||
color: #ea580c;
|
||||
background: var(--warning-soft);
|
||||
color: var(--warning-active);
|
||||
}
|
||||
|
||||
/* ── Summary Grid ── */
|
||||
@@ -1325,14 +1325,14 @@ tbody tr:last-child td { border-bottom: 0; }
|
||||
transition: background 160ms ease;
|
||||
}
|
||||
|
||||
.summary-cell:hover { background: #fafffe; }
|
||||
.summary-cell:hover { background: #f8fbff; }
|
||||
|
||||
.cell-icon {
|
||||
width: 38px; height: 38px;
|
||||
display: grid; place-items: center;
|
||||
border-radius: 4px;
|
||||
background: #ecfdf5;
|
||||
color: #059669;
|
||||
background: var(--theme-primary-soft);
|
||||
color: var(--theme-primary);
|
||||
font-size: 18px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -1402,7 +1402,7 @@ tbody tr:last-child td { border-bottom: 0; }
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
color: #059669 !important;
|
||||
color: var(--theme-primary-active) !important;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@@ -1416,8 +1416,8 @@ tbody tr:last-child td { border-bottom: 0; }
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.over-badge.ok { background: #ecfdf5; color: #059669; }
|
||||
.over-badge.bad { background: #fef2f2; color: #ef4444; }
|
||||
.over-badge.ok { background: var(--success-soft); color: var(--success); }
|
||||
.over-badge.bad { background: var(--danger-soft); color: var(--danger); }
|
||||
|
||||
/* ── Attachments (sidebar list) ── */
|
||||
.attachment-list-side {
|
||||
@@ -1440,8 +1440,8 @@ tbody tr:last-child td { border-bottom: 0; }
|
||||
.attachment-row:hover { background: #fafbfd; }
|
||||
|
||||
.attachment-row.missing {
|
||||
border: 1px dashed #fbbf24;
|
||||
background: #fffbeb;
|
||||
border: 1px dashed var(--warning-line);
|
||||
background: var(--warning-soft);
|
||||
}
|
||||
|
||||
.file-icon-sm {
|
||||
@@ -1452,9 +1452,9 @@ tbody tr:last-child td { border-bottom: 0; }
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.file-icon-sm.pdf { background: #fef2f2; color: #ef4444; }
|
||||
.file-icon-sm.img { background: #ecfdf5; color: #059669; }
|
||||
.file-icon-sm.miss { background: #fff7ed; color: #f59e0b; }
|
||||
.file-icon-sm.pdf { background: var(--danger-soft); color: var(--danger); }
|
||||
.file-icon-sm.img { background: var(--theme-primary-soft); color: var(--theme-primary); }
|
||||
.file-icon-sm.miss { background: var(--warning-soft); color: var(--warning); }
|
||||
|
||||
.file-detail strong {
|
||||
display: block;
|
||||
|
||||
Reference in New Issue
Block a user