/* ============================================================ skin.css — 皮肤变量层（#1181） 加载顺序：style.css → design-system.css → shell-premium.css → content-premium.css → 本文件（最后） 只覆盖 --shell-*（侧栏）与 --cp-*（内容区品牌/画布）两组变量， 零布局改动、零 HTML/JS 逻辑改动。切换入口：顶栏调色板按钮， + localStorage('scheduler_skin') 记忆。 5 套主题： dawn 晨光白（默认，无覆盖 = 现行纯白清爽版） ocean 深海蓝（深蓝侧栏 + 天青点缀） graphite 石墨黑（近黑侧栏 + 靛蓝点缀） aurora 极光紫（深紫侧栏 + 紫罗兰点缀） forest 森林绿（深绿侧栏 + 祖母绿点缀） ⚠️ 语义色（.tt-* / .btn-danger / .sched-mode-pill 等）一律不碰。 #1185 补充：新增 --top-*（顶栏）变量层。 原因：顶栏 .topbar 的背景/文字用的是全局量 --glass-bg-strong / --text / --border-light，而 --bell-btn 更是硬编码 background:#fff， env-pill 用的 --shell-pill-* 也从未被各皮肤覆盖 —— 于是换肤时 「侧栏变了、顶栏纹丝不动」，且深色皮肤下白底按钮与深底顶栏严重割裂。 修法：顶栏全面改绑 --top-*，每套皮肤给出成组的顶栏配色； 绑定规则写在**本文件末尾**（同特异性但最后加载 → 胜出，无需 !important）， 因此完全不需要改动 style.css / design-system.css，零回归风险。 ============================================================ */ /* ── 顶栏变量默认值（dawn 晨光白 = 现行浅色，与未换肤时逐像素一致） ── */ :root { --top-bg: rgba(255, 255, 255, .92); --top-border: rgba(15, 23, 42, .08); --top-fg: #0f172a; --top-fg-dim: #64748b; --top-hover-bg: #f1f5f9; --top-chip-bg: #ffffff; --top-chip-fg: #334155; --top-chip-bd: rgba(15, 23, 42, .10); --top-input-bg: rgba(15, 23, 42, .03); --top-input-bd: rgba(15, 23, 42, .09); --top-panel-bg: #ffffff; --top-panel-fg: #0f172a; --cs-panel-bg: #ffffff; /* #1186 dawn 对比度修补：未换肤（默认）时这三项低于 WCAG 门槛—— --border #e4e8f0 on #fff = 1.23:1（需 1.6，描边几乎看不见） --border-strong #d7dde8 on #fff = 1.36:1 --text-muted #94a3b8 on #fff = 2.56:1（需 3.0，占位符/弱化文字偏虚） 刻意**写在本文件而非改 design-system.css**：保持基础文件原样， 万一用户对默认观感不满意，删掉这几行即可完整回滚。 */ --border: #c9ccd3; --border-strong: #c6cbd5; --text-muted: #8896a9; --cp-text-3: #8896a9; } /* ── 深海蓝 ── */ html[data-skin="ocean"] { --shell-bg: #0b2a4a; --shell-bg-soft: rgba(255, 255, 255, .06); --shell-group: #7da2c8; --shell-hair: rgba(255, 255, 255, .12); --shell-hair-strong: rgba(255, 255, 255, .22); --shell-nav-fg: #c3d7ec; --shell-nav-fg-hover: #ffffff; --shell-nav-bg-hover: rgba(255, 255, 255, .08); --shell-active-bg: rgba(56, 189, 248, .18); --shell-active-fg: #7dd3fc; --shell-brand-fg: #ffffff; --shell-brand-sub: #8fb3d4; --shell-footer-fg: #7da2c8; --shell-search-bg: rgba(15, 23, 42, .045); --shell-search-bd: rgba(15, 23, 42, .09); --cp-canvas: #f4f8fd; --cp-brand: #0369a1; --cp-brand-2: #0ea5e9; --cp-aurora: linear-gradient(100deg, #0284c7 0%, #0ea5e9 52%, #38bdf8 100%); --cp-ring: rgba(2, 132, 199, .18); --cp-tint: rgba(14, 165, 233, .06); /* #1185 补全：此前各皮肤只覆盖了 6 个 --cp-*，而 content-premium.css 实际用到 18 个 —— 缺的 --cp-surface / --cp-text / --cp-hair 等一族 回落到 :root 默认的中性灰白，于是「卡片/文字/描边」在换肤时纹丝不动。 这里给它们带上品牌色相（描边与次级文字染蓝调），换肤才有整体感。 */ --cp-surface: #ffffff; --cp-surface-2: #f7fbfe; --cp-hi: rgba(255, 255, 255, .92); --cp-hair: rgba(2, 132, 199, .13); --cp-hair-strong: rgba(2, 132, 199, .20); --cp-text: #06263c; --cp-text-2: #3a5f7d; --cp-text-3: #7998b1; /* 原 #7d9db6 白底仅 2.85:1（需 3.0）→ 压深一档 */ /* 顶栏（比侧栏 #0b2a4a 略亮一档，形成层次而不割裂） */ --top-bg: #10375c; --top-border: rgba(255, 255, 255, .10); --top-fg: #eaf3fb; --top-fg-dim: #a9c6e2; --top-hover-bg: rgba(255, 255, 255, .10); --top-chip-bg: rgba(255, 255, 255, .09); --top-chip-fg: #d6e8f7; --top-chip-bd: rgba(255, 255, 255, .16); --top-input-bg: rgba(255, 255, 255, .07); --top-input-bd: rgba(255, 255, 255, .15); --top-panel-bg: #14406b; --top-panel-fg: #eaf3fb; --cs-panel-bg: #14406b; /* #1186 design-system 全局量接管（--primary / --bg-card / --text / --border 一族） 根因：这族变量被全站引用 418 处，却从未被任何皮肤覆盖 —— 于是 「侧栏顶栏都换了，中间的卡片/正文/描边/按钮纹丝不动」。 修法：能嵌套引用的直接指向 --cp-*（零重复、天然同步）； 描边需实色故单独给值（--cp-hair 是 rgba，当 border 会过淡）。 */ --primary: var(--cp-brand); --primary-light: var(--cp-brand-2); --primary-dark: #075985; --primary-gradient: var(--cp-aurora); --primary-gradient-soft: linear-gradient(135deg, rgba(2, 132, 199, .10) 0%, rgba(56, 189, 248, .10) 100%); --text: var(--cp-text); --text-light: var(--cp-text-2); --text-muted: var(--cp-text-3); --border: #bfcedb; /* 原 #d4e5f3 白底仅 1.29:1（需 1.6）→ 压深 */ --border-light: #e9f3fa; --border-strong: #a9cbe3; --bg: var(--cp-canvas); --bg-page: var(--cp-canvas); --bg-card: var(--cp-surface); --bg-subtle: var(--cp-surface-2); --glass-bg: rgba(244, 250, 253, .72); --glass-bg-strong: rgba(244, 250, 253, .86); --glass-border: rgba(2, 132, 199, .14); /* 侧栏遗留量：取 --shell-* 同色，即便生效也不会与现方案冲突 */ --bg-sidebar-grad: var(--shell-bg); --text-sidebar: var(--shell-nav-fg); --text-sidebar-dim: var(--shell-footer-fg); } /* ── 石墨黑 ── */ html[data-skin="graphite"] { --shell-bg: #111827; --shell-bg-soft: rgba(255, 255, 255, .06); --shell-group: #8b94a7; --shell-hair: rgba(255, 255, 255, .11); --shell-hair-strong: rgba(255, 255, 255, .20); --shell-nav-fg: #b9c0cf; --shell-nav-fg-hover: #ffffff; --shell-nav-bg-hover: rgba(255, 255, 255, .08); --shell-active-bg: rgba(99, 102, 241, .20); --shell-active-fg: #a5b4fc; --shell-brand-fg: #ffffff; --shell-brand-sub: #8b94a7; --shell-footer-fg: #8b94a7; --shell-search-bg: rgba(15, 23, 42, .045); --shell-search-bd: rgba(15, 23, 42, .09); --cp-canvas: #f6f7f9; --cp-brand: #4f46e5; --cp-brand-2: #6366f1; --cp-aurora: linear-gradient(100deg, #4f46e5 0%, #6366f1 52%, #818cf8 100%); --cp-ring: rgba(79, 70, 229, .18); --cp-tint: rgba(99, 102, 241, .06); /* #1185 补全 --cp-* 表面/文字/描边三族（中性灰，比默认更冷一档） */ --cp-surface: #ffffff; --cp-surface-2: #fafbfc; --cp-hi: rgba(255, 255, 255, .92); --cp-hair: rgba(15, 23, 42, .11); --cp-hair-strong: rgba(15, 23, 42, .17); --cp-text: #0b1220; --cp-text-2: #4b5768; --cp-text-3: #8a95a4; /* 原 #939eae 白底仅 2.71:1（需 3.0）→ 压深一档 */ /* 顶栏（侧栏 #111827 提亮） */ --top-bg: #1b2333; --top-border: rgba(255, 255, 255, .10); --top-fg: #e7eaf0; --top-fg-dim: #99a3b7; --top-hover-bg: rgba(255, 255, 255, .10); --top-chip-bg: rgba(255, 255, 255, .08); --top-chip-fg: #ccd3e0; --top-chip-bd: rgba(255, 255, 255, .15); --top-input-bg: rgba(255, 255, 255, .06); --top-input-bd: rgba(255, 255, 255, .14); --top-panel-bg: #212b3d; --top-panel-fg: #e7eaf0; --cs-panel-bg: #212b3d; /* #1186 design-system 全局量接管（中性冷灰，与 --cp-* 同口径） */ --primary: var(--cp-brand); --primary-light: var(--cp-brand-2); --primary-dark: #3730a3; --primary-gradient: var(--cp-aurora); --primary-gradient-soft: linear-gradient(135deg, rgba(79, 70, 229, .10) 0%, rgba(99, 102, 241, .10) 100%); --text: var(--cp-text); --text-light: var(--cp-text-2); --text-muted: var(--cp-text-3); --border: #c7cad1; /* 原 #dde1e8 白底仅 1.31:1（需 1.6）→ 压深 */ --border-light: #eaedf2; --border-strong: #b9c0cd; --bg: var(--cp-canvas); --bg-page: var(--cp-canvas); --bg-card: var(--cp-surface); --bg-subtle: var(--cp-surface-2); --glass-bg: rgba(249, 250, 251, .72); --glass-bg-strong: rgba(249, 250, 251, .86); --glass-border: rgba(15, 23, 42, .12); --bg-sidebar-grad: var(--shell-bg); --text-sidebar: var(--shell-nav-fg); --text-sidebar-dim: var(--shell-footer-fg); } /* ── 极光紫 ── */ html[data-skin="aurora"] { --shell-bg: #241b3d; --shell-bg-soft: rgba(255, 255, 255, .06); --shell-group: #a89ec9; --shell-hair: rgba(255, 255, 255, .12); --shell-hair-strong: rgba(255, 255, 255, .22); --shell-nav-fg: #cfc6e9; --shell-nav-fg-hover: #ffffff; --shell-nav-bg-hover: rgba(255, 255, 255, .08); --shell-active-bg: rgba(167, 139, 250, .20); --shell-active-fg: #c4b5fd; --shell-brand-fg: #ffffff; --shell-brand-sub: #a89ec9; --shell-footer-fg: #a89ec9; --shell-search-bg: rgba(15, 23, 42, .045); --shell-search-bd: rgba(15, 23, 42, .09); --cp-canvas: #f9f7fd; --cp-brand: #7c3aed; --cp-brand-2: #8b5cf6; --cp-aurora: linear-gradient(100deg, #7c3aed 0%, #8b5cf6 52%, #a78bfa 100%); --cp-ring: rgba(124, 58, 237, .18); --cp-tint: rgba(139, 92, 246, .06); /* #1185 补全 --cp-* 表面/文字/描边三族（染紫调） */ --cp-surface: #ffffff; --cp-surface-2: #fbfaff; --cp-hi: rgba(255, 255, 255, .92); --cp-hair: rgba(124, 58, 237, .13); --cp-hair-strong: rgba(124, 58, 237, .20); --cp-text: #1b1030; --cp-text-2: #553f7a; --cp-text-3: #9b86bd; /* 顶栏（侧栏 #241b3d 提亮） */ --top-bg: #2f2450; --top-border: rgba(255, 255, 255, .11); --top-fg: #eee9fc; --top-fg-dim: #b6abd7; --top-hover-bg: rgba(255, 255, 255, .10); --top-chip-bg: rgba(255, 255, 255, .09); --top-chip-fg: #ddd5f5; --top-chip-bd: rgba(255, 255, 255, .16); --top-input-bg: rgba(255, 255, 255, .07); --top-input-bd: rgba(255, 255, 255, .15); --top-panel-bg: #382c61; --top-panel-fg: #eee9fc; --cs-panel-bg: #382c61; /* #1186 design-system 全局量接管（染紫调） */ --primary: var(--cp-brand); --primary-light: var(--cp-brand-2); --primary-dark: #5b21b6; --primary-gradient: var(--cp-aurora); --primary-gradient-soft: linear-gradient(135deg, rgba(124, 58, 237, .10) 0%, rgba(139, 92, 246, .10) 100%); --text: var(--cp-text); --text-light: var(--cp-text-2); --text-muted: var(--cp-text-3); --border: #d0c6e5; /* 原 #ddd3f4 在白卡片上仅 1.43:1（描边门槛 1.6）→ 压深 */ --border-light: #ece5fa; --border-strong: #b9a6e0; --bg: var(--cp-canvas); --bg-page: var(--cp-canvas); --bg-card: var(--cp-surface); --bg-subtle: var(--cp-surface-2); --glass-bg: rgba(251, 249, 254, .72); --glass-bg-strong: rgba(251, 249, 254, .86); --glass-border: rgba(124, 58, 237, .14); --bg-sidebar-grad: var(--shell-bg); --text-sidebar: var(--shell-nav-fg); --text-sidebar-dim: var(--shell-footer-fg); } /* ── 森林绿 ── */ html[data-skin="forest"] { --shell-bg: #0d2b22; --shell-bg-soft: rgba(255, 255, 255, .06); --shell-group: #7fae9d; --shell-hair: rgba(255, 255, 255, .12); --shell-hair-strong: rgba(255, 255, 255, .22); --shell-nav-fg: #c2ddd2; --shell-nav-fg-hover: #ffffff; --shell-nav-bg-hover: rgba(255, 255, 255, .08); --shell-active-bg: rgba(52, 211, 153, .18); --shell-active-fg: #6ee7b7; --shell-brand-fg: #ffffff; --shell-brand-sub: #7fae9d; --shell-footer-fg: #7fae9d; --shell-search-bg: rgba(15, 23, 42, .045); --shell-search-bd: rgba(15, 23, 42, .09); --cp-canvas: #f5faf7; --cp-brand: #047857; --cp-brand-2: #059669; --cp-aurora: linear-gradient(100deg, #047857 0%, #059669 52%, #34d399 100%); --cp-ring: rgba(4, 120, 87, .18); --cp-tint: rgba(5, 150, 105, .06); /* #1185 补全 --cp-* 表面/文字/描边三族（染绿调） */ --cp-surface: #ffffff; --cp-surface-2: #f8fdfa; --cp-hi: rgba(255, 255, 255, .92); --cp-hair: rgba(4, 120, 87, .13); --cp-hair-strong: rgba(4, 120, 87, .20); --cp-text: #05261c; --cp-text-2: #3a6355; --cp-text-3: #729d8d; /* 原 #7fae9d 白底仅 2.49:1（需 3.0）→ 压深一档 */ /* 顶栏（侧栏 #0d2b22 提亮） */ --top-bg: #123b2f; --top-border: rgba(255, 255, 255, .11); --top-fg: #e6f5ee; --top-fg-dim: #9fc7b7; --top-hover-bg: rgba(255, 255, 255, .10); --top-chip-bg: rgba(255, 255, 255, .09); --top-chip-fg: #cfe9dc; --top-chip-bd: rgba(255, 255, 255, .16); --top-input-bg: rgba(255, 255, 255, .07); --top-input-bd: rgba(255, 255, 255, .15); --top-panel-bg: #17493a; --top-panel-fg: #e6f5ee; --cs-panel-bg: #17493a; /* #1186 design-system 全局量接管（染绿调） */ --primary: var(--cp-brand); --primary-light: var(--cp-brand-2); --primary-dark: #065f46; --primary-gradient: var(--cp-aurora); --primary-gradient-soft: linear-gradient(135deg, rgba(4, 120, 87, .10) 0%, rgba(5, 150, 105, .10) 100%); --text: var(--cp-text); --text-light: var(--cp-text-2); --text-muted: var(--cp-text-3); --border: #bcd1c7; /* 原 #cfe6db 白底仅 1.31:1（需 1.6）→ 压深 */ --border-light: #e6f4ed; --border-strong: #a2cbb8; --bg: var(--cp-canvas); --bg-page: var(--cp-canvas); --bg-card: var(--cp-surface); --bg-subtle: var(--cp-surface-2); --glass-bg: rgba(247, 252, 249, .72); --glass-bg-strong: rgba(247, 252, 249, .86); --glass-border: rgba(4, 120, 87, .14); --bg-sidebar-grad: var(--shell-bg); --text-sidebar: var(--shell-nav-fg); --text-sidebar-dim: var(--shell-footer-fg); } /* ═══════════════════════════════════════════════════════════ 顶栏绑定规则（#1185） · 本文件加载顺序在 style.css / design-system.css / shell-premium.css **之后**，同特异性下后者胜出，故无需 !important，也不改动那两个文件。 · 只改颜色，绝不碰布局属性（width/height/padding/display/position…）， 遵守换肤边界铁律。 ═══════════════════════════════════════════════════════════ */ /* 顶栏本体 */ .topbar { background: var(--top-bg); border-bottom: 1px solid var(--top-border); color: var(--top-fg); } .topbar-title { color: var(--top-fg); } .topbar-divider { background: var(--top-border); } .topbar-user { color: var(--top-fg-dim); } .topbar .sidebar-toggle { color: var(--top-fg-dim); } .topbar .sidebar-toggle:hover { background: var(--top-hover-bg); color: var(--top-fg); } /* 命令搜索：整体跟随顶栏，不再用写死的浅色搜索底 */ .cmd-search { background: var(--top-input-bg); border-color: var(--top-input-bd); color: var(--top-fg-dim); } .cmd-search:focus-within { background: var(--top-input-bg); } .cs-input { color: var(--top-fg); } .cs-input::placeholder { color: var(--top-fg-dim); opacity: .75; } .cs-kbd { background: var(--top-chip-bg); border-color: var(--top-chip-bd); color: var(--top-fg-dim); } /* 环境胶囊 / 铃铛 / 退出按钮 / 升级按钮：一律改绑顶栏 chip 配色， 修掉「深色顶栏上顶着一块刺眼白底」的割裂感 */ .env-pill { background: var(--top-chip-bg); color: var(--top-chip-fg); border-color: var(--top-chip-bd); } .env-pill::before { background: #10b981; box-shadow: 0 0 8px rgba(16, 185, 129, .8); } .bell-btn { background: var(--top-chip-bg); border-color: var(--top-chip-bd); color: var(--top-fg-dim); } .bell-btn:hover { color: var(--top-fg); background: var(--top-hover-bg); } .btn-logout { background: var(--top-chip-bg); border-color: var(--top-chip-bd); color: var(--top-fg-dim); } .btn-logout:hover { color: #ef4444; border-color: rgba(239, 68, 68, .45); } /* 下拉面板（命令面板 / 皮肤菜单）跟随顶栏面板底色 */ .cs-panel { background: var(--cs-panel-bg); border-color: var(--top-border); } .cs-item { color: var(--top-panel-fg); } .cs-item:hover, .cs-item.on { background: var(--top-hover-bg); color: var(--top-panel-fg); } .cs-empty { color: var(--top-fg-dim); } .skin-menu { background: var(--top-panel-bg); border-color: var(--top-border); } .skin-opt { color: var(--top-panel-fg); } /* 抽屉（通知中心 / 系统状态）跟随内容区画布 + 顶栏文字色 */ .drawer-panel { background: var(--cp-canvas, #fff); } .drawer-head { color: var(--cp-text, var(--top-fg)); border-bottom-color: var(--top-border); } .drawer-close { color: var(--cp-text, var(--top-fg)); } .drawer-close:hover { background: var(--top-hover-bg); } /* ═══════════════════════════════════════════════════════════ 系统概览页（dashboard）硬编码色接管（#1185） 用户反馈：「系统概览里面的这个没随皮肤颜色变化」。 根因：style.css 里这些元素是**硬编码色**，绕过了一切变量层： .dash-hero background: linear-gradient(135deg,#4f46e5,#7c3aed,#8b5cf6) ← 写死靛紫 .stat-chip background:#fff; color:var(--primary) .dash-clear-accordion / .feat-card / .dash-help-btn 同样写死白底 --primary / --text-light 是**全局量**，skin.css 从未覆盖，故永远不变色。 修法：改绑 --cp-*（本文件已为每套皮肤定义），仍只改颜色不碰布局。 ⚠️ 语义色（清空数据区的 #991b1b 危险红 / #fecaca 边框）一律不碰。 ═══════════════════════════════════════════════════════════ */ /* 概览大横幅：跟随各皮肤的品牌渐变（最显眼的换肤反馈点） */ .dash-hero { background: var(--cp-aurora); } .dash-hero-sub { color: rgba(255, 255, 255, .92); } .dash-hero::after { background: radial-gradient(circle, rgba(255, 255, 255, .22) 0%, transparent 65%); } /* 统计小卡 */ .stat-chip { background: var(--cp-surface); border-color: var(--cp-hair); } .stat-chip-val { color: var(--cp-brand); } .stat-chip-lbl { color: var(--cp-text-3); } /* 核心能力卡 */ .feat-card { background: var(--cp-surface); border-color: var(--cp-hair); } .feat-card::before { background: var(--cp-aurora); } .feat-ico { background: var(--cp-tint); } .feat-title { color: var(--cp-text); } .feat-desc { color: var(--cp-text-2); } /* 帮助入口按钮（非 hero 内的那组：写死 #f8fafc 底 + #334155 字） */ .dash-help-btn { background: var(--cp-surface-2); border-color: var(--cp-hair-strong); color: var(--cp-text-2); } .dash-help-btn:hover { background: var(--cp-tint); border-color: var(--cp-brand); color: var(--cp-brand); } /* 数据管理（清空/重置）折叠区：只换表面，危险语义色保持 */ .dash-clear-accordion { background: var(--cp-surface); }