acc3c29c49
夜间控件改走现有 token 与 color-scheme，日期弹层锚定触发器并可翻转； 创建公司账号改为一次性可复制口令窗口，列表与后续接口不再回明文。 Co-authored-by: Cursor <cursoragent@cursor.com> Co-authored-by: multica-agent <github@multica.ai>
1915 lines
68 KiB
CSS
1915 lines
68 KiB
CSS
/* ─── 金牛实业资金往来管理系统 · 霜曜融合设计 ─────────────────────────
|
|
日间默认写在 :root / .v-fusion；夜间只覆写变量。
|
|
--fg/--muted/--border/--success/--warn/--danger/--info 为既有组件别名。 */
|
|
|
|
:root,
|
|
.v-fusion {
|
|
--bg: #f5f5f7;
|
|
--text: #1d1d1f;
|
|
--text-2: #6e6e73;
|
|
--text-3: #8e8e93;
|
|
--hairline: rgba(0, 0, 0, 0.08);
|
|
--surface: #ffffff;
|
|
--surface-2: #ffffff;
|
|
--material: rgba(255, 255, 255, 0.62);
|
|
--material-drawer: rgba(255, 255, 255, 0.86);
|
|
--fill: rgba(118, 118, 128, 0.10);
|
|
--fill-strong: rgba(118, 118, 128, 0.16);
|
|
--hover: rgba(0, 0, 0, 0.045);
|
|
--row-hover: rgba(0, 0, 0, 0.025);
|
|
--scrim: rgba(0, 0, 0, 0.24);
|
|
--accent: #c62f22;
|
|
--accent-solid: #c62f22;
|
|
--accent-soft: rgba(198, 47, 34, 0.08);
|
|
--gold: #8a6d1a;
|
|
--gold-bright: #b8933d;
|
|
--gold-soft: rgba(138, 109, 26, 0.09);
|
|
--gold-line: rgba(138, 109, 26, 0.28);
|
|
--gold-fade: rgba(138, 109, 26, 0.03);
|
|
--green: #248a3d;
|
|
--green-bg: rgba(52, 199, 89, 0.12);
|
|
--orange: #b25000;
|
|
--orange-bg: rgba(255, 159, 10, 0.14);
|
|
--red: #d70015;
|
|
--red-bg: rgba(255, 59, 48, 0.10);
|
|
--red-solid: #d70015;
|
|
--gray-bg: rgba(120, 120, 128, 0.12);
|
|
--focus-ring: #0a84ff;
|
|
--focus-glow: rgba(10, 132, 255, 0.18);
|
|
--red-line: rgba(215, 0, 21, 0.45);
|
|
--red-glow: rgba(255, 59, 48, 0.14);
|
|
--switch-off: rgba(120, 120, 128, 0.24);
|
|
--switch-on: #34c759;
|
|
--material-toast: rgba(30, 30, 32, 0.92);
|
|
--grip: rgba(0, 0, 0, 0.18);
|
|
--pushback-filter: brightness(0.98);
|
|
--shadow-seg: 0 1px 3px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(0, 0, 0, 0.03);
|
|
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.06);
|
|
--shadow-drawer: -24px 0 64px rgba(0, 0, 0, 0.14);
|
|
--shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.18);
|
|
--shadow-toast: 0 8px 24px rgba(0, 0, 0, 0.22);
|
|
--z-nav: 100;
|
|
--z-drawer: 200;
|
|
--z-modal: 300;
|
|
--z-toast: 400;
|
|
--z-tooltip: 500;
|
|
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
|
|
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
|
|
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
|
|
--glow-red: rgba(198, 47, 34, 0.05);
|
|
--glow-gold: rgba(138, 109, 26, 0.05);
|
|
--lp-brand: linear-gradient(158deg, #c13423, #a02415 52%, #7e170b);
|
|
--lp-brand-glow: radial-gradient(120% 80% at 18% 12%, rgba(255, 255, 255, 0.22), transparent 58%);
|
|
--lp-tick: var(--gold-bright);
|
|
color-scheme: light;
|
|
|
|
--fg: var(--text);
|
|
--muted: var(--text-2);
|
|
--border: var(--hairline);
|
|
--success: var(--green);
|
|
--success-soft: var(--green-bg);
|
|
--warn: var(--orange);
|
|
--warn-soft: var(--orange-bg);
|
|
--danger: var(--red);
|
|
--danger-soft: var(--red-bg);
|
|
--info: var(--gold);
|
|
--info-soft: var(--gold-soft);
|
|
--fg-soft: var(--hover);
|
|
|
|
--font-body: -apple-system, BlinkMacSystemFont, "SF Pro SC", "PingFang SC", "Segoe UI", "Microsoft YaHei", sans-serif;
|
|
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "IBM Plex Mono", Menlo, monospace;
|
|
--radius: 9px;
|
|
--radius-lg: 14px;
|
|
--r-pill: 999px;
|
|
--side-w: 232px;
|
|
}
|
|
|
|
html[data-theme="night"],
|
|
.v-fusion[data-theme="night"] {
|
|
--bg: #100f0d;
|
|
--text: #f2f0eb;
|
|
--text-2: #a9a49b;
|
|
--text-3: #8e8a82;
|
|
--hairline: rgba(255, 255, 255, 0.10);
|
|
--surface: #1b1916;
|
|
--surface-2: #2a2721;
|
|
--material: rgba(26, 24, 21, 0.62);
|
|
--material-drawer: rgba(31, 29, 25, 0.84);
|
|
--fill: rgba(255, 255, 255, 0.08);
|
|
--fill-strong: rgba(255, 255, 255, 0.13);
|
|
--hover: rgba(255, 255, 255, 0.05);
|
|
--row-hover: rgba(255, 255, 255, 0.04);
|
|
--scrim: rgba(0, 0, 0, 0.52);
|
|
--accent: #e05341;
|
|
--accent-solid: #cf4529;
|
|
--accent-soft: rgba(224, 83, 65, 0.16);
|
|
--gold: #d9b45c;
|
|
--gold-bright: #f0cd7a;
|
|
--gold-soft: rgba(217, 180, 92, 0.13);
|
|
--gold-line: rgba(217, 180, 92, 0.34);
|
|
--gold-fade: rgba(217, 180, 92, 0.04);
|
|
--green: #45cd6e;
|
|
--green-bg: rgba(69, 205, 110, 0.15);
|
|
--orange: #ffb340;
|
|
--orange-bg: rgba(255, 179, 64, 0.15);
|
|
--red: #ff6b5e;
|
|
--red-bg: rgba(255, 107, 94, 0.14);
|
|
--red-solid: #d63c2f;
|
|
--gray-bg: rgba(150, 150, 158, 0.16);
|
|
--focus-ring: #409cff;
|
|
--focus-glow: rgba(64, 156, 255, 0.30);
|
|
--red-line: rgba(255, 107, 94, 0.50);
|
|
--red-glow: rgba(255, 107, 94, 0.20);
|
|
--switch-off: rgba(120, 120, 128, 0.34);
|
|
--switch-on: #30d158;
|
|
--material-toast: rgba(54, 52, 47, 0.94);
|
|
--grip: rgba(255, 255, 255, 0.22);
|
|
--pushback-filter: brightness(0.92);
|
|
--shadow-seg: 0 1px 3px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(255, 255, 255, 0.06);
|
|
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.35);
|
|
--shadow-drawer: -24px 0 64px rgba(0, 0, 0, 0.55);
|
|
--shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.60);
|
|
--shadow-toast: 0 8px 24px rgba(0, 0, 0, 0.50);
|
|
--glow-red: rgba(224, 83, 65, 0.07);
|
|
--glow-gold: rgba(217, 180, 92, 0.06);
|
|
--lp-brand: linear-gradient(158deg, #201b14, #161310 52%, #0f0d0a);
|
|
--lp-brand-glow: radial-gradient(120% 80% at 18% 12%, rgba(217, 180, 92, 0.18), transparent 58%);
|
|
--lp-tick: var(--gold);
|
|
color-scheme: dark;
|
|
scrollbar-color: var(--gold) var(--surface-2);
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
/* ─── reset ─────────────────────────────────────────────────────── */
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
html.v-fusion { height: 100%; }
|
|
body {
|
|
margin: 0;
|
|
background-color: var(--bg);
|
|
background-image:
|
|
radial-gradient(1200px 620px at 100% 0%, var(--glow-red), transparent 58%),
|
|
radial-gradient(1000px 520px at 0% 100%, var(--glow-gold), transparent 58%);
|
|
background-attachment: fixed;
|
|
color: var(--fg);
|
|
font-family: var(--font-body);
|
|
font-size: 14px;
|
|
line-height: 1.55;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
body.is-app {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
img, svg { display: block; }
|
|
a { color: inherit; text-decoration: none; }
|
|
button { font: inherit; cursor: pointer; }
|
|
h1, h2, h3, h4 { margin: 0; line-height: 1.3; }
|
|
p { margin: 0; }
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--focus-ring);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
html[data-theme-anim],
|
|
html[data-theme-anim] body,
|
|
html[data-theme-anim] body * {
|
|
transition: color 200ms ease, background-color 200ms ease, background 200ms ease,
|
|
border-color 200ms ease, box-shadow 200ms ease, filter 200ms ease, opacity 200ms ease !important;
|
|
}
|
|
|
|
/* ─── 应用外壳 ──────────────────────────────────────────────────── */
|
|
.shell {
|
|
display: grid;
|
|
grid-template-columns: var(--side-w) minmax(0, 1fr);
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sidebar {
|
|
background: var(--material);
|
|
backdrop-filter: blur(24px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(24px) saturate(180%);
|
|
border-right: 1px solid var(--border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
z-index: var(--z-nav);
|
|
}
|
|
.side-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 18px 16px 16px;
|
|
border-bottom: 1px solid var(--border);
|
|
flex: none;
|
|
}
|
|
.brand-logo {
|
|
width: 38px;
|
|
height: 38px;
|
|
border-radius: 9px;
|
|
object-fit: contain;
|
|
flex: none;
|
|
}
|
|
.brand-logo-night { display: none; }
|
|
html[data-theme="night"] .brand-logo-day { display: none; }
|
|
html[data-theme="night"] .brand-logo-night { display: block; }
|
|
.brand-text { min-width: 0; }
|
|
.side-brand .brand-name { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
|
|
.side-brand .brand-sub { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 3px; letter-spacing: 0.02em; }
|
|
.side-role {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
margin-top: 10px;
|
|
padding: 3px 9px;
|
|
border-radius: 999px;
|
|
background: var(--accent-soft);
|
|
color: var(--accent);
|
|
font-size: 11px; font-weight: 600;
|
|
}
|
|
.side-role.company { background: var(--info-soft); color: var(--info); }
|
|
|
|
.side-nav { flex: 1; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 12px 10px; }
|
|
.side-nav .nav-group { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--muted); padding: 14px 10px 6px; }
|
|
.side-nav a {
|
|
display: flex; align-items: center; gap: 10px;
|
|
padding: 8px 10px;
|
|
border-radius: var(--radius);
|
|
color: var(--muted);
|
|
font-size: 13.5px;
|
|
margin-bottom: 1px;
|
|
}
|
|
.side-nav a svg { width: 16px; height: 16px; flex: none; }
|
|
.side-nav a:hover { color: var(--fg); background: var(--fg-soft); }
|
|
.side-nav a.active {
|
|
color: var(--accent);
|
|
background: var(--accent-soft);
|
|
font-weight: 600;
|
|
}
|
|
.side-nav a.active svg { color: var(--accent); }
|
|
.side-nav a .nav-badge {
|
|
margin-left: auto;
|
|
font-family: var(--font-mono);
|
|
font-size: 10.5px;
|
|
padding: 1px 7px;
|
|
border-radius: 999px;
|
|
background: var(--danger-soft);
|
|
color: var(--danger);
|
|
font-weight: 600;
|
|
}
|
|
.side-foot { border-top: 1px solid var(--border); padding: 12px 12px 16px; flex: none; }
|
|
.theme-seg {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 2px;
|
|
padding: 3px;
|
|
margin-bottom: 10px;
|
|
border-radius: 9px;
|
|
background: var(--fill);
|
|
box-shadow: var(--shadow-seg);
|
|
}
|
|
.theme-seg button {
|
|
height: 26px;
|
|
border: 0;
|
|
border-radius: 7px;
|
|
background: transparent;
|
|
color: var(--text-2);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
.theme-seg button.is-active {
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
}
|
|
.account-box {
|
|
background: var(--fill);
|
|
border-radius: 10px;
|
|
padding: 10px;
|
|
}
|
|
.side-foot .user-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
|
|
.side-foot .user-row > div { min-width: 0; flex: 1; }
|
|
.side-foot .avatar {
|
|
width: 28px; height: 28px; border-radius: 8px;
|
|
background: var(--gold-soft); color: var(--gold);
|
|
display: grid; place-items: center;
|
|
font-size: 12px; font-weight: 700;
|
|
flex: none;
|
|
}
|
|
.side-foot .user-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.side-foot .user-meta { font-size: 10.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 4px; }
|
|
.side-foot .logout,
|
|
.icon-btn.logout {
|
|
margin-left: auto;
|
|
width: 28px; height: 28px;
|
|
padding: 0;
|
|
border-radius: 7px;
|
|
border: 1px solid var(--hairline);
|
|
background: var(--surface);
|
|
color: var(--text-2);
|
|
display: inline-grid; place-items: center;
|
|
flex: none;
|
|
}
|
|
.side-foot .logout svg,
|
|
.icon-btn.logout svg { width: 15px; height: 15px; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
|
|
.side-foot .logout:hover,
|
|
.icon-btn.logout:hover { color: var(--red); background: var(--red-bg); border-color: var(--red-line); }
|
|
.side-foot .logout:active,
|
|
.icon-btn.logout:active { transform: scale(0.94); }
|
|
|
|
.main {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
height: 100vh;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.topbar {
|
|
position: sticky; top: 0; z-index: 20;
|
|
background: var(--material);
|
|
backdrop-filter: blur(24px) saturate(180%);
|
|
border-bottom: 1px solid var(--border);
|
|
padding: 12px 28px;
|
|
display: flex; align-items: center; gap: 16px;
|
|
flex-wrap: wrap;
|
|
flex: none;
|
|
}
|
|
.topbar .crumb { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
|
|
.topbar .crumb b { color: var(--fg); font-weight: 600; }
|
|
.topbar .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
|
|
|
|
.content { padding: 34px 40px 96px; max-width: 1440px; width: 100%; margin-inline: auto; }
|
|
|
|
/* ─── 页头 ──────────────────────────────────────────────────────── */
|
|
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
|
|
.page-head h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.022em; }
|
|
.page-head .page-sub { color: var(--muted); font-size: 13px; margin-top: 5px; max-width: 72ch; }
|
|
.page-head .page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
|
|
|
|
/* ─── 按钮 ──────────────────────────────────────────────────────── */
|
|
.btn {
|
|
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
|
|
padding: 0 15px;
|
|
height: 32px;
|
|
min-height: 32px;
|
|
border-radius: 9px;
|
|
border: 1px solid var(--border);
|
|
background: var(--fill);
|
|
color: var(--fg);
|
|
font-size: 13px; font-weight: 600;
|
|
transition: background 0.12s ease, border-color 0.12s ease, transform 160ms var(--ease-out);
|
|
}
|
|
.btn:hover { border-color: var(--gold-line); background: var(--hover); }
|
|
.btn:active { transform: scale(0.97); }
|
|
.btn-primary { background: var(--accent-solid); border-color: var(--accent-solid); color: #fff; }
|
|
.btn-primary:hover { background: var(--accent); border-color: var(--accent); }
|
|
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
|
|
.btn-ghost:hover { color: var(--fg); background: var(--hover); }
|
|
.btn-danger { color: var(--danger); border-color: var(--red-line); background: transparent; }
|
|
.btn-danger:hover { background: var(--red-bg); border-color: var(--red); }
|
|
.btn-sm { padding: 0 10px; height: 26px; min-height: 26px; font-size: 12px; border-radius: 7px; }
|
|
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
|
|
.btn-primary[disabled] { opacity: 1; background: var(--fill-strong); border-color: var(--border); color: var(--muted); }
|
|
|
|
/* ─── 卡片 ──────────────────────────────────────────────────────── */
|
|
.card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--hairline);
|
|
border-radius: 14px;
|
|
padding: 18px 20px;
|
|
box-shadow: var(--shadow-card);
|
|
}
|
|
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
|
|
.card-title { font-size: 14px; font-weight: 650; letter-spacing: -0.005em; }
|
|
.card-title .sub { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 2px; }
|
|
|
|
/* ─── 指标卡 ────────────────────────────────────────────────────── */
|
|
.stat-card { padding: 16px 18px; }
|
|
.stat-card .stat-label { font-size: 11.5px; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
|
|
.stat-card .stat-value {
|
|
font-family: var(--font-mono);
|
|
font-variant-numeric: tabular-nums;
|
|
font-size: 26px; font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
margin-top: 6px;
|
|
}
|
|
.stat-card .stat-value .unit { font-size: 13px; color: var(--muted); font-weight: 400; margin-left: 2px; }
|
|
.stat-card .stat-foot { font-size: 12px; color: var(--muted); margin-top: 6px; }
|
|
.stat-card.alert .stat-value { color: var(--danger); }
|
|
.stat-card.warn .stat-value { color: var(--warn); }
|
|
.stat-card.gold {
|
|
background: linear-gradient(180deg, var(--gold-soft), var(--gold-fade));
|
|
border-color: var(--gold-line);
|
|
position: relative;
|
|
}
|
|
.stat-card.gold::before {
|
|
content: "";
|
|
position: absolute; left: 16px; right: 16px; top: 0;
|
|
height: 2px;
|
|
border-radius: 2px;
|
|
background: linear-gradient(90deg, var(--gold), transparent);
|
|
}
|
|
.stat-card.gold .stat-value { color: var(--gold); font-size: 29px; }
|
|
.stat-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
|
|
.stat-dot.danger { background: var(--danger); }
|
|
.stat-dot.warn { background: var(--warn); }
|
|
.stat-dot.success { background: var(--success); }
|
|
.stat-dot.info { background: var(--info); }
|
|
|
|
/* ─── 栅格与布局工具 ────────────────────────────────────────────── */
|
|
.grid { display: grid; gap: 14px; }
|
|
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
|
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
|
|
.grid-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
|
|
.grid-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; }
|
|
.grid-3-2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
|
|
/* 管理端首页主从：左栏约 480px（定稿 HEL-153），右侧明细更宽 */
|
|
.grid-480-1 { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); align-items: stretch; }
|
|
|
|
/* 方案 A：一体卡片 · 分栏主从（HEL-162） */
|
|
.dash-master {
|
|
margin-top: 14px;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
.dash-master-head {
|
|
padding: 12px 16px 10px;
|
|
margin-bottom: 0;
|
|
gap: 10px;
|
|
border-bottom: 1px solid var(--border);
|
|
flex-wrap: wrap;
|
|
}
|
|
.dash-master-head .card-title .sub {
|
|
display: inline;
|
|
margin-left: 6px;
|
|
}
|
|
.dash-master-head-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex: none;
|
|
margin-left: auto;
|
|
}
|
|
.dash-master-head-actions .input {
|
|
width: 132px;
|
|
min-height: 28px;
|
|
padding: 4px 8px;
|
|
flex: none;
|
|
}
|
|
.dash-master-split {
|
|
gap: 0;
|
|
/* 少数据自适应；整卡（含共享头）目标约 340px；多数据模块内滚动 */
|
|
max-height: 300px;
|
|
/* max-height alone 无法约束隐式行高；补可收缩行后 pane 内 overflow:auto 才会生效 */
|
|
grid-template-rows: minmax(0, 1fr);
|
|
overflow: hidden;
|
|
}
|
|
.dash-master-pane {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
.dash-master-pane--list {
|
|
border-right: 1px solid var(--border);
|
|
}
|
|
.dash-company-list {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
.dash-company-loading,
|
|
.dash-company-empty {
|
|
padding: 16px;
|
|
font-size: 13px;
|
|
}
|
|
.dash-company-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 8px 14px 8px 16px;
|
|
border-bottom: 1px solid var(--border);
|
|
cursor: pointer;
|
|
transition: background 0.12s ease;
|
|
}
|
|
.dash-company-item:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
.dash-company-item:hover {
|
|
background: var(--fg-soft);
|
|
}
|
|
.dash-company-item.is-selected {
|
|
background: var(--accent-soft);
|
|
box-shadow: inset 3px 0 0 var(--accent);
|
|
padding-left: 13px;
|
|
}
|
|
.dash-company-item.is-selected:hover {
|
|
background: var(--accent-soft);
|
|
}
|
|
.dash-company-main {
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
.dash-company-name {
|
|
display: block;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-size: 13.5px;
|
|
font-weight: 550;
|
|
color: var(--fg);
|
|
line-height: 1.35;
|
|
}
|
|
.dash-company-meta {
|
|
display: block;
|
|
margin-top: 2px;
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.dash-company-net {
|
|
flex: none;
|
|
font-family: var(--font-mono);
|
|
font-variant-numeric: tabular-nums;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
text-align: right;
|
|
min-width: 4.5em;
|
|
}
|
|
.dash-detail-toolbar {
|
|
padding: 10px 14px 0;
|
|
flex: none;
|
|
}
|
|
.dash-detail-heading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
min-width: 0;
|
|
}
|
|
.dash-detail-name {
|
|
font-size: 14px;
|
|
font-weight: 650;
|
|
color: var(--fg);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.dash-detail-summary {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
gap: 0;
|
|
margin: 10px 14px 0;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
background: var(--bg);
|
|
flex: none;
|
|
}
|
|
.dash-summary-item {
|
|
padding: 8px 10px;
|
|
border-right: 1px solid var(--border);
|
|
min-width: 0;
|
|
}
|
|
.dash-summary-item:last-child {
|
|
border-right: 0;
|
|
}
|
|
.dash-summary-label {
|
|
display: block;
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
letter-spacing: 0.04em;
|
|
color: var(--muted);
|
|
margin-bottom: 2px;
|
|
}
|
|
.dash-summary-value {
|
|
display: block;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--fg);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.dash-detail-body {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
margin-top: 8px;
|
|
}
|
|
.dash-master-scroll {
|
|
border: 0;
|
|
border-radius: 0;
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-x: auto;
|
|
overflow-y: auto;
|
|
}
|
|
.dash-detail-empty {
|
|
flex: 1;
|
|
min-height: 120px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
padding: 20px 24px;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
}
|
|
.dash-detail-empty .e-title {
|
|
font-weight: 600;
|
|
color: var(--fg);
|
|
margin-bottom: 6px;
|
|
}
|
|
.dash-detail-empty .e-desc {
|
|
max-width: 360px;
|
|
line-height: 1.55;
|
|
}
|
|
.dash-master-scroll[hidden],
|
|
.dash-detail-empty[hidden],
|
|
.dash-detail-summary[hidden] {
|
|
display: none !important;
|
|
}
|
|
.ds-table.ds-table--compact {
|
|
min-width: 0;
|
|
}
|
|
.ds-table.ds-table--compact th,
|
|
.ds-table.ds-table--compact td {
|
|
padding: 6px 12px;
|
|
}
|
|
.ds-table.ds-table--compact th {
|
|
font-size: 11px;
|
|
white-space: nowrap;
|
|
}
|
|
.ds-table tbody tr.is-selected {
|
|
background: var(--accent-soft);
|
|
}
|
|
.ds-table tbody tr.is-selected:hover {
|
|
background: var(--accent-soft);
|
|
}
|
|
.row { display: flex; align-items: center; gap: 10px; }
|
|
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
|
|
.stack { display: flex; flex-direction: column; gap: 14px; }
|
|
.muted { color: var(--muted); }
|
|
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
|
|
.meta { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
|
|
.mt-0 { margin-top: 0; }
|
|
|
|
@media (max-width: 1279px) {
|
|
.grid-4, .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.grid-3, .grid-2-1, .grid-1-2, .grid-3-2, .grid-480-1 { grid-template-columns: minmax(0, 1fr); }
|
|
.dash-master-split {
|
|
max-height: none;
|
|
grid-template-rows: none;
|
|
overflow: visible;
|
|
}
|
|
.dash-master-pane--list {
|
|
border-right: 0;
|
|
border-bottom: 1px solid var(--border);
|
|
max-height: 280px;
|
|
}
|
|
.dash-master-pane--detail {
|
|
max-height: 420px;
|
|
}
|
|
.dash-detail-summary {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
.dash-summary-item:nth-child(3) {
|
|
border-right: 0;
|
|
}
|
|
.dash-summary-item:nth-child(n+4) {
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
}
|
|
@media (max-width: 767px) {
|
|
.grid-2 { grid-template-columns: 1fr; }
|
|
.content { padding: 20px 16px 64px; }
|
|
.page-head h1 { font-size: 24px; }
|
|
.dash-master-head-actions {
|
|
width: 100%;
|
|
margin-left: 0;
|
|
justify-content: space-between;
|
|
}
|
|
.dash-master-head-actions .input {
|
|
flex: 1;
|
|
width: auto;
|
|
}
|
|
.dash-detail-summary {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
.dash-summary-item:nth-child(2n) {
|
|
border-right: 0;
|
|
}
|
|
.dash-summary-item:nth-child(3) {
|
|
border-right: 1px solid var(--border);
|
|
}
|
|
.dash-summary-item:nth-child(n+3) {
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
}
|
|
|
|
/* ─── 数据表 ────────────────────────────────────────────────────── */
|
|
.table-wrap {
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--surface);
|
|
}
|
|
.table-wrap.dash-master-scroll {
|
|
overflow-y: auto;
|
|
}
|
|
.ds-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
|
|
.ds-table th, .ds-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
|
|
.ds-table th {
|
|
color: var(--text-3); font-weight: 600;
|
|
font-size: 11.5px;
|
|
letter-spacing: 0.03em;
|
|
background: var(--surface);
|
|
position: sticky; top: 0;
|
|
}
|
|
@media (hover: hover) {
|
|
.ds-table tbody tr:hover { background: var(--row-hover); }
|
|
}
|
|
.ds-table tbody tr:last-child td { border-bottom: 0; }
|
|
.ds-table .num-col { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
|
|
.ds-table td.wrap, .ds-table th.wrap { white-space: normal; min-width: 180px; }
|
|
.ds-table .cell-main { font-weight: 550; }
|
|
.ds-table .cell-sub { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 1px; }
|
|
.ds-table tr.clickable { cursor: pointer; }
|
|
.ds-table .amt-in { color: var(--success); }
|
|
.ds-table .amt-out { color: var(--danger); }
|
|
.table-foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
|
|
|
|
/* ─── 徽章 / 状态 ───────────────────────────────────────────────── */
|
|
.pill {
|
|
display: inline-flex; align-items: center; gap: 5px;
|
|
height: 22px;
|
|
padding: 0 9px;
|
|
border-radius: 999px;
|
|
font-size: 11.5px; font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
|
|
.pill-success { background: var(--success-soft); color: var(--success); }
|
|
.pill-warn { background: var(--warn-soft); color: color-mix(in oklch, var(--warn) 80%, black); }
|
|
.pill-danger { background: var(--danger-soft); color: var(--danger); }
|
|
.pill-info { background: var(--info-soft); color: var(--info); }
|
|
.pill-muted { background: var(--fg-soft); color: var(--muted); }
|
|
.pill-accent { background: var(--accent-soft); color: var(--accent); }
|
|
|
|
.tag {
|
|
display: inline-flex; align-items: center;
|
|
padding: 2px 8px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ─── 筛选栏与表单 ──────────────────────────────────────────────── */
|
|
.filters {
|
|
display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
|
|
padding: 14px 16px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
margin-bottom: 14px;
|
|
}
|
|
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
|
|
.field > label { font-size: 12px; color: var(--muted); font-weight: 550; }
|
|
.input, .select, .textarea, .field .input, .field .select, .field .textarea {
|
|
padding: 7px 11px;
|
|
border: 1px solid var(--hairline);
|
|
border-radius: 9px;
|
|
background: var(--fill);
|
|
color: var(--fg);
|
|
font: inherit;
|
|
font-size: 13.5px;
|
|
min-height: 34px;
|
|
color-scheme: inherit;
|
|
}
|
|
.input:focus, .select:focus, .textarea:focus, .field .input:focus, .field .select:focus, .field .textarea:focus {
|
|
outline: none;
|
|
border-color: var(--focus-ring);
|
|
box-shadow: 0 0 0 3px var(--focus-glow);
|
|
}
|
|
.input:disabled, .select:disabled, .textarea:disabled,
|
|
.field .input:disabled, .field .select:disabled, .field .textarea:disabled {
|
|
color: var(--text-3);
|
|
background: var(--fill);
|
|
opacity: 0.72;
|
|
cursor: not-allowed;
|
|
}
|
|
.select option,
|
|
.select optgroup {
|
|
background-color: var(--surface);
|
|
color: var(--text);
|
|
}
|
|
.select option:checked,
|
|
.select option:hover {
|
|
background-color: var(--accent-soft);
|
|
color: var(--text);
|
|
}
|
|
.select option:disabled {
|
|
color: var(--text-3);
|
|
}
|
|
.input.num-input { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
|
|
.textarea { min-height: 84px; resize: vertical; line-height: 1.55; }
|
|
.field .hint { font-size: 11.5px; color: var(--muted); }
|
|
.field .hint.error { color: var(--danger); }
|
|
|
|
/* 关闭原生日历层，改由 ds-datepicker 锚定在触发器旁 */
|
|
input[type="date"]::-webkit-calendar-picker-indicator {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
display: none;
|
|
}
|
|
.input[type="date"],
|
|
.field .input[type="date"],
|
|
.input[data-ds-date="1"],
|
|
.field .input[data-ds-date="1"] {
|
|
padding-right: 34px;
|
|
background-color: var(--fill);
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236e6e73' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='3.5' width='11' height='10' rx='1.5'/%3E%3Cpath d='M2.5 6.5h11M6 2v3M10 2v3'/%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right 10px center;
|
|
background-size: 16px 16px;
|
|
}
|
|
html[data-theme="night"] .input[type="date"],
|
|
html[data-theme="night"] .field .input[type="date"],
|
|
html[data-theme="night"] .input[data-ds-date="1"],
|
|
html[data-theme="night"] .field .input[data-ds-date="1"] {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23d9b45c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='3.5' width='11' height='10' rx='1.5'/%3E%3Cpath d='M2.5 6.5h11M6 2v3M10 2v3'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
/* ─── Tabs ──────────────────────────────────────────────────────── */
|
|
.tabs {
|
|
display: flex;
|
|
gap: 2px;
|
|
border-bottom: 1px solid var(--border);
|
|
margin-bottom: 16px;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
}
|
|
.tabs button {
|
|
background: none; border: 0;
|
|
padding: 9px 14px;
|
|
font-size: 13px; font-weight: 550;
|
|
color: var(--muted);
|
|
border-bottom: 2px solid transparent;
|
|
margin-bottom: -1px;
|
|
flex: none;
|
|
white-space: nowrap;
|
|
}
|
|
.tabs button:hover { color: var(--fg); }
|
|
.tabs button.active { color: var(--fg); border-bottom-color: var(--accent); }
|
|
.tabs button .tab-count {
|
|
font-family: var(--font-mono); font-size: 10.5px;
|
|
padding: 1px 6px; border-radius: 999px;
|
|
background: var(--fg-soft); color: var(--muted);
|
|
margin-left: 5px;
|
|
}
|
|
.tabs button.active .tab-count { background: var(--accent-soft); color: var(--accent); }
|
|
|
|
/* ─── 时间轴(账期) ─────────────────────────────────────────────── */
|
|
.timeline { display: flex; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); padding: 0; }
|
|
.tl-cell { flex: 1; padding: 12px 10px; border-right: 1px solid var(--border); text-align: center; min-width: 0; }
|
|
.tl-cell:last-child { border-right: 0; }
|
|
.tl-cell .tl-month { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.04em; }
|
|
.tl-cell .tl-state { font-size: 12px; font-weight: 600; margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 5px; }
|
|
.tl-cell.closed { background: var(--fg-soft); }
|
|
.tl-cell.closed .tl-state { color: var(--muted); }
|
|
.tl-cell.current { background: var(--accent-soft); }
|
|
.tl-cell.current .tl-state { color: var(--accent); }
|
|
.tl-cell.open .tl-state { color: var(--fg); }
|
|
|
|
/* ─── 进度条 ────────────────────────────────────────────────────── */
|
|
.progress { height: 6px; border-radius: 999px; background: var(--fg-soft); overflow: hidden; }
|
|
.progress > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
|
|
.progress.warn > span { background: var(--warn); }
|
|
.progress.danger > span { background: var(--danger); }
|
|
|
|
/* ─── 列表行(快查 / 待办 / 通知) ────────────────────────────────── */
|
|
.list-row {
|
|
display: flex; align-items: center; gap: 12px;
|
|
padding: 10px 4px;
|
|
border-bottom: 1px solid var(--border);
|
|
font-size: 13px;
|
|
}
|
|
.list-row:last-child { border-bottom: 0; }
|
|
.list-row .lr-main { min-width: 0; flex: 1; }
|
|
.list-row .lr-title { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.list-row .lr-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
|
|
.list-row .lr-side { text-align: right; flex: none; }
|
|
[data-detail] { cursor: pointer; }
|
|
.list-row[data-detail]:hover { background: var(--fg-soft); }
|
|
.list-row[data-detail] { margin-inline: -4px; padding-inline: 4px; border-radius: var(--radius); }
|
|
|
|
/* ─── 弹窗 ──────────────────────────────────────────────────────── */
|
|
.modal-backdrop {
|
|
position: fixed; inset: 0; z-index: var(--z-modal);
|
|
background: var(--scrim);
|
|
display: none;
|
|
align-items: center; justify-content: center;
|
|
padding: 24px;
|
|
}
|
|
.modal-backdrop.open { display: flex; }
|
|
.modal {
|
|
background: var(--material-drawer);
|
|
backdrop-filter: blur(28px);
|
|
-webkit-backdrop-filter: blur(28px);
|
|
border-radius: 16px;
|
|
border: 1px solid var(--gold-line);
|
|
width: 100%; max-width: min(520px, 94vw);
|
|
max-height: 86vh; overflow-x: hidden; overflow-y: auto;
|
|
padding: 22px 24px;
|
|
box-shadow: var(--shadow-modal);
|
|
}
|
|
.modal.wide { max-width: 760px; }
|
|
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
|
|
.modal-title { font-size: 16px; font-weight: 700; }
|
|
.modal-close { background: none; border: 0; color: var(--muted); font-size: 18px; padding: 4px 8px; border-radius: 6px; }
|
|
.modal-close:hover { background: var(--fg-soft); color: var(--fg); }
|
|
.modal-sub { font-size: 12.5px; color: var(--muted); margin-bottom: 16px; }
|
|
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
|
|
|
|
/* ─── 明细展开行 ────────────────────────────────────────────────── */
|
|
.detail-box {
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 12px 14px;
|
|
font-size: 12.5px;
|
|
}
|
|
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; font-size: 12.5px; }
|
|
.kv dt { color: var(--muted); }
|
|
.kv dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
|
|
|
|
/* ─── 提示条 ────────────────────────────────────────────────────── */
|
|
.notice {
|
|
display: flex; gap: 10px; align-items: flex-start;
|
|
padding: 12px 14px;
|
|
border-radius: var(--radius-lg);
|
|
border: 1px solid var(--border);
|
|
font-size: 13px;
|
|
background: var(--surface);
|
|
}
|
|
.notice.warn { background: var(--warn-soft); border-color: var(--orange-bg); }
|
|
.notice.danger { background: var(--danger-soft); border-color: var(--red-line); }
|
|
.notice.info { background: var(--info-soft); border-color: var(--gold-line); }
|
|
.notice .n-title { font-weight: 650; }
|
|
.notice .n-body { color: var(--text-2); margin-top: 2px; font-size: 12.5px; }
|
|
|
|
/* ─── 登录页 ────────────────────────────────────────────────────── */
|
|
.login-wrap {
|
|
min-height: 100vh;
|
|
display: grid;
|
|
grid-template-columns: minmax(440px, 46%) minmax(0, 1fr);
|
|
position: relative;
|
|
}
|
|
.login-theme {
|
|
position: absolute;
|
|
top: 18px;
|
|
right: 18px;
|
|
z-index: 2;
|
|
width: 148px;
|
|
}
|
|
.login-aside {
|
|
background: var(--lp-brand);
|
|
color: #fff;
|
|
padding: 48px 56px;
|
|
display: flex; flex-direction: column;
|
|
position: relative;
|
|
overflow: hidden;
|
|
min-height: 100vh;
|
|
}
|
|
.login-aside::before {
|
|
content: "";
|
|
position: absolute; inset: 0;
|
|
background: var(--lp-brand-glow);
|
|
pointer-events: none;
|
|
}
|
|
html[data-theme="night"] .login-aside {
|
|
box-shadow: inset -1px 0 0 var(--gold-line);
|
|
}
|
|
.login-aside > * { position: relative; z-index: 1; }
|
|
.login-aside .brand-logo { width: 52px; height: 52px; margin-bottom: 18px; }
|
|
.login-aside .brand-mark { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; opacity: 0.72; }
|
|
.login-aside h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin-top: 18px; line-height: 1.25; }
|
|
.login-aside .aside-sub { opacity: 0.82; font-size: 14px; margin-top: 14px; max-width: 40ch; }
|
|
.login-aside .aside-list { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding-top: 32px; }
|
|
.login-aside .aside-item { display: flex; gap: 10px; font-size: 13px; opacity: 0.92; align-items: baseline; }
|
|
.login-aside .aside-item .tick { font-family: var(--font-mono); color: var(--lp-tick); font-weight: 700; }
|
|
.login-panel { display: grid; place-items: center; padding: 72px 32px 48px; }
|
|
.login-card { width: 100%; max-width: 400px; }
|
|
.login-card h2 { font-size: 24px; font-weight: 750; letter-spacing: -0.01em; }
|
|
.login-card .login-sub { color: var(--muted); font-size: 13px; margin: 6px 0 24px; }
|
|
.role-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
|
|
.role-switch button {
|
|
border: 1px solid var(--border);
|
|
background: var(--surface);
|
|
border-radius: var(--radius);
|
|
padding: 12px 10px;
|
|
text-align: left;
|
|
transition: border-color 0.12s ease, background 0.12s ease;
|
|
}
|
|
.role-switch button .r-name { font-size: 13.5px; font-weight: 650; }
|
|
.role-switch button .r-desc { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
|
|
.role-switch button.active { border-color: var(--accent); background: var(--accent-soft); }
|
|
.role-switch button.active .r-name { color: var(--accent); }
|
|
.login-card .field { margin-bottom: 14px; }
|
|
.login-card .btn-primary { height: 40px; min-height: 40px; width: 100%; }
|
|
.login-notice {
|
|
margin-top: 16px;
|
|
padding: 10px 12px;
|
|
border-radius: 9px;
|
|
background: var(--gold-soft);
|
|
border: 1px solid var(--gold-line);
|
|
color: var(--gold);
|
|
font-size: 12.5px;
|
|
}
|
|
.login-foot { margin-top: 16px; font-size: 12px; color: var(--muted); text-align: center; }
|
|
.login-foot a { color: var(--accent); font-weight: 550; }
|
|
.login-foot a:hover { text-decoration: underline; }
|
|
|
|
.login-role-title {
|
|
font-size: 22px;
|
|
font-weight: 750;
|
|
letter-spacing: 0.01em;
|
|
line-height: 1.15;
|
|
margin-bottom: 6px;
|
|
color: var(--text);
|
|
}
|
|
.login-role-title.admin { color: var(--accent); }
|
|
.login-role-title.company { color: var(--accent); }
|
|
.login-role-caption { color: var(--muted); font-size: 13px; margin-bottom: 22px; }
|
|
.login-aside.company { background: var(--lp-brand); }
|
|
.login-aside.company .aside-item .tick { color: var(--lp-tick); opacity: 1; }
|
|
.login-back {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
margin-bottom: 20px;
|
|
padding: 6px 12px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 999px;
|
|
background: var(--surface);
|
|
color: var(--fg);
|
|
font-size: 12.5px; font-weight: 600;
|
|
}
|
|
.login-back:hover { border-color: var(--accent); color: var(--accent); }
|
|
.login-back.company:hover { border-color: var(--accent); color: var(--accent); }
|
|
@media (max-width: 1279px) {
|
|
.login-wrap { grid-template-columns: minmax(380px, 42%) minmax(0, 1fr); }
|
|
}
|
|
@media (max-width: 1023px) {
|
|
.login-wrap { grid-template-columns: 1fr; }
|
|
.login-aside {
|
|
min-height: 0;
|
|
padding: 28px 24px 20px;
|
|
}
|
|
.login-aside .aside-list { padding-top: 16px; }
|
|
}
|
|
|
|
/* ─── 空状态 ────────────────────────────────────────────────────── */
|
|
.empty {
|
|
padding: 40px 20px;
|
|
text-align: center;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
}
|
|
.empty .e-title { font-weight: 600; color: var(--fg); margin-bottom: 4px; }
|
|
|
|
/* ─── 账期流程条(公司端工作台) ─────────────────────────────────── */
|
|
.flow { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
|
|
.flow-step { padding: 14px 16px 13px; border-right: 1px solid var(--border); min-width: 0; }
|
|
.flow-step:last-child { border-right: 0; }
|
|
a.flow-step { cursor: pointer; transition: background 0.12s ease; }
|
|
a.flow-step:hover { background: var(--fg-soft); }
|
|
.flow-step .fs-top { display: flex; align-items: center; gap: 8px; }
|
|
.flow-step .fs-idx { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
|
|
.flow-step .fs-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); flex: none; }
|
|
.flow-step .fs-name { font-size: 13.5px; font-weight: 650; }
|
|
.flow-step .fs-state { font-size: 12px; font-weight: 600; margin-top: 7px; color: var(--muted); }
|
|
.flow-step .fs-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
|
|
.flow-step.done .fs-dot { background: var(--success); }
|
|
.flow-step.done .fs-state { color: var(--success); }
|
|
.flow-step.part .fs-dot { background: var(--warn); }
|
|
.flow-step.part .fs-state { color: color-mix(in oklch, var(--warn) 78%, black); }
|
|
.flow-step.doing { background: var(--warn-soft); }
|
|
.flow-step.doing .fs-dot { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in oklch, var(--warn) 22%, transparent); }
|
|
.flow-step.doing .fs-state { color: color-mix(in oklch, var(--warn) 78%, black); }
|
|
a.flow-step.doing:hover { background: color-mix(in oklch, var(--warn) 16%, transparent); }
|
|
@media (max-width: 860px) {
|
|
.flow { grid-template-columns: 1fr; }
|
|
.flow-step { border-right: 0; border-bottom: 1px solid var(--border); }
|
|
.flow-step:last-child { border-bottom: 0; }
|
|
}
|
|
|
|
/* ─── 迷你指标(2×2 数字块) ────────────────────────────────────── */
|
|
.mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
|
|
.mini-stat { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 13px; min-width: 0; }
|
|
.mini-stat .ms-label { font-size: 11.5px; color: var(--muted); }
|
|
.mini-stat .ms-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; margin-top: 3px; }
|
|
.mini-stat .ms-value .unit { font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 2px; }
|
|
.mini-stat .ms-value.pos { color: var(--success); }
|
|
.mini-stat .ms-value.neg { color: var(--danger); }
|
|
|
|
/* ─── 上传组件(拖放区 / 文件条 / 附件选择) ────────────────────── */
|
|
.dropzone {
|
|
border: 1.5px dashed color-mix(in oklch, var(--fg) 28%, var(--border));
|
|
border-radius: var(--radius-lg);
|
|
background: var(--bg);
|
|
padding: 30px 20px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: border-color 0.12s ease, background 0.12s ease;
|
|
}
|
|
.dropzone:hover, .dropzone:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
|
|
.dropzone.dragover { border-color: var(--accent); border-style: solid; background: var(--accent-soft); }
|
|
.dropzone svg { width: 28px; height: 28px; margin: 0 auto 10px; color: var(--muted); }
|
|
.dropzone .dz-title { font-size: 14px; font-weight: 650; }
|
|
.dropzone .dz-sub { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
|
|
.dropzone .dz-sub .dz-browse { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
|
|
.dropzone .dz-formats { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 12px; letter-spacing: 0.02em; }
|
|
|
|
.file-chip {
|
|
display: flex; align-items: center; gap: 10px;
|
|
margin-top: 12px;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
background: var(--surface);
|
|
}
|
|
.file-chip svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
|
|
.file-chip .fc-info { min-width: 0; flex: 1; }
|
|
.file-chip .fc-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.file-chip .fc-meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 1px; }
|
|
.file-chip .fc-remove { background: none; border: 0; color: var(--muted); font-size: 16px; line-height: 1; padding: 4px 8px; border-radius: 6px; flex: none; }
|
|
.file-chip .fc-remove:hover { color: var(--danger); background: var(--danger-soft); }
|
|
|
|
.attach-pick {
|
|
display: inline-flex; align-items: center; gap: 7px;
|
|
padding: 7px 12px;
|
|
min-height: 34px;
|
|
border: 1.5px dashed color-mix(in oklch, var(--fg) 28%, var(--border));
|
|
border-radius: var(--radius);
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
|
|
}
|
|
.attach-pick svg { width: 15px; height: 15px; }
|
|
.attach-pick:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
|
|
|
|
/* ─── 数据表合计行 ─────────────────────────────────────────────── */
|
|
.ds-table tfoot td { background: var(--bg); font-weight: 650; border-top: 1.5px solid color-mix(in oklch, var(--fg) 30%, var(--border)); border-bottom: 0; }
|
|
|
|
/* ─── 入口页(index) ────────────────────────────────────────────── */
|
|
.portal-wrap { min-height: 100vh; display: grid; place-items: center; padding: 40px 24px; }
|
|
.portal-inner { width: 100%; max-width: 880px; position: relative; }
|
|
.portal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
|
|
.portal-card {
|
|
display: block;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
padding: 24px;
|
|
transition: border-color 0.12s ease, transform 0.12s ease;
|
|
}
|
|
.portal-card:hover { border-color: var(--gold-line); }
|
|
.portal-card .pc-role { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--accent); }
|
|
.portal-card h3 { font-size: 17px; font-weight: 700; margin-top: 8px; }
|
|
.portal-card p { color: var(--muted); font-size: 13px; margin-top: 6px; }
|
|
.portal-card .pc-go { font-size: 12.5px; font-weight: 600; color: var(--accent); margin-top: 14px; }
|
|
@media (max-width: 720px) { .portal-grid { grid-template-columns: 1fr; } }
|
|
|
|
/* ─── SPA 视图切换 / 无障碍结构类 ───────────────────────────────── */
|
|
.app-view { display: none; }
|
|
.app-view.is-active { display: block; }
|
|
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
|
|
.skip-link {
|
|
position: fixed; top: 8px; left: 50%; z-index: 500;
|
|
padding: 8px 14px;
|
|
border-radius: var(--radius);
|
|
background: var(--accent); color: var(--surface);
|
|
font-size: 13px; font-weight: 600;
|
|
transform: translate(-50%, -150%);
|
|
transition: transform 0.12s ease;
|
|
}
|
|
.skip-link:focus { transform: translate(-50%, 0); }
|
|
|
|
/* ─── 图标按钮 / 窄屏侧栏折叠 ──────────────────────────────────── */
|
|
.icon-button {
|
|
display: inline-grid; place-items: center;
|
|
width: 34px; height: 34px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
background: var(--surface); color: var(--muted);
|
|
cursor: pointer;
|
|
transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
|
|
}
|
|
.icon-button:hover { color: var(--fg); border-color: color-mix(in oklch, var(--fg) 40%, var(--border)); background: var(--fg-soft); }
|
|
.icon-button svg { width: 18px; height: 18px; }
|
|
.menu-button { display: none; }
|
|
@media (max-width: 1023px) {
|
|
.shell { grid-template-columns: 64px minmax(0, 1fr); }
|
|
.sidebar { width: 64px; }
|
|
.side-brand { padding: 14px 13px; justify-content: center; }
|
|
.brand-text, .nav-label, .nav-group, .side-foot .user-name, .side-foot .user-meta, .side-foot .avatar { display: none; }
|
|
.side-nav a { justify-content: center; padding: 10px 0; }
|
|
.side-nav a .nav-badge { display: none; }
|
|
.theme-seg { grid-template-columns: 1fr; }
|
|
.side-foot .user-row { justify-content: center; }
|
|
.side-foot .logout { margin-left: 0; }
|
|
.content { padding: 24px 20px 72px; }
|
|
}
|
|
@media (max-width: 767px) {
|
|
.shell {
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
}
|
|
.sidebar {
|
|
width: 100%;
|
|
height: auto;
|
|
max-height: none;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
border-right: 0;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.side-brand { border-bottom: 0; padding: 10px 12px; }
|
|
.brand-text { display: none; }
|
|
.side-nav {
|
|
display: flex;
|
|
flex-direction: row;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
padding: 8px 4px;
|
|
flex: 1;
|
|
}
|
|
.side-nav .nav-group { display: none; }
|
|
.side-nav a { flex: none; padding: 8px 10px; }
|
|
.nav-label { display: inline; font-size: 12.5px; }
|
|
.side-foot {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 8px;
|
|
border-top: 0;
|
|
padding: 8px 12px;
|
|
}
|
|
.theme-seg { margin-bottom: 0; width: 92px; grid-template-columns: 1fr 1fr; }
|
|
.account-box { padding: 4px; background: transparent; }
|
|
.side-foot .user-name, .side-foot .user-meta, .side-foot .avatar { display: none; }
|
|
.main { min-height: 0; height: 100%; overflow-x: hidden; overflow-y: auto; }
|
|
}
|
|
|
|
/* ─── Toast 轻量提示 ───────────────────────────────────────────── */
|
|
.toast-region { position: fixed; right: 16px; top: 16px; z-index: var(--z-toast); display: grid; gap: 8px; }
|
|
.toast {
|
|
display: flex; align-items: center; gap: 9px;
|
|
min-width: 260px; max-width: 380px;
|
|
height: 40px;
|
|
padding: 0 16px;
|
|
border: 0;
|
|
border-radius: 999px;
|
|
background: var(--material-toast);
|
|
color: #fff;
|
|
box-shadow: var(--shadow-toast);
|
|
font-size: 13px;
|
|
}
|
|
.toast .t-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 5px; background: var(--muted); }
|
|
.toast .t-body { min-width: 0; }
|
|
.toast .t-title { font-weight: 650; }
|
|
.toast .t-detail { color: var(--muted); font-size: 12px; margin-top: 1px; }
|
|
.toast.success { border-color: color-mix(in oklch, var(--success) 35%, var(--border)); }
|
|
.toast.success .t-dot { background: var(--success); }
|
|
.toast.warn { border-color: color-mix(in oklch, var(--warn) 40%, var(--border)); }
|
|
.toast.warn .t-dot { background: var(--warn); }
|
|
.toast.danger { border-color: color-mix(in oklch, var(--danger) 35%, var(--border)); }
|
|
.toast.danger .t-dot { background: var(--danger); }
|
|
.toast.info { border-color: color-mix(in oklch, var(--info) 35%, var(--border)); }
|
|
.toast.info .t-dot { background: var(--info); }
|
|
@media (max-width: 720px) {
|
|
.toast-region { right: 12px; bottom: 12px; left: 12px; }
|
|
.toast { min-width: 0; max-width: none; }
|
|
}
|
|
|
|
/* ─── 侧滑详情抽屉（用 modal/card token 重画） ─────────────────── */
|
|
.drawer {
|
|
position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-drawer);
|
|
width: min(480px, 94vw);
|
|
display: flex; flex-direction: column;
|
|
background: var(--material-drawer);
|
|
backdrop-filter: blur(28px);
|
|
-webkit-backdrop-filter: blur(28px);
|
|
border-left: 1px solid var(--gold-line);
|
|
box-shadow: var(--shadow-drawer);
|
|
transform: translateX(100%);
|
|
visibility: hidden;
|
|
transition: transform 420ms var(--ease-drawer), visibility 420ms;
|
|
}
|
|
.drawer.is-open { transform: none; visibility: visible; }
|
|
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--border); position: relative; }
|
|
.drawer-head::before {
|
|
content: "";
|
|
position: absolute; top: 8px; left: 50%;
|
|
width: 36px; height: 4px; margin-left: -18px;
|
|
border-radius: 999px; background: var(--grip);
|
|
}
|
|
.drawer-head .d-title { font-size: 16px; font-weight: 700; margin-top: 6px; }
|
|
.drawer-head .d-desc { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
|
|
.drawer-body { flex: 1; overflow-x: hidden; overflow-y: auto; padding: 16px 20px; }
|
|
.drawer-body .kv { grid-template-columns: auto 1fr; gap: 8px 18px; }
|
|
.drawer-body .kv dt { color: var(--muted); white-space: nowrap; }
|
|
.drawer-body .kv dd { text-align: right; word-break: break-all; }
|
|
.drawer-tip { margin: 0 20px 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--muted); font-size: 12.5px; }
|
|
.drawer-tip strong { display: block; color: var(--fg); margin-bottom: 4px; }
|
|
.drawer-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); }
|
|
|
|
/* ─── 加载中骨架 / 表内加载行 ──────────────────────────────────── */
|
|
.skeleton { display: block; border-radius: var(--radius); background: var(--fg-soft); position: relative; overflow: hidden; }
|
|
.skeleton::after {
|
|
content: ""; position: absolute; inset: 0;
|
|
background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--surface) 60%, transparent), transparent);
|
|
animation: skeleton-shimmer 1.3s ease-in-out infinite;
|
|
}
|
|
@keyframes skeleton-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
|
|
.skeleton-line { height: 12px; margin-bottom: 10px; }
|
|
.loading-row { padding: 40px 20px; text-align: center; color: var(--muted); font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.04em; }
|
|
.loading-inline { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-family: var(--font-mono); font-size: 12.5px; }
|
|
.loading-inline::before {
|
|
content: ""; width: 12px; height: 12px; border-radius: 50%;
|
|
border: 2px solid var(--border); border-top-color: var(--accent);
|
|
animation: loading-spin 0.7s linear infinite;
|
|
}
|
|
@keyframes loading-spin { to { transform: rotate(360deg); } }
|
|
|
|
/* ─── 提示条补充：成功态 ───────────────────────────────────────── */
|
|
.notice.success { background: var(--success-soft); border-color: color-mix(in oklch, var(--success) 30%, transparent); }
|
|
.notice.success .n-title { color: color-mix(in oklch, var(--success) 82%, black); }
|
|
|
|
/* ─── 公司端 · 转账往来（方案 A，HEL-177）───────────────────────────
|
|
新模块范围内用 --info 品蓝；不改全站 accent。取值一律既有 token。 */
|
|
body[data-portal="company"] .side-nav a[data-view="transfers"].active {
|
|
background: var(--info-soft);
|
|
color: var(--fg);
|
|
}
|
|
body[data-portal="company"] .side-nav a[data-view="transfers"].active svg {
|
|
color: var(--info);
|
|
}
|
|
[data-page="transfers"] .btn-primary {
|
|
background: var(--accent-solid);
|
|
border-color: var(--accent-solid);
|
|
color: #fff;
|
|
}
|
|
[data-page="transfers"] .btn-primary:hover {
|
|
background: var(--accent);
|
|
border-color: var(--accent);
|
|
}
|
|
[data-page="transfers"] .loading-inline::before {
|
|
border-top-color: var(--accent);
|
|
}
|
|
[data-page="transfers"] .stat-card .stat-value.amt-in { color: var(--success); }
|
|
[data-page="transfers"] .stat-card .stat-value.amt-out { color: var(--danger); }
|
|
[data-page="transfers"] .ds-table tbody tr.is-pending {
|
|
background: var(--orange-bg);
|
|
}
|
|
[data-page="transfers"] .ds-table tbody tr.is-pending:hover {
|
|
background: var(--warn-soft);
|
|
}
|
|
|
|
.xfer-split {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
background: var(--surface);
|
|
}
|
|
.xfer-split-pane {
|
|
padding: 16px 18px;
|
|
}
|
|
.xfer-split-pane.confirmed {
|
|
background: var(--green-bg);
|
|
border-right: 1px solid var(--border);
|
|
}
|
|
.xfer-split-pane.pending {
|
|
background: var(--orange-bg);
|
|
}
|
|
.xfer-split-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.xfer-split-value {
|
|
font-size: 22px;
|
|
font-weight: 650;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.xfer-split-pane.confirmed .xfer-split-value { color: var(--success); }
|
|
.xfer-split-pane.pending .xfer-split-value { color: var(--warn); }
|
|
.xfer-split-note {
|
|
margin-top: 6px;
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
}
|
|
.xfer-dir-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
padding: 2px 8px;
|
|
border-radius: 999px;
|
|
}
|
|
.xfer-dir-tag.recv {
|
|
background: var(--success-soft);
|
|
color: var(--success);
|
|
}
|
|
.xfer-dir-tag.pay {
|
|
background: var(--danger-soft);
|
|
color: var(--danger);
|
|
}
|
|
.xfer-dir-tag.flat {
|
|
background: var(--fg-soft);
|
|
color: var(--muted);
|
|
}
|
|
|
|
@media (max-width: 820px) {
|
|
.xfer-split { grid-template-columns: 1fr; }
|
|
.xfer-split-pane.confirmed { border-right: 0; border-bottom: 1px solid var(--border); }
|
|
}
|
|
|
|
/* ─── 霜曜融合补遗：证据金、空态、降级、三态勾选 ───────────────── */
|
|
.amt-gold, .kv dd.amt-gold, .drawer-body .kv dd.amt-gold { color: var(--gold); font-weight: 750; font-size: 22px; }
|
|
.evidence-flag {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
color: var(--gold); font-size: 11.5px; font-weight: 600;
|
|
}
|
|
.empty-action {
|
|
border: 1px dashed var(--hairline);
|
|
border-radius: 14px;
|
|
padding: 32px 20px;
|
|
text-align: center;
|
|
}
|
|
.restricted-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; padding: 24px; }
|
|
.ds-check {
|
|
appearance: none;
|
|
width: 15px; height: 15px;
|
|
border: 1px solid var(--hairline);
|
|
border-radius: 4px;
|
|
background: var(--surface);
|
|
vertical-align: middle;
|
|
flex: none;
|
|
}
|
|
.ds-check:checked {
|
|
background: var(--accent);
|
|
border-color: var(--accent);
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='white' stroke-width='1.8' d='M2.2 6.2l2.4 2.4 5.2-5.2'/%3E%3C/svg%3E");
|
|
background-size: 10px 10px;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
.ds-check:indeterminate {
|
|
background: var(--accent);
|
|
border-color: var(--accent);
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect fill='white' x='1.5' y='5' width='9' height='2' rx='1'/%3E%3C/svg%3E");
|
|
background-size: 10px 10px;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
.batch-bar { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
|
|
.login-page { min-height: 100vh; overflow-x: hidden; overflow-y: auto; }
|
|
.toast .t-detail { color: rgba(255,255,255,.72); }
|
|
.toast .t-dot { margin-top: 0; }
|
|
|
|
@media (max-width: 480px) {
|
|
.grid-4, .grid-5, .grid-2, .grid-3 { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
.drawer, .modal-backdrop, .toast { transition-duration: 150ms !important; }
|
|
.skeleton::after { animation: none; }
|
|
}
|
|
|
|
@media (prefers-reduced-transparency: reduce) {
|
|
.sidebar, .topbar { background: var(--surface); backdrop-filter: none; }
|
|
.drawer, .modal { background: var(--surface); backdrop-filter: none; }
|
|
.toast { background: var(--material-toast); }
|
|
}
|
|
|
|
@media (prefers-contrast: more) {
|
|
:root, .v-fusion {
|
|
--hairline: rgba(0, 0, 0, 0.28);
|
|
--gold: #6b5310;
|
|
--gold-line: rgba(107, 83, 16, 0.55);
|
|
}
|
|
html[data-theme="night"], .v-fusion[data-theme="night"] {
|
|
--hairline: rgba(255, 255, 255, 0.28);
|
|
--gold: #f0cd7a;
|
|
--gold-line: rgba(240, 205, 122, 0.6);
|
|
}
|
|
}
|
|
|
|
/* ─── 提醒管理：三步发送流（HEL-230） ─────────────────────────── */
|
|
.send-flow {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
|
|
align-items: stretch;
|
|
gap: 0;
|
|
}
|
|
.sf-step {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
padding: 0 18px;
|
|
}
|
|
.sf-step:first-child { padding-left: 0; }
|
|
.sf-step:last-child { padding-right: 0; }
|
|
.sf-step + .sf-step { border-left: 1px solid var(--border); }
|
|
.sf-step-head {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 8px;
|
|
}
|
|
.sf-idx {
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
font-weight: 650;
|
|
color: var(--accent);
|
|
flex: none;
|
|
}
|
|
.sf-step-head > span:nth-child(2) { font-size: 13px; font-weight: 650; }
|
|
.sf-step-head .meta { margin-left: auto; }
|
|
.sf-step .hint { font-size: 11.5px; color: var(--muted); }
|
|
.sf-step .hint.error { color: var(--danger); }
|
|
.pick-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
.pick {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 5px 10px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 999px;
|
|
background: var(--surface);
|
|
color: var(--fg);
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
|
|
}
|
|
.pick:hover { background: var(--fg-soft); }
|
|
.pick:has(input:checked) {
|
|
background: var(--accent-soft);
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
}
|
|
.pick input { width: auto; margin: 0; }
|
|
.sf-send {
|
|
margin-top: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
.sf-send .btn-primary { width: 100%; }
|
|
|
|
[data-page="reminders"] .history-table {
|
|
border: 0;
|
|
}
|
|
[data-page="reminders"] .history-table .ds-table {
|
|
min-width: 0;
|
|
}
|
|
[data-page="reminders"] .history-table .ds-table th:nth-child(1),
|
|
[data-page="reminders"] .history-table .ds-table td:nth-child(1) {
|
|
width: 14%;
|
|
}
|
|
[data-page="reminders"] .history-table .ds-table th:nth-child(4),
|
|
[data-page="reminders"] .history-table .ds-table td:nth-child(4) {
|
|
width: 28%;
|
|
white-space: normal;
|
|
min-width: 160px;
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.send-flow { grid-template-columns: minmax(0, 1fr); }
|
|
.sf-step { padding: 14px 0 0; }
|
|
.sf-step:first-child { padding-top: 0; }
|
|
.sf-step + .sf-step {
|
|
border-left: 0;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
}
|
|
|
|
/* ─── 月结 / 重开 / 审计（HEL-268，仅 5 条组件规则） ───────────── */
|
|
.btn-warn {
|
|
background: var(--warn);
|
|
border-color: var(--warn);
|
|
color: var(--surface);
|
|
}
|
|
.btn-warn:hover {
|
|
background: color-mix(in oklch, var(--warn) 88%, black);
|
|
border-color: color-mix(in oklch, var(--warn) 88%, black);
|
|
}
|
|
.btn-warn[disabled] {
|
|
opacity: 1;
|
|
background: var(--fg-soft);
|
|
border-color: var(--border);
|
|
color: var(--muted);
|
|
}
|
|
|
|
.pill-lock {
|
|
background: var(--fg-soft);
|
|
color: var(--muted);
|
|
height: 23px;
|
|
}
|
|
.pill-lock::before {
|
|
width: 11px;
|
|
height: 11px;
|
|
border-radius: 0;
|
|
background-color: currentColor;
|
|
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='5' y='11' width='14' height='10' rx='1.5'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
|
|
}
|
|
|
|
.tl-cell.locked { background: var(--fg-soft); }
|
|
.tl-cell.locked .tl-state { color: var(--muted); }
|
|
.tl-cell.locked .tl-state::before {
|
|
content: "";
|
|
width: 11px;
|
|
height: 11px;
|
|
background-color: currentColor;
|
|
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='5' y='11' width='14' height='10' rx='1.5'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
|
|
}
|
|
.tl-cell.reopened { background: var(--warn-soft); }
|
|
.tl-cell.reopened .tl-state { color: color-mix(in oklch, var(--warn) 80%, black); }
|
|
.tl-cell.failed { background: var(--danger-soft); }
|
|
.tl-cell.failed .tl-state { color: var(--danger); }
|
|
|
|
.diff-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
|
|
gap: 10px 12px;
|
|
align-items: start;
|
|
}
|
|
.diff-grid .diff-row {
|
|
display: contents;
|
|
}
|
|
.diff-grid .diff-label {
|
|
grid-column: 1 / -1;
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
}
|
|
.diff-grid .diff-before {
|
|
color: var(--muted);
|
|
text-decoration: line-through;
|
|
font-family: var(--font-mono);
|
|
font-size: 13px;
|
|
}
|
|
.diff-grid .diff-arrow {
|
|
color: var(--muted);
|
|
align-self: center;
|
|
}
|
|
.diff-grid .diff-after {
|
|
color: color-mix(in oklch, var(--warn) 78%, black);
|
|
font-family: var(--font-mono);
|
|
font-size: 13px;
|
|
}
|
|
.diff-grid .diff-row.changed .diff-before,
|
|
.diff-grid .diff-row.changed .diff-after,
|
|
.diff-grid .diff-row.changed .diff-arrow {
|
|
box-shadow: inset 3px 0 0 var(--warn);
|
|
padding-left: 8px;
|
|
}
|
|
@media (max-width: 860px) {
|
|
.diff-grid { grid-template-columns: minmax(0, 1fr); }
|
|
.diff-grid .diff-arrow { transform: rotate(90deg); justify-self: center; }
|
|
}
|
|
|
|
.empty-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
margin: 0 auto 12px;
|
|
color: var(--border);
|
|
display: block;
|
|
}
|
|
|
|
.closing-panel.is-processing {
|
|
pointer-events: none;
|
|
opacity: 0.55;
|
|
}
|
|
.closing-kv {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 12px;
|
|
margin-top: 16px;
|
|
padding-top: 14px;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
.closing-kv .ck-label { font-size: 12px; color: var(--muted); }
|
|
.closing-kv .ck-value { font-family: var(--font-mono); font-size: 13px; margin-top: 4px; }
|
|
.lock-view-only { color: var(--muted); font-size: 12px; }
|
|
.audit-event-cards { display: none; }
|
|
@media (max-width: 460px) {
|
|
.closing-kv { grid-template-columns: 1fr 1fr; }
|
|
[data-page="period-audit"] .table-wrap { display: none; }
|
|
.audit-event-cards { display: grid; gap: 10px; }
|
|
}
|
|
|
|
/* ─── 夜间滚动条：金色滑块 + 深色轨道（HEL-351） ─────────────── */
|
|
html[data-theme="night"] ::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
html[data-theme="night"] ::-webkit-scrollbar-track {
|
|
background: var(--surface-2);
|
|
}
|
|
html[data-theme="night"] ::-webkit-scrollbar-thumb {
|
|
background-color: var(--gold);
|
|
border: 2px solid var(--surface-2);
|
|
border-radius: 999px;
|
|
background-clip: padding-box;
|
|
}
|
|
html[data-theme="night"] ::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--gold-bright);
|
|
}
|
|
html[data-theme="night"] ::-webkit-scrollbar-corner {
|
|
background: var(--surface);
|
|
}
|
|
|
|
/* ─── 日期选择弹层：锚定触发器，夜间黑金点缀 ───────────────── */
|
|
.ds-datepicker {
|
|
position: fixed;
|
|
z-index: var(--z-tooltip);
|
|
width: 280px;
|
|
padding: 12px;
|
|
background: var(--material-drawer);
|
|
backdrop-filter: blur(28px);
|
|
-webkit-backdrop-filter: blur(28px);
|
|
border: 1px solid var(--hairline);
|
|
border-radius: 16px;
|
|
box-shadow: var(--shadow-modal);
|
|
color: var(--text);
|
|
}
|
|
html[data-theme="night"] .ds-datepicker {
|
|
background: var(--surface);
|
|
border-color: var(--gold-line);
|
|
}
|
|
.ds-datepicker[hidden] { display: none !important; }
|
|
.ds-dp-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.ds-dp-title {
|
|
font-size: 13.5px;
|
|
font-weight: 650;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
html[data-theme="night"] .ds-dp-title { color: var(--gold); }
|
|
.ds-dp-nav {
|
|
width: 28px;
|
|
height: 28px;
|
|
border: 0;
|
|
border-radius: 7px;
|
|
background: var(--fill);
|
|
color: var(--text-2);
|
|
}
|
|
.ds-dp-nav:hover { background: var(--hover); color: var(--text); }
|
|
.ds-dp-week,
|
|
.ds-dp-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
gap: 2px;
|
|
}
|
|
.ds-dp-week span {
|
|
height: 28px;
|
|
display: grid;
|
|
place-items: center;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--text-3);
|
|
}
|
|
.ds-dp-day {
|
|
height: 32px;
|
|
border: 0;
|
|
border-radius: 8px;
|
|
background: transparent;
|
|
color: var(--text);
|
|
font-size: 13px;
|
|
font-variant-numeric: tabular-nums;
|
|
font-family: var(--font-mono);
|
|
}
|
|
.ds-dp-day:hover { background: var(--hover); }
|
|
.ds-dp-day.is-other { color: var(--text-3); }
|
|
.ds-dp-day.is-today {
|
|
box-shadow: inset 0 0 0 1px var(--accent);
|
|
color: var(--accent);
|
|
}
|
|
.ds-dp-day.is-selected {
|
|
background: var(--accent-soft);
|
|
color: var(--accent);
|
|
font-weight: 700;
|
|
}
|
|
.ds-dp-day.is-selected.is-today { box-shadow: none; }
|
|
html[data-theme="night"] .ds-dp-day.is-today {
|
|
box-shadow: inset 0 0 0 1px var(--gold-line);
|
|
color: var(--gold);
|
|
}
|
|
html[data-theme="night"] .ds-dp-day.is-selected {
|
|
background: var(--gold-soft);
|
|
color: var(--gold);
|
|
}
|
|
.ds-dp-day:disabled {
|
|
color: var(--text-3);
|
|
opacity: 0.45;
|
|
cursor: not-allowed;
|
|
}
|
|
.ds-dp-foot {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 8px;
|
|
padding-top: 8px;
|
|
border-top: 1px solid var(--hairline);
|
|
}
|
|
.ds-dp-foot button {
|
|
height: 26px;
|
|
padding: 0 10px;
|
|
border: 0;
|
|
border-radius: 7px;
|
|
background: transparent;
|
|
color: var(--text-2);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
.ds-dp-foot button:hover { background: var(--hover); color: var(--text); }
|
|
|
|
/* ─── 一次性初始密码领取 ─────────────────────────────────────── */
|
|
.cred-box {
|
|
display: grid;
|
|
gap: 10px;
|
|
padding: 12px 14px;
|
|
border: 1px solid var(--gold-line);
|
|
border-radius: 14px;
|
|
background: var(--gold-soft);
|
|
}
|
|
.cred-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
}
|
|
.cred-row .cred-label {
|
|
flex: none;
|
|
width: 72px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--text-2);
|
|
}
|
|
.cred-row .cred-value {
|
|
flex: 1;
|
|
min-width: 0;
|
|
font-family: var(--font-mono);
|
|
font-variant-numeric: tabular-nums;
|
|
font-size: 14px;
|
|
font-weight: 650;
|
|
color: var(--text);
|
|
word-break: break-all;
|
|
}
|
|
.cred-warn {
|
|
margin-top: 12px;
|
|
font-size: 12.5px;
|
|
color: var(--text-2);
|
|
}
|
|
|