YG-Soft/X-Financial
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 全局 UI 主题皮肤重构与样式模块化

Browse Source 
引入 Element Plus 主题定制和主题皮肤 composable，将全局
样式拆分为组件级独立 CSS 文件（侧边栏、顶栏、工作台等），
统一色彩变量和间距规范，重构所有视图和组件样式以适配新
主题系统，优化图表和知识图谱组件视觉表现，提取审计和差
旅报销相关子组件。
This commit is contained in:
caoxiaozhu
2026-05-27 09:17:57 +08:00
parent df49103f23
commit 2dcc72102d
112 changed files with 10983 additions and 8996 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
web/src/assets/styles/views/approval-center-view-part2.css
View File

@@ -16,8 +16,8 @@
}
.opinion-wrap textarea:focus {
border-color: #10b981;
box-shadow: 0 0 0 3px rgba(16, 185, 129, .12);
border-color: var(--theme-primary);
box-shadow: 0 0 0 3px var(--theme-focus-ring);
outline: none;
}
@@ -55,8 +55,8 @@
.risk-total span { font-weight: 750; }
.risk-total.high {
background: #fee2e2;
color: #dc2626;
background: var(--danger-soft);
color: var(--danger-hover);
}
.risk-total.high strong { font-size: 16px; font-weight: 900; }
@@ -87,8 +87,8 @@
flex-shrink: 0;
}
.risk-row.high .risk-icon { background: #fef2f2; color: #ef4444; }
.risk-row.medium .risk-icon { background: #fff7ed; color: #f97316; }
.risk-row.high .risk-icon { background: var(--danger-soft); color: var(--danger); }
.risk-row.medium .risk-icon { background: var(--warning-soft); color: var(--warning-active); }
.risk-text {
flex: 1;
@@ -105,8 +105,8 @@
flex-shrink: 0;
}
.risk-level.high { background: #fef2f2; color: #ef4444; }
.risk-level.medium { background: #fff7ed; color: #f97316; }
.risk-level.high { background: var(--danger-soft); color: var(--danger); }
.risk-level.medium { background: var(--warning-soft); color: var(--warning-active); }
/* ── Side Dual ── */
.side-dual {
@@ -134,7 +134,7 @@
.reminder-list li i {
margin-top: 2px;
color: #f59e0b;
color: var(--warning);
font-size: 14px;
flex-shrink: 0;
}
@@ -195,35 +195,35 @@
.action-btn.supplement {
background: #fff;
border-color: #fed7aa;
color: #ea580c;
border-color: var(--warning-line);
color: var(--warning-active);
}
.action-btn.supplement:hover {
background: #fff7ed;
box-shadow: 0 4px 12px rgba(234, 88, 12, .12);
background: var(--warning-soft);
box-shadow: 0 4px 12px rgba(var(--warning-rgb), .12);
}
.action-btn.reject {
background: #fff;
border-color: #fecaca;
color: #ef4444;
border-color: var(--danger-line);
color: var(--danger);
}
.action-btn.reject:hover {
background: #fef2f2;
box-shadow: 0 4px 12px rgba(239, 68, 68, .12);
background: var(--danger-soft);
box-shadow: 0 4px 12px rgba(var(--danger-rgb), .12);
}
.action-btn.approve {
background: #059669;
background: var(--theme-primary);
color: #fff;
box-shadow: 0 4px 16px rgba(5, 150, 105, .25);
box-shadow: 0 4px 16px var(--theme-primary-shadow);
}
.action-btn.approve:hover {
background: #047857;
box-shadow: 0 8px 24px rgba(5, 150, 105, .30);
background: var(--theme-primary-active);
box-shadow: 0 8px 24px rgba(var(--theme-primary-rgb), .30);
}
.action-btn:active { transform: scale(.97); }

250
web/src/assets/styles/views/approval-center-view.css
View File

@@ -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;

63
web/src/assets/styles/views/archive-center-view.css
View File

@@ -1,7 +1,7 @@
.archive-page .status-tag.archived {
color: #0f766e;
background: rgba(16, 185, 129, 0.12);
border: 1px solid rgba(16, 185, 129, 0.22);
color: var(--theme-primary-active);
background: var(--theme-primary-soft);
border: 1px solid rgba(var(--theme-primary-rgb), 0.22);
}
.archive-page .risk-tag.none {
@@ -9,44 +9,45 @@
color: #64748b;
}
.archive-dropdown-filter {
position: relative;
.archive-filter-control {
display: inline-flex;
}
.archive-dropdown-menu {
position: absolute;
top: calc(100% + 8px);
left: 0;
z-index: 12;
min-width: 148px;
max-height: 280px;
.archive-filter-trigger {
gap: 10px;
}
.archive-filter-trigger:focus-visible {
border-color: var(--theme-primary);
box-shadow: 0 0 0 3px var(--theme-focus-ring);
outline: none;
}
:global(.archive-filter-menu) {
min-width: 156px;
}
:global(.archive-filter-menu .el-dropdown-menu) {
padding: 6px;
border: 1px solid #d7e0ea;
border-radius: 10px;
background: #fff;
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
overflow-y: auto;
}
.archive-dropdown-option {
display: block;
width: 100%;
min-height: 36px;
padding: 0 12px;
border: 0;
border-radius: 8px;
background: transparent;
:global(.archive-filter-option) {
min-height: 34px;
border-radius: 4px;
color: #334155;
font-size: 13px;
font-weight: 600;
text-align: left;
cursor: pointer;
}
.archive-dropdown-option:hover,
.archive-dropdown-option.active {
background: rgba(16, 185, 129, 0.1);
color: #047857;
:global(.archive-filter-option .mdi-check) {
margin-right: 8px;
color: var(--theme-primary-active);
}
:global(.archive-filter-option.is-active),
:global(.archive-filter-option:hover) {
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
}
.archive-page .hint {

76
web/src/assets/styles/views/audit-view-part2.css
View File

@@ -56,8 +56,8 @@
}
.compare-sheet-list b.success {
background: #dcfce7;
color: #059669;
background: var(--success-soft);
color: var(--success-hover);
}
.compare-sheet-list b.danger {
@@ -106,8 +106,8 @@
}
.compare-table-wrap td b.success {
background: #dcfce7;
color: #059669;
background: var(--success-soft);
color: var(--success-hover);
}
.compare-table-wrap td b.warning {
@@ -151,8 +151,8 @@
.review-submit-form input:focus,
.review-submit-form select:focus {
outline: 0;
border-color: rgba(16, 185, 129, 0.5);
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
border-color: rgba(var(--theme-primary-rgb), 0.5);
box-shadow: 0 0 0 3px var(--theme-focus-ring);
}
.review-submit-test-state,
@@ -182,7 +182,7 @@
}
.review-submit-test-state strong.passed {
color: #047857;
color: var(--success-hover);
}
.review-submit-test-state p {
@@ -335,7 +335,7 @@
gap: 8px;
margin-top: 14px;
padding: 10px 12px;
border: 1px solid rgba(14, 165, 233, 0.22);
border: 1px solid rgba(58, 124, 165, 0.22);
border-radius: 12px;
background: linear-gradient(180deg, rgba(240, 249, 255, 0.96), rgba(224, 242, 254, 0.9));
color: #075985;
@@ -417,10 +417,10 @@
min-height: 38px;
margin-bottom: 10px;
padding: 0 12px;
border: 1px solid #e0f2fe;
border: 1px solid #eaf4fa;
border-radius: 10px;
background: #f0f9ff;
color: #0369a1;
color: #255b7d;
font-size: 12px;
font-weight: 700;
}
@@ -451,8 +451,8 @@
}
.reviewer-card {
border-color: rgba(16, 185, 129, 0.24);
background: linear-gradient(180deg, #ffffff, #f8fffc);
border-color: rgba(var(--theme-primary-rgb), 0.24);
background: linear-gradient(180deg, #ffffff, var(--theme-primary-soft));
}
.review-list {
@@ -515,7 +515,7 @@
.version-row.active {
border-radius: 10px;
background: rgba(16, 185, 129, 0.08);
background: var(--theme-primary-soft);
}
.version-main {
@@ -564,8 +564,8 @@
justify-content: center;
padding: 0 7px;
border-radius: 999px;
background: #dcfce7;
color: #059669;
background: var(--success-soft);
color: var(--success-hover);
font-size: 11px;
font-weight: 850;
}
@@ -599,8 +599,8 @@
}
.version-state.success {
background: #dcfce7;
color: #059669;
background: var(--success-soft);
color: var(--success-hover);
}
.version-state.warning {
@@ -814,8 +814,8 @@
.test-state.success,
.tool-state.safe {
background: #dcfce7;
color: #059669;
background: var(--success-soft);
color: var(--success-hover);
}
.test-state.warning,
@@ -908,7 +908,7 @@
width: 16px;
height: 16px;
margin-top: 3px;
accent-color: #0f766e;
accent-color: var(--theme-primary);
}
.risk-rule-create-toggle span {
@@ -963,8 +963,8 @@
.risk-rule-create-form select:focus,
.risk-rule-create-form textarea:focus {
outline: 0;
border-color: rgba(16, 185, 129, 0.5);
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
border-color: rgba(var(--theme-primary-rgb), 0.5);
box-shadow: 0 0 0 3px var(--theme-focus-ring);
}
.risk-rule-create-form input:not([type='checkbox'])::placeholder,
@@ -984,7 +984,7 @@
}
.publish-summary strong {
color: #059669;
color: var(--theme-primary-active);
font-size: 14px;
font-weight: 850;
}
@@ -1031,8 +1031,8 @@
}
.minor-action.success-action {
border-color: rgba(5, 150, 105, 0.26);
color: #059669;
border-color: rgba(var(--success-rgb), 0.26);
color: var(--success-hover);
}
.minor-action.enable-action {
@@ -1041,8 +1041,8 @@
}
.minor-action.enable-action.is-on {
border-color: rgba(5, 150, 105, 0.26);
color: #059669;
border-color: rgba(var(--success-rgb), 0.26);
color: var(--success-hover);
}
.minor-action.enable-action i {
@@ -1167,10 +1167,10 @@
}
.major-action {
border: 1px solid #059669;
background: #059669;
border: 1px solid var(--theme-primary);
background: var(--theme-primary);
color: #fff;
box-shadow: 0 4px 12px rgba(5, 150, 105, .16);
box-shadow: 0 4px 12px var(--theme-primary-shadow);
}
.back-action:hover,
@@ -1216,8 +1216,8 @@
}
.mini-btn.primary {
border-color: #059669;
background: #059669;
border-color: var(--theme-primary);
background: var(--theme-primary);
color: #fff;
}
@@ -1584,8 +1584,8 @@
}
.json-risk-mode-pill.low {
background: #ecfdf5;
color: #059669;
background: var(--success-soft);
color: var(--success-hover);
}
.json-risk-editor-body {
@@ -1760,8 +1760,8 @@
}
.json-risk-meta-badge.test-passed {
background: #ecfdf5;
color: #047857;
background: var(--success-soft);
color: var(--success-hover);
}
.json-risk-meta-badge.test-pending {
@@ -1785,8 +1785,8 @@
}
.meta-status-indicator.is-active .indicator-dot {
background: #10b981;
box-shadow: 0 0 4px rgba(16, 185, 129, 0.4);
background: var(--success);
box-shadow: 0 0 4px rgba(var(--success-rgb), 0.4);
}
.json-risk-editor-toolbar {

98
web/src/assets/styles/views/audit-view.css
View File

@@ -66,7 +66,7 @@
bottom: -13px;
height: 3px;
border-radius: 999px;
background: #10b981;
background: var(--theme-primary);
}
.list-toolbar {
@@ -93,7 +93,7 @@
gap: 8px;
padding: 0 11px;
border: 1px solid #d7e0ea;
border-radius: 8px;
border-radius: 4px;
background: #fff;
color: #64748b;
}
@@ -118,8 +118,8 @@
}
.search-filter:focus-within {
border-color: rgba(16, 185, 129, 0.48);
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
border-color: rgba(var(--theme-primary-rgb), 0.48);
box-shadow: 0 0 0 3px var(--theme-focus-ring);
}
.picker-trigger,
@@ -127,7 +127,7 @@
.create-btn,
.row-action {
min-height: 38px;
border-radius: 8px;
border-radius: 4px;
font-size: 13px;
font-weight: 760;
}
@@ -166,9 +166,9 @@
.picker-trigger:hover,
.picker-filter.open .picker-trigger {
border-color: rgba(16, 185, 129, 0.34);
background: #f6fffb;
color: #0f9f78;
border-color: rgba(var(--theme-primary-rgb), 0.34);
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
}
.picker-popover {
@@ -181,7 +181,7 @@
gap: 14px;
padding: 16px;
border: 1px solid #d7e0ea;
border-radius: 12px;
border-radius: 4px;
background: #fff;
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}
@@ -204,7 +204,7 @@
display: grid;
place-items: center;
border: 0;
border-radius: 8px;
border-radius: 4px;
background: transparent;
color: #64748b;
}
@@ -227,7 +227,7 @@
align-items: center;
padding: 0 12px;
border: 1px solid #d7e0ea;
border-radius: 8px;
border-radius: 4px;
background: #fff;
color: #334155;
font-size: 13px;
@@ -237,9 +237,9 @@
.picker-option:hover,
.picker-option.active {
border-color: rgba(16, 185, 129, 0.32);
background: rgba(16, 185, 129, 0.08);
color: #059669;
border-color: rgba(var(--theme-primary-rgb), 0.32);
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
}
.toolbar-actions {
@@ -259,8 +259,8 @@
}
.ghost-filter-btn:hover {
border-color: rgba(16, 185, 129, 0.28);
color: #059669;
border-color: rgba(var(--theme-primary-rgb), 0.28);
color: var(--theme-primary-active);
}
.create-btn {
@@ -269,9 +269,9 @@
gap: 8px;
padding: 0 14px;
border: 0;
background: #059669;
background: var(--theme-primary);
color: #fff;
box-shadow: 0 8px 18px rgba(5, 150, 105, 0.18);
box-shadow: 0 8px 18px var(--theme-primary-shadow);
}
.create-btn:disabled {
@@ -307,8 +307,8 @@
align-items: center;
padding: 0 10px;
border-radius: 999px;
background: rgba(16, 185, 129, 0.1);
color: #047857;
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
font-size: 12px;
font-weight: 800;
}
@@ -376,7 +376,7 @@
}
.table-state.empty i {
color: #0ea5e9;
color: #3a7ca5;
}
.table-state p,
@@ -402,10 +402,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;
}
@@ -487,7 +487,7 @@ tbody tr.is-disabled:hover {
font-weight: 900;
}
.skill-avatar.emerald { background: linear-gradient(135deg, #10b981, #059669); }
.skill-avatar.primary { background: var(--theme-gradient-primary); }
.skill-avatar.rose { background: linear-gradient(135deg, #f43f5e, #e11d48); }
.skill-avatar.violet { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.skill-avatar.blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }
@@ -529,8 +529,8 @@ tbody tr.is-disabled:hover {
}
.status-pill.success {
background: #dcfce7;
color: #059669;
background: var(--success-soft);
color: var(--success-hover);
}
.status-pill.warning {
@@ -544,8 +544,8 @@ tbody tr.is-disabled:hover {
}
.status-pill.info {
background: #e0f2fe;
color: #0284c7;
background: #eaf4fa;
color: #2f6d95;
}
.status-pill.danger {
@@ -560,13 +560,13 @@ tbody tr.is-disabled:hover {
.row-action {
padding: 0 12px;
border: 1px solid rgba(16, 185, 129, 0.32);
border: 1px solid rgba(var(--theme-primary-rgb), 0.32);
background: #fff;
color: #059669;
color: var(--theme-primary-active);
}
.row-action:hover {
background: rgba(16, 185, 129, 0.08);
background: var(--theme-primary-soft);
}
.detail-scroll {
@@ -620,7 +620,7 @@ tbody tr.is-disabled:hover {
font-weight: 800;
}
.skill-badge.emerald { background: linear-gradient(135deg, #10b981, #059669); }
.skill-badge.primary { background: var(--theme-gradient-primary); }
.skill-badge.rose { background: linear-gradient(135deg, #f43f5e, #e11d48); }
.skill-badge.violet { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.skill-badge.blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }
@@ -658,9 +658,9 @@ tbody tr.is-disabled:hover {
gap: 6px;
margin-top: 12px;
padding: 12px 14px;
border: 1px solid rgba(16, 185, 129, 0.16);
border: 1px solid rgba(var(--theme-primary-rgb), 0.16);
border-radius: 12px;
background: linear-gradient(180deg, #f8fffc, #ffffff);
background: linear-gradient(180deg, var(--theme-primary-soft), #ffffff);
}
.review-note-block strong {
@@ -695,7 +695,7 @@ tbody tr.is-disabled:hover {
}
.hero-review-meta i {
color: #059669;
color: var(--theme-primary);
font-size: 15px;
}
@@ -1041,12 +1041,12 @@ tbody tr.is-disabled:hover {
}
.version-pair-card.published {
background: rgba(16, 185, 129, 0.1);
background: var(--success-soft);
}
.version-pair-card.published b {
background: #dcfce7;
color: #059669;
background: var(--success-line);
color: var(--success-hover);
}
.version-pair-card.working {
@@ -1115,8 +1115,8 @@ tbody tr.is-disabled:hover {
}
.change-center-item.active {
border-color: rgba(16, 185, 129, 0.35);
background: rgba(16, 185, 129, 0.05);
border-color: rgba(var(--theme-primary-rgb), 0.35);
background: var(--theme-primary-soft);
}
.change-center-item > button {
@@ -1176,13 +1176,13 @@ tbody tr.is-disabled:hover {
}
.change-record-item:hover {
border-color: rgba(16, 185, 129, 0.35);
border-color: rgba(var(--theme-primary-rgb), 0.35);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
transform: translateY(-1px);
}
.change-record-item:focus-visible {
outline: 3px solid rgba(16, 185, 129, 0.18);
outline: 3px solid var(--theme-focus-ring);
outline-offset: 1px;
}
@@ -1387,8 +1387,8 @@ tbody tr.is-disabled:hover {
}
.rule-timeline-item > i.success {
background: #dcfce7;
color: #059669;
background: var(--success-soft);
color: var(--success-hover);
}
.rule-timeline-item > i.warning {
@@ -1459,15 +1459,6 @@ tbody tr.is-disabled:hover {
font-weight: 850;
}
.compare-toolbar select {
width: 100%;
min-height: 40px;
padding: 0 12px;
border: 1px solid #cbd5e1;
border-radius: 12px;
background: #fff;
}
.compare-toolbar i {
margin-bottom: 10px;
color: #94a3b8;
@@ -1512,4 +1503,3 @@ tbody tr.is-disabled:hover {
display: grid;
gap: 10px;
}

12
web/src/assets/styles/views/backend-unavailable-view.css
View File

@@ -4,7 +4,7 @@
place-items: center;
padding: 32px;
background:
radial-gradient(circle at top, rgba(16, 185, 129, 0.16), transparent 32%),
radial-gradient(circle at top, rgba(var(--theme-primary-rgb), 0.16), transparent 32%),
linear-gradient(180deg, #08130f 0%, #0f1f18 100%);
}
@@ -27,8 +27,8 @@
place-items: center;
margin: 0 auto;
border-radius: 20px;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.28));
color: #4ade80;
background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.2), rgba(var(--theme-primary-rgb), 0.28));
color: var(--theme-primary-soft-strong);
font-size: 32px;
}
@@ -56,13 +56,13 @@
justify-content: center;
gap: 8px;
padding: 0 18px;
border: 1px solid rgba(16, 185, 129, 0.2);
border: 1px solid rgba(var(--theme-primary-rgb), 0.2);
border-radius: 10px;
background: #059669;
background: var(--theme-primary);
color: #fff;
font-size: 14px;
font-weight: 760;
box-shadow: 0 16px 30px rgba(5, 150, 105, 0.2);
box-shadow: 0 16px 30px var(--theme-primary-shadow);
}
.retry-btn:disabled {

50
web/src/assets/styles/views/budget-center-dialog.css
View File

@@ -111,13 +111,11 @@
.budget-edit-form-grid label.required > span::after {
content: "*";
margin-left: 3px;
color: #ef4444;
color: var(--danger);
}
.budget-edit-form-grid select,
.budget-edit-textarea textarea,
.budget-edit-table input,
.budget-edit-table select {
.budget-edit-table input {
width: 100%;
border: 1px solid #dbe4ee;
border-radius: 6px;
@@ -128,17 +126,15 @@
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.budget-edit-form-grid select {
height: 38px;
padding: 0 34px 0 12px;
.budget-edit-form-grid .enterprise-select,
.budget-edit-table .enterprise-select {
width: 100%;
}
.budget-edit-form-grid select:focus,
.budget-edit-textarea textarea:focus,
.budget-edit-table input:focus,
.budget-edit-table select:focus {
border-color: #10b981;
box-shadow: 0 0 0 3px rgba(16, 185, 129, .12);
.budget-edit-table input:focus {
border-color: var(--theme-primary);
box-shadow: 0 0 0 3px var(--theme-focus-ring);
}
.budget-edit-textarea {
@@ -207,7 +203,7 @@
}
.budget-edit-table th i {
color: #ef4444;
color: var(--danger);
font-style: normal;
}
@@ -217,8 +213,7 @@
.budget-edit-table th:nth-child(4) { width: 120px; }
.budget-edit-table th:nth-child(6) { width: 68px; }
.budget-edit-table input,
.budget-edit-table select {
.budget-edit-table input {
height: 34px;
padding: 0 10px;
text-align: center;
@@ -242,8 +237,8 @@
}
.budget-row-delete:hover {
background: #fef2f2;
color: #dc2626;
background: var(--danger-soft);
color: var(--danger-hover);
}
.budget-add-row-btn {
@@ -253,10 +248,10 @@
display: inline-flex;
align-items: center;
gap: 5px;
border: 1px solid rgba(16, 185, 129, .42);
border: 1px solid rgba(var(--theme-primary-rgb), .42);
border-radius: 6px;
background: #fff;
color: #059669;
color: var(--theme-primary-active);
font-size: 13px;
font-weight: 800;
cursor: pointer;
@@ -284,7 +279,7 @@
}
.budget-edit-total strong {
color: #059669;
color: var(--theme-primary-active);
font-size: 16px;
font-weight: 800;
}
@@ -315,16 +310,16 @@
}
.budget-edit-draft {
border: 1px solid #10b981;
border: 1px solid var(--theme-primary);
background: #fff;
color: #059669;
color: var(--theme-primary-active);
}
.budget-edit-publish {
border: 0;
background: linear-gradient(135deg, #10b981, #059669);
background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-active));
color: #fff;
box-shadow: 0 10px 24px rgba(5, 150, 105, .20);
box-shadow: 0 10px 24px var(--theme-primary-shadow);
}
.budget-dialog-fade-enter-active,
@@ -421,10 +416,6 @@
font-size: 12px;
}
.budget-edit-form-grid select {
height: 34px;
}
.budget-edit-textarea {
margin-top: 8px;
}
@@ -441,8 +432,7 @@
padding: 6px 8px;
}
.budget-edit-table input,
.budget-edit-table select {
.budget-edit-table input {
height: 30px;
padding: 0 8px;
}

113
web/src/assets/styles/views/budget-center-view.css
View File

@@ -14,7 +14,7 @@
}
.budget-summary-card {
--accent: #10b981;
--accent: var(--theme-primary);
position: relative;
min-height: 112px;
padding: 12px 14px 10px;
@@ -35,16 +35,16 @@
transform: translateY(-1px);
}
.budget-summary-card.green {
--accent: #10b981;
.budget-summary-card.primary {
--accent: var(--theme-primary);
}
.budget-summary-card.blue {
--accent: #3b82f6;
.budget-summary-card.info {
--accent: var(--theme-secondary);
}
.budget-summary-card.orange {
--accent: #f59e0b;
.budget-summary-card.warning {
--accent: var(--warning);
}
.budget-summary-head {
@@ -134,13 +134,13 @@
}
.comparison-pill.up {
background: rgba(22, 163, 74, .08);
color: #16a34a;
background: var(--success-soft);
color: var(--success);
}
.comparison-pill.down {
background: rgba(239, 68, 68, .08);
color: #dc2626;
background: var(--danger-soft);
color: var(--danger-hover);
}
.budget-filter-bar {
@@ -173,35 +173,15 @@
white-space: nowrap;
}
.budget-filter-bar select {
min-height: 38px;
.budget-filter-bar .enterprise-select {
min-width: 128px;
border: 1px solid #d7e0ea;
border-radius: 8px;
background: #fff;
color: #334155;
padding: 0 34px 0 14px;
font-size: 14px;
font-weight: 750;
transition: border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}
.budget-filter-bar select:hover {
border-color: rgba(16, 185, 129, .32);
color: #0f9f78;
}
.budget-filter-bar select:focus {
border-color: #10b981;
box-shadow: 0 0 0 3px rgba(16, 185, 129, .14);
outline: none;
}
.budget-primary-btn {
min-height: 40px;
border: 0;
border-radius: 10px;
background: linear-gradient(135deg, #10b981, #059669);
border-radius: 8px;
background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-active));
color: #fff;
padding: 0 18px;
display: inline-flex;
@@ -212,13 +192,13 @@
font-weight: 800;
white-space: nowrap;
cursor: pointer;
box-shadow: 0 10px 24px rgba(5, 150, 105, .2);
box-shadow: 0 10px 24px var(--theme-primary-shadow);
transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}
.budget-primary-btn:hover {
transform: translateY(-1px);
box-shadow: 0 14px 28px rgba(5, 150, 105, .24);
box-shadow: 0 14px 28px rgba(var(--theme-primary-rgb), .24);
filter: saturate(1.02);
}
@@ -241,8 +221,8 @@
}
.budget-ghost-btn:hover {
border-color: rgba(16, 185, 129, .32);
color: #0f9f78;
border-color: rgba(var(--theme-primary-rgb), .32);
color: var(--theme-primary-active);
box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
}
@@ -330,8 +310,8 @@
}
.department-list button.active {
background: #e9f7f1;
color: #07965f;
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
}
.budget-table-wrap {
@@ -392,24 +372,24 @@
}
.budget-rate em.ok {
background: #13a66b;
background: var(--success);
}
.budget-rate em.warn {
background: #f2a51a;
background: var(--warning);
}
.budget-rate em.danger {
background: #ef4444;
background: var(--danger);
}
.budget-warning-red {
color: #e24b4b !important;
color: var(--danger) !important;
font-weight: 800;
}
.budget-warning-yellow {
color: #e3a008 !important;
color: var(--warning-active) !important;
font-weight: 800;
}
@@ -423,7 +403,7 @@
.budget-row-actions button {
border: 0;
background: transparent;
color: #1c7ed6;
color: var(--theme-primary-active);
font-size: 14px;
font-weight: 800;
}
@@ -467,14 +447,14 @@
.budget-pager button:hover:not(.active):not(:disabled) {
background: #fff;
color: #059669;
color: var(--theme-primary-active);
box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
}
.budget-pager button.active {
background: #059669;
background: var(--theme-primary-active);
color: #fff;
box-shadow: 0 8px 16px rgba(5, 150, 105, .20);
box-shadow: 0 8px 16px var(--theme-primary-shadow);
}
.budget-pager button:disabled {
@@ -502,19 +482,8 @@
transition: border-color 160ms ease, color 160ms ease;
}
.budget-page-size:hover {
border-color: rgba(16, 185, 129, .32);
color: #0f9f78;
}
.budget-page-size select {
appearance: none;
border: 0;
background: transparent;
color: inherit;
font: inherit;
outline: none;
cursor: pointer;
.budget-page-size-select {
width: 112px;
}
.budget-bottom-grid {
@@ -526,7 +495,7 @@
.budget-card-head button {
border: 0;
background: transparent;
color: #1c7ed6;
color: var(--theme-primary-active);
font-size: 14px;
font-weight: 800;
}
@@ -549,11 +518,11 @@
width: 10px;
height: 10px;
border-radius: 3px;
background: #13a66b;
background: var(--theme-primary);
}
.legend-line.occupied {
background: #f59e0b;
background: var(--warning);
}
.legend-line.available {
@@ -587,11 +556,11 @@
.budget-alert-empty-icon {
width: 44px;
height: 44px;
border-radius: 12px;
border-radius: 8px;
display: grid;
place-items: center;
background: #e9f7f1;
color: #059669;
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
font-size: 24px;
}
@@ -629,15 +598,15 @@
}
.budget-alert-row i.danger {
background: #ef4444;
background: var(--danger);
}
.budget-alert-row i.warn {
background: #f59e0b;
background: var(--warning);
}
.budget-alert-row i.ok {
background: #13a66b;
background: var(--success);
}
.budget-alert-row strong {
@@ -718,7 +687,7 @@
}
.budget-filter-bar label,
.budget-filter-bar select,
.budget-filter-bar .enterprise-select,
.budget-filter-set,
.budget-action-set,
.budget-primary-btn,

44
web/src/assets/styles/views/chat-view.css
View File

@@ -7,14 +7,14 @@
.conversation-list, .info-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.side-panel header, .info-panel header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.side-panel h3, .info-panel h3 { display: inline-flex; align-items: center; gap: 8px; color: #0f172a; font-size: 17px; font-weight: 850; }
.outline-action, .info-panel header button { height: 34px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #d8e3ed; border-radius: 8px; background: #fff; color: #0f9f78; font-size: 13px; font-weight: 750; white-space: nowrap; }
.outline-action, .info-panel header button { height: 34px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #d8e3ed; border-radius: 8px; background: #fff; color: var(--theme-primary-active); font-size: 13px; font-weight: 750; white-space: nowrap; }
.outline-action { padding: 0 12px; }
.info-panel header button { border: 0; color: #64748b; }
.session-scroll, .top-question-list, .similar-scroll { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.session-scroll { display: grid; align-content: start; gap: 4px; padding-right: 4px; }
.session-row { width: 100%; min-height: 48px; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: #334155; text-align: left; }
.session-row.active, .session-row:hover { background: #eaf8f1; color: #0f8f68; }
.session-row span { color: #10b981; }
.session-row.active, .session-row:hover { background: var(--theme-primary-light-9); color: var(--theme-primary-active); }
.session-row span { color: var(--theme-primary); }
.session-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; }
.session-row time { color: #94a3b8; font-size: 12px; }
.chat-panel { height: 100%; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
@@ -22,20 +22,20 @@
.talk-row { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: start; }
.avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 999px; color: #fff; font-size: 15px; font-weight: 850; }
.user-avatar { background: linear-gradient(135deg, #26364d, #61748a); }
.assistant-avatar { background: #10b981; font-size: 20px; }
.assistant-avatar { background: var(--theme-primary); font-size: 20px; }
.talk-content header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.talk-content header strong { color: #334155; font-size: 14px; font-weight: 800; }
.talk-content header time { color: #94a3b8; font-size: 12px; }
.user-question { display: inline-block; margin: 0; padding: 9px 16px; border-radius: 8px; background: #e8f5ef; color: #334155; font-size: 14px; line-height: 1.5; }
.user-question { display: inline-block; margin: 0; padding: 9px 16px; border-radius: 8px; background: var(--theme-primary-light-9); color: #334155; font-size: 14px; line-height: 1.5; }
.answer-card, .agent-answer-markdown { max-width: 760px; border: 1px solid #dce5ef; border-radius: 10px; background: #fff; color: #334155; box-shadow: 0 8px 24px rgba(15, 23, 42, .04); }
.answer-card { display: grid; gap: 10px; padding: 13px 18px; }
.answer-card.compact { gap: 10px; }
.answer-card h4 { margin: 0 0 5px; color: #10a272; font-size: 13px; font-weight: 850; }
.answer-card h4 { margin: 0 0 5px; color: var(--theme-primary-active); font-size: 13px; font-weight: 850; }
.answer-card p, .answer-card ul { margin: 0; font-size: 14px; line-height: 1.58; }
.answer-card ul { padding-left: 18px; }
.answer-card footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; color: #64748b; font-size: 12px; }
.answer-card footer button { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: #64748b; }
.answer-card footer button:hover { background: #f1f5f9; color: #0f9f78; }
.answer-card footer button:hover { background: #f1f5f9; color: var(--theme-primary-active); }
.agent-answer-content { max-width: 760px; display: grid; gap: 10px; }
.agent-answer-markdown { padding: 12px 16px; overflow-x: auto; font-size: 14px; }
.agent-answer-markdown :deep(h1),
@@ -59,20 +59,20 @@
.agent-answer-markdown :deep(li) { line-height: 1.65; }
.agent-answer-markdown :deep(ul),
.agent-answer-markdown :deep(ol) { padding-left: 22px; }
.agent-answer-markdown :deep(blockquote) { padding: 10px 12px; border-left: 4px solid #86efac; border-radius: 0 10px 10px 0; background: #f0fdf4; color: #475569; }
.agent-answer-markdown :deep(blockquote) { padding: 10px 12px; border-left: 4px solid var(--theme-primary-soft-strong); border-radius: 0 10px 10px 0; background: var(--theme-primary-light-9); color: #475569; }
.agent-answer-markdown :deep(strong) { color: #0f172a; }
.agent-answer-markdown :deep(code) { padding: 2px 6px; border-radius: 6px; background: #e2e8f0; font-size: 12px; }
.agent-answer-markdown :deep(pre) { overflow-x: auto; padding: 12px; border-radius: 10px; background: #0f172a; color: #e2e8f0; }
.agent-answer-markdown :deep(pre code) { padding: 0; background: transparent; color: inherit; }
.agent-answer-markdown :deep(a) { color: #059669; text-decoration: underline; }
.agent-answer-markdown :deep(a) { color: var(--theme-primary-active); text-decoration: underline; }
.agent-answer-markdown :deep(table) { width: auto; max-width: 100%; border: 1px solid #dce5ef; border-radius: 10px; border-collapse: collapse; background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, .04); font-size: 13px; }
.agent-answer-markdown :deep(th),
.agent-answer-markdown :deep(td) { padding: 10px 12px; border-bottom: 1px solid #e2e8f0; text-align: left; white-space: nowrap; }
.agent-answer-markdown :deep(th) { background: #eef7f2; color: #0f172a; font-weight: 800; }
.agent-answer-markdown :deep(th) { background: var(--theme-primary-light-9); color: #0f172a; font-weight: 800; }
.agent-answer-markdown :deep(td) { color: #334155; font-weight: 650; }
.agent-answer-markdown :deep(tbody tr:last-child td) { border-bottom: 0; }
.agent-meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; max-width: 760px; }
.agent-meta-chip { min-height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; background: #eef7f2; color: #0f766e; font-size: 12px; font-weight: 760; }
.agent-meta-chip { min-height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; background: var(--theme-primary-light-9); color: var(--theme-primary-active); font-size: 12px; font-weight: 760; }
.agent-detail-block { max-width: 760px; margin-top: 10px; display: grid; gap: 8px; }
.agent-detail-block > strong { color: #0f172a; font-size: 12px; font-weight: 820; }
.agent-citation-disclosure { overflow: hidden; border: 1px solid #dce5ef; border-radius: 10px; background: #fff; }
@@ -103,22 +103,22 @@
.prompt-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; overflow-x: auto; }
.prompt-toolbar span { flex: 0 0 auto; color: #64748b; font-size: 13px; font-weight: 800; }
.prompt-toolbar button { height: 34px; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; border: 1px solid #dce5ef; border-radius: 8px; background: #fff; color: #334155; font-size: 13px; font-weight: 750; }
.prompt-toolbar button i { color: #10b981; }
.prompt-toolbar button i { color: var(--theme-primary); }
.prompt-toolbar .icon-refresh { width: 34px; padding: 0; justify-content: center; }
.composer { min-height: 64px; display: grid; grid-template-columns: minmax(0, 1fr) 48px; align-items: center; gap: 10px; padding: 8px; border: 1px solid #cbd8e5; border-radius: 8px; background: linear-gradient(180deg, #fff, #fbfdff); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; }
.composer:focus-within { border-color: rgba(16, 185, 129, .58); background: #fff; box-shadow: 0 0 0 3px rgba(16, 185, 129, .11), 0 10px 24px rgba(15, 23, 42, .06); }
.composer:focus-within { border-color: rgba(var(--theme-primary-rgb), .58); background: #fff; box-shadow: 0 0 0 3px var(--theme-focus-ring), 0 10px 24px rgba(15, 23, 42, .06); }
.composer textarea { height: 48px; min-height: 48px; resize: none; border: 0; padding: 5px 8px; background: transparent; color: #0f172a; font-size: 14px; line-height: 1.55; }
.composer textarea::placeholder { color: #94a3b8; }
.composer textarea:focus { outline: none; }
.send-button { width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 8px; background: #10b981; color: #fff; font-size: 20px; box-shadow: 0 8px 18px rgba(16, 185, 129, .20); transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.send-button:hover { background: #0ea672; box-shadow: 0 10px 22px rgba(16, 185, 129, .24); }
.send-button { width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 8px; background: var(--theme-primary); color: #fff; font-size: 20px; box-shadow: 0 8px 18px var(--theme-primary-shadow); transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.send-button:hover { background: var(--theme-primary-hover); box-shadow: 0 10px 22px rgba(var(--theme-primary-rgb), .24); }
.send-button:active { transform: scale(.96); }
.send-button:disabled { background: #94a3b8; box-shadow: none; transform: none; }
.hot-top-panel h3 i { color: #ef4444; }
.top-question-list { display: grid; align-content: start; gap: 8px; padding-right: 4px; }
.top-question-list button { min-height: 42px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 14px; align-items: center; gap: 10px; padding: 0 8px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; color: #334155; text-align: left; }
.top-question-list button:hover { border-color: rgba(16, 185, 129, .32); color: #0f9f78; }
.top-question-list strong { color: #10b981; font-size: 13px; font-weight: 850; font-variant-numeric: tabular-nums; }
.top-question-list button:hover { border-color: rgba(var(--theme-primary-rgb), .32); color: var(--theme-primary-active); }
.top-question-list strong { color: var(--theme-primary); font-size: 13px; font-weight: 850; font-variant-numeric: tabular-nums; }
.top-question-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 750; }
.top-question-list i { color: #94a3b8; }
.similar-panel { display: grid; }
@@ -127,19 +127,19 @@
.similar-row:first-child { border-top: 0; }
.similar-row span { min-width: 0; display: inline-flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; }
.similar-row span i { color: #64748b; font-size: 17px; }
.similar-row strong { height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: #e8f8f0; color: #15945f; font-size: 13px; font-weight: 850; }
.similar-row strong { height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--theme-primary-light-9); color: var(--theme-primary-active); font-size: 13px; font-weight: 850; }
.similar-row > i { color: #94a3b8; }
.semantic-debug-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.semantic-debug-body { min-height: 0; display: grid; grid-template-rows: auto auto auto auto minmax(0, 1fr); gap: 12px; }
.semantic-debug-input { display: grid; gap: 8px; }
.semantic-debug-input span { color: #334155; font-size: 13px; font-weight: 800; }
.semantic-debug-input textarea { min-height: 98px; resize: vertical; padding: 12px 13px; border: 1px solid #d7e0ea; border-radius: 10px; background: linear-gradient(180deg, #ffffff, #f7fbff); color: #0f172a; font-size: 13px; line-height: 1.6; }
.semantic-debug-input textarea:focus { outline: none; border-color: rgba(16, 185, 129, .48); box-shadow: 0 0 0 3px rgba(16, 185, 129, .11); }
.semantic-debug-input textarea:focus { outline: none; border-color: rgba(var(--theme-primary-rgb), .48); box-shadow: 0 0 0 3px var(--theme-focus-ring); }
.semantic-debug-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.semantic-chip { min-height: 30px; padding: 0 10px; border: 1px solid #d8e3ed; border-radius: 999px; background: #f8fbff; color: #334155; font-size: 12px; font-weight: 760; text-align: left; }
.semantic-chip:hover { border-color: rgba(16, 185, 129, .32); background: #eefbf5; color: #0f8f68; }
.semantic-chip:hover { border-color: rgba(var(--theme-primary-rgb), .32); background: var(--theme-primary-light-9); color: var(--theme-primary-active); }
.semantic-debug-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.semantic-parse-btn { min-height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border: 0; border-radius: 9px; background: linear-gradient(135deg, #0f766e, #10b981); color: #fff; font-size: 13px; font-weight: 800; box-shadow: 0 10px 20px rgba(16, 185, 129, .18); }
.semantic-parse-btn { min-height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border: 0; border-radius: 9px; background: var(--theme-gradient-primary); color: #fff; font-size: 13px; font-weight: 800; box-shadow: 0 10px 20px var(--theme-primary-shadow); }
.semantic-parse-btn:disabled { background: #cbd5e1; box-shadow: none; }
.semantic-inline-meta { color: #64748b; font-size: 12px; }
.semantic-debug-error { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fff1f2; color: #be123c; font-size: 12px; line-height: 1.55; }
@@ -150,7 +150,7 @@
.semantic-result-card strong { color: #0f172a; font-size: 14px; font-weight: 850; word-break: break-word; }
.semantic-field-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.semantic-field-list section { min-height: 72px; padding: 12px; border-radius: 10px; background: #f8fafc; }
.semantic-field-list h4, .semantic-json-block h4 { margin: 0 0 6px; color: #0f766e; font-size: 12px; font-weight: 850; letter-spacing: .02em; }
.semantic-field-list h4, .semantic-json-block h4 { margin: 0 0 6px; color: var(--theme-primary-active); font-size: 12px; font-weight: 850; letter-spacing: .02em; }
.semantic-field-list p { margin: 0; color: #334155; font-size: 12px; line-height: 1.6; word-break: break-word; }
.semantic-json-block { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.semantic-json-block pre { min-height: 0; margin: 0; padding: 12px; overflow: auto; border-radius: 10px; background: #0f172a; color: #d7f7ea; font-size: 11px; line-height: 1.55; }

117
web/src/assets/styles/views/documents-center-view.css
View File

@@ -36,7 +36,7 @@
}
.status-tabs button.active {
color: #059669;
color: var(--theme-primary-active);
}
.status-tabs button.active::after {
@@ -47,7 +47,7 @@
bottom: -1px;
height: 3px;
border-radius: 999px 999px 0 0;
background: #10b981;
background: var(--theme-primary);
}
.scope-tab-badge {
@@ -101,7 +101,7 @@
height: 38px;
padding: 0 12px 0 36px;
border: 1px solid #d7e0ea;
border-radius: 8px;
border-radius: 4px;
background: #fff;
color: #0f172a;
font-size: 13px;
@@ -113,13 +113,12 @@
}
.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 rgba(58, 124, 165, 0.14);
outline: none;
}
.filter-btn,
.page-size {
.filter-btn {
min-height: 38px;
display: inline-flex;
align-items: center;
@@ -127,7 +126,7 @@
gap: 9px;
padding: 0 14px;
border: 1px solid #d7e0ea;
border-radius: 8px;
border-radius: 4px;
background: #fff;
color: #334155;
font-size: 14px;
@@ -140,10 +139,9 @@
justify-content: space-between;
}
.filter-btn:hover,
.page-size:hover {
border-color: rgba(16, 185, 129, .32);
color: #0f9f78;
.filter-btn:hover {
border-color: rgba(58, 124, 165, .32);
color: var(--theme-primary-active);
}
.document-filter,
@@ -152,12 +150,11 @@
}
.document-filter-menu,
.date-range-popover,
.page-size-dropdown {
.date-range-popover {
position: absolute;
z-index: 40;
border: 1px solid #d7e0ea;
border-radius: 10px;
border-radius: 4px;
background: #fff;
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
overflow: hidden;
@@ -172,14 +169,13 @@
overflow-y: auto;
}
.document-filter-menu button,
.page-size-dropdown button {
.document-filter-menu button {
display: block;
width: 100%;
min-height: 36px;
padding: 0 12px;
border: 0;
border-radius: 8px;
border-radius: 4px;
background: transparent;
color: #334155;
font-size: 13px;
@@ -190,8 +186,8 @@
.document-filter-menu button:hover,
.document-filter-menu button.active {
background: rgba(16, 185, 129, 0.1);
color: #047857;
background: rgba(58, 124, 165, 0.1);
color: var(--theme-primary-active);
}
.date-range-trigger {
@@ -233,7 +229,7 @@
display: grid;
place-items: center;
border: 0;
border-radius: 8px;
border-radius: 4px;
background: transparent;
color: #64748b;
}
@@ -260,7 +256,7 @@
height: 38px;
padding: 0 9px;
border: 1px solid #d7e0ea;
border-radius: 8px;
border-radius: 4px;
color: #0f172a;
font-size: 13px;
}
@@ -269,7 +265,7 @@
.apply-btn {
height: 36px;
padding: 0 14px;
border-radius: 8px;
border-radius: 4px;
font-size: 13px;
font-weight: 750;
}
@@ -282,7 +278,7 @@
.apply-btn {
border: 0;
background: #10b981;
background: var(--theme-primary);
color: #fff;
}
@@ -300,12 +296,12 @@
padding: 0 18px;
border: 0;
border-radius: 10px;
background: linear-gradient(135deg, #10b981, #059669);
background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-active));
color: #fff;
font-size: 14px;
font-weight: 800;
white-space: nowrap;
box-shadow: 0 10px 24px rgba(5, 150, 105, 0.2);
box-shadow: 0 10px 24px var(--theme-primary-shadow);
transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}
@@ -318,13 +314,13 @@
.create-request-btn:hover {
transform: translateY(-1px);
box-shadow: 0 14px 28px rgba(5, 150, 105, 0.24);
box-shadow: 0 14px 28px var(--theme-primary-shadow);
filter: saturate(1.02);
}
.create-request-btn.secondary:hover {
border-color: rgba(16, 185, 129, .32);
color: #047857;
border-color: rgba(58, 124, 165, .32);
color: var(--theme-primary-active);
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}
@@ -345,7 +341,7 @@
}
.status-filter-trigger > .mdi:first-child {
color: #10b981;
color: var(--theme-primary);
}
.status-filter-menu {
@@ -388,7 +384,7 @@
.table-state .mdi {
font-size: 28px;
color: #10b981;
color: var(--theme-primary);
}
.table-state strong {
@@ -469,7 +465,7 @@ tbody tr {
}
tbody tr:hover {
background: linear-gradient(90deg, rgba(16, 185, 129, .08), rgba(16, 185, 129, .03));
background: linear-gradient(90deg, rgba(58, 124, 165, .08), rgba(58, 124, 165, .03));
}
tbody tr:last-child td {
@@ -477,7 +473,7 @@ tbody tr:last-child td {
}
.doc-id {
color: #059669;
color: var(--theme-primary-active);
font-weight: 800;
}
@@ -526,8 +522,8 @@ tbody tr:last-child td {
}
.doc-kind-tag.reimbursement {
background: #ecfdf5;
color: #059669;
background: var(--theme-primary-light-9);
color: var(--theme-primary-active);
}
.doc-kind-tag.application {
@@ -546,8 +542,8 @@ tbody tr:last-child td {
.type-tag.travel,
.type-tag.hotel,
.type-tag.transport {
background: #ecfdf5;
color: #047857;
background: var(--theme-primary-light-9);
color: var(--theme-primary-active);
}
.type-tag.entertainment,
@@ -589,9 +585,9 @@ tbody tr:last-child td {
.status-tag.success,
.status-tag.archived {
border-color: #bbf7d0;
background: #ecfdf5;
color: #059669;
border-color: var(--success-line);
background: var(--success-soft);
color: var(--success-active);
}
.status-tag.warning,
@@ -650,14 +646,14 @@ tbody tr:last-child td {
.pager button:hover:not(.active) {
background: #fff;
color: #059669;
color: var(--theme-primary-active);
box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
}
.pager button.active {
background: #059669;
background: var(--theme-primary-active);
color: #fff;
box-shadow: 0 8px 16px rgba(5, 150, 105, .20);
box-shadow: 0 8px 16px var(--theme-primary-shadow);
}
.pager button:disabled {
@@ -665,40 +661,11 @@ tbody tr:last-child td {
cursor: not-allowed;
}
.page-size-wrap {
position: relative;
.page-size-select {
width: 118px;
justify-self: end;
}
.page-size {
min-width: 112px;
border-radius: 10px;
background: #fff;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.page-size-dropdown {
right: 0;
bottom: calc(100% + 6px);
display: grid;
}
.page-size-dropdown button {
border-radius: 0;
text-align: center;
padding: 0 20px;
}
.page-size-dropdown button:hover {
background: #f0fdf4;
color: #059669;
}
.page-size-dropdown button.active {
background: #059669;
color: #fff;
}
@media (max-width: 1200px) {
.document-toolbar,
.list-foot {
@@ -730,7 +697,7 @@ tbody tr:last-child td {
.document-status-filter,
.list-search,
.filter-btn,
.page-size {
.page-size-select {
width: 100%;
}

179
web/src/assets/styles/views/employee-management-view.css
View File

@@ -55,7 +55,7 @@
}
.status-tabs button.active {
color: #059669;
color: var(--theme-primary-active);
}
.status-tabs button.active::after {
@@ -66,7 +66,7 @@
bottom: -1px;
height: 3px;
border-radius: 999px 999px 0 0;
background: #10b981;
background: var(--theme-primary);
}
.status-tabs button small {
@@ -84,8 +84,8 @@
}
.status-tabs button.active small {
background: rgba(16, 185, 129, 0.12);
color: #059669;
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
}
.list-toolbar {
@@ -124,7 +124,7 @@
height: 38px;
padding: 0 12px 0 36px;
border: 1px solid #d7e0ea;
border-radius: 8px;
border-radius: 4px;
background: #fff;
color: #0f172a;
font-size: 13px;
@@ -136,8 +136,8 @@
.list-search input:focus {
outline: none;
border-color: rgba(16, 185, 129, 0.6);
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
border-color: rgba(var(--theme-primary-rgb), 0.6);
box-shadow: 0 0 0 3px var(--theme-focus-ring);
}
.picker-trigger,
@@ -147,7 +147,7 @@
.create-btn,
.row-action {
min-height: 38px;
border-radius: 8px;
border-radius: 4px;
font-size: 14px;
font-weight: 750;
}
@@ -164,7 +164,7 @@
gap: 9px;
padding: 0 34px 0 12px;
border: 1px solid #d7e0ea;
border-radius: 8px;
border-radius: 4px;
background: #fff;
color: #334155;
white-space: nowrap;
@@ -187,9 +187,9 @@
.picker-trigger:hover,
.picker-filter.open .picker-trigger {
border-color: rgba(16, 185, 129, 0.34);
background: #f6fffb;
color: #0f9f78;
border-color: rgba(var(--theme-primary-rgb), 0.34);
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
}
.toolbar-actions {
@@ -208,7 +208,7 @@
gap: 14px;
padding: 16px;
border: 1px solid #d7e0ea;
border-radius: 12px;
border-radius: 4px;
background: #fff;
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}
@@ -231,7 +231,7 @@
display: grid;
place-items: center;
border: 0;
border-radius: 8px;
border-radius: 4px;
background: transparent;
color: #64748b;
}
@@ -254,7 +254,7 @@
align-items: center;
padding: 0 12px;
border: 1px solid #d7e0ea;
border-radius: 8px;
border-radius: 4px;
background: #fff;
color: #334155;
font-size: 13px;
@@ -263,14 +263,14 @@
}
.picker-option:hover {
border-color: rgba(16, 185, 129, 0.28);
background: #f0fdf4;
color: #047857;
border-color: rgba(var(--theme-primary-rgb), 0.28);
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
}
.picker-option.active {
border-color: #10b981;
background: #10b981;
border-color: var(--theme-primary);
background: var(--theme-primary);
color: #fff;
}
@@ -279,9 +279,9 @@
align-items: center;
gap: 7px;
padding: 0 14px;
border: 1px solid rgba(5, 150, 105, 0.16);
background: #f8fffb;
color: #047857;
border: 1px solid rgba(var(--theme-primary-rgb), 0.18);
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
}
.template-btn,
@@ -297,9 +297,9 @@
.template-btn:hover,
.export-btn:hover {
border-color: rgba(16, 185, 129, 0.34);
background: #f6fffb;
color: #0f9f78;
border-color: rgba(var(--theme-primary-rgb), 0.34);
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
}
.create-btn {
@@ -308,9 +308,9 @@
gap: 8px;
padding: 0 14px;
border: 0;
background: #059669;
background: var(--theme-primary);
color: #fff;
box-shadow: 0 8px 18px rgba(5, 150, 105, 0.18);
box-shadow: 0 8px 18px var(--theme-primary-shadow);
}
.create-btn:disabled,
@@ -445,86 +445,25 @@
.pager button:hover:not(.active) {
background: #fff;
color: #059669;
color: var(--theme-primary-active);
box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}
.pager button.active {
background: #059669;
background: var(--theme-primary);
color: #fff;
box-shadow: 0 8px 16px rgba(5, 150, 105, 0.2);
box-shadow: 0 8px 16px var(--theme-primary-shadow);
}
.page-nav {
color: #64748b;
}
.page-size {
min-height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-width: 112px;
padding: 0 14px;
border: 1px solid #d7e0ea;
border-radius: 10px;
background: #fff;
color: #334155;
font-size: 14px;
font-weight: 750;
white-space: nowrap;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.page-size:hover {
border-color: rgba(16, 185, 129, 0.32);
color: #0f9f78;
}
.page-size-wrap {
position: relative;
.page-size-select {
width: 112px;
justify-self: end;
}
.page-size-dropdown {
position: absolute;
bottom: calc(100% + 6px);
right: 0;
z-index: 40;
display: grid;
border: 1px solid #d7e0ea;
border-radius: 10px;
background: #fff;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
overflow: hidden;
}
.page-size-dropdown button {
height: 36px;
display: grid;
place-items: center;
border: 0;
border-radius: 0;
background: transparent;
color: #334155;
font-size: 13px;
font-weight: 750;
white-space: nowrap;
padding: 0 20px;
transition: background 120ms ease, color 120ms ease;
}
.page-size-dropdown button:hover {
background: #f0fdf4;
color: #059669;
}
.page-size-dropdown button.active {
background: #059669;
color: #fff;
}
.table-state {
width: 100%;
min-height: 220px;
@@ -539,7 +478,7 @@
.table-state i {
font-size: 26px;
color: #059669;
color: var(--theme-primary);
}
.table-state.error i {
@@ -559,10 +498,10 @@
.state-action {
min-height: 36px;
padding: 0 14px;
border: 1px solid rgba(5, 150, 105, 0.22);
border: 1px solid rgba(var(--theme-primary-rgb), 0.22);
border-radius: 8px;
background: #ecfdf5;
color: #047857;
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
font-size: 13px;
font-weight: 760;
}
@@ -644,7 +583,7 @@ tbody tr:hover {
}
tbody tr.spotlight {
background: linear-gradient(90deg, rgba(16, 185, 129, 0.05), rgba(59, 130, 246, 0.03));
background: linear-gradient(90deg, rgba(var(--theme-primary-rgb), 0.05), rgba(var(--theme-primary-rgb), 0.02));
}
tbody tr:last-child td {
@@ -665,7 +604,7 @@ tbody tr:last-child td {
display: grid;
place-items: center;
border-radius: 11px;
background: linear-gradient(135deg, #10b981, #059669);
background: var(--theme-gradient-primary);
color: #fff;
font-size: 13px;
font-weight: 900;
@@ -709,8 +648,8 @@ tbody tr:last-child td {
}
.status-pill.success {
background: #dcfce7;
color: #059669;
background: var(--success-soft);
color: var(--success-hover);
}
.status-pill.warning {
@@ -733,8 +672,8 @@ tbody tr:last-child td {
}
.role-pill {
background: #ecfdf5;
color: #059669;
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
}
.more-pill {
@@ -744,9 +683,9 @@ tbody tr:last-child td {
.row-action {
padding: 0 12px;
border: 1px solid rgba(16, 185, 129, 0.32);
border: 1px solid rgba(var(--theme-primary-rgb), 0.32);
background: #fff;
color: #059669;
color: var(--theme-primary-active);
}
.detail-scroll {
@@ -774,7 +713,7 @@ tbody tr:last-child td {
display: grid;
place-items: center;
border-radius: 18px;
background: linear-gradient(135deg, #10b981, #047857);
background: var(--theme-gradient-primary);
color: #fff;
font-size: 24px;
font-weight: 900;
@@ -950,8 +889,8 @@ tbody tr:last-child td {
.manager-picker.open .manager-picker-trigger,
.manager-picker-trigger:hover {
border-color: rgba(16, 185, 129, 0.34);
background: #f6fffb;
border-color: rgba(var(--theme-primary-rgb), 0.34);
background: var(--theme-primary-soft);
}
.manager-picker-label {
@@ -987,8 +926,8 @@ tbody tr:last-child td {
.manager-picker-panel input[type='search']:focus {
outline: none;
border-color: rgba(16, 185, 129, 0.6);
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
border-color: rgba(var(--theme-primary-rgb), 0.6);
box-shadow: 0 0 0 3px var(--theme-focus-ring);
}
.manager-picker-options {
@@ -1022,8 +961,8 @@ tbody tr:last-child td {
.manager-picker-option:hover,
.manager-picker-option.active {
border-color: rgba(16, 185, 129, 0.32);
background: linear-gradient(180deg, rgba(240, 253, 244, 0.85), #ffffff);
border-color: rgba(var(--theme-primary-rgb), 0.32);
background: linear-gradient(180deg, var(--theme-primary-soft), #ffffff);
}
.manager-picker-empty {
@@ -1051,8 +990,8 @@ tbody tr:last-child td {
}
.role-card.active {
border-color: rgba(16, 185, 129, 0.32);
background: linear-gradient(180deg, rgba(240, 253, 244, 0.85), #ffffff);
border-color: rgba(var(--theme-primary-rgb), 0.32);
background: linear-gradient(180deg, var(--theme-primary-soft), #ffffff);
}
.role-card input {
@@ -1174,7 +1113,7 @@ td.cell-updated {
}
.publish-summary strong {
color: #059669;
color: var(--theme-primary-active);
font-size: 14px;
font-weight: 850;
}
@@ -1221,10 +1160,10 @@ td.cell-updated {
}
.major-action {
border: 1px solid #059669;
background: #059669;
border: 1px solid var(--theme-primary);
background: var(--theme-primary);
color: #fff;
box-shadow: 0 4px 12px rgba(5, 150, 105, 0.16);
box-shadow: 0 4px 12px var(--theme-primary-shadow);
}
.minor-action:disabled,
@@ -1286,7 +1225,7 @@ td.cell-updated {
width: min(280px, calc(100vw - 64px));
}
.page-size,
.page-size-select,
.pager {
justify-self: stretch;
}

12
web/src/assets/styles/views/log-detail-view.css
View File

@@ -61,7 +61,7 @@
}
.detail-state i {
color: #10b981;
color: var(--theme-primary);
font-size: 28px;
}
@@ -212,8 +212,8 @@
}
.trace-step.active {
border-color: rgba(16, 185, 129, 0.32);
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.08);
border-color: rgba(var(--theme-primary-rgb), 0.32);
box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.08);
}
.step-index {
@@ -224,7 +224,7 @@
justify-content: center;
border-radius: 999px;
background: #ecfeff;
color: #0f766e;
color: var(--theme-primary-active);
font-size: 12px;
font-weight: 800;
}
@@ -287,8 +287,8 @@
}
.status-pill.success {
background: rgba(22, 163, 74, 0.12);
color: #166534;
background: rgba(var(--success-rgb), 0.12);
color: var(--success-active);
}
.status-pill.warning,

64
web/src/assets/styles/views/login-view.css
View File

@@ -9,8 +9,8 @@
padding: 48px clamp(40px, 5vw, 86px);
overflow: hidden;
background:
linear-gradient(120deg, rgba(236,253,245,.72), transparent 34%),
linear-gradient(105deg, #f8fafc 0%, #f4fbf8 44%, #f8fafc 100%);
linear-gradient(120deg, rgba(var(--theme-primary-rgb, 58, 124, 165), .10), transparent 34%),
linear-gradient(105deg, #f8fafc 0%, #f5faff 44%, #f8fafc 100%);
}
.login-page::before {
@@ -21,8 +21,8 @@
background:
linear-gradient(90deg, rgba(15,23,42,.045) 1px, transparent 1px),
linear-gradient(0deg, rgba(15,23,42,.04) 1px, transparent 1px),
radial-gradient(circle at 28% 72%, rgba(16,185,129,.12), transparent 28%),
radial-gradient(circle at 75% 22%, rgba(245,158,11,.08), transparent 30%);
radial-gradient(circle at 28% 72%, rgba(var(--theme-primary-rgb, 58, 124, 165), .10), transparent 28%),
radial-gradient(circle at 75% 22%, rgba(37,99,235,.06), transparent 30%);
background-size: 72px 72px, 72px 72px, auto, auto;
mask-image: linear-gradient(100deg, rgba(0,0,0,.7), rgba(0,0,0,.32) 48%, rgba(0,0,0,.16));
pointer-events: none;
@@ -37,11 +37,11 @@
width: min(820px, 58vw);
height: min(560px, 64vh);
border: 1px solid rgba(148,163,184,.22);
border-radius: 18px;
border-radius: 8px;
background:
linear-gradient(90deg, transparent 0 28%, rgba(15,23,42,.055) 28% calc(28% + 1px), transparent calc(28% + 1px)),
repeating-linear-gradient(0deg, transparent 0 35px, rgba(15,23,42,.05) 36px),
linear-gradient(135deg, rgba(255,255,255,.74), rgba(236,253,245,.32));
linear-gradient(135deg, rgba(255,255,255,.74), rgba(var(--theme-primary-rgb, 58, 124, 165), .10));
box-shadow: 0 34px 80px rgba(15,23,42,.08);
transform: rotate(-7deg);
pointer-events: none;
@@ -65,7 +65,7 @@
height: 34px;
display: inline-grid;
place-items: center;
color: #059669;
color: var(--theme-primary-active);
}
:deep(.logo-mark svg) {
@@ -86,7 +86,7 @@
}
.eyebrow-text {
color: #059669;
color: var(--theme-primary-active);
font-size: 14px;
font-weight: 900;
letter-spacing: .08em;
@@ -131,7 +131,7 @@
width: 230px;
height: 62px;
border-radius: 50%;
background: linear-gradient(90deg, rgba(16,185,129,.16), rgba(245,158,11,.12));
background: linear-gradient(90deg, rgba(var(--theme-primary-rgb, 58, 124, 165), .14), rgba(37,99,235,.08));
filter: blur(4px);
}
@@ -139,10 +139,10 @@
position: absolute;
z-index: 0;
display: block;
border: 1px solid rgba(16,185,129,.18);
border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), .22);
border-left: 0;
border-bottom: 0;
border-radius: 0 22px 0 0;
border-radius: 0 8px 0 0;
}
.flow-line::after {
@@ -153,8 +153,8 @@
width: 8px;
height: 8px;
border-radius: 999px;
background: #10b981;
box-shadow: 0 0 0 5px rgba(16,185,129,.12);
background: var(--theme-primary);
box-shadow: 0 0 0 5px rgba(var(--theme-primary-rgb, 58, 124, 165), .12);
}
.flow-a {
@@ -197,7 +197,7 @@
display: grid;
gap: 7px;
padding: 17px 18px;
border-radius: 14px;
border-radius: 8px;
}
.metric-card span {
@@ -219,7 +219,7 @@
font-weight: 700;
}
.up { color: #059669; }
.up { color: var(--success); }
.danger { color: #ef4444; }
.amount { left: 20px; top: 20px; }
@@ -252,7 +252,7 @@
width: 220px;
height: 214px;
padding: 28px 28px;
border-radius: 16px;
border-radius: 8px;
transform: rotate(2deg);
}
@@ -281,10 +281,10 @@
display: grid;
place-items: center;
border-radius: 999px;
background: linear-gradient(135deg, #6ee7b7, #059669);
background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-active));
color: #fff;
font-size: 27px;
box-shadow: 0 14px 28px rgba(5,150,105,.25);
box-shadow: 0 14px 28px rgba(var(--theme-primary-rgb, 58, 124, 165), .22);
}
.shield-art {
@@ -337,7 +337,7 @@
gap: 12px;
padding: 12px 14px;
border: 1px solid rgba(215, 224, 234, .82);
border-radius: 13px;
border-radius: 6px;
background: rgba(255,255,255,.76);
box-shadow: 0 12px 30px rgba(65, 88, 110, .08);
backdrop-filter: blur(16px);
@@ -352,7 +352,7 @@
font-size: 21px;
}
.feature-strip .green { background: #dff7ee; color: #059669; }
.feature-strip .primary { background: var(--theme-primary-soft); color: var(--theme-primary-active); }
.feature-strip .red { background: #fee2e2; color: #ef4444; }
.feature-strip .blue { background: #dbeafe; color: #3b82f6; }
@@ -379,7 +379,7 @@
display: grid;
padding: 58px 60px 44px;
border: 1px solid rgba(215, 224, 234, .96);
border-radius: 20px;
border-radius: 8px;
background: rgba(255,255,255,.86);
box-shadow: 0 24px 64px rgba(65, 88, 110, .16);
backdrop-filter: blur(18px);
@@ -450,9 +450,9 @@
}
.field input:focus {
border-color: #10b981;
border-color: var(--theme-primary);
background: #fff;
box-shadow: 0 0 0 3px rgba(16,185,129,.13);
box-shadow: 0 0 0 3px var(--theme-focus-ring, rgba(58, 124, 165, .14));
outline: none;
}
@@ -471,7 +471,7 @@
.field-icon-btn:hover {
background: #f1f5f9;
color: #059669;
color: var(--theme-primary-active);
}
.form-meta {
@@ -503,7 +503,7 @@
.remember input {
width: 16px;
height: 16px;
accent-color: #059669;
accent-color: var(--theme-primary);
}
.link-btn {
@@ -529,13 +529,13 @@
.submit-btn {
margin-top: 4px;
border: 0;
background: linear-gradient(135deg, #10b981, #059669);
background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-active));
color: #fff;
box-shadow: 0 16px 30px rgba(5,150,105,.20);
box-shadow: 0 16px 30px rgba(var(--theme-primary-rgb, 58, 124, 165), .20);
}
.submit-btn:hover {
background: linear-gradient(135deg, #13c990, #047857);
background: linear-gradient(135deg, var(--theme-primary-hover), var(--theme-primary-active));
}
.submit-btn:disabled,
@@ -571,13 +571,13 @@
}
.sso-btn {
border: 1px solid #10b981;
border: 1px solid var(--theme-primary);
background: rgba(255,255,255,.78);
color: #059669;
color: var(--theme-primary-active);
}
.sso-btn:hover {
background: #ecfdf5;
background: var(--theme-primary-soft);
}
.security-note {
@@ -689,7 +689,7 @@
.login-card {
padding: 32px 22px 24px;
border-radius: 14px;
border-radius: 8px;
}
.card-head h2 {

96
web/src/assets/styles/views/logs-view.css
View File

@@ -70,7 +70,7 @@
.console-tabs button:hover,
.console-tabs button.active {
color: #0f766e;
color: var(--theme-primary-active);
}
.console-tabs button.active::after {
@@ -81,7 +81,7 @@
bottom: -11px;
height: 2px;
border-radius: 999px;
background: #10b981;
background: var(--theme-primary);
}
.console-toolbar {
@@ -102,7 +102,6 @@
font-weight: 700;
}
.filter-field select,
.field-input {
min-height: 38px;
border: 1px solid #d8e1eb;
@@ -110,12 +109,6 @@
background: #fff;
}
.filter-field select {
padding: 0 12px;
color: #0f172a;
font-size: 13px;
}
.field-input {
display: flex;
align-items: center;
@@ -148,7 +141,7 @@
}
.toolbar-btn.primary {
background: linear-gradient(135deg, #0f9f8d, #10b981);
background: var(--theme-gradient-primary);
border-color: transparent;
color: #fff;
}
@@ -247,12 +240,12 @@
}
.log-table tbody tr:hover {
background: rgba(16, 185, 129, 0.04);
background: rgba(var(--theme-primary-rgb), 0.04);
}
.log-table tbody tr.active {
background: rgba(16, 185, 129, 0.08);
box-shadow: inset 3px 0 0 #10b981;
background: rgba(var(--theme-primary-rgb), 0.08);
box-shadow: inset 3px 0 0 var(--theme-primary);
}
.log-table tbody td {
@@ -363,14 +356,14 @@
.pager button:hover:not(.active):not(:disabled) {
background: #fff;
color: #059669;
color: var(--theme-primary-active);
box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}
.pager button.active {
background: #059669;
background: var(--theme-primary);
color: #fff;
box-shadow: 0 8px 16px rgba(5, 150, 105, 0.2);
box-shadow: 0 8px 16px var(--theme-primary-shadow);
}
.page-nav:disabled {
@@ -378,63 +371,11 @@
opacity: 0.45;
}
.page-size-wrap {
position: relative;
.page-size-select {
width: 112px;
justify-self: end;
}
.page-size {
min-width: 112px;
min-height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 0 14px;
border: 1px solid #d7e0ea;
border-radius: 10px;
background: #fff;
color: #334155;
font-size: 14px;
font-weight: 750;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.page-size-dropdown {
position: absolute;
right: 0;
bottom: calc(100% + 6px);
z-index: 40;
display: grid;
overflow: hidden;
border: 1px solid #d7e0ea;
border-radius: 10px;
background: #fff;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
}
.page-size-dropdown button {
height: 36px;
padding: 0 20px;
border: 0;
border-radius: 0;
background: transparent;
color: #334155;
font-size: 13px;
font-weight: 750;
white-space: nowrap;
}
.page-size-dropdown button:hover {
background: #f0fdf4;
color: #059669;
}
.page-size-dropdown button.active {
background: #059669;
color: #fff;
}
.analytics-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 0.48fr);
@@ -473,8 +414,8 @@
align-items: center;
padding: 0 9px;
border-radius: 999px;
background: #ecfdf5;
color: #059669;
background: var(--theme-primary-light-9);
color: var(--theme-primary-active);
font-size: 12px;
font-weight: 700;
}
@@ -540,7 +481,7 @@
}
.trend-line.total {
stroke: #10b981;
stroke: var(--theme-primary);
}
.trend-line.failed {
@@ -644,9 +585,9 @@
}
.status-pill.success {
background: rgba(22, 163, 74, 0.12);
border-color: rgba(22, 163, 74, 0.2);
color: #166534;
background: rgba(var(--success-rgb), 0.12);
border-color: rgba(var(--success-rgb), 0.2);
color: var(--success-active);
}
.status-pill.warning {
@@ -761,8 +702,7 @@
}
.pager,
.page-size,
.page-size-wrap {
.page-size-select {
justify-self: stretch;
}
}

29
web/src/assets/styles/views/overview-view.css
View File

@@ -98,8 +98,8 @@
}
.kpi-badge.down {
background: rgba(22, 163, 74, 0.08);
color: #16a34a;
background: rgba(var(--success-rgb), 0.08);
color: var(--success);
}
.kpi-badge .mdi {
@@ -157,9 +157,13 @@
.card-head h3 {
color: #1e293b;
font-size: 16px;
font-size: 15px;
font-weight: 600;
line-height: 1.35;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
}
.card-head .mdi {
@@ -169,14 +173,7 @@
}
.card-select {
height: 30px;
min-width: 82px;
padding: 0 8px;
border: 1px solid #cbd5e1;
border-radius: 4px;
background: #fff;
color: #334155;
font-size: 14px;
width: 110px;
}
.panel-note {
@@ -226,8 +223,8 @@
display: grid;
place-items: center;
border-radius: 999px;
background: #e2f6ef;
color: #047857;
background: var(--theme-primary-light-9);
color: var(--theme-primary-active);
font-size: 13px;
font-weight: 700;
flex: 0 0 auto;
@@ -272,8 +269,8 @@
}
.status-tag.success {
background: rgba(16,185,129,.10);
color: #16a34a;
background: rgba(var(--success-rgb), .10);
color: var(--success);
}
.text-link {
@@ -286,7 +283,7 @@
border: 0;
border-top: 1px solid #f1f5f9;
background: transparent;
color: #10b981;
color: var(--theme-primary);
font-size: 14px;
}

146
web/src/assets/styles/views/policies-view.css
View File

@@ -130,11 +130,11 @@
text-align: left;
}
.folder-tree button.active {
background: #dcfce7;
color: #059669;
font-weight: 850;
}
.folder-tree button.active {
background: var(--theme-primary-light-9);
color: var(--theme-primary-active);
font-weight: 850;
}
.folder-tree b {
min-width: 24px;
@@ -159,10 +159,10 @@
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid rgba(16, 185, 129, .28);
border: 1px solid rgba(var(--theme-primary-rgb), .28);
border-radius: 8px;
background: #f0fdf4;
color: #059669;
background: var(--theme-primary-light-9);
color: var(--theme-primary-active);
font-size: 13px;
font-weight: 850;
}
@@ -178,9 +178,9 @@
}
.knowledge-sync-btn:not(:disabled):hover {
border-color: rgba(16, 185, 129, 0.38);
background: #ecfdf5;
color: #047857;
border-color: rgba(var(--theme-primary-rgb), 0.38);
background: var(--theme-primary-light-9);
color: var(--theme-primary-active);
}
.folder-sync-meta {
@@ -298,10 +298,10 @@ th {
background: #f8fbff;
}
.doc-row.selected {
background: linear-gradient(90deg, rgba(16, 185, 129, 0.08), rgba(59, 130, 246, 0.04));
box-shadow: inset 3px 0 0 #10b981;
}
.doc-row.selected {
background: linear-gradient(90deg, rgba(var(--theme-primary-rgb), 0.08), rgba(59, 130, 246, 0.04));
box-shadow: inset 3px 0 0 var(--theme-primary);
}
.file-name {
display: inline-flex;
@@ -315,8 +315,8 @@ th {
.viewer-filetype.pdf { color: #ef4444; }
.file-name .word,
.viewer-filetype.word { color: #2563eb; }
.file-name .excel,
.viewer-filetype.excel { color: #10b981; }
.file-name .excel,
.viewer-filetype.excel { color: var(--success); }
.doc-tag {
display: inline-flex;
@@ -342,8 +342,8 @@ th {
}
.state-tag.success {
background: #dcfce7;
color: #059669;
background: var(--success-soft);
color: var(--success-hover);
}
.state-tag.muted {
@@ -394,7 +394,7 @@ th {
}
.more-btn.ingest {
color: #0f766e;
color: var(--theme-primary-active);
}
.more-btn.llm-wiki-view {
@@ -462,17 +462,17 @@ th {
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);
}
.list-foot .page-summary {
color: #64748b;
@@ -484,73 +484,10 @@ th {
color: #64748b;
}
.page-size-wrap {
position: relative;
justify-self: end;
}
.page-size {
justify-self: end;
min-width: 112px;
min-height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 0 14px;
border: 1px solid #d7e0ea;
border-radius: 10px;
background: #fff;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
color: #334155;
font-size: 14px;
font-weight: 750;
white-space: nowrap;
transition: border-color 160ms ease, color 160ms ease;
}
.page-size:hover {
border-color: rgba(16, 185, 129, .32);
color: #0f9f78;
}
.page-size-dropdown {
position: absolute;
bottom: calc(100% + 6px);
right: 0;
z-index: 40;
display: grid;
border: 1px solid #d7e0ea;
border-radius: 10px;
background: #fff;
box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
overflow: hidden;
}
.page-size-dropdown button {
height: 36px;
display: grid;
place-items: center;
border: 0;
border-radius: 0;
background: transparent;
color: #334155;
font-size: 13px;
font-weight: 750;
white-space: nowrap;
padding: 0 20px;
transition: background 120ms ease, color 120ms ease;
}
.page-size-dropdown button:hover {
background: #f0fdf4;
color: #059669;
}
.page-size-dropdown button.active {
background: #059669;
color: #fff;
}
.page-size-select {
width: 112px;
justify-self: end;
}
.preview-panel {
height: 100%;
@@ -671,7 +608,7 @@ th {
.llm-wiki-overlay {
background:
radial-gradient(circle at top, rgba(15, 118, 110, 0.12), transparent 30%),
radial-gradient(circle at top, rgba(var(--theme-primary-rgb), 0.12), transparent 30%),
rgba(15, 23, 42, 0.58);
}
@@ -706,8 +643,8 @@ th {
}
.llm-wiki-count {
background: #ecfdf5;
color: #047857;
background: var(--theme-primary-light-9);
color: var(--theme-primary-active);
}
.llm-wiki-stat-grid {
@@ -838,8 +775,8 @@ th {
.llm-wiki-editor:focus {
outline: none;
border-color: rgba(16, 185, 129, 0.42);
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
border-color: rgba(var(--theme-primary-rgb), 0.42);
box-shadow: 0 0 0 4px var(--theme-focus-ring);
}
.llm-wiki-candidate-list {
@@ -1253,8 +1190,7 @@ th {
}
.pager,
.page-size-wrap,
.page-size {
.page-size-select {
justify-self: stretch;
}

114
web/src/assets/styles/views/requests-view.css
View File

@@ -47,8 +47,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;
}
@@ -70,7 +70,7 @@
}
.status-tabs button.active {
color: #059669;
color: var(--theme-primary-active);
}
.status-tabs button.active::after {
@@ -81,7 +81,7 @@
bottom: -1px;
height: 3px;
border-radius: 999px 999px 0 0;
background: #10b981;
background: var(--theme-primary);
}
.list-toolbar {
@@ -108,23 +108,22 @@
padding: 0 18px;
border: 0;
border-radius: 10px;
background: linear-gradient(135deg, #10b981, #059669);
background: var(--theme-gradient-primary);
color: #fff;
font-size: 14px;
font-weight: 800;
white-space: nowrap;
box-shadow: 0 10px 24px rgba(5, 150, 105, 0.2);
box-shadow: 0 10px 24px var(--theme-primary-shadow);
transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}
.create-request-btn:hover {
transform: translateY(-1px);
box-shadow: 0 14px 28px rgba(5, 150, 105, 0.24);
box-shadow: 0 14px 28px rgba(var(--theme-primary-rgb), 0.24);
filter: saturate(1.02);
}
.filter-btn,
.page-size {
.filter-btn {
min-height: 38px;
display: inline-flex;
align-items: center;
@@ -232,8 +231,8 @@
}
.date-range-fields input:focus {
border-color: #10b981;
box-shadow: 0 0 0 3px rgba(16, 185, 129, .12);
border-color: var(--theme-primary);
box-shadow: 0 0 0 3px var(--theme-focus-ring);
outline: none;
}
@@ -254,7 +253,7 @@
.apply-btn {
border: 0;
background: #10b981;
background: var(--theme-primary);
color: #fff;
}
@@ -263,10 +262,9 @@
background: #cbd5e1;
}
.filter-btn:hover,
.page-size:hover {
border-color: rgba(16, 185, 129, .32);
color: #0f9f78;
.filter-btn:hover {
border-color: rgba(var(--theme-primary-rgb), .32);
color: var(--theme-primary-active);
}
.hint {
@@ -289,7 +287,7 @@
overflow-y: auto;
border: 1px solid #edf2f7;
border-radius: 10px;
background: linear-gradient(180deg, #fcfefd 0%, #f4f8f6 100%);
background: linear-gradient(180deg, #fcfefd 0%, var(--theme-primary-light-9) 100%);
display: flex;
flex-direction: column;
align-items: stretch;
@@ -316,13 +314,13 @@
padding: 28px 20px;
text-align: center;
color: #64748b;
background: linear-gradient(180deg, #fcfffd 0%, #f5f9f7 100%);
background: linear-gradient(180deg, #fcfffd 0%, var(--theme-primary-light-9) 100%);
align-self: center;
}
.table-state .mdi {
font-size: 28px;
color: #10b981;
color: var(--theme-primary);
}
.table-state strong {
@@ -399,7 +397,7 @@ tbody tr {
}
tbody tr:hover {
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 {
@@ -407,7 +405,7 @@ tbody tr:last-child td {
}
.doc-id {
color: #059669;
color: var(--theme-primary-active);
font-weight: 800;
}
@@ -424,8 +422,8 @@ tbody tr:last-child td {
}
.type-tag.travel {
background: #ecfdf5;
color: #059669;
background: var(--theme-primary-light-9);
color: var(--theme-primary-active);
}
.type-tag.entertainment {
@@ -435,8 +433,8 @@ tbody tr:last-child td {
.type-tag.hotel,
.type-tag.transport {
background: #ecfdf5;
color: #047857;
background: var(--theme-primary-light-9);
color: var(--theme-primary-active);
}
.type-tag.meal {
@@ -479,9 +477,9 @@ tbody tr:last-child td {
}
.status-tag.success {
border-color: #bbf7d0;
background: #ecfdf5;
color: #059669;
border-color: var(--success-line);
background: var(--success-soft);
color: var(--success-hover);
}
.status-tag.warning {
@@ -546,69 +544,23 @@ tbody tr:last-child td {
.pager button:hover:not(.active) {
background: #fff;
color: #059669;
color: var(--theme-primary-active);
box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
}
.pager button.active {
background: #059669;
background: var(--theme-primary);
color: #fff;
box-shadow: 0 8px 16px rgba(5, 150, 105, .20);
box-shadow: 0 8px 16px var(--theme-primary-shadow);
}
.page-nav {
color: #64748b;
}
.page-size {
.page-size-select {
width: 112px;
justify-self: end;
min-width: 112px;
border-radius: 10px;
background: #fff;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.page-size-wrap {
position: relative;
justify-self: end;
}
.page-size-dropdown {
position: absolute;
bottom: calc(100% + 6px);
right: 0;
z-index: 40;
display: grid;
border: 1px solid #d7e0ea;
border-radius: 10px;
background: #fff;
box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
overflow: hidden;
}
.page-size-dropdown button {
height: 36px;
display: grid;
place-items: center;
border: 0;
border-radius: 0;
background: transparent;
color: #334155;
font-size: 13px;
font-weight: 750;
white-space: nowrap;
padding: 0 20px;
transition: background 120ms ease, color 120ms ease;
}
.page-size-dropdown button:hover {
background: #f0fdf4;
color: #059669;
}
.page-size-dropdown button.active {
background: #059669;
color: #fff;
}
@media (max-width: 1200px) {
@@ -629,7 +581,7 @@ tbody tr:last-child td {
}
.filter-btn,
.page-size {
.page-size-select {
width: 100%;
}
@@ -643,7 +595,7 @@ tbody tr:last-child td {
}
.pager,
.page-size {
.page-size-select {
justify-self: stretch;
}
}

26
web/src/assets/styles/views/settings-view-form.css
View File

@@ -1,9 +1,9 @@
/* 设置页表单/卡片/开关 — 供 SettingsView 与子面板各自 scoped 引入 */
/* 设置页表单、卡片与开关样式，供 SettingsView 及子面板 scoped 引入 */
.settings-card {
padding: 0;
border: 1px solid #e2e8f0;
border-radius: 12px;
border-radius: 6px;
background: #ffffff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 4px 16px rgba(0, 0, 0, 0.03);
overflow: hidden;
@@ -99,13 +99,12 @@
font-style: normal;
}
.field input,
.field select {
.field input {
width: 100%;
min-height: 44px;
padding: 0 14px;
border: 1px solid #cbd5e1;
border-radius: 12px;
border-radius: 4px;
background: #ffffff;
color: #0f172a;
font-size: 13px;
@@ -117,11 +116,10 @@
color: #94a3b8;
}
.field input:focus,
.field select:focus {
.field input:focus {
outline: none;
border-color: #10b981;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.08);
border-color: var(--theme-primary);
box-shadow: 0 0 0 3px var(--theme-focus-ring);
background: #ffffff;
}
@@ -138,7 +136,7 @@
gap: 16px;
padding: 16px 20px;
border: 1px solid #e2e8f0;
border-radius: 16px;
border-radius: 6px;
background: #ffffff;
text-align: left;
transition: all 0.25s ease;
@@ -147,9 +145,9 @@
}
.switch-row:hover {
border-color: rgba(16, 185, 129, 0.25);
background: linear-gradient(180deg, #ffffff 0%, rgba(16, 185, 129, 0.01) 100%);
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.03);
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.25);
background: linear-gradient(180deg, #ffffff 0%, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.02) 100%);
box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.04);
transform: translateY(-1px);
}
@@ -198,7 +196,7 @@
}
.switch-btn.active {
background-color: #10b981;
background-color: var(--theme-primary);
}
.switch-btn.active i {

36
web/src/assets/styles/views/settings-view-hermes.css
View File

@@ -8,9 +8,9 @@
/* Master Control Hero Card Active Hover & Color */
.hermes-hero-card.active {
border-color: rgba(16, 185, 129, 0.25);
background: linear-gradient(180deg, #ffffff 0%, rgba(16, 185, 129, 0.02) 100%);
box-shadow: 0 1px 3px rgba(16, 185, 129, 0.01), 0 8px 24px rgba(16, 185, 129, 0.05);
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.25);
background: linear-gradient(180deg, #ffffff 0%, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.02) 100%);
box-shadow: 0 1px 3px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.01), 0 8px 24px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.05);
}
.hermes-hero-card .model-icon-box {
@@ -18,9 +18,9 @@
}
.hermes-hero-card .model-icon-box.active {
background: rgba(16, 185, 129, 0.1);
color: #10b981;
border-color: rgba(16, 185, 129, 0.15);
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.18);
}
/* Pulse Dot */
@@ -37,19 +37,19 @@
}
.status-pulse-dot.active {
background-color: #10b981;
background-color: var(--theme-primary);
animation: pulse-ring 1.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}
@keyframes pulse-ring {
0% {
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
box-shadow: 0 0 0 0 rgba(var(--theme-primary-rgb, 58, 124, 165), 0.36);
}
70% {
box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
box-shadow: 0 0 0 6px rgba(var(--theme-primary-rgb, 58, 124, 165), 0);
}
100% {
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
box-shadow: 0 0 0 0 rgba(var(--theme-primary-rgb, 58, 124, 165), 0);
}
}
@@ -65,8 +65,8 @@
}
.status-badge.active {
background: rgba(16, 185, 129, 0.1);
color: #10b981;
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
}
/* Task Section */
@@ -93,7 +93,7 @@
padding: 20px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 16px;
border-radius: 6px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.01), 0 2px 8px rgba(0, 0, 0, 0.02);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
@@ -117,7 +117,7 @@
justify-content: center;
width: 44px;
height: 44px;
border-radius: 12px;
border-radius: 6px;
font-size: 20px;
transition: all 0.3s ease;
}
@@ -185,13 +185,13 @@
.frequency-badge.active {
background: #f0f9ff;
color: #0284c7;
color: #2f6d95;
}
.time-picker-wrapper input[type="time"] {
padding: 5px 8px;
border: 1px solid #e2e8f0;
border-radius: 8px;
border-radius: 4px;
background: #f8fafc;
color: #334155;
font-size: 12px;
@@ -207,9 +207,9 @@
}
.time-picker-wrapper input[type="time"]:focus {
border-color: #10b981;
border-color: var(--theme-primary);
background: #ffffff;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.08);
box-shadow: 0 0 0 3px var(--theme-focus-ring);
}
.time-picker-placeholder {

238
web/src/assets/styles/views/settings-view.css
View File

@@ -10,7 +10,7 @@
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
overflow: hidden;
border-radius: 24px;
border-radius: 4px;
background: #ffffff;
border: 1px solid #e2e8f0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 4px 16px rgba(0, 0, 0, 0.03);
@@ -35,7 +35,7 @@
}
.nav-kicker {
color: #10b981;
color: var(--primary);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.08em;
@@ -70,7 +70,7 @@
display: block;
padding: 10px 14px;
border: 1px solid transparent;
border-radius: 12px;
border-radius: 4px;
background: transparent;
color: #334155;
text-align: left;
@@ -84,9 +84,9 @@
}
.settings-nav-item.active {
background: #ecfdf5;
color: #059669;
border-color: rgba(16, 185, 129, 0.12);
background: var(--primary-soft);
color: var(--primary-active);
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.22);
}
.nav-item-copy {
@@ -109,7 +109,7 @@
}
.settings-nav-item.active .nav-item-copy small {
color: #059669;
color: var(--primary-active);
opacity: 0.8;
}
@@ -144,9 +144,9 @@
align-items: center;
min-height: 24px;
padding: 0 10px;
border-radius: 99px;
background: #ecfdf5;
color: #059669;
border-radius: 4px;
background: var(--primary-soft);
color: var(--primary-active);
font-size: 12px;
font-weight: 700;
}
@@ -181,20 +181,20 @@
gap: 8px;
padding: 0 20px;
border: 0;
border-radius: 12px;
background: #10b981;
border-radius: 4px;
background: var(--primary);
color: #ffffff;
font-size: 13px;
font-weight: 700;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.16);
transition: all 0.2s ease;
cursor: pointer;
}
.save-button:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.25);
background: #059669;
box-shadow: 0 6px 20px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.22);
background: var(--primary-hover);
}
.settings-content {
@@ -219,10 +219,10 @@
justify-content: center;
gap: 6px;
padding: 0 12px;
border: 1px solid rgba(16, 185, 129, 0.2);
border-radius: 10px;
background: #ecfdf5;
color: #059669;
border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.22);
border-radius: 4px;
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
font-size: 12.5px;
font-weight: 700;
transition: all 0.2s ease;
@@ -231,10 +231,10 @@
.test-button:hover:not(:disabled) {
transform: translateY(-1px);
border-color: #10b981;
background: #10b981;
border-color: var(--theme-primary);
background: var(--theme-primary);
color: #ffffff;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
box-shadow: 0 4px 12px rgba(58, 124, 165, 0.15);
}
.test-button:disabled {
@@ -259,7 +259,7 @@
gap: 10px;
padding: 0 40px 0 14px;
border: 1px solid #cbd5e1;
border-radius: 12px;
border-radius: 4px;
background: #ffffff;
color: #0f172a;
font-size: 13px;
@@ -287,18 +287,18 @@
.session-picker-trigger:hover,
.session-picker-filter.open .session-picker-trigger {
border-color: #10b981;
border-color: var(--theme-primary);
background: #ffffff;
color: #059669;
color: var(--theme-primary-active);
}
.session-picker-filter.open .session-picker-trigger {
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.08);
box-shadow: 0 0 0 3px var(--theme-focus-ring);
}
.session-picker-filter.open .session-picker-trigger .mdi,
.session-picker-trigger:hover .mdi {
color: #059669;
color: var(--theme-primary-active);
}
.session-picker-popover {
@@ -311,7 +311,7 @@
gap: 12px;
padding: 16px;
border: 1px solid #cbd5e1;
border-radius: 12px;
border-radius: 4px;
background: #ffffff;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
}
@@ -335,7 +335,7 @@
display: grid;
place-items: center;
border: 0;
border-radius: 8px;
border-radius: 4px;
background: transparent;
color: #64748b;
cursor: pointer;
@@ -360,7 +360,7 @@
align-items: center;
padding: 0 12px;
border: 1px solid #cbd5e1;
border-radius: 8px;
border-radius: 4px;
background: #ffffff;
color: #334155;
font-size: 13px;
@@ -372,9 +372,123 @@
.session-picker-option:hover,
.session-picker-option.active {
border-color: #10b981;
background: #ecfdf5;
color: #059669;
border-color: var(--theme-primary);
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
}
.skin-option-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 12px;
}
.skin-option {
min-height: 104px;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
padding: 16px;
border: 1px solid #d8dee8;
border-radius: 4px;
background: #ffffff;
color: #334155;
text-align: left;
transition:
border-color 160ms var(--ease),
background 160ms var(--ease),
box-shadow 160ms var(--ease);
}
.skin-option:hover,
.skin-option.active {
border-color: var(--primary);
background: var(--theme-primary-light-9);
box-shadow: 0 0 0 3px var(--theme-focus-ring);
}
.skin-swatch {
width: 64px;
height: 38px;
display: grid;
grid-template-columns: 1.3fr 1fr 1fr 1fr;
grid-template-rows: 1fr;
border: 1px solid #d8dee8;
border-radius: 4px;
overflow: hidden;
background: #ffffff;
}
.skin-swatch i + i {
border-left: 1px solid rgba(255, 255, 255, 0.72);
}
.skin-copy {
display: grid;
gap: 4px;
}
.skin-copy strong {
color: #111827;
font-size: 14px;
font-weight: 700;
}
.skin-copy small {
color: #64748b;
font-size: 12px;
line-height: 1.45;
}
.skin-current {
min-height: 24px;
display: inline-flex;
align-items: center;
padding: 0 8px;
border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.26);
border-radius: 4px;
background: var(--primary-soft);
color: var(--primary-active);
font-size: 12px;
font-weight: 700;
}
.skin-preview-panel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px;
border: 1px solid #d8dee8;
border-radius: 4px;
background: linear-gradient(180deg, #ffffff 0%, var(--theme-primary-light-9) 100%);
}
.skin-preview-panel div {
display: grid;
gap: 4px;
}
.skin-preview-panel strong {
color: #111827;
font-size: 14px;
}
.skin-preview-panel span {
color: #64748b;
font-size: 12px;
}
.skin-preview-action {
min-height: 34px;
padding: 0 14px;
border: 1px solid var(--primary);
border-radius: 4px;
background: var(--theme-gradient-primary);
color: #fff;
font-size: 13px;
font-weight: 700;
}
.secret-bound-state {
@@ -382,7 +496,7 @@
display: inline-flex;
align-items: center;
gap: 6px;
color: #059669;
color: var(--theme-primary-active);
font-size: 12px;
font-weight: 600;
line-height: 1.45;
@@ -398,7 +512,7 @@
gap: 8px;
margin-top: 16px;
padding: 12px 14px;
border-radius: 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
line-height: 1.6;
@@ -410,13 +524,13 @@
}
.test-feedback.is-success {
background: #ecfdf5;
color: #059669;
background: var(--success-soft);
color: var(--success-hover);
}
.test-feedback.is-error {
background: #fef2f2;
color: #b91c1c;
background: var(--danger-soft);
color: var(--danger-active);
}
.test-feedback.is-testing {
@@ -434,13 +548,13 @@
display: grid;
place-items: center;
border: 1px dashed #cbd5e1;
border-radius: 20px;
border-radius: 8px;
background:
linear-gradient(45deg, #f8fafc 25%, transparent 25%, transparent 75%, #f8fafc 75%, #f8fafc),
linear-gradient(45deg, #f8fafc 25%, transparent 25%, transparent 75%, #f8fafc 75%, #f8fafc);
background-position: 0 0, 9px 9px;
background-size: 18px 18px;
color: #10b981;
color: var(--theme-primary);
font-size: 32px;
}
@@ -450,9 +564,9 @@
align-items: center;
gap: 18px;
padding: 24px;
border: 1px solid rgba(16, 185, 129, 0.15);
border-radius: 20px;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.04) 0%, rgba(59, 130, 246, 0.02) 100%);
border: 1px solid rgba(58, 124, 165, 0.15);
border-radius: 8px;
background: linear-gradient(135deg, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.06) 0%, rgba(var(--theme-secondary-rgb, 37, 99, 235), 0.03) 100%);
}
.preview-icon {
@@ -460,11 +574,11 @@
height: 64px;
display: grid;
place-items: center;
border-radius: 16px;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
border-radius: 8px;
background: var(--theme-gradient-primary);
color: #ffffff;
font-size: 28px;
box-shadow: 0 8px 20px rgba(16, 185, 129, 0.15);
box-shadow: 0 8px 20px var(--theme-primary-shadow);
}
.preview-copy strong {
@@ -495,9 +609,9 @@
align-items: center;
justify-content: center;
padding: 0 10px;
border-radius: 999px;
background: #ecfdf5;
color: #059669;
border-radius: 4px;
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
font-size: 11px;
font-weight: 700;
white-space: nowrap;
@@ -515,7 +629,7 @@
min-height: 34px;
padding: 0 16px;
border: 1px solid #cbd5e1;
border-radius: 999px;
border-radius: 4px;
background: #ffffff;
color: #64748b;
font-size: 12px;
@@ -525,16 +639,16 @@
}
.level-chip:hover {
border-color: #10b981;
color: #10b981;
background: #ecfdf5;
border-color: var(--theme-primary);
color: var(--theme-primary);
background: var(--theme-primary-soft);
}
.level-chip.active {
border-color: #10b981;
background: #10b981;
border-color: var(--theme-primary);
background: var(--theme-primary);
color: #ffffff;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
box-shadow: 0 4px 12px var(--theme-primary-shadow);
}
.range-shell {
@@ -544,13 +658,13 @@
gap: 14px;
padding: 0 14px;
border: 1px solid #cbd5e1;
border-radius: 12px;
border-radius: 4px;
background: #ffffff;
}
.range-shell input[type='range'] {
flex: 1 1 auto;
accent-color: #10b981;
accent-color: var(--theme-primary);
cursor: pointer;
}
@@ -566,7 +680,7 @@
margin-bottom: 20px;
}
/* 大语言模型配置卡片特定图标与标题排版 */
/* 大语言模型配置卡片图标与标题排版 */
.card-title-with-icon {
display: flex;
align-items: center;
@@ -578,7 +692,7 @@
height: 40px;
display: grid;
place-items: center;
border-radius: 10px;
border-radius: 6px;
font-size: 18px;
flex: 0 0 auto;
background: #f8fafc;
@@ -681,7 +795,7 @@
.settings-card {
padding: 20px 16px;
border-radius: 16px;
border-radius: 6px;
}
.settings-nav {

106
web/src/assets/styles/views/setup-view.css
View File

@@ -3,8 +3,8 @@
display: grid;
grid-template-columns: minmax(320px, 392px) minmax(0, 1fr);
background:
radial-gradient(circle at top left, rgba(16, 185, 129, 0.24), transparent 24rem),
radial-gradient(circle at 36% 14%, rgba(16, 185, 129, 0.16), transparent 18rem),
radial-gradient(circle at top left, rgba(var(--theme-primary-rgb), 0.24), transparent 24rem),
radial-gradient(circle at 36% 14%, rgba(var(--theme-primary-rgb), 0.16), transparent 18rem),
linear-gradient(135deg, #04110d 0%, #0b1f18 26%, #10281f 26%, #eef5f1 26%, #f6fbf8 100%);
}
@@ -38,10 +38,10 @@
inset: 0;
border-radius: 18px;
background:
linear-gradient(145deg, rgba(209, 250, 229, 0.96), rgba(52, 211, 153, 0.88)),
linear-gradient(145deg, rgba(16, 185, 129, 0.4), rgba(5, 150, 105, 0.6));
linear-gradient(145deg, color-mix(in srgb, var(--theme-primary-soft) 96%, white), rgba(var(--theme-primary-rgb), 0.58)),
linear-gradient(145deg, rgba(var(--theme-primary-rgb), 0.4), rgba(var(--theme-primary-rgb), 0.6));
box-shadow:
0 18px 36px rgba(16, 185, 129, 0.2),
0 18px 36px rgba(var(--theme-primary-rgb), 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.46);
transform: rotate(-8deg);
}
@@ -51,7 +51,7 @@
position: absolute;
inset: 7px;
border-radius: 14px;
border: 1px solid rgba(4, 120, 87, 0.22);
border: 1px solid rgba(var(--theme-primary-rgb), 0.22);
}
.setup-brand-core {
@@ -64,7 +64,7 @@
align-items: center;
justify-content: center;
background: rgba(3, 32, 24, 0.92);
color: #d1fae5;
color: var(--theme-primary-soft-strong);
font-size: 15px;
font-weight: 800;
letter-spacing: 0.14em;
@@ -77,22 +77,22 @@
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(167, 243, 208, 0.86);
color: color-mix(in srgb, var(--theme-primary-soft) 86%, transparent);
}
.setup-kicker-light {
color: rgba(209, 250, 229, 0.82);
color: color-mix(in srgb, var(--theme-primary-soft) 82%, transparent);
}
.setup-context h1 {
color: #f4fff8;
color: #f8fafc;
font-size: clamp(1.9rem, 2.4vw, 2.5rem);
line-height: 1.08;
text-shadow: 0 12px 36px rgba(2, 12, 8, 0.34);
}
.setup-lead {
color: rgba(220, 252, 231, 0.84);
color: rgba(226, 232, 240, 0.84);
font-size: 14px;
line-height: 1.8;
}
@@ -105,13 +105,13 @@
.setup-nav-item {
width: 100%;
padding: 14px 14px 14px 12px;
border: 1px solid rgba(110, 231, 183, 0.12);
border: 1px solid rgba(var(--theme-primary-rgb), 0.14);
border-radius: 8px;
display: grid;
grid-template-columns: 44px minmax(0, 1fr) 18px;
align-items: center;
gap: 12px;
background: linear-gradient(160deg, rgba(10, 23, 18, 0.82), rgba(15, 39, 31, 0.72));
background: linear-gradient(160deg, rgba(10, 18, 27, 0.82), rgba(16, 31, 43, 0.72));
color: inherit;
text-align: left;
transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
@@ -119,16 +119,16 @@
.setup-nav-item:hover {
transform: translateY(-1px);
border-color: rgba(110, 231, 183, 0.22);
border-color: rgba(var(--theme-primary-rgb), 0.28);
}
.setup-nav-item.is-active {
border-color: rgba(16, 185, 129, 0.4);
border-color: rgba(var(--theme-primary-rgb), 0.4);
box-shadow: 0 14px 28px rgba(3, 10, 7, 0.22);
}
.setup-nav-item.is-complete {
background: linear-gradient(160deg, rgba(8, 31, 23, 0.96), rgba(12, 58, 44, 0.86));
background: linear-gradient(160deg, rgba(10, 25, 36, 0.96), rgba(20, 50, 68, 0.86));
}
.setup-nav-index {
@@ -138,8 +138,8 @@
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(16, 185, 129, 0.16);
color: #d1fae5;
background: rgba(var(--theme-primary-rgb), 0.16);
color: var(--theme-primary-soft-strong);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
@@ -151,12 +151,12 @@
}
.setup-nav-copy strong {
color: #f0fdf4;
color: var(--theme-primary-soft);
font-size: 14px;
}
.setup-nav-copy small {
color: rgba(209, 250, 229, 0.72);
color: color-mix(in srgb, var(--theme-primary-soft) 72%, transparent);
font-size: 12px;
line-height: 1.55;
}
@@ -175,13 +175,13 @@
}
.setup-progress strong {
color: #f0fdf4;
color: var(--theme-primary-soft);
font-size: 15px;
}
.setup-progress p {
margin-top: 8px;
color: rgba(209, 250, 229, 0.72);
color: color-mix(in srgb, var(--theme-primary-soft) 72%, transparent);
font-size: 13px;
line-height: 1.65;
}
@@ -195,7 +195,7 @@
}
.setup-complete p {
color: rgba(209, 250, 229, 0.76);
color: color-mix(in srgb, var(--theme-primary-soft) 76%, transparent);
font-size: 13px;
line-height: 1.6;
}
@@ -208,7 +208,7 @@
display: flex;
align-items: center;
gap: 8px;
color: rgba(209, 250, 229, 0.86);
color: color-mix(in srgb, var(--theme-primary-soft) 86%, transparent);
font-size: 13px;
line-height: 1.5;
}
@@ -219,7 +219,7 @@
align-content: start;
gap: 24px;
background:
radial-gradient(circle at top left, rgba(16, 185, 129, 0.08), transparent 16rem),
radial-gradient(circle at top left, rgba(var(--theme-primary-rgb), 0.08), transparent 16rem),
linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
}
@@ -229,7 +229,7 @@
align-items: flex-start;
gap: 16px;
padding: 20px 22px;
border: 1px solid rgba(16, 185, 129, 0.14);
border: 1px solid rgba(var(--theme-primary-rgb), 0.14);
border-radius: 8px;
background: linear-gradient(135deg, #063b2e, #0f5f49);
box-shadow: 0 16px 34px rgba(6, 59, 46, 0.16);
@@ -253,20 +253,20 @@
min-height: 32px;
padding: 0 12px;
border-radius: 999px;
background: rgba(240, 253, 244, 0.14);
color: #d1fae5;
background: rgba(255, 255, 255, 0.12);
color: var(--theme-primary-soft-strong);
font-size: 12px;
font-weight: 700;
border: 1px solid rgba(209, 250, 229, 0.18);
border: 1px solid color-mix(in srgb, var(--theme-primary-soft) 18%, transparent);
}
.setup-chip.is-success {
background: rgba(16, 185, 129, 0.22);
background: rgba(var(--theme-primary-rgb), 0.22);
}
.setup-form {
padding: 30px 32px;
border: 1px solid rgba(16, 185, 129, 0.18);
border: 1px solid rgba(var(--theme-primary-rgb), 0.18);
border-radius: 8px;
background: linear-gradient(180deg, rgba(244, 255, 248, 0.98), rgba(255, 255, 255, 0.94));
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
@@ -329,7 +329,7 @@
.optional-block {
padding: 18px 18px 0;
border: 1px dashed rgba(16, 185, 129, 0.22);
border: 1px dashed rgba(var(--theme-primary-rgb), 0.22);
border-radius: 8px;
background: rgba(240, 253, 244, 0.52);
}
@@ -353,8 +353,8 @@
border-radius: 999px;
display: inline-flex;
align-items: center;
background: rgba(16, 185, 129, 0.12);
color: #047857;
background: rgba(var(--theme-primary-rgb), 0.12);
color: var(--theme-primary-active);
font-size: 12px;
font-weight: 700;
}
@@ -375,8 +375,8 @@
}
.field input:focus {
border-color: #10b981;
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
border-color: var(--theme-primary);
box-shadow: 0 0 0 4px var(--theme-focus-ring);
}
.field-span-2 {
@@ -406,7 +406,7 @@
inset: 0 auto auto 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, rgba(209, 250, 229, 0.92), rgba(16, 185, 129, 0.48));
background: linear-gradient(90deg, color-mix(in srgb, var(--theme-primary-soft) 92%, transparent), rgba(var(--theme-primary-rgb), 0.48));
}
.setup-runtime article:nth-child(1) {
@@ -452,11 +452,11 @@
white-space: pre-line;
}
.setup-status.is-success {
border: 1px solid rgba(16, 185, 129, 0.18);
background: #ecfdf5;
color: #047857;
}
.setup-status.is-success {
border: 1px solid rgba(var(--theme-primary-rgb), 0.18);
background: var(--success-soft);
color: var(--success-active);
}
.setup-status.is-danger {
border: 1px solid rgba(239, 68, 68, 0.18);
@@ -502,19 +502,19 @@
}
.primary-btn {
background: linear-gradient(135deg, #10b981, #0f766e);
background: var(--theme-gradient-primary);
color: #fff;
box-shadow: 0 14px 28px rgba(16, 185, 129, 0.24);
box-shadow: 0 14px 28px rgba(var(--theme-primary-rgb), 0.24);
}
.secondary-btn {
background: rgba(240, 253, 244, 0.94);
color: #1f4f41;
border-color: rgba(16, 185, 129, 0.18);
border-color: rgba(var(--theme-primary-rgb), 0.18);
}
.secondary-btn-strong {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(5, 150, 105, 0.12));
background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.14), rgba(var(--theme-primary-rgb), 0.12));
color: #065f46;
}
@@ -553,7 +553,7 @@
grid-template-rows: auto minmax(0, 1fr);
gap: 20px;
background:
radial-gradient(circle at top right, rgba(16, 185, 129, 0.16), transparent 18rem),
radial-gradient(circle at top right, rgba(var(--theme-primary-rgb), 0.16), transparent 18rem),
linear-gradient(180deg, #05251d 0%, #081611 100%);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.42);
}
@@ -574,7 +574,7 @@
.setup-startup-head span {
display: block;
margin-top: 8px;
color: rgba(209, 250, 229, 0.78);
color: color-mix(in srgb, var(--theme-primary-soft) 78%, transparent);
font-size: 13px;
line-height: 1.6;
}
@@ -628,7 +628,7 @@
.setup-startup-step .pi {
margin-top: 2px;
color: rgba(209, 250, 229, 0.46);
color: color-mix(in srgb, var(--theme-primary-soft) 46%, transparent);
}
.setup-startup-step strong {
@@ -639,7 +639,7 @@
.setup-startup-step span {
display: block;
margin-top: 4px;
color: rgba(209, 250, 229, 0.68);
color: color-mix(in srgb, var(--theme-primary-soft) 68%, transparent);
font-size: 12px;
line-height: 1.5;
}
@@ -653,11 +653,11 @@
}
.setup-startup-step.is-success {
border-color: rgba(16, 185, 129, 0.32);
border-color: rgba(var(--theme-primary-rgb), 0.32);
}
.setup-startup-step.is-success .pi {
color: #34d399;
color: var(--theme-primary-light-5);
}
.setup-startup-step.is-error {
@@ -714,7 +714,7 @@
.setup-page {
grid-template-columns: 1fr;
background:
radial-gradient(circle at top right, rgba(16, 185, 129, 0.2), transparent 22rem),
radial-gradient(circle at top right, rgba(var(--theme-primary-rgb), 0.2), transparent 22rem),
linear-gradient(180deg, #04110d 0%, #10281f 36%, #eef5f1 36%, #f6fbf8 100%);
}

108
web/src/assets/styles/views/travel-reimbursement-create-view-part2.css
View File

@@ -35,8 +35,8 @@
}
.travel-calculator-field input:focus {
border-color: rgba(59, 130, 246, 0.46);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.46);
box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.1);
outline: none;
}
@@ -145,7 +145,7 @@
.composer-date-apply-btn {
border: 0;
background: linear-gradient(135deg, #22c55e, #10b981);
background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-active));
color: #fff;
}
@@ -182,9 +182,9 @@
min-height: 28px;
padding: 0 8px 0 10px;
border-radius: 999px;
border: 1px solid rgba(59, 130, 246, 0.28);
background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(16, 185, 129, 0.12));
color: #1d4ed8;
border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.28);
background: linear-gradient(135deg, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.14), rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08));
color: var(--theme-primary-active);
font-size: 11px;
font-weight: 800;
flex: none;
@@ -192,7 +192,7 @@
.composer-biz-time-tag i {
font-size: 14px;
color: #2563eb;
color: var(--theme-primary);
}
.composer-biz-time-tag-label {
@@ -422,10 +422,10 @@
}
.send-btn {
background: linear-gradient(135deg, #22c55e, #10b981);
background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-active));
color: #fff;
font-size: var(--wb-fs-tool-icon);
box-shadow: 0 8px 18px rgba(16, 185, 129, 0.18);
box-shadow: 0 8px 18px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.18);
}
.send-btn:disabled {
@@ -468,8 +468,8 @@
height: 150px;
border-radius: 0 0 0 140px;
background:
radial-gradient(circle at 0 100%, rgba(16, 185, 129, 0.14), transparent 54%),
linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(96, 165, 250, 0.06));
radial-gradient(circle at 0 100%, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.14), transparent 54%),
linear-gradient(135deg, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.14), rgba(96, 165, 250, 0.06));
opacity: 0.9;
pointer-events: none;
}
@@ -502,11 +502,11 @@
align-items: center;
padding: 0 10px;
border-radius: 999px;
background: rgba(240, 253, 244, 0.95);
color: #059669;
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
font-size: 11px;
font-weight: 800;
border: 1px solid rgba(16, 185, 129, 0.12);
border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.16);
}
.review-insight-title-row {
@@ -617,8 +617,8 @@
}
.intent-pill.draft {
background: #ecfdf5;
color: #059669;
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
}
.intent-pill.approval {
@@ -719,7 +719,7 @@
}
.review-side-intent-row i {
color: #059669;
color: var(--theme-primary);
font-size: 16px;
}
@@ -765,9 +765,9 @@
.review-side-metric-card.editable:hover,
.review-side-metric-card.editing {
border-color: rgba(16, 185, 129, 0.34);
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.34);
background: #ffffff;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.08);
box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08);
transform: translateY(-1px);
}
@@ -786,9 +786,9 @@
.review-side-metric-card.editable:hover .review-side-metric-icon,
.review-side-metric-card.editing .review-side-metric-icon {
color: #059669;
border-color: rgba(16, 185, 129, 0.22);
background: #ecfdf5;
color: var(--theme-primary);
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.22);
background: var(--theme-primary-soft);
}
.review-side-metric-card.invalid .review-side-metric-icon {
@@ -820,7 +820,7 @@
width: 100%;
min-height: 34px;
padding: 0 10px;
border: 1px solid rgba(16, 185, 129, 0.2);
border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.2);
border-radius: 10px;
background: rgba(255, 255, 255, 0.96);
color: #0f172a;
@@ -844,8 +844,8 @@
.review-inline-input:focus {
outline: none;
border-color: rgba(16, 185, 129, 0.42);
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.08);
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.42);
box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08);
}
.review-inline-select-list {
@@ -869,9 +869,9 @@
}
.review-inline-select-option.active {
border-color: rgba(16, 185, 129, 0.36);
background: rgba(240, 253, 244, 0.94);
color: #047857;
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.36);
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
}
.review-inline-error {
@@ -900,7 +900,7 @@
}
.review-side-edit-hint.upload {
color: #059669;
color: var(--theme-primary-active);
}
.review-side-metric-card:hover .review-side-edit-hint,
@@ -935,7 +935,7 @@
}
.review-side-confidence {
color: #10b981;
color: var(--success);
font-size: 12px;
font-weight: 900;
}
@@ -961,9 +961,9 @@
}
.review-side-category-card.active {
border-color: rgba(52, 211, 153, 0.62);
background: rgba(240, 253, 244, 0.9);
box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.08);
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.5);
background: var(--theme-primary-soft);
box-shadow: inset 0 0 0 1px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08);
}
.review-side-category-copy {
@@ -988,7 +988,7 @@
}
.review-side-group-check {
color: #10b981;
color: var(--theme-primary);
font-size: 18px;
}
@@ -1014,9 +1014,9 @@
}
.review-other-category-option.active {
border-color: rgba(16, 185, 129, 0.36);
background: rgba(240, 253, 244, 0.94);
color: #047857;
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.36);
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
}
.review-side-risk-card {
@@ -1064,8 +1064,8 @@
display: grid;
place-items: center;
border-radius: 10px;
background: rgba(14, 165, 233, 0.12);
color: #0284c7;
background: rgba(58, 124, 165, 0.12);
color: #2f6d95;
font-size: 16px;
}
@@ -1080,8 +1080,8 @@
}
.review-side-risk-item.low .review-side-risk-icon {
background: rgba(14, 165, 233, 0.12);
color: #0284c7;
background: rgba(58, 124, 165, 0.12);
color: #2f6d95;
}
.review-side-risk-copy {
@@ -1121,7 +1121,7 @@
padding: 0;
border: 0;
background: transparent;
color: #059669;
color: var(--theme-primary-active);
font-size: 12px;
font-weight: 850;
}
@@ -1173,10 +1173,10 @@
align-items: center;
gap: 6px;
padding: 0 14px;
border: 1px solid rgba(16, 185, 129, 0.22);
border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.22);
border-radius: 999px;
background: rgba(255, 255, 255, 0.94);
color: #059669;
color: var(--theme-primary-active);
font-size: 12px;
font-weight: 850;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
@@ -1270,8 +1270,8 @@
align-items: center;
padding: 0 10px;
border-radius: 999px;
background: rgba(236, 253, 245, 0.92);
color: #059669;
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
font-size: 11px;
font-weight: 850;
}
@@ -1296,9 +1296,9 @@
}
.review-document-meta-chip.confidence {
background: rgba(236, 253, 245, 0.92);
color: #047857;
border-color: rgba(167, 243, 208, 0.92);
background: var(--success-soft);
color: var(--success);
border-color: color-mix(in srgb, var(--success) 28%, transparent);
}
.review-document-scroll {
@@ -1404,8 +1404,8 @@
.review-document-edit-field input:focus,
.review-document-edit-field textarea:focus {
outline: none;
border-color: rgba(16, 185, 129, 0.36);
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.08);
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.36);
box-shadow: 0 0 0 4px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08);
}
.review-document-edit-field textarea {
@@ -1482,8 +1482,8 @@
}
.knowledge-question-btn:hover:not(:disabled) {
border-color: rgba(16, 185, 129, 0.3);
background: rgba(240, 253, 244, 0.9);
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.3);
background: var(--theme-primary-soft);
transform: translateY(-1px);
}
@@ -1495,7 +1495,7 @@
.knowledge-question-btn i {
justify-self: end;
color: #059669;
color: var(--theme-primary);
font-size: 16px;
}

53
web/src/assets/styles/views/travel-reimbursement-create-view-part3.css
View File

@@ -24,8 +24,8 @@
}
.status-pill.success {
background: #ecfdf5;
color: #059669;
background: var(--success-soft);
color: var(--success);
}
.status-pill.warning {
@@ -94,9 +94,12 @@
background: #cbd5e1;
}
.timeline-list li.done .timeline-dot,
.timeline-list li.done .timeline-dot {
background: var(--success);
}
.timeline-list li.current .timeline-dot {
background: #10b981;
background: var(--theme-primary);
}
.timeline-list strong {
@@ -347,8 +350,8 @@
background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(251, 248, 243, 0.82) 100%);
}
/* 已删除：review-alert-chip-row 相关样式（冗余气泡） */
/* 已删除：主对话框中的风险提示（与右侧边栏重复，已移除） */
/* 已删除 review-alert-chip-row 相关冗余样式 */
/* 已删除主对话框中的风险提示，避免与右侧栏重复 */
/* 风险提示样式已统一到 review-pending-item */
.review-risk-brief-list {
@@ -402,12 +405,12 @@
display: grid;
place-items: center;
border-radius: 10px;
background: rgba(236, 253, 245, 0.95);
color: #059669;
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
font-size: 16px;
}
/* 风险级别的图标样式（已删除主对话框中的风险提示，保留样式备用） */
/* 风险级别图标样式保留备用 */
.review-pending-icon.high {
background: rgba(254, 226, 226, 0.95);
color: #dc2626;
@@ -473,9 +476,9 @@
}
.review-pending-status.ready {
background: rgba(240, 253, 244, 0.96);
color: #059669;
border: 1px solid #86efac;
background: var(--success-soft);
color: var(--success);
border: 1px solid color-mix(in srgb, var(--success) 28%, transparent);
}
.review-footer-actions {
@@ -507,10 +510,10 @@
}
.review-footer-btn.primary {
border-color: rgba(16, 185, 129, 0.26);
background: linear-gradient(135deg, #10b981, #059669);
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.26);
background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-active));
color: #fff;
box-shadow: 0 6px 14px rgba(16, 185, 129, 0.16);
box-shadow: 0 6px 14px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.16);
}
.review-footer-btn:disabled {
@@ -555,10 +558,10 @@
.review-inline-btn.primary,
.primary-dialog-btn {
border: 1px solid rgba(16, 185, 129, 0.22);
background: linear-gradient(135deg, #10b981, #059669);
border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.22);
background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-active));
color: #fff;
box-shadow: 0 10px 22px rgba(16, 185, 129, 0.18);
box-shadow: 0 10px 22px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.18);
}
.review-inline-btn.secondary,
@@ -593,7 +596,7 @@
.review-inline-guidance {
margin: 0;
color: #0f766e;
color: var(--theme-primary-active);
font-size: 12px;
line-height: 1.7;
}
@@ -608,8 +611,8 @@
}
.review-status-banner.ready {
border-color: #bbf7d0;
background: linear-gradient(180deg, #f5fffa 0%, #ecfdf5 100%);
border-color: color-mix(in srgb, var(--success) 28%, transparent);
background: linear-gradient(180deg, #ffffff 0%, var(--success-soft) 100%);
}
.review-status-banner.pending {
@@ -921,8 +924,8 @@
}
.action-card.primary {
border-color: #bbf7d0;
background: #f0fdf4;
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.28);
background: var(--theme-primary-soft);
}
.action-card.secondary {
@@ -987,7 +990,7 @@
}
.recognition-bubble-label {
color: #0f766e;
color: var(--theme-primary-active);
font-size: 11px;
font-weight: 850;
letter-spacing: 0.02em;
@@ -1064,7 +1067,7 @@
width: min(720px, calc(100vw - 40px));
border-radius: 24px;
background:
radial-gradient(circle at top right, rgba(16, 185, 129, 0.08), transparent 28%),
radial-gradient(circle at top right, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08), transparent 28%),
linear-gradient(180deg, #fbfdff 0%, #f6f9fc 100%);
box-shadow:
0 24px 80px rgba(15, 23, 42, 0.22),

38
web/src/assets/styles/views/travel-reimbursement-create-view-part4.css
View File

@@ -14,7 +14,7 @@
overflow: hidden;
border-radius: 24px;
background:
radial-gradient(circle at top right, rgba(16, 185, 129, 0.08), transparent 28%),
radial-gradient(circle at top right, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08), transparent 28%),
linear-gradient(180deg, #fbfdff 0%, #f6f9fc 100%);
box-shadow:
0 24px 80px rgba(15, 23, 42, 0.22),
@@ -109,14 +109,14 @@
.welcome-quick-action-btn:hover:not(:disabled) {
transform: translateY(-1px);
border-color: #10b981;
background: #ecfdf5;
color: #059669;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1);
border-color: var(--theme-primary);
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.1);
}
.welcome-quick-action-btn:hover:not(:disabled) i {
color: #059669;
color: var(--theme-primary-active);
}
.welcome-quick-action-btn:disabled {
@@ -136,7 +136,7 @@
}
.welcome-card i {
color: #10b981;
color: var(--theme-primary);
font-size: var(--wb-fs-welcome);
}
@@ -177,7 +177,7 @@
transform: translateY(8px);
}
/* 笔记本 / 中等屏：工作台正文字号整体下调一档 */
/* 笔记本和中等屏：工作台正文字号整体下调一档 */
@media (max-width: 1680px) {
.assistant-modal-stage {
--wb-fs-title: 19px;
@@ -226,7 +226,7 @@
}
}
/* 大屏：左右分栏；右侧详情区宽度随视口收缩 */
/* 大屏：左右分栏，右侧详情区宽度随视口收缩 */
@media (min-width: 1441px) and (max-width: 1680px) {
.insight-panel-shell {
width: clamp(280px, 26vw, 360px);
@@ -272,7 +272,7 @@
}
}
/* 矮屏笔记本（如 1366×768）：压缩顶栏与间距，把高度留给对话列表 */
/* 矮屏笔记本：压缩顶部栏与间距，把高度留给对话列表 */
@media (max-height: 820px) {
.assistant-modal-stage {
--wb-fs-title: 17px;
@@ -386,24 +386,6 @@
padding: 16px;
}
.message-row,
.message-row.user {
grid-template-columns: 34px minmax(0, 1fr);
}
.message-row.user .message-avatar {
order: 0;
}
.message-row.user .message-bubble {
order: 0;
justify-self: stretch;
}
.message-suggested-actions {
grid-template-columns: 1fr;
}
.composer {
padding: 0 16px 16px;
}

137
web/src/assets/styles/views/travel-reimbursement-create-view.css
View File

@@ -1,5 +1,5 @@
.assistant-overlay {
/* 距屏幕边 10–18px，随视口微调；高度用 dvh 适配笔记本浏览器工具栏 */
/* 距屏幕边缘 10-18px，随视口微调；高度使用 dvh 适配浏览器工具栏 */
--assistant-viewport-inset: clamp(10px, 1.25vmin, 18px);
position: fixed;
inset: 0;
@@ -13,11 +13,10 @@
padding: var(--assistant-viewport-inset);
box-sizing: border-box;
background:
radial-gradient(circle at 18% 14%, rgba(16, 185, 129, 0.18), transparent 24%),
radial-gradient(circle at 82% 12%, rgba(59, 130, 246, 0.12), transparent 28%),
rgba(97, 110, 131, 0.34);
backdrop-filter: blur(18px) saturate(1.02);
-webkit-backdrop-filter: blur(18px) saturate(1.02);
linear-gradient(180deg, rgba(239, 246, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%),
rgba(241, 245, 249, 0.98);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.assistant-modal {
@@ -39,7 +38,7 @@
}
.assistant-modal-stage {
/* 工作台字号令牌：笔记本断点见文末 @media */
/* 工作台字号令牌：笔记本断点见后续 media */
--wb-fs-title: 22px;
--wb-fs-desc: 13px;
--wb-fs-badge: 12px;
@@ -70,14 +69,12 @@
transform: none;
border-radius: 24px;
background:
radial-gradient(circle at top right, rgba(16, 185, 129, 0.14), transparent 26%),
radial-gradient(circle at top left, rgba(59, 130, 246, 0.10), transparent 24%),
linear-gradient(180deg, rgba(241, 246, 245, 0.92) 0%, rgba(230, 237, 235, 0.88) 100%);
linear-gradient(180deg, #f8fbff 0%, #edf5ff 100%);
box-shadow:
0 28px 72px rgba(15, 23, 42, 0.22),
0 10px 28px rgba(15, 23, 42, 0.09),
inset 0 1px 0 rgba(255, 255, 255, 0.42);
border: 1px solid rgba(255, 255, 255, 0.44);
border: 1px solid rgba(191, 219, 254, 0.88);
background-clip: padding-box;
overflow: hidden;
isolation: isolate;
@@ -108,11 +105,11 @@
justify-content: center;
padding: 0 14px;
border-radius: 999px;
background: linear-gradient(135deg, #22c55e, #10b981);
background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-active));
color: #fff;
font-size: var(--wb-fs-badge);
font-weight: 800;
box-shadow: 0 8px 16px rgba(16, 185, 129, 0.14);
box-shadow: 0 8px 16px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.14);
white-space: nowrap;
}
@@ -160,16 +157,16 @@
}
.assistant-toggle-btn {
border-color: rgba(16, 185, 129, 0.18);
background: rgba(245, 252, 249, 0.96);
color: #166534;
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.18);
background: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08);
color: var(--theme-primary-active);
font-size: 16px;
box-shadow: 0 8px 18px rgba(16, 185, 129, 0.1);
box-shadow: 0 8px 18px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.1);
}
.assistant-toggle-btn:hover:not(:disabled) {
background: rgba(236, 253, 245, 0.98);
border-color: rgba(16, 185, 129, 0.28);
background: var(--theme-primary-soft);
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.28);
}
.assistant-toggle-btn:disabled,
@@ -254,8 +251,8 @@
}
.flow-status-chip.completed {
background: #ecfdf5;
color: #059669;
background: var(--success-soft);
color: var(--success);
}
.flow-status-chip.failed {
@@ -337,7 +334,7 @@
}
.flow-step-item.completed .flow-step-rail span {
background: #10b981;
background: var(--success);
color: #fff;
}
@@ -405,13 +402,13 @@
}
.flow-step-status.completed {
background: #ecfdf5;
color: #059669;
background: var(--success-soft);
color: var(--success);
}
.flow-step-status.running {
background: #eff6ff;
color: #2563eb;
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
}
.flow-step-status.failed {
@@ -497,13 +494,13 @@
min-width: 0;
min-height: 0;
border: 1px solid rgba(189, 201, 214, 0.74);
border-radius: 24px;
background: rgba(248, 251, 251, 0.84);
border-radius: 16px;
background: #ffffff;
box-shadow:
0 14px 32px rgba(148, 163, 184, 0.16),
0 2px 6px rgba(15, 23, 42, 0.05);
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.dialog-panel {
@@ -512,8 +509,7 @@
grid-template-rows: auto minmax(0, 1fr) auto;
overflow: hidden;
background:
radial-gradient(circle at top right, rgba(59, 130, 246, 0.07), transparent 22%),
linear-gradient(180deg, rgba(252, 253, 253, 0.88) 0%, rgba(243, 247, 248, 0.84) 100%);
linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
transition:
transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1);
@@ -564,18 +560,18 @@
}
.shortcut-chip i {
color: #059669;
color: var(--theme-primary);
}
.shortcut-chip.active {
border-color: rgba(5, 150, 105, 0.38);
background: rgba(16, 185, 129, 0.1);
color: #047857;
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.38);
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
box-shadow: none;
}
.shortcut-chip.active i {
color: #047857;
color: var(--theme-primary-active);
}
.shortcut-chip:disabled {
@@ -593,17 +589,6 @@
overflow-y: auto;
}
.message-row {
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
align-items: start;
gap: 12px;
}
.message-row.user {
grid-template-columns: minmax(0, 1fr) 38px;
}
.message-row.user .message-avatar {
order: 2;
background: transparent;
@@ -850,13 +835,13 @@
}
.application-preview-row.highlight .application-preview-label {
background: #f0fdf4;
color: #047857;
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
}
.application-preview-row.highlight .application-preview-value {
background: #f7fee7;
color: #166534;
background: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08);
color: var(--theme-primary-active);
font-weight: 780;
}
@@ -1138,9 +1123,9 @@
place-items: center;
border-radius: 10px;
background: #f1f5f9;
color: #0f766e;
color: var(--theme-primary-active);
font-size: 18px;
box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.08);
box-shadow: inset 0 0 0 1px rgba(var(--theme-primary-rgb), 0.08);
}
.message-suggested-action-copy {
@@ -1171,7 +1156,7 @@
}
.message-suggested-action-btn:hover:not(:disabled) {
border-color: rgba(20, 184, 166, 0.72);
border-color: rgba(var(--theme-primary-rgb), 0.42);
background: #ffffff;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.09);
transform: translateY(-1px);
@@ -1179,35 +1164,35 @@
.message-suggested-action-btn:hover:not(:disabled) .message-suggested-action-icon,
.message-suggested-action-btn:focus-visible .message-suggested-action-icon {
background: #ccfbf1;
color: #0f766e;
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
}
.message-suggested-action-btn:hover:not(:disabled) .message-suggested-action-arrow,
.message-suggested-action-btn:focus-visible .message-suggested-action-arrow {
color: #0f766e;
color: var(--theme-primary-active);
transform: translateX(2px);
}
.message-suggested-action-btn:focus-visible {
outline: 3px solid rgba(20, 184, 166, 0.18);
outline: 3px solid var(--theme-focus-ring);
outline-offset: 2px;
border-color: #14b8a6;
border-color: var(--theme-primary);
}
.message-suggested-action-btn.selected {
border-color: rgba(13, 148, 136, 0.78);
background: #f0fdfa;
box-shadow: inset 0 0 0 1px rgba(13, 148, 136, 0.18);
border-color: rgba(var(--theme-primary-rgb), 0.52);
background: var(--theme-primary-light-9);
box-shadow: inset 0 0 0 1px var(--theme-primary-shadow);
}
.message-suggested-action-btn.selected .message-suggested-action-icon {
background: #99f6e4;
color: #115e59;
background: var(--theme-primary-soft-strong);
color: var(--theme-primary-active);
}
.message-suggested-action-btn.selected .message-suggested-action-arrow {
color: #0f766e;
color: var(--theme-primary-active);
}
.message-suggested-action-btn.locked:not(.selected) {
@@ -1268,8 +1253,8 @@
}
.message-action-chip {
background: #ecfdf5;
color: #059669;
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
}
.message-detail-block {
@@ -1376,8 +1361,8 @@
}
.expense-query-summary-chip.completed {
background: #dcfce7;
color: #15803d;
background: var(--success-soft);
color: var(--success);
}
.expense-query-summary-chip.other {
@@ -1491,8 +1476,8 @@
}
.expense-query-record-status.completed {
background: #dcfce7;
color: #15803d;
background: var(--success-soft);
color: var(--success);
}
.expense-query-record-card p {
@@ -1801,10 +1786,10 @@
}
.tool-btn.composer-side-btn.active {
border-color: rgba(59, 130, 246, 0.42);
background: rgba(239, 246, 255, 0.96);
color: #2563eb;
box-shadow: 0 6px 14px rgba(59, 130, 246, 0.14);
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.42);
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
box-shadow: 0 6px 14px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.14);
}
.composer-date-popover {

42
web/src/assets/styles/views/travel-request-detail-view-part2.css
View File

@@ -51,8 +51,8 @@
width: 6px;
height: 6px;
border-radius: 999px;
background: #10b981;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
background: var(--success);
box-shadow: 0 0 0 3px rgba(var(--success-rgb), 0.12);
}
.validation-section--risk .validation-section-title {
@@ -69,13 +69,13 @@
gap: 6px;
margin: 0;
padding: 0 0 0 18px;
color: #0f766e;
color: var(--success-hover);
font-size: 13px;
line-height: 1.55;
}
.validation-list li::marker {
color: #14b8a6;
color: var(--success);
}
.validation-section--risk .risk-advice-list {
@@ -383,7 +383,7 @@
padding: 18px;
overflow: auto;
background:
linear-gradient(180deg, rgba(240, 253, 244, .5) 0%, rgba(255, 255, 255, 0) 140px),
linear-gradient(180deg, color-mix(in srgb, var(--theme-primary-soft) 55%, transparent) 0%, rgba(255, 255, 255, 0) 140px),
#fff;
}
@@ -415,8 +415,8 @@
display: grid;
place-items: center;
border-radius: 999px;
background: #ecfdf5;
color: #059669;
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
font-size: 18px;
}
@@ -471,9 +471,9 @@
}
.ai-composer-surface:focus-within {
border-color: rgba(16, 185, 129, .58);
border-color: rgba(var(--theme-primary-rgb), .58);
background: #fff;
box-shadow: 0 0 0 3px rgba(16, 185, 129, .11), 0 10px 24px rgba(15, 23, 42, .06);
box-shadow: 0 0 0 3px var(--theme-focus-ring), 0 10px 24px rgba(15, 23, 42, .06);
}
.ai-composer textarea {
@@ -552,14 +552,14 @@
.ai-send-btn {
border: 0;
background: #10b981;
background: var(--theme-primary);
color: #fff;
box-shadow: 0 8px 18px rgba(16, 185, 129, .20);
box-shadow: 0 8px 18px var(--theme-primary-shadow);
}
.ai-send-btn:hover {
background: #0ea672;
box-shadow: 0 10px 22px rgba(16, 185, 129, .24);
background: var(--theme-primary-active);
box-shadow: 0 10px 22px rgba(var(--theme-primary-rgb), .24);
}
.ai-upload-btn:active,
@@ -650,7 +650,7 @@
.ai-preview-empty i {
font-size: 32px;
color: #10b981;
color: var(--theme-primary);
}
.ai-preview-actions {
@@ -681,10 +681,10 @@
}
.ai-preview-primary {
border: 1px solid #059669;
background: #059669;
border: 1px solid var(--theme-primary);
background: var(--theme-primary);
color: #fff;
box-shadow: 0 8px 20px rgba(5, 150, 105, .18);
box-shadow: 0 8px 20px var(--theme-primary-shadow);
}
.ai-preview-secondary:hover {
@@ -692,7 +692,7 @@
}
.ai-preview-primary:hover {
background: #047857;
background: var(--theme-primary-active);
}
.ai-preview-secondary:disabled,
@@ -957,7 +957,7 @@
}
.validation-pill.ready {
background: #f0fdf4;
border-color: #bbf7d0;
color: #166534;
background: var(--success-soft);
border-color: var(--success-line);
color: var(--success-active);
}

156
web/src/assets/styles/views/travel-request-detail-view.css
View File

@@ -112,9 +112,9 @@
min-height: 24px;
padding: 0 9px;
border-radius: 999px;
background: #ecfdf5;
border: 1px solid rgba(16, 185, 129, .16);
color: #10b981;
background: var(--theme-primary-soft);
border: 1px solid rgba(var(--theme-primary-rgb), .16);
color: var(--theme-primary-active);
font-size: 11px;
font-weight: 800;
}
@@ -265,8 +265,8 @@
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 var(--theme-focus-ring);
}
.progress-line {
@@ -309,7 +309,7 @@
right: 0;
z-index: 0;
height: 2px;
background: #10b981;
background: var(--theme-primary);
opacity: 0;
}
@@ -346,20 +346,20 @@
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 var(--theme-focus-ring) !important;
animation: breathe-dot 3.2s ease-in-out infinite !important;
transform-origin: center !important;
}
@@ -367,11 +367,11 @@
@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 var(--theme-focus-ring);
}
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);
}
}
@@ -382,7 +382,7 @@
text-align: center;
}
.progress-step.current strong { color: #059669; }
.progress-step.current strong { color: var(--theme-primary-active); }
.progress-step-copy {
width: 100%;
@@ -414,16 +414,16 @@
}
.progress-step.done .progress-step-status {
border-color: rgba(16, 185, 129, .2);
background: #ecfdf5;
color: #047857;
border-color: rgba(var(--theme-primary-rgb), .2);
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
}
.progress-step.current .progress-step-status {
border-color: rgba(5, 150, 105, .22);
background: #059669;
border-color: rgba(var(--theme-primary-rgb), .22);
background: var(--theme-primary);
color: #fff;
box-shadow: 0 8px 18px rgba(5, 150, 105, .14);
box-shadow: 0 8px 18px var(--theme-primary-shadow);
}
.progress-step:not(.done):not(.current) .progress-step-status {
@@ -432,7 +432,7 @@
}
.progress-step.current small {
color: #059669;
color: var(--theme-primary-active);
}
.progress-step-meta {
@@ -535,14 +535,14 @@
.smart-entry-btn.secondary {
background: #fff;
color: #0f766e;
border-color: rgba(16, 185, 129, .24);
color: var(--theme-primary-active);
border-color: rgba(var(--theme-primary-rgb), .24);
}
.smart-entry-btn:hover {
border-color: rgba(16, 185, 129, .36);
background: #f0fdf4;
color: #047857;
border-color: rgba(var(--theme-primary-rgb), .36);
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
}
.detail-total {
@@ -553,8 +553,8 @@
min-height: 34px;
padding: 0 12px;
border-radius: 999px;
background: #ecfdf5;
color: #047857;
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
font-size: 14px;
font-weight: 900;
}
@@ -643,16 +643,16 @@
}
.application-detail-fact.highlight span {
background: #eefcf6;
color: #047857;
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
}
.application-detail-fact.highlight strong {
background: #f6fef9;
background: color-mix(in srgb, var(--theme-primary-soft) 55%, #ffffff);
}
.application-detail-fact.emphasis strong {
color: #047857;
color: var(--theme-primary-active);
font-weight: 850;
}
@@ -663,13 +663,13 @@
.detail-note-editor textarea {
min-height: 92px;
border-color: rgba(16, 185, 129, .28);
border-color: rgba(var(--theme-primary-rgb), .28);
background: #fff;
}
.detail-note-editor textarea:focus {
border-color: #10b981;
box-shadow: 0 0 0 3px rgba(16, 185, 129, .12);
border-color: var(--theme-primary);
box-shadow: 0 0 0 3px var(--theme-focus-ring);
outline: none;
}
@@ -692,8 +692,8 @@
}
.leader-approval-card {
border-color: rgba(5, 150, 105, .18);
background: linear-gradient(180deg, #ffffff 0%, #f7fdfb 100%);
border-color: rgba(var(--theme-primary-rgb), .18);
background: linear-gradient(180deg, #ffffff 0%, var(--theme-primary-soft) 100%);
}
.leader-approval-card textarea {
@@ -704,8 +704,8 @@
.leader-approval-card textarea:focus {
outline: 0;
border-color: rgba(5, 150, 105, .5);
box-shadow: 0 0 0 3px rgba(5, 150, 105, .1);
border-color: rgba(var(--theme-primary-rgb), .5);
box-shadow: 0 0 0 3px var(--theme-focus-ring);
}
.leader-opinion-meta {
@@ -721,7 +721,7 @@
.leader-opinion-meta strong {
flex: 0 0 auto;
color: #047857;
color: var(--theme-primary-active);
font-weight: 850;
}
@@ -758,7 +758,7 @@
}
.application-leader-opinion-head strong {
color: #047857;
color: var(--theme-primary-active);
font-weight: 800;
font-size: 14px;
}
@@ -812,12 +812,12 @@
}
.detail-expense-table tbody tr.system-generated-row td {
background: #f0fdf4;
border-bottom-color: #bbf7d0;
background: var(--success-soft);
border-bottom-color: var(--success-line);
}
.detail-expense-table tbody tr.system-generated-row:hover td {
background: #ecfdf5;
background: var(--success-soft);
}
.detail-expense-table .col-time { width: 11%; }
@@ -893,8 +893,8 @@
.editor-input:focus,
.editor-select:focus {
border-color: #10b981;
box-shadow: 0 0 0 3px rgba(16, 185, 129, .12);
border-color: var(--theme-primary);
box-shadow: 0 0 0 3px var(--theme-focus-ring);
outline: none;
}
@@ -966,8 +966,8 @@
}
.over-tag.system {
background: #dcfce7;
color: #047857;
background: var(--success-soft);
color: var(--success-hover);
}
.expense-total-under-table {
@@ -977,10 +977,10 @@
gap: 12px;
margin-top: 12px;
padding: 12px 14px;
border: 1px solid #d1fae5;
border: 1px solid rgba(var(--theme-primary-rgb), .22);
border-radius: 8px;
background: #f0fdf4;
color: #0f766e;
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
}
.expense-total-under-table span {
@@ -990,7 +990,7 @@
}
.expense-total-under-table strong {
color: #047857;
color: var(--theme-primary-active);
font-size: 17px;
font-weight: 900;
}
@@ -1050,8 +1050,8 @@
}
.attachment-recognition-pill.pass {
background: #ecfdf5;
color: #047857;
background: var(--success-soft);
color: var(--success-hover);
}
.attachment-recognition-pill.medium {
@@ -1101,9 +1101,9 @@
}
.icon-action.upload {
background: #ecfdf5;
border-color: rgba(16, 185, 129, .24);
color: #047857;
background: var(--theme-primary-soft);
border-color: rgba(var(--theme-primary-rgb), .24);
color: var(--theme-primary-active);
}
.icon-action.preview {
@@ -1133,14 +1133,14 @@
}
.inline-action.accent {
border-color: rgba(16, 185, 129, .24);
background: #ecfdf5;
color: #047857;
border-color: rgba(var(--theme-primary-rgb), .24);
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
}
.inline-action.primary {
border-color: #10b981;
background: #10b981;
border-color: var(--theme-primary);
background: var(--theme-primary);
color: #fff;
}
@@ -1151,13 +1151,13 @@
}
.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);
}
.inline-action.primary:hover {
border-color: #059669;
background: #059669;
border-color: var(--theme-primary-active);
background: var(--theme-primary-active);
color: #fff;
}
@@ -1179,8 +1179,8 @@
min-height: 28px;
padding: 0 9px;
border-radius: 8px;
background: #dcfce7;
color: #047857;
background: var(--success-soft);
color: var(--success-hover);
font-size: 11px;
font-weight: 850;
white-space: nowrap;
@@ -1194,8 +1194,8 @@
min-height: 28px;
padding: 0 9px;
border-radius: 8px;
background: #ecfdf5;
color: #047857;
background: var(--success-soft);
color: var(--success-hover);
font-size: 11px;
font-weight: 850;
white-space: nowrap;
@@ -1217,7 +1217,7 @@
}
.risk-inline-tag.pass,
.risk-inline-tag.low { background: #ecfdf5; color: #059669; }
.risk-inline-tag.low { background: var(--success-soft); color: var(--success-hover); }
.risk-inline-tag.medium { background: #fff7ed; color: #ea580c; }
.risk-inline-tag.high { background: #fef2f2; color: #dc2626; }
@@ -1248,7 +1248,7 @@
}
.risk-suggestion {
color: #0f766e;
color: var(--success-hover);
font-weight: 700;
}
@@ -1284,10 +1284,10 @@
grid-template-rows: auto minmax(0, 1fr);
gap: 14px;
padding: 22px;
border: 1px solid rgba(16, 185, 129, .14);
border: 1px solid rgba(var(--theme-primary-rgb), .14);
border-radius: 24px;
background:
radial-gradient(circle at top left, rgba(16, 185, 129, .12), transparent 36%),
radial-gradient(circle at top left, rgba(var(--theme-primary-rgb), .12), transparent 36%),
linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 252, .98));
box-shadow: 0 28px 56px rgba(15, 23, 42, .2);
}
@@ -1338,8 +1338,8 @@
min-height: 28px;
padding: 0 10px;
border-radius: 999px;
background: rgba(16, 185, 129, .12);
color: #047857;
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
font-size: 12px;
font-weight: 800;
}
@@ -1547,10 +1547,10 @@
.approve-action {
min-width: 92px;
border: 1px solid #059669;
background: #059669;
border: 1px solid var(--success);
background: var(--success);
color: #fff;
box-shadow: 0 4px 10px rgba(5, 150, 105, .14);
box-shadow: 0 4px 10px rgba(var(--success-rgb), .14);
}
.reject-action {