feat(v1.9.2): 墨绿渐变 UI 重构(全站覆盖层),修复明暗主题切换

- 重做设计变量:墨绿主色 #16543F→#2FA37A 三段渐变,亮/暗两套 token 同时挂 data-theme 与 data-bs-theme
- 顶栏、导航选中态、按钮、卡片、表格、表单、日历格与热力、抽屉、小键盘、标签页、下拉、提示、滚动条全部改为墨绿渐变体系
- 修复暗色切换后部分控件仍用亮色变量:所有组件色值改为引用 --ink-* 变量,切换即时生效
- 大屏同步墨绿渐变背景与标签页
- 版本号 1.9.1 → 1.9.2;仅前端样式,数据库与业务逻辑零改动

注:本次截图脚本在无头 Chrome 启动阶段挂起,未取得实际运行截图,视觉验收待补。
This commit is contained in:
subtrack
2026-10-19 23:13:08 +08:00
parent fb6a84cb7e
commit 2ca22043a7
3 changed files with 199 additions and 2 deletions
+191
View File
@@ -1142,3 +1142,194 @@ fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.keypad .key { height: 50px; font-size: 18px; font-weight: 600; }
.keypad .key-ok { color: #fff; }
.season-band { opacity: 0.6; }
/* ============================================================
v1.9.2 · 墨绿渐变设计系统(覆盖层,保留全部组件类名)
明暗两套均由 [data-theme] / [data-bs-theme] 双属性驱动
============================================================ */
:root, :root[data-theme="light"], :root[data-bs-theme="light"] {
--ink-0: #f5f8f6;
--ink-1: #eaf1ed;
--ink-2: #ffffff;
--ink-line: #d7e3dc;
--ink-ink: #10241d;
--ink-ink-2: #2d4a3f;
--ink-muted: #6a8579;
--ink-green: #16543f;
--ink-green-2: #1d7a58;
--ink-green-3: #2fa37a;
--ink-glow: rgba(47, 163, 122, 0.18);
--ink-grad: linear-gradient(135deg, #16543f 0%, #1d7a58 45%, #2fa37a 100%);
--ink-grad-soft: linear-gradient(135deg, rgba(22,84,63,.08), rgba(47,163,122,.04));
--bs-body-bg: #f5f8f6;
--bs-body-color: #10241d;
--bs-border-color: #d7e3dc;
--bs-secondary-bg: #eaf1ed;
--bs-tertiary-bg: #e2ece6;
--bs-primary: #16543f;
--bs-primary-rgb: 22, 84, 63;
--bs-success: #1d7a58;
--bs-success-rgb: 29, 122, 88;
--bs-link-color: #16543f;
--bs-border-radius: .65rem;
}
:root[data-theme="dark"], :root[data-bs-theme="dark"] {
--ink-0: #0b1512;
--ink-1: #101d18;
--ink-2: #14241e;
--ink-line: #1f352c;
--ink-ink: #e6f2ec;
--ink-ink-2: #b9d2c6;
--ink-muted: #7f9c8f;
--ink-green: #2fa37a;
--ink-green-2: #3dbd90;
--ink-green-3: #63d6ad;
--ink-glow: rgba(63, 214, 173, 0.22);
--ink-grad: linear-gradient(135deg, #0d3a2b 0%, #145841 45%, #1d7a58 100%);
--ink-grad-soft: linear-gradient(135deg, rgba(29,122,88,.18), rgba(63,214,173,.06));
--bs-body-bg: #0b1512;
--bs-body-color: #e6f2ec;
--bs-border-color: #1f352c;
--bs-secondary-bg: #101d18;
--bs-tertiary-bg: #16261f;
--bs-primary: #3dbd90;
--bs-primary-rgb: 61, 189, 144;
--bs-success: #3dbd90;
--bs-success-rgb: 61, 189, 144;
--bs-link-color: #63d6ad;
}
body {
background:
radial-gradient(1200px 520px at 12% -10%, rgba(47,163,122,.16), transparent 60%),
radial-gradient(900px 420px at 100% 0%, rgba(22,84,63,.14), transparent 55%),
var(--ink-0) !important;
color: var(--ink-ink) !important;
font-family: "Inter", "PingFang SC", "Microsoft YaHei UI", system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
}
a { color: var(--bs-link-color); text-decoration: none; }
a:hover { color: var(--ink-green-3); }
/* 顶栏 */
.navbar {
background: linear-gradient(90deg, rgba(22,84,63,.10), rgba(47,163,122,.05)) !important;
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--ink-line) !important;
}
.navbar-brand {
background: var(--ink-grad);
-webkit-background-clip: text; background-clip: text; color: transparent !important;
font-weight: 800; letter-spacing: .04em;
}
.navbar .nav-link { color: var(--ink-ink-2) !important; border-radius: .5rem; padding: .35rem .7rem !important; }
.navbar .nav-link:hover { background: var(--ink-grad-soft); color: var(--ink-ink) !important; }
.navbar .nav-link.active {
color: #fff !important;
background: var(--ink-grad);
box-shadow: 0 6px 18px -8px var(--ink-glow);
}
.navbar .form-control {
background: var(--ink-2); border-color: var(--ink-line); color: var(--ink-ink);
}
.navbar .form-control:focus { border-color: var(--ink-green-3); box-shadow: 0 0 0 .2rem var(--ink-glow); }
/* 徽标 */
.badge.text-bg-danger { background: linear-gradient(135deg, #8f2f2a, #c4453d) !important; }
.badge.text-bg-warning { background: linear-gradient(135deg, #8a5a14, #c98a2c) !important; color: #fff !important; }
.badge.text-bg-secondary { background: var(--ink-1) !important; color: var(--ink-ink-2) !important; border: 1px solid var(--ink-line); }
/* 按钮 */
.btn { border-radius: .55rem; font-weight: 600; transition: transform .08s ease, box-shadow .15s ease, background .15s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary, .btn-success {
background: var(--ink-grad) !important; border: 0 !important; color: #fff !important;
box-shadow: 0 8px 20px -12px var(--ink-glow);
}
.btn-primary:hover, .btn-success:hover { filter: brightness(1.08); }
.btn-outline-secondary { border-color: var(--ink-line); color: var(--ink-ink-2); }
.btn-outline-secondary:hover { background: var(--ink-grad-soft); border-color: var(--ink-green-3); color: var(--ink-ink); }
.btn-ghost { background: transparent; border: 1px solid transparent; color: var(--ink-ink-2); }
.btn-ghost:hover { background: var(--ink-1); border-color: var(--ink-line); }
.btn-danger, .btn-urgent { background: linear-gradient(135deg, #8f2f2a, #c4453d) !important; border: 0; color: #fff; }
/* 卡片与面板 */
.card, .panel, .table-wrap, .drawer, .section.card, .form.card, .minical {
background: var(--ink-2) !important;
border: 1px solid var(--ink-line) !important;
border-radius: 1rem !important;
box-shadow: 0 18px 40px -32px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
}
.card-header, .panel-head { background: var(--ink-grad-soft) !important; border-color: var(--ink-line) !important; }
/* 表格 */
.table { --bs-table-bg: transparent; --bs-table-color: var(--ink-ink); margin: 0; }
.table thead th { background: var(--ink-1) !important; color: var(--ink-muted) !important; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; border-color: var(--ink-line) !important; }
.table td { border-color: var(--ink-line) !important; vertical-align: middle; }
.table tbody tr:hover { background: var(--ink-grad-soft); }
/* 表单 */
.form-control, .form-select {
background: var(--ink-2); border-color: var(--ink-line); color: var(--ink-ink); border-radius: .55rem;
}
.form-control:focus, .form-select:focus { border-color: var(--ink-green-3); box-shadow: 0 0 0 .2rem var(--ink-glow); background: var(--ink-2); color: var(--ink-ink); }
.form-label, label > span { color: var(--ink-ink-2); font-weight: 600; font-size: .8rem; }
/* 日历 */
.cal-grid { border-radius: 1rem; overflow: hidden; background: var(--ink-2); }
.cal-dow { background: var(--ink-1); border-color: var(--ink-line); }
.cal-cell { border-color: var(--ink-line); color: var(--ink-ink); }
.cal-cell:hover { background: var(--ink-grad-soft); }
.cal-cell.out { opacity: .35; }
.cal-cell.sel { box-shadow: inset 0 0 0 2px var(--ink-green-3); }
.cal-cell.today .dnum { background: var(--ink-grad); color: #fff; box-shadow: 0 6px 16px -8px var(--ink-glow); }
.cal-cell.heat-1 { background: rgba(47,163,122,.07); }
.cal-cell.heat-2 { background: rgba(47,163,122,.12); }
.cal-cell.heat-3 { background: rgba(47,163,122,.18); }
.cal-cell.heat-4 { background: rgba(47,163,122,.26); }
.cell-count b { color: var(--ink-green-3); font-weight: 800; }
.cell-count span { color: var(--ink-muted); }
/* 抽屉 */
.drawer { backdrop-filter: blur(6px); }
.drawer-head { background: var(--ink-grad-soft) !important; border-color: var(--ink-line) !important; }
.drawer-clock b { background: var(--ink-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.task.list-group-item { border-color: var(--ink-line) !important; }
.task.urgent { background: linear-gradient(90deg, rgba(196,69,61,.14), transparent); }
.ticket { border-radius: .35rem; }
/* 小键盘 */
.keypad .key { background: var(--ink-2); border-color: var(--ink-line); color: var(--ink-ink); height: 52px; border-radius: .75rem; }
.keypad .key:hover { border-color: var(--ink-green-3); color: var(--ink-green-3); transform: translateY(-1px); }
.keypad .key-ok { background: var(--ink-grad); border: 0; color: #fff; box-shadow: 0 10px 24px -12px var(--ink-glow); }
/* 标签页 */
.pkg-tabs a, .scr-tabs a { background: var(--ink-2); border-color: var(--ink-line); color: var(--ink-ink-2); border-radius: 999px; }
.pkg-tabs a.on, .scr-tabs a.on { background: var(--ink-grad); border-color: transparent; color: #fff; }
/* 提示与弹层 */
.alert { border-radius: .75rem; border: 1px solid var(--ink-line); }
.flash { background: var(--ink-grad) !important; color: #fff; border-radius: .75rem; }
.dropdown-menu { background: var(--ink-2); border-color: var(--ink-line); border-radius: .75rem; box-shadow: 0 20px 40px -24px rgba(0,0,0,.6); }
.dropdown-item { color: var(--ink-ink-2); }
.dropdown-item:hover { background: var(--ink-grad-soft); color: var(--ink-ink); }
/* 滚动条 */
* { scrollbar-color: var(--ink-green-3) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ink-green-2); border-radius: 999px; border: 2px solid var(--ink-0); }
/* 大屏同步 */
.scr { background: transparent; }
.scr-brand .mark { background: var(--ink-grad); }
.scr-kpis .kpi { background: var(--ink-2); border-color: var(--ink-line); border-radius: 1rem; }
.kpi b { background: var(--ink-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.heat-cell { border-color: var(--ink-line); background: var(--ink-1); }
.heat-cell.h1 { background: rgba(47,163,122,.14); }
.heat-cell.h2 { background: rgba(47,163,122,.26); }
.heat-cell.h3 { background: rgba(47,163,122,.40); }
.heat-cell.h4 { background: rgba(47,163,122,.58); }
+7 -1
View File
@@ -58,7 +58,10 @@
html, body { height: 100%; margin: 0; }
body {
background: var(--bg);
background:
radial-gradient(1200px 600px at 15% -10%, rgba(47,163,122,.18), transparent 60%),
radial-gradient(900px 500px at 100% 0%, rgba(22,84,63,.22), transparent 55%),
var(--bg);
color: var(--ink);
font-family: "Bahnschrift", "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
font-size: 14px;
@@ -418,3 +421,6 @@ body::before {
.heat-cell.h3 { background: rgba(var(--bs-success-rgb), 0.40); }
.heat-cell.h4 { background: rgba(var(--bs-success-rgb), 0.58); }
.scr-kpis .kpi { --bs-card-border-color: var(--bs-border-color); }
/* v1.9.2 ink */
.scr-tabs a.on { background: linear-gradient(135deg,#16543f,#2fa37a); border-color: transparent; }