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
@@ -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); }
|
||||
|
||||
@@ -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; }
|
||||
|
||||
Reference in New Issue
Block a user