diff --git a/web/style.css b/web/style.css index ed42f0a..72ea520 100644 --- a/web/style.css +++ b/web/style.css @@ -16,6 +16,8 @@ --green: #5fdd7d; --green-dim: #2e6b3d; + --violet: #b88ef5; + --violet-dim:#503070; --amber: #f0b429; --amber-dim: #6b5414; --red: #ff5d5d; @@ -23,9 +25,92 @@ --cyan: #59c8d8; --cyan-dim: #1e4e57; + /* ── 辉光（text-shadow / box-shadow 用） ── */ + --glow-green: 0 0 12px rgba(95, 221, 125, .45); + --glow-violet: 0 0 14px rgba(184, 142, 245, .4); + --glow-cyan: 0 0 18px rgba(89, 200, 216, .5); + --glow-red: 0 0 14px rgba(255, 93, 93, .3); + + /* ── 圆角 ── */ + --radius-xs: 3px; + --radius-sm: 4px; + --radius-md: 6px; + --radius-lg: 10px; + --radius-dot: 50%; + + /* ── 间距阶（px） ── */ + --space-1: 4px; + --space-2: 6px; + --space-3: 8px; + --space-4: 10px; + --space-5: 12px; + --space-6: 14px; + --space-7: 16px; + --space-8: 20px; + --space-9: 22px; + + /* ── 控件内边距 ── */ + --pad-btn: 6px 14px; + --pad-btn-xs: 2px 8px; + --pad-input: 7px 10px; + --pad-chip: 1px 8px; + --pad-card: 12px 14px; + + /* ── 浮层阴影 ── */ + --shadow-pop: 0 10px 30px rgba(0, 0, 0, .65); + --shadow-modal: 0 18px 60px rgba(0, 0, 0, .6); + --shadow-toast: 0 8px 30px rgba(0, 0, 0, .55); + + /* ── 语义别名 ── */ + --surface-page: var(--bg); + --surface-rail: var(--bg-deep); + --surface-card: var(--panel); + --surface-raised: var(--panel-2); + --text-body: var(--ink); + --text-secondary: var(--muted); + --text-disabled: var(--faint); + --border-default: var(--line); + --border-soft: var(--line-soft); + --accent: var(--green); + --accent-dim: var(--green-dim); + --status-go: var(--green); + --status-gate: var(--violet); + --status-bad: var(--red); + --status-run: var(--cyan); + --mono: 'IBM Plex Mono', 'Noto Sans SC', ui-monospace, monospace; } +/* ── Light 主题： 激活 — 纸白底，信号色加深保对比，-dim 变淡色底 ── */ +[data-theme="light"] { + --bg: #f3f6f1; + --bg-deep: #e9eee6; + --panel: #fcfdfb; + --panel-2: #e4ebe1; + --line: #c9d4c6; + --line-soft: #dbe3d8; + + --ink: #1d251b; + --muted: #5c6b57; + --faint: #92a08c; + + --green: #1b8f46; + --green-dim: #b5e2c3; + --violet: #7747d1; + --violet-dim:#dcccf6; + --amber: #946d06; + --amber-dim: #ecd9a0; + --red: #cd3434; + --red-dim: #f2baba; + --cyan: #0b7488; + --cyan-dim: #b2dfe7; + + --glow-green: 0 0 10px rgba(27, 143, 70, .25); + --glow-violet: 0 0 10px rgba(119, 71, 209, .22); + --glow-cyan: 0 0 12px rgba(11, 116, 136, .25); + --glow-red: 0 0 10px rgba(205, 52, 52, .2); +} + * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; }