style: 全局 UI 主题皮肤重构与样式模块化
引入 Element Plus 主题定制和主题皮肤 composable，将全局 样式拆分为组件级独立 CSS 文件（侧边栏、顶栏、工作台等）， 统一色彩变量和间距规范，重构所有视图和组件样式以适配新 主题系统，优化图表和知识图谱组件视觉表现，提取审计和差 旅报销相关子组件。
This commit is contained in:
caoxiaozhu
@@ -1,8 +1,8 @@
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="headerGradient" x1="12" y1="10" x2="54" y2="56" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#34D399"/>
|
||||
<stop offset="1" stop-color="#059669"/>
|
||||
<stop stop-color="#6FA6C8"/>
|
||||
<stop offset="1" stop-color="#3A7CA5"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle cx="32" cy="32" r="32" fill="url(#headerGradient)"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 742 B After Width: | Height: | Size: 742 B |
@@ -15,9 +15,9 @@
|
||||
}
|
||||
|
||||
.app {
|
||||
--sidebar-expanded-width: 220px;
|
||||
--sidebar-expanded-width: 184px;
|
||||
--sidebar-collapsed-width: 64px;
|
||||
--sidebar-motion: 320ms cubic-bezier(0.22, 1, 0.36, 1);
|
||||
--sidebar-motion: 220ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
height: var(--desktop-stage-height, 100dvh);
|
||||
min-height: var(--desktop-stage-height, 100dvh);
|
||||
@@ -27,18 +27,23 @@
|
||||
}
|
||||
|
||||
.app-sidebar {
|
||||
flex: 0 0 auto;
|
||||
flex: 0 0 var(--sidebar-expanded-width);
|
||||
width: var(--sidebar-expanded-width);
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
will-change: width;
|
||||
transition: width var(--sidebar-motion);
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
z-index: 200;
|
||||
will-change: width, flex-basis;
|
||||
transition:
|
||||
width var(--sidebar-motion),
|
||||
flex-basis var(--sidebar-motion),
|
||||
box-shadow 160ms var(--ease);
|
||||
}
|
||||
|
||||
.app.sidebar-collapsed .app-sidebar {
|
||||
flex-basis: var(--sidebar-collapsed-width);
|
||||
width: var(--sidebar-collapsed-width);
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
@@ -58,7 +63,7 @@
|
||||
place-items: center;
|
||||
padding: 24px;
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(16, 185, 129, 0.16), transparent 24rem),
|
||||
radial-gradient(circle at top left, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.14), transparent 24rem),
|
||||
radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.14), transparent 28rem),
|
||||
#f8fafc;
|
||||
}
|
||||
@@ -89,9 +94,9 @@
|
||||
min-height: 28px;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(16, 185, 129, 0.12);
|
||||
color: #059669;
|
||||
border-radius: 4px;
|
||||
background: var(--theme-primary-soft);
|
||||
color: var(--theme-primary-active);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.12em;
|
||||
@@ -173,18 +178,30 @@
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.app {
|
||||
display: block;
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-sidebar {
|
||||
width: 100%;
|
||||
width: var(--sidebar-collapsed-width);
|
||||
flex: 0 0 var(--sidebar-collapsed-width);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.app > .main {
|
||||
flex: 1 1 auto;
|
||||
width: calc(100vw - var(--sidebar-collapsed-width));
|
||||
}
|
||||
|
||||
.workarea { padding: 18px 16px 28px; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.app-sidebar {
|
||||
transition: none;
|
||||
transition:
|
||||
width 120ms ease-out !important,
|
||||
flex-basis 120ms ease-out !important;
|
||||
transition-duration: 120ms, 120ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
.application-dialog-eyebrow {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
color: #059669;
|
||||
color: var(--theme-primary-active);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
@@ -106,8 +106,8 @@
|
||||
}
|
||||
|
||||
.application-input-panel textarea:focus {
|
||||
border-color: #10b981;
|
||||
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
|
||||
border-color: var(--theme-primary);
|
||||
box-shadow: 0 0 0 3px var(--theme-focus-ring);
|
||||
}
|
||||
|
||||
.application-example-row {
|
||||
@@ -144,7 +144,7 @@
|
||||
.primary-parse-btn,
|
||||
.confirm-btn {
|
||||
border: 0;
|
||||
background: #059669;
|
||||
background: var(--theme-gradient-primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@@ -181,7 +181,7 @@
|
||||
}
|
||||
|
||||
.ontology-panel-head strong {
|
||||
color: #059669;
|
||||
color: var(--theme-primary-active);
|
||||
}
|
||||
|
||||
.ontology-empty-state {
|
||||
@@ -215,8 +215,8 @@
|
||||
|
||||
.ontology-chip {
|
||||
border-radius: 8px;
|
||||
background: #eefbf5;
|
||||
color: #047857;
|
||||
background: var(--theme-primary-soft);
|
||||
color: var(--theme-primary-active);
|
||||
padding: 6px 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
@@ -269,7 +269,7 @@
|
||||
|
||||
.application-policy-strip i {
|
||||
margin-top: 2px;
|
||||
color: #059669;
|
||||
color: var(--theme-primary);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
||||
705
web/src/assets/styles/components/personal-workbench.css
Normal file
705
web/src/assets/styles/components/personal-workbench.css
Normal file
@@ -0,0 +1,705 @@
|
||||
.workbench {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.assistant-hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-columns: 228px minmax(0, 1fr);
|
||||
gap: 18px;
|
||||
padding: 20px 24px 20px 18px;
|
||||
border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.18);
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.12), transparent 34%),
|
||||
radial-gradient(circle at right 20%, rgba(59, 130, 246, 0.07), transparent 28%),
|
||||
linear-gradient(135deg, #f7fbff 0%, #ffffff 48%, #f5fbff 100%);
|
||||
}
|
||||
|
||||
.assistant-hero::before,
|
||||
.assistant-hero::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-radius: 999px;
|
||||
background: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.06);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.assistant-hero::before {
|
||||
right: -48px;
|
||||
bottom: -58px;
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.assistant-hero::after {
|
||||
right: 92px;
|
||||
top: -44px;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
.assistant-visual {
|
||||
position: relative;
|
||||
min-height: 196px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-start;
|
||||
padding: 0 0 10px 8px;
|
||||
}
|
||||
|
||||
.assistant-visual::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: auto auto -78px -58px;
|
||||
width: 264px;
|
||||
height: 228px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle at 48% 38%, rgba(255, 255, 255, 0.92) 0%, rgba(224, 242, 254, 0.84) 58%, rgba(224, 242, 254, 0) 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.assistant-visual::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 52px;
|
||||
bottom: 18px;
|
||||
width: 132px;
|
||||
height: 18px;
|
||||
border-radius: 999px;
|
||||
background: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.14);
|
||||
filter: blur(12px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.assistant-glow {
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
bottom: 22px;
|
||||
width: 176px;
|
||||
height: 176px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.98) 0%, rgba(224, 242, 254, 0.9) 58%, rgba(224, 242, 254, 0) 100%);
|
||||
box-shadow: 0 24px 48px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.12);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.assistant-image {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 184px;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
object-position: left bottom;
|
||||
filter: drop-shadow(0 22px 28px rgba(15, 23, 42, 0.16));
|
||||
}
|
||||
|
||||
.assistant-copy {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.assistant-copy h3 {
|
||||
color: #0f172a;
|
||||
font-size: 26px;
|
||||
line-height: 1.25;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.assistant-copy p {
|
||||
max-width: 760px;
|
||||
color: #5b6b83;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.assistant-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 48px;
|
||||
padding: 4px 14px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.28);
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.assistant-file-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.assistant-input textarea {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
height: 22px;
|
||||
min-height: 22px;
|
||||
max-height: 22px;
|
||||
resize: none;
|
||||
border: 0;
|
||||
padding: 1px 0;
|
||||
background: transparent;
|
||||
color: #0f172a;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.assistant-input textarea::placeholder {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.assistant-input textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.hero-action,
|
||||
.secondary-action,
|
||||
.ghost-action,
|
||||
.row-action,
|
||||
.link-action,
|
||||
.row-link {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.hero-action {
|
||||
height: 40px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 0 16px;
|
||||
border-radius: 4px;
|
||||
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 22px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.18);
|
||||
}
|
||||
|
||||
.hero-action .mdi,
|
||||
.secondary-action .mdi,
|
||||
.ghost-action .mdi {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.hero-action span,
|
||||
.secondary-action span,
|
||||
.ghost-action span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.assistant-tools {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.assistant-file-strip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.assistant-file-note,
|
||||
.assistant-file-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 30px;
|
||||
padding: 0 12px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.assistant-file-note {
|
||||
background: var(--theme-primary-soft);
|
||||
color: var(--theme-primary-active);
|
||||
}
|
||||
|
||||
.assistant-file-chip {
|
||||
max-width: 220px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
border: 1px solid rgba(148, 163, 184, 0.24);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.assistant-file-clear {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ghost-action {
|
||||
height: 40px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 0 16px;
|
||||
border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.22);
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.92));
|
||||
color: var(--theme-primary-active);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.9),
|
||||
0 6px 14px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08);
|
||||
}
|
||||
|
||||
.ghost-action .mdi {
|
||||
color: var(--theme-primary);
|
||||
}
|
||||
|
||||
.secondary-action {
|
||||
height: 40px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 0 16px;
|
||||
border: 1px solid rgba(59, 130, 246, 0.18);
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(180deg, rgba(244, 249, 255, 0.96), rgba(234, 244, 255, 0.9));
|
||||
color: #1d4ed8;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.92),
|
||||
0 6px 14px rgba(37, 99, 235, 0.08);
|
||||
}
|
||||
|
||||
.secondary-action .mdi {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.hero-action:disabled,
|
||||
.secondary-action:disabled,
|
||||
.ghost-action:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.68;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.workbench-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.list-panel,
|
||||
.policy-panel {
|
||||
padding: 20px 22px;
|
||||
}
|
||||
|
||||
.section-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-head h3 {
|
||||
color: #0f172a;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.title-with-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.alert-badge {
|
||||
min-width: 22px;
|
||||
height: 22px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 7px;
|
||||
border-radius: 999px;
|
||||
background: #ef4444;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
box-shadow: 0 6px 14px rgba(239, 68, 68, 0.22);
|
||||
}
|
||||
|
||||
.link-action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: var(--theme-primary-active);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.list-body {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.todo-row,
|
||||
.progress-row {
|
||||
display: grid;
|
||||
grid-template-columns: 56px minmax(0, 1fr) auto;
|
||||
gap: 14px;
|
||||
align-items: center;
|
||||
padding: 14px 0;
|
||||
border-top: 1px solid #edf2f7;
|
||||
}
|
||||
|
||||
.todo-row:first-child,
|
||||
.progress-row:first-child {
|
||||
padding-top: 4px;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.todo-copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.todo-copy strong {
|
||||
display: block;
|
||||
color: #0f172a;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.todo-copy p {
|
||||
margin-top: 4px;
|
||||
color: #6b7280;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.todo-advice {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.todo-advice-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 22px;
|
||||
padding: 0 8px;
|
||||
border-radius: 999px;
|
||||
background: var(--theme-primary-soft);
|
||||
color: var(--theme-primary-active);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.todo-advice-text {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.row-action {
|
||||
height: 38px;
|
||||
padding: 0 16px;
|
||||
border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.36);
|
||||
border-radius: 4px;
|
||||
color: var(--theme-primary-active);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.progress-row {
|
||||
grid-template-columns: 56px minmax(0, 1fr) minmax(84px, auto) minmax(104px, auto);
|
||||
gap: 14px 16px;
|
||||
}
|
||||
|
||||
.progress-copy strong {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.progress-amount {
|
||||
color: #0f172a;
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.progress-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 104px;
|
||||
min-height: 34px;
|
||||
padding: 6px 14px;
|
||||
border-radius: 999px;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.progress-status.success,
|
||||
.policy-status.success {
|
||||
background: var(--success-soft);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.progress-status.info,
|
||||
.policy-status.info {
|
||||
background: #eff6ff;
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.progress-status.mint {
|
||||
background: var(--success-soft);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.policy-table {
|
||||
border: 1px solid #e7edf5;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.policy-row {
|
||||
display: grid;
|
||||
grid-template-columns: 2.2fr 2.4fr 1fr;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
min-height: 56px;
|
||||
padding: 0 18px;
|
||||
border-top: 1px solid #edf2f7;
|
||||
}
|
||||
|
||||
.policy-head {
|
||||
min-height: 44px;
|
||||
background: #f8fbff;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.policy-row strong,
|
||||
.policy-row span {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.policy-row strong {
|
||||
color: #0f172a;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.policy-row span {
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.policy-title-cell,
|
||||
.policy-summary-cell {
|
||||
justify-self: stretch;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.policy-date-cell {
|
||||
justify-self: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 1320px) {
|
||||
.assistant-copy h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.policy-row {
|
||||
grid-template-columns: 1.8fr 1.8fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1440px) {
|
||||
.workbench {
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.assistant-hero {
|
||||
gap: 16px;
|
||||
padding: 18px 20px 18px 16px;
|
||||
}
|
||||
|
||||
.assistant-copy h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.assistant-visual {
|
||||
min-height: 184px;
|
||||
}
|
||||
|
||||
.assistant-image {
|
||||
width: 172px;
|
||||
}
|
||||
|
||||
.workbench-grid {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.list-panel,
|
||||
.policy-panel {
|
||||
padding: 18px 20px;
|
||||
}
|
||||
|
||||
.policy-row {
|
||||
min-height: 52px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.assistant-hero {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.assistant-visual {
|
||||
min-height: 188px;
|
||||
justify-content: center;
|
||||
padding: 0 0 8px;
|
||||
}
|
||||
|
||||
.assistant-visual::before,
|
||||
.assistant-visual::after,
|
||||
.assistant-glow {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.assistant-visual::before {
|
||||
inset: auto auto -82px 50%;
|
||||
}
|
||||
|
||||
.assistant-image {
|
||||
width: 176px;
|
||||
}
|
||||
|
||||
.workbench-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.assistant-hero,
|
||||
.list-panel,
|
||||
.policy-panel {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.assistant-input {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.assistant-visual {
|
||||
min-height: 160px;
|
||||
}
|
||||
|
||||
.assistant-glow {
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
}
|
||||
|
||||
.assistant-image {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.assistant-input textarea {
|
||||
height: 40px;
|
||||
min-height: 40px;
|
||||
max-height: 40px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.hero-action,
|
||||
.secondary-action,
|
||||
.ghost-action,
|
||||
.row-action {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.assistant-file-chip {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.todo-row,
|
||||
.progress-row {
|
||||
grid-template-columns: 56px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.progress-amount {
|
||||
grid-column: 2;
|
||||
text-align: left;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.row-action,
|
||||
.progress-status {
|
||||
grid-column: 2;
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.policy-table {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.policy-head {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.policy-row {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 8px;
|
||||
padding: 16px 0;
|
||||
border-top: 1px solid #edf2f7;
|
||||
}
|
||||
|
||||
.policy-row strong,
|
||||
.policy-row span {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
@@ -174,7 +174,7 @@
|
||||
.risk-sim-message-row.user .risk-sim-bubble {
|
||||
grid-column: 1;
|
||||
justify-self: end;
|
||||
background: #0f766e;
|
||||
background: var(--theme-primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@@ -191,7 +191,7 @@
|
||||
border: 1px solid #dbe5ef;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
color: #0f766e;
|
||||
color: var(--theme-primary-active);
|
||||
}
|
||||
|
||||
.risk-sim-message-row.user .risk-sim-avatar {
|
||||
@@ -483,8 +483,8 @@
|
||||
.risk-sim-recognized-fields em {
|
||||
padding: 3px 7px;
|
||||
border-radius: 999px;
|
||||
background: #ecfdf5;
|
||||
color: #047857;
|
||||
background: var(--success-soft);
|
||||
color: var(--success-hover);
|
||||
font-size: 11px;
|
||||
font-style: normal;
|
||||
font-weight: 850;
|
||||
@@ -574,9 +574,9 @@
|
||||
}
|
||||
|
||||
.risk-sim-file-chip.recognized {
|
||||
border-color: #bbf7d0;
|
||||
background: #ecfdf5;
|
||||
color: #047857;
|
||||
border-color: var(--success-line);
|
||||
background: var(--success-soft);
|
||||
color: var(--success-hover);
|
||||
}
|
||||
|
||||
.risk-sim-file-chip.failed {
|
||||
@@ -611,8 +611,8 @@
|
||||
}
|
||||
|
||||
.risk-sim-send-btn {
|
||||
border-color: #0f766e;
|
||||
background: #0f766e;
|
||||
border-color: var(--theme-primary);
|
||||
background: var(--theme-primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@@ -634,8 +634,8 @@
|
||||
}
|
||||
|
||||
.risk-sim-composer-shell:focus-within {
|
||||
border-color: rgba(15, 118, 110, 0.58);
|
||||
box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
|
||||
border-color: rgba(var(--theme-primary-rgb), 0.58);
|
||||
box-shadow: 0 0 0 3px var(--theme-focus-ring);
|
||||
}
|
||||
|
||||
.risk-sim-composer-shell textarea {
|
||||
@@ -699,8 +699,8 @@
|
||||
}
|
||||
|
||||
.risk-sim-step.done i {
|
||||
background: #ecfdf5;
|
||||
color: #047857;
|
||||
background: var(--success-soft);
|
||||
color: var(--success-hover);
|
||||
}
|
||||
|
||||
.risk-sim-step.running i {
|
||||
@@ -823,8 +823,8 @@
|
||||
}
|
||||
|
||||
.risk-sim-primary-btn {
|
||||
border: 1px solid #0f766e;
|
||||
background: #0f766e;
|
||||
border: 1px solid var(--theme-primary);
|
||||
background: var(--theme-primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
533
web/src/assets/styles/components/sidebar-rail.css
Normal file
533
web/src/assets/styles/components/sidebar-rail.css
Normal file
@@ -0,0 +1,533 @@
|
||||
.rail {
|
||||
--rail-motion-duration: 220ms;
|
||||
--rail-motion-ease: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--rail-fade-duration: 110ms;
|
||||
--rail-label-delay: 55ms;
|
||||
|
||||
position: sticky;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: var(--desktop-stage-height, 100dvh);
|
||||
min-height: var(--desktop-stage-height, 100dvh);
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: visible;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96)), #fff;
|
||||
border-right: 1px solid #dbe4ee;
|
||||
box-shadow: 1px 0 0 rgba(15, 23, 42, 0.02);
|
||||
z-index: 20;
|
||||
contain: layout;
|
||||
transform: translateZ(0);
|
||||
transition:
|
||||
background 240ms var(--ease),
|
||||
box-shadow 240ms var(--ease);
|
||||
}
|
||||
|
||||
.rail-brand {
|
||||
position: relative;
|
||||
min-height: 112px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
gap: 12px;
|
||||
padding: 54px 16px 8px;
|
||||
overflow: visible;
|
||||
transition:
|
||||
min-height var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
padding var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
gap var(--rail-motion-duration) var(--rail-motion-ease);
|
||||
will-change: min-height, padding, gap;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
flex: 0 0 auto;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--theme-primary-active);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
transform: translateY(-8px);
|
||||
transition:
|
||||
color 160ms var(--ease),
|
||||
transform var(--rail-motion-duration) var(--rail-motion-ease);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.custom-logo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.brand-mark svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
max-width: 124px;
|
||||
color: #0f172a;
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
transform: translateY(-8px);
|
||||
transition:
|
||||
max-width var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
opacity var(--rail-fade-duration) var(--rail-motion-ease) var(--rail-label-delay),
|
||||
transform var(--rail-fade-duration) var(--rail-motion-ease) var(--rail-label-delay);
|
||||
will-change: max-width, opacity, transform;
|
||||
}
|
||||
|
||||
.rail-collapse-btn {
|
||||
position: absolute;
|
||||
right: -14px;
|
||||
top: 55px;
|
||||
z-index: 30;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
cursor: pointer;
|
||||
border: 1px solid #dbe4ee;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
color: #64748b;
|
||||
box-shadow:
|
||||
0 8px 18px rgba(15, 23, 42, 0.12),
|
||||
0 0 0 3px rgba(248, 250, 252, 0.92);
|
||||
transition:
|
||||
top var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
right var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
width var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
height var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
transform var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
background 180ms var(--ease),
|
||||
border-color 180ms var(--ease),
|
||||
color 180ms var(--ease),
|
||||
box-shadow 180ms var(--ease);
|
||||
}
|
||||
|
||||
.rail-collapse-btn:hover {
|
||||
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.28);
|
||||
background: #fff;
|
||||
color: var(--theme-primary-active);
|
||||
box-shadow:
|
||||
0 10px 22px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.16),
|
||||
0 0 0 3px rgba(248, 250, 252, 0.96);
|
||||
}
|
||||
|
||||
.rail-collapse-btn .mdi {
|
||||
font-size: 17px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.rail-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 4px 8px 16px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
flex: 1;
|
||||
transition:
|
||||
padding var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
gap var(--rail-motion-duration) var(--rail-motion-ease);
|
||||
will-change: padding, gap;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
width: 100%;
|
||||
min-height: 48px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 0;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
transition:
|
||||
gap var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
background 180ms var(--ease),
|
||||
border-color 180ms var(--ease),
|
||||
color 180ms var(--ease);
|
||||
will-change: gap;
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
background: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08);
|
||||
color: var(--theme-primary-active);
|
||||
}
|
||||
|
||||
.nav-btn.active {
|
||||
background: var(--theme-primary-soft);
|
||||
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.18);
|
||||
color: var(--theme-primary-active);
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
flex: 0 0 48px;
|
||||
width: 48px;
|
||||
height: 36px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 4px;
|
||||
color: currentColor;
|
||||
transition: color 180ms var(--ease);
|
||||
}
|
||||
|
||||
.nav-btn :deep(svg) {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
stroke: currentColor;
|
||||
stroke-width: 2;
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
max-width: 128px;
|
||||
color: currentColor;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
opacity: 1;
|
||||
transition:
|
||||
max-width var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
opacity var(--rail-fade-duration) var(--rail-motion-ease) var(--rail-label-delay),
|
||||
transform var(--rail-fade-duration) var(--rail-motion-ease) var(--rail-label-delay);
|
||||
will-change: max-width, opacity, transform;
|
||||
}
|
||||
|
||||
.nav-badge {
|
||||
flex: 0 0 auto;
|
||||
min-width: 34px;
|
||||
height: 22px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 8px;
|
||||
border-radius: 999px;
|
||||
background: #ff5b67;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
transition:
|
||||
min-width var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
max-width var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
padding var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
opacity var(--rail-fade-duration) var(--rail-motion-ease) var(--rail-label-delay);
|
||||
will-change: min-width, max-width, padding, opacity;
|
||||
}
|
||||
|
||||
.nav-unread-dot {
|
||||
flex: 0 0 auto;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 999px;
|
||||
background: #ef4444;
|
||||
box-shadow: 0 6px 14px rgba(239, 68, 68, 0.26);
|
||||
}
|
||||
|
||||
.rail-user {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
min-height: 78px;
|
||||
margin: 0;
|
||||
padding: 16px 20px 18px;
|
||||
border-top: 1px solid #edf2f7;
|
||||
transition: padding var(--rail-motion-duration) var(--rail-motion-ease);
|
||||
}
|
||||
|
||||
.user-summary {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
min-height: 42px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 4px;
|
||||
color: #64748b;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
gap var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
padding var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
background 180ms var(--ease);
|
||||
}
|
||||
|
||||
.rail-user:hover .user-summary {
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
flex: 0 0 36px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-active));
|
||||
box-shadow: 0 6px 14px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.18);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
transition:
|
||||
flex-basis var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
width var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
height var(--rail-motion-duration) var(--rail-motion-ease);
|
||||
}
|
||||
|
||||
.user-copy {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
max-width: 116px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
opacity: 1;
|
||||
transition:
|
||||
max-width var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
opacity var(--rail-fade-duration) var(--rail-motion-ease) var(--rail-label-delay),
|
||||
transform var(--rail-fade-duration) var(--rail-motion-ease) var(--rail-label-delay);
|
||||
will-change: max-width, opacity, transform;
|
||||
}
|
||||
|
||||
.user-copy strong {
|
||||
color: #334155;
|
||||
font-size: 14px;
|
||||
font-weight: 750;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.user-copy span {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.user-summary .mdi {
|
||||
flex: 0 0 18px;
|
||||
font-size: 18px;
|
||||
transition:
|
||||
max-width var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
opacity var(--rail-fade-duration) var(--rail-motion-ease) var(--rail-label-delay);
|
||||
will-change: max-width, opacity;
|
||||
}
|
||||
|
||||
.user-menu {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
bottom: calc(100% - 6px);
|
||||
min-width: 132px;
|
||||
padding: 8px;
|
||||
border: 1px solid rgba(226, 232, 240, 0.96);
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.1);
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
pointer-events: none;
|
||||
transition: all 180ms var(--ease);
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.rail-user:hover .user-menu {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.user-menu-item {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 12px;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
color: #dc2626;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
transition: all 180ms var(--ease);
|
||||
}
|
||||
|
||||
/* ========================================= */
|
||||
/* COLLAPSED STATE */
|
||||
/* ========================================= */
|
||||
|
||||
.rail-collapsed .rail-brand {
|
||||
min-height: 136px;
|
||||
justify-content: flex-start;
|
||||
gap: 0;
|
||||
padding: 52px 16px 8px;
|
||||
}
|
||||
|
||||
.rail-collapsed .brand-mark {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: 0;
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
|
||||
.rail-collapsed .brand-mark svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.rail-collapsed .brand-name {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
max-width: 0;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
pointer-events: none;
|
||||
transform: translateX(-6px);
|
||||
transition-delay: 0ms;
|
||||
}
|
||||
|
||||
.rail-collapsed .rail-collapse-btn {
|
||||
top: 96px;
|
||||
right: -14px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.rail-collapsed .rail-nav {
|
||||
gap: 8px;
|
||||
padding: 4px 8px 16px;
|
||||
}
|
||||
|
||||
.rail-collapsed .nav-btn {
|
||||
justify-content: flex-start;
|
||||
gap: 0;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.rail-collapsed .nav-icon {
|
||||
width: 48px;
|
||||
height: 36px;
|
||||
flex: 0 0 48px;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.rail-collapsed .nav-label {
|
||||
max-width: 0;
|
||||
opacity: 0;
|
||||
transform: translateX(-6px);
|
||||
transition-delay: 0ms;
|
||||
}
|
||||
|
||||
.rail-collapsed .nav-badge {
|
||||
max-width: 0;
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
transition-delay: 0ms;
|
||||
}
|
||||
|
||||
.rail-collapsed .nav-unread-dot {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 11px;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
}
|
||||
|
||||
.rail-collapsed {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.rail-collapsed .rail-user {
|
||||
position: relative;
|
||||
z-index: 6;
|
||||
padding: 14px 8px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.rail-collapsed .user-summary {
|
||||
justify-content: center;
|
||||
padding: 4px;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.rail-user-menu-floating {
|
||||
position: fixed;
|
||||
z-index: 12000;
|
||||
min-width: 132px;
|
||||
padding: 8px;
|
||||
border: 1px solid rgba(226, 232, 240, 0.96);
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.14);
|
||||
transform: translateY(-50%);
|
||||
animation: railUserMenuIn 180ms var(--rail-motion-ease) both;
|
||||
}
|
||||
|
||||
.rail-user-menu-floating .user-menu-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@keyframes railUserMenuIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-50%) translateX(-6px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(-50%) translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.rail-collapsed .user-copy,
|
||||
.rail-collapsed .user-summary .mdi {
|
||||
max-width: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
transform: translateX(-6px);
|
||||
transition-delay: 0ms;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.rail {
|
||||
position: relative;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.rail *,
|
||||
.rail *::before,
|
||||
.rail *::after {
|
||||
transition-duration: 120ms !important;
|
||||
animation-duration: 120ms !important;
|
||||
}
|
||||
}
|
||||
459
web/src/assets/styles/components/top-bar.css
Normal file
459
web/src/assets/styles/components/top-bar.css
Normal file
@@ -0,0 +1,459 @@
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
padding: 18px 24px 20px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.topbar.chat-mode {
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #eef2f7;
|
||||
}
|
||||
|
||||
.title-group {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
display: inline-block;
|
||||
margin-bottom: 8px;
|
||||
padding: 3px 10px;
|
||||
border-radius: 6px;
|
||||
background: linear-gradient(135deg, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.12), rgba(59, 130, 246, 0.08));
|
||||
color: var(--theme-primary-active);
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 1.2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.topbar h1 {
|
||||
color: #0f172a;
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.topbar p {
|
||||
margin-top: 6px;
|
||||
max-width: 720px;
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.top-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 14px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.range-combo {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.range-shell {
|
||||
height: 42px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 3px;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
|
||||
}
|
||||
|
||||
.range-meta {
|
||||
height: 34px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 12px;
|
||||
border-right: 1px solid #e2e8f0;
|
||||
color: #334155;
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.range-meta .mdi {
|
||||
color: var(--theme-primary);
|
||||
}
|
||||
|
||||
.range-tabs {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
padding-left: 3px;
|
||||
}
|
||||
|
||||
.range-tabs button {
|
||||
height: 34px;
|
||||
min-width: 54px;
|
||||
padding: 0 14px;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.range-tabs button:hover:not(.active) {
|
||||
background: #f1f5f9;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.range-tabs button.active {
|
||||
background: var(--theme-primary);
|
||||
color: #fff;
|
||||
box-shadow: 0 6px 14px rgba(var(--theme-primary-rgb, 58, 124, 165), .18);
|
||||
}
|
||||
|
||||
.custom-range-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.custom-range-btn {
|
||||
height: 42px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 13px;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
font-size: 13px;
|
||||
font-weight: 750;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.custom-range-btn:hover,
|
||||
.custom-range-btn.active {
|
||||
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), .34);
|
||||
background: #f5fbff;
|
||||
color: var(--theme-primary-active);
|
||||
}
|
||||
|
||||
.calendar-popover {
|
||||
position: absolute;
|
||||
top: calc(100% + 10px);
|
||||
right: 0;
|
||||
width: 336px;
|
||||
z-index: 40;
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
padding: 16px;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
box-shadow: 0 18px 42px rgba(15, 23, 42, .16);
|
||||
}
|
||||
|
||||
.calendar-popover header,
|
||||
.calendar-popover footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.calendar-popover header strong {
|
||||
color: #0f172a;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.calendar-popover header button {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.date-fields {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.date-fields label {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.date-fields span {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.date-fields input {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
padding: 0 9px;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 4px;
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.ghost-btn,
|
||||
.apply-btn {
|
||||
height: 36px;
|
||||
padding: 0 14px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.ghost-btn {
|
||||
border: 1px solid #d7e0ea;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.apply-btn {
|
||||
border: 0;
|
||||
background: var(--theme-primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.apply-btn:disabled {
|
||||
cursor: not-allowed;
|
||||
background: #cbd5e1;
|
||||
}
|
||||
|
||||
.kpi-chips {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.detail-alert-strip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.detail-alert-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-height: 32px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid #fed7aa;
|
||||
border-radius: 999px;
|
||||
background: #fff7ed;
|
||||
color: #ea580c;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.detail-alert-pill i {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.detail-alert-pill.success {
|
||||
border-color: var(--success-line);
|
||||
background: var(--success-soft);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.detail-alert-pill.danger {
|
||||
border-color: #fecaca;
|
||||
background: #fff1f2;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.kpi-chip {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
grid-template-rows: auto auto;
|
||||
gap: 2px 10px;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(135deg, color-mix(in srgb, var(--chip-color) 8%, #fff), color-mix(in srgb, var(--chip-color) 3%, #f8fafc));
|
||||
border: 1px solid color-mix(in srgb, var(--chip-color) 18%, #e2e8f0);
|
||||
}
|
||||
|
||||
.chip-value {
|
||||
grid-row: 1 / 3;
|
||||
align-self: center;
|
||||
color: #0f172a;
|
||||
font-size: 22px;
|
||||
font-weight: 850;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.chip-value small {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.chip-label {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.chip-delta {
|
||||
color: #94a3b8;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.chip-delta.up { color: var(--success); }
|
||||
.chip-delta.down { color: #f59e0b; }
|
||||
|
||||
.topbar-spacer {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.create-top-btn {
|
||||
height: 40px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 18px;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: var(--theme-primary);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 750;
|
||||
box-shadow: 0 8px 18px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.18);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.create-top-btn:hover {
|
||||
background: var(--theme-primary-active);
|
||||
}
|
||||
|
||||
@media (max-width: 1120px) {
|
||||
.range-combo {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.topbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.top-actions,
|
||||
.search-wrap,
|
||||
.search-wrap.wide,
|
||||
.detail-alert-strip,
|
||||
.month-chip,
|
||||
.qa-filter,
|
||||
.new-question-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.range-combo {
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.range-shell {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.range-meta {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.custom-range-btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.calendar-popover {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.topbar {
|
||||
gap: 14px;
|
||||
padding: 16px 16px 14px;
|
||||
}
|
||||
|
||||
.topbar h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.kpi-chips {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 2px;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.kpi-chip {
|
||||
min-width: 118px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.chip-label,
|
||||
.chip-delta {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.range-combo {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.range-shell {
|
||||
height: auto;
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.range-meta {
|
||||
width: 100%;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.range-tabs {
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.range-tabs button {
|
||||
flex: 1;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.calendar-popover {
|
||||
width: min(336px, calc(100vw - 32px));
|
||||
}
|
||||
|
||||
.date-fields {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,381 @@
|
||||
.insight-panel-shell {
|
||||
flex: none;
|
||||
display: flex;
|
||||
width: clamp(300px, 28vw, 420px);
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
transition: width 360ms cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
.insight-panel-shell.collapsed {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.insight-panel {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(189, 201, 214, 0.74);
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 14px 32px rgba(148, 163, 184, 0.16);
|
||||
}
|
||||
|
||||
.insight-head {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
background: linear-gradient(180deg, #f8fbff, #ffffff);
|
||||
}
|
||||
|
||||
.insight-head h3 {
|
||||
margin: 6px 0 0;
|
||||
color: #0f172a;
|
||||
font-size: var(--wb-fs-insight-title, 17px);
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.insight-head p {
|
||||
margin: 6px 0 0;
|
||||
color: #64748b;
|
||||
font-size: var(--wb-fs-insight-body, 12px);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.insight-body {
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
align-content: start;
|
||||
padding: 14px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.intent-pill,
|
||||
.flow-status-chip,
|
||||
.status-pill {
|
||||
min-height: 26px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.confidence-card,
|
||||
.insight-card,
|
||||
.review-side-card,
|
||||
.review-flow-panel {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.confidence-card {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
background: #f8fbff;
|
||||
}
|
||||
|
||||
.confidence-card span,
|
||||
.card-head p,
|
||||
.note-block p,
|
||||
.review-side-head p,
|
||||
.review-side-risk-summary,
|
||||
.flow-step-tool,
|
||||
.flow-step-detail,
|
||||
.flow-step-card time {
|
||||
margin: 0;
|
||||
color: #64748b;
|
||||
font-size: var(--wb-fs-insight-body, 12px);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.confidence-card strong,
|
||||
.card-head h4,
|
||||
.note-block strong,
|
||||
.review-side-head strong,
|
||||
.flow-step-card strong,
|
||||
.review-side-metric-copy strong,
|
||||
.review-side-category-copy strong {
|
||||
color: #0f172a;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.card-head,
|
||||
.review-side-head,
|
||||
.flow-step-card header,
|
||||
.review-document-switch-head,
|
||||
.review-flow-summary {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.card-head h4 {
|
||||
margin: 0;
|
||||
font-size: var(--wb-fs-insight-h4, 14px);
|
||||
}
|
||||
|
||||
.note-block {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
background: #f8fbff;
|
||||
}
|
||||
|
||||
.capability-chip-row,
|
||||
.citation-stack,
|
||||
.knowledge-question-list,
|
||||
.review-flow-list,
|
||||
.review-side-risk-list,
|
||||
.review-document-warning-list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.risk-chip,
|
||||
.review-document-meta-chip,
|
||||
.review-side-confidence {
|
||||
min-height: 24px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
border-radius: 999px;
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.citation-card,
|
||||
.knowledge-question-btn,
|
||||
.review-side-metric-card,
|
||||
.review-side-category-card,
|
||||
.review-side-risk-item,
|
||||
.flow-step-card,
|
||||
.review-document-preview-card {
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 10px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.knowledge-question-btn,
|
||||
.review-side-metric-card,
|
||||
.review-side-category-card,
|
||||
.review-side-risk-item {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
color: #334155;
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.knowledge-question-btn {
|
||||
grid-template-columns: 30px minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.knowledge-question-index {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 8px;
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
font-size: 11px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.review-side-grid,
|
||||
.review-side-category-grid,
|
||||
.review-document-edit-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.review-side-metric-card {
|
||||
grid-template-columns: 30px minmax(0, 1fr) auto;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.review-side-metric-icon,
|
||||
.review-side-risk-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 8px;
|
||||
background: #eff6ff;
|
||||
color: var(--theme-primary, #3a7ca5);
|
||||
}
|
||||
|
||||
.review-side-metric-copy,
|
||||
.review-side-category-copy,
|
||||
.review-side-risk-copy {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.review-side-metric-copy small,
|
||||
.review-side-edit-hint,
|
||||
.review-side-category-copy p {
|
||||
margin: 0;
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.review-side-category-card.active {
|
||||
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.55);
|
||||
background: var(--theme-primary-soft, #eaf4fa);
|
||||
}
|
||||
|
||||
.review-insight-tools,
|
||||
.review-document-nav,
|
||||
.review-document-meta-chip-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.review-insight-switch-icon-btn,
|
||||
.flow-icon-btn,
|
||||
.review-document-nav-btn,
|
||||
.review-side-save-pill {
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.review-insight-switch-icon-btn,
|
||||
.flow-icon-btn,
|
||||
.review-document-nav-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.review-insight-switch-icon-btn.active,
|
||||
.review-side-save-pill {
|
||||
border-color: var(--theme-primary, #3a7ca5);
|
||||
background: var(--theme-primary, #3a7ca5);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.review-flow-list {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.flow-step-item {
|
||||
display: grid;
|
||||
grid-template-columns: 28px minmax(0, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.flow-step-rail span {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
font-size: 11px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.flow-step-card {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.flow-empty-state,
|
||||
.review-side-empty,
|
||||
.review-document-preview-placeholder {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
gap: 8px;
|
||||
padding: 18px;
|
||||
border: 1px dashed #cbd5e1;
|
||||
border-radius: 10px;
|
||||
background: #f8fbff;
|
||||
color: #64748b;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.review-inline-input,
|
||||
.review-document-edit-field input,
|
||||
.review-document-edit-field textarea {
|
||||
width: 100%;
|
||||
min-height: 34px;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
color: #0f172a;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.review-document-edit-field {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.review-document-edit-field span {
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.review-document-scroll {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.review-document-preview-card {
|
||||
min-height: 140px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
overflow: hidden;
|
||||
background: #f8fbff;
|
||||
}
|
||||
|
||||
.review-document-preview-card img {
|
||||
max-width: 100%;
|
||||
max-height: 240px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.review-side-save-pill {
|
||||
min-height: 34px;
|
||||
padding: 0 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
@media (max-width: 1440px) {
|
||||
.insight-panel-shell:not(.collapsed) {
|
||||
width: 100%;
|
||||
max-height: min(34dvh, 360px);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,469 @@
|
||||
.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;
|
||||
}
|
||||
|
||||
.message-row.user .message-bubble {
|
||||
order: 1;
|
||||
justify-self: end;
|
||||
background: linear-gradient(135deg, #eaf3ff, #f7fbff);
|
||||
border-color: rgba(96, 165, 250, 0.3);
|
||||
}
|
||||
|
||||
.message-avatar {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
background: #eff6ff;
|
||||
box-shadow: 0 8px 18px rgba(148, 163, 184, 0.22);
|
||||
}
|
||||
|
||||
.message-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.message-bubble {
|
||||
max-width: min(100%, 760px);
|
||||
padding: 12px 14px;
|
||||
border: 1px solid #d8e4f0;
|
||||
border-radius: 14px;
|
||||
background: #ffffff;
|
||||
color: #24324a;
|
||||
font-size: var(--wb-fs-bubble, 13px);
|
||||
line-height: 1.62;
|
||||
box-shadow: 0 10px 22px rgba(148, 163, 184, 0.14);
|
||||
}
|
||||
|
||||
.message-bubble-application-preview {
|
||||
max-width: min(100%, 980px);
|
||||
}
|
||||
|
||||
.message-bubble-review-risk-low,
|
||||
.message-bubble-review-risk-medium,
|
||||
.message-bubble-review-risk-high {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.message-bubble-review-risk-low {
|
||||
border-color: rgba(37, 99, 235, 0.56);
|
||||
}
|
||||
|
||||
.message-bubble-review-risk-medium {
|
||||
border-color: rgba(217, 119, 6, 0.58);
|
||||
}
|
||||
|
||||
.message-bubble-review-risk-high {
|
||||
border-color: rgba(220, 38, 38, 0.58);
|
||||
}
|
||||
|
||||
.message-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.message-meta strong {
|
||||
color: #0f172a;
|
||||
font-size: var(--wb-fs-bubble-meta, 12px);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.message-meta time {
|
||||
color: #64748b;
|
||||
font-size: var(--wb-fs-bubble-time, 11px);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.message-answer-content {
|
||||
color: #24324a;
|
||||
}
|
||||
|
||||
.message-answer-markdown :deep(p),
|
||||
.message-answer-markdown :deep(li),
|
||||
.message-answer-markdown :deep(td),
|
||||
.message-answer-markdown :deep(th),
|
||||
.message-answer-markdown :deep(blockquote) {
|
||||
margin: 0;
|
||||
color: inherit;
|
||||
line-height: 1.62;
|
||||
}
|
||||
|
||||
.message-answer-markdown :deep(p + p),
|
||||
.message-answer-markdown :deep(p + ul),
|
||||
.message-answer-markdown :deep(ul + p),
|
||||
.message-answer-markdown :deep(ol + p) {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.message-answer-markdown :deep(strong) {
|
||||
color: #0f172a;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.welcome-quick-actions {
|
||||
margin-top: 14px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.welcome-quick-actions-title {
|
||||
margin: 0 0 12px;
|
||||
color: #64748b;
|
||||
font-size: var(--wb-fs-chip, 12px);
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.welcome-quick-action-grid,
|
||||
.message-suggested-actions,
|
||||
.message-detail-chip-row,
|
||||
.message-files {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.welcome-quick-action-btn,
|
||||
.message-suggested-action-btn,
|
||||
.review-footer-btn,
|
||||
.expense-query-record-card,
|
||||
.expense-query-risk-chip {
|
||||
border: 1px solid #cbd5e1;
|
||||
background: #ffffff;
|
||||
color: #334155;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.welcome-quick-action-btn,
|
||||
.review-footer-btn {
|
||||
min-height: 32px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 0 12px;
|
||||
border-radius: 8px;
|
||||
font-size: var(--wb-fs-chip, 12px);
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.welcome-quick-action-btn i {
|
||||
color: var(--theme-primary, #3a7ca5);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.welcome-quick-action-btn:hover:not(:disabled),
|
||||
.message-suggested-action-btn:hover:not(:disabled),
|
||||
.review-footer-btn:hover:not(:disabled) {
|
||||
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.55);
|
||||
background: var(--theme-primary-soft, #eaf4fa);
|
||||
color: var(--theme-primary-active, #2f6d95);
|
||||
}
|
||||
|
||||
.message-meta-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.message-meta-chip,
|
||||
.message-risk-chip,
|
||||
.file-chip {
|
||||
min-height: 26px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 0 9px;
|
||||
border-radius: 999px;
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
font-size: 11px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.message-suggested-actions {
|
||||
margin-top: 12px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
}
|
||||
|
||||
.message-suggested-action-btn {
|
||||
min-height: 54px;
|
||||
display: grid;
|
||||
grid-template-columns: 30px minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.message-suggested-action-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 8px;
|
||||
background: #eff6ff;
|
||||
color: var(--theme-primary, #3a7ca5);
|
||||
}
|
||||
|
||||
.message-suggested-action-copy {
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.message-suggested-action-title {
|
||||
color: #0f172a;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.message-suggested-action-btn small {
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.message-detail-block,
|
||||
.application-preview-table,
|
||||
.draft-preview {
|
||||
margin-top: 12px;
|
||||
padding: 12px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
background: #f8fbff;
|
||||
}
|
||||
|
||||
.message-detail-block > strong,
|
||||
.expense-query-block > strong {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: #0f172a;
|
||||
font-size: 12px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.application-preview-table {
|
||||
display: grid;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.application-preview-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(96px, 0.42fr) minmax(0, 1fr);
|
||||
min-height: 38px;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.application-preview-row:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.application-preview-row.head {
|
||||
background: #eff6ff;
|
||||
color: #334155;
|
||||
font-size: 12px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.application-preview-row > span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.application-preview-label {
|
||||
color: #64748b;
|
||||
border-right: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.application-preview-value {
|
||||
color: #0f172a;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.application-preview-input {
|
||||
width: 100%;
|
||||
min-height: 32px;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.application-preview-edit-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.expense-query-record-list,
|
||||
.message-citation-list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.expense-query-record-card {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.expense-query-record-main {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.expense-query-record-top,
|
||||
.expense-query-record-meta,
|
||||
.expense-query-summary-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.expense-query-record-top strong {
|
||||
color: #0f172a;
|
||||
font-size: 12px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.expense-query-record-card p,
|
||||
.expense-query-record-meta span,
|
||||
.expense-query-window-label,
|
||||
.expense-query-hint {
|
||||
margin: 0;
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.expense-query-record-status,
|
||||
.expense-query-summary-chip {
|
||||
min-height: 22px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
border-radius: 999px;
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.expense-query-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.review-plain-followup,
|
||||
.draft-preview {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.review-plain-lead {
|
||||
margin: 0;
|
||||
color: #0f172a;
|
||||
font-size: 14px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.review-plain-summary,
|
||||
.review-plain-note {
|
||||
margin: 0;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.review-plain-list {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
margin: 0;
|
||||
padding-left: 18px;
|
||||
color: #334155;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.review-footer-actions {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.review-footer-btn.primary {
|
||||
border-color: var(--theme-primary, #3a7ca5);
|
||||
background: var(--theme-primary, #3a7ca5);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.draft-preview header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.draft-preview pre {
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
color: #334155;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.message-row,
|
||||
.message-row.user {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.message-avatar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.message-row.user .message-bubble {
|
||||
justify-self: stretch;
|
||||
}
|
||||
|
||||
.message-bubble {
|
||||
max-width: 100%;
|
||||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
131
web/src/assets/styles/element-plus-theme.css
Normal file
131
web/src/assets/styles/element-plus-theme.css
Normal file
@@ -0,0 +1,131 @@
|
||||
:root {
|
||||
--theme-primary: #3a7ca5;
|
||||
--theme-primary-hover: #2f6d95;
|
||||
--theme-primary-active: #255b7d;
|
||||
--theme-primary-soft: #eaf4fa;
|
||||
--theme-primary-soft-strong: #d4e8f3;
|
||||
--theme-primary-rgb: 58, 124, 165;
|
||||
--theme-focus-ring: rgba(58, 124, 165, 0.12);
|
||||
--el-color-primary: var(--theme-primary);
|
||||
--el-color-primary-light-3: var(--theme-primary-hover);
|
||||
--el-color-primary-light-5: var(--theme-primary-light-5);
|
||||
--el-color-primary-light-7: var(--theme-primary-soft-strong);
|
||||
--el-color-primary-light-8: var(--theme-primary-soft);
|
||||
--el-color-primary-light-9: var(--theme-primary-light-9);
|
||||
--el-color-primary-dark-2: var(--theme-primary-active);
|
||||
--el-color-success: var(--success);
|
||||
--el-color-success-light-9: var(--success-soft);
|
||||
--el-color-warning: var(--warning);
|
||||
--el-color-warning-light-9: var(--warning-soft);
|
||||
--el-color-danger: var(--danger);
|
||||
--el-color-danger-light-9: var(--danger-soft);
|
||||
--el-color-info: var(--info);
|
||||
--el-border-radius-base: 4px;
|
||||
--el-border-radius-small: 3px;
|
||||
--el-border-radius-round: 4px;
|
||||
--el-border-color: var(--line-strong);
|
||||
--el-border-color-light: var(--line);
|
||||
--el-border-color-lighter: #edf2f7;
|
||||
--el-fill-color-light: var(--bg);
|
||||
--el-fill-color-lighter: var(--surface-soft);
|
||||
--el-fill-color-blank: var(--surface);
|
||||
--el-text-color-primary: var(--ink);
|
||||
--el-text-color-regular: var(--text);
|
||||
--el-text-color-secondary: var(--muted);
|
||||
--el-font-family: Inter, "SF Pro Text", "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
|
||||
--el-font-size-base: 14px;
|
||||
--el-box-shadow-light: 0 8px 22px rgba(15, 23, 42, 0.08);
|
||||
--el-box-shadow-lighter: 0 4px 14px rgba(15, 23, 42, 0.06);
|
||||
--el-transition-duration: 180ms;
|
||||
--el-transition-function-ease-in-out-bezier: cubic-bezier(0.2, 0, 0, 1);
|
||||
}
|
||||
|
||||
.el-button {
|
||||
font-weight: 600;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.el-button,
|
||||
.el-input__wrapper,
|
||||
.el-select__wrapper,
|
||||
.el-textarea__inner,
|
||||
.el-date-editor.el-input__wrapper,
|
||||
.el-popover.el-popper,
|
||||
.el-popper.is-light,
|
||||
.el-message-box,
|
||||
.el-dialog {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.el-input__wrapper,
|
||||
.el-select__wrapper {
|
||||
min-height: 34px;
|
||||
box-shadow: 0 0 0 1px var(--el-border-color) inset;
|
||||
transition:
|
||||
box-shadow 160ms var(--ease),
|
||||
background-color 160ms var(--ease),
|
||||
border-color 160ms var(--ease);
|
||||
}
|
||||
|
||||
.el-input__wrapper:hover,
|
||||
.el-select__wrapper:hover {
|
||||
box-shadow: 0 0 0 1px #b8c2d2 inset;
|
||||
}
|
||||
|
||||
.el-input__wrapper.is-focus,
|
||||
.el-select__wrapper.is-focused {
|
||||
box-shadow:
|
||||
0 0 0 1px var(--el-color-primary) inset,
|
||||
0 0 0 3px var(--theme-focus-ring);
|
||||
}
|
||||
|
||||
.el-select-dropdown,
|
||||
.el-picker__popper,
|
||||
.el-dropdown__popper,
|
||||
.el-popover.el-popper {
|
||||
border: 1px solid rgba(148, 163, 184, 0.26);
|
||||
box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
|
||||
}
|
||||
|
||||
.el-select-dropdown__item {
|
||||
height: 34px;
|
||||
color: #334155;
|
||||
font-size: 13px;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.is-hovering {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.is-selected {
|
||||
background: var(--theme-primary-soft);
|
||||
color: var(--theme-primary-active);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.el-scrollbar__bar {
|
||||
opacity: 0.28;
|
||||
}
|
||||
|
||||
.el-overlay {
|
||||
background-color: rgba(15, 23, 42, 0.42);
|
||||
}
|
||||
|
||||
.el-dialog,
|
||||
.el-message-box {
|
||||
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
|
||||
}
|
||||
|
||||
.el-table {
|
||||
--el-table-header-bg-color: #f8fafc;
|
||||
--el-table-header-text-color: #334155;
|
||||
--el-table-row-hover-bg-color: #f8fafc;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.el-pagination {
|
||||
--el-pagination-button-bg-color: #ffffff;
|
||||
--el-pagination-hover-color: var(--theme-primary-active);
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -7,21 +7,64 @@
|
||||
--muted: #64748b;
|
||||
--line: #e2e8f0;
|
||||
--line-strong: #cbd5e1;
|
||||
--primary: #10b981;
|
||||
--primary-soft: #ecfdf5;
|
||||
--secondary: #3b82f6;
|
||||
--primary: #3a7ca5;
|
||||
--primary-hover: #2f6d95;
|
||||
--primary-active: #255b7d;
|
||||
--primary-soft: #eaf4fa;
|
||||
--primary-soft-strong: #d4e8f3;
|
||||
--primary-rgb: 58, 124, 165;
|
||||
--secondary: #4f6f9f;
|
||||
--secondary-rgb: 79, 111, 159;
|
||||
--theme-primary: var(--primary);
|
||||
--theme-primary-hover: var(--primary-hover);
|
||||
--theme-primary-active: var(--primary-active);
|
||||
--theme-primary-soft: var(--primary-soft);
|
||||
--theme-primary-soft-strong: var(--primary-soft-strong);
|
||||
--theme-primary-light-5: color-mix(in srgb, var(--theme-primary) 52%, white);
|
||||
--theme-primary-light-9: color-mix(in srgb, var(--theme-primary) 8%, white);
|
||||
--theme-primary-contrast: #ffffff;
|
||||
--theme-primary-shadow: rgba(var(--theme-primary-rgb), 0.16);
|
||||
--theme-gradient-primary: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-active));
|
||||
--theme-primary-rgb: var(--primary-rgb);
|
||||
--theme-secondary: var(--secondary);
|
||||
--theme-secondary-rgb: var(--secondary-rgb);
|
||||
--theme-focus-ring: rgba(var(--theme-primary-rgb), 0.12);
|
||||
--purple: #8b5cf6;
|
||||
--orange: #f59e0b;
|
||||
--red: #ef4444;
|
||||
--success: #10b981;
|
||||
--success-soft: #ecfdf5;
|
||||
--warning: #f59e0b;
|
||||
--warning-soft: #fffbeb;
|
||||
--success: #2f855a;
|
||||
--success-hover: #276749;
|
||||
--success-active: #22543d;
|
||||
--success-soft: #f0f7f2;
|
||||
--success-line: #cde6d5;
|
||||
--success-rgb: 47, 133, 90;
|
||||
--warning: #b7791f;
|
||||
--warning-hover: #975a16;
|
||||
--warning-active: #7b4514;
|
||||
--warning-soft: #fff8eb;
|
||||
--warning-line: #efd9af;
|
||||
--warning-rgb: 183, 121, 31;
|
||||
--danger: #ef4444;
|
||||
--danger-hover: #dc2626;
|
||||
--danger-active: #b91c1c;
|
||||
--danger-soft: #fef2f2;
|
||||
--danger-line: #fecaca;
|
||||
--danger-rgb: 239, 68, 68;
|
||||
--info: #475569;
|
||||
--info-hover: #334155;
|
||||
--info-active: #1e293b;
|
||||
--info-soft: #f1f5f9;
|
||||
--info-line: #cbd5e1;
|
||||
--info-rgb: 71, 85, 105;
|
||||
--chart-primary: var(--theme-primary);
|
||||
--chart-primary-rgb: var(--theme-primary-rgb);
|
||||
--chart-blue: #4f6f9f;
|
||||
--chart-purple: #6e7fa6;
|
||||
--chart-amber: #b58b4c;
|
||||
--chart-danger: var(--danger);
|
||||
--nav: #0b1220;
|
||||
--nav-muted: #7d89a5;
|
||||
--radius: 8px;
|
||||
--radius: 4px;
|
||||
--ease: cubic-bezier(.2, .8, .2, 1);
|
||||
--desktop-ui-scale: 1;
|
||||
--desktop-ui-inverse-scale: 1;
|
||||
@@ -38,7 +81,7 @@ body { margin: 0; min-height: 100dvh; color: var(--text); background: var(--bg);
|
||||
.mdi { line-height: 1; vertical-align: middle; }
|
||||
button, input, select, textarea { font: inherit; }
|
||||
button { cursor: pointer; }
|
||||
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(16,185,129,.20); outline-offset: 2px; }
|
||||
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--theme-focus-ring, rgba(58,124,165,.18)); outline-offset: 2px; }
|
||||
|
||||
.eyebrow { color: var(--primary); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
@@ -60,7 +103,7 @@ h1 { margin-top: 4px; color: var(--ink); font-size: 24px; line-height: 1.25; fon
|
||||
}
|
||||
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(16,24,40,.08); }
|
||||
.btn:active, .mini-btn:active, .chip:active, .nav-btn:active { transform: scale(.97); }
|
||||
.btn.primary { border-color: transparent; background: var(--primary); color: #fff; box-shadow: 0 12px 24px rgba(51,92,255,.22); }
|
||||
.btn.primary { border-color: transparent; background: var(--theme-primary); color: #fff; box-shadow: 0 10px 20px rgba(var(--theme-primary-rgb, 58, 124, 165), .18); }
|
||||
.btn.success { border-color: transparent; background: var(--success); color: #fff; }
|
||||
.btn.danger { border-color: rgba(180,35,24,.18); background: var(--danger-soft); color: var(--danger); }
|
||||
.btn.ghost { background: transparent; }
|
||||
@@ -110,13 +153,13 @@ h1 { margin-top: 4px; color: var(--ink); font-size: 24px; line-height: 1.25; fon
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
border: 3px solid #e2e8f0;
|
||||
border-top-color: #10b981;
|
||||
border-top-color: var(--primary);
|
||||
border-radius: 50%;
|
||||
animation: table-spinner-rotate .8s linear infinite !important;
|
||||
}
|
||||
|
||||
.table-loading.sky .table-loading__spinner {
|
||||
border-top-color: #0ea5e9;
|
||||
border-top-color: var(--primary);
|
||||
}
|
||||
|
||||
.table-loading.detail .table-loading__spinner {
|
||||
|
||||
@@ -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); }
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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; }
|
||||
|
||||
@@ -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%;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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%);
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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),
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user