/* ============================================================================ 岳总个人指挥中心（workbench）· 毛玻璃 Token 层 ---------------------------------------------------------------------------- 引入位置：必须放在 styles.css 与 v2.css 之后（最后一份 CSS） ← 本文件 ← 再引组件层 ---------------------------------------------------------------------------- 与 2026-10-22 版执行方案的差异（照方案执行时按当前代码校正，勿改回）： 方案写于「Daily Town 暖色版」时期（--border:#4a3b2a / 4px 4px 0 硬投影 / --bg-cream:#fefcf5）。2026-10-21 全站已换成 Apple / Flow 冷白体系， 那些暖色变量在当前 styles.css 里一条都不存在了。所以： · 不再需要「--border 改 transparent 废掉粗描边」这一步（本来就没粗描边） · 不做 --ink / --ink-light / --accent-* 的替换（它们现在是 text-primary / emerald 等语义色的别名，改掉会破坏语义） · 圆角令牌由 --r-card / --r-sm 驱动（.card 用的是它们，不是 --radius-*） · 真正的做法：把「表面填充」令牌整体半透明化 —— 全站 40+ 条 background: var(--bg-1) 的规则自动变成玻璃面，一条条改选择器容易漏。 ⛔ 本文件只写：颜色 / 背景 / 圆角 / 阴影 / 动效。 ⛔ 严禁出现：width height display position z-index overflow transform margin padding。 ============================================================================ */ :root { /* ========== 玻璃体系 ========== */ --glass-bg: rgba(255, 255, 255, 0.56); /* 卡片 */ --glass-bg-soft: rgba(255, 255, 255, 0.42); /* 侧栏 / 顶栏 */ --glass-solid: rgba(255, 255, 255, 0.74); /* 按钮 / 徽章 / 浮层 */ --glass-hi: rgba(255, 255, 255, 0.52); /* hover 提亮 */ --glass-line: rgba(255, 255, 255, 0.90); /* 1px 亮边 */ --edge-hi: rgba(255, 255, 255, 0.98); /* 顶部内高光 */ --edge-lo: rgba(255, 255, 255, 0.42); /* 底部内高光 */ /* 模糊强度：22px 是观感与性能的平衡点，不要超过 30 */ --glass-blur: 22px; --glass-saturate: 180%; /* ========== 冷色阴影（绝不用纯黑，会发灰发脏） ========== */ /* 投影收敛（20261022M1）：原 0 40px 80px 的冷色大扩散会压进下方相邻半透明卡， 观感就是「卡片重叠」（岳总记账/上岸页实测反馈）。卡片间距只有 16px， 模糊半径必须远小于间距，只留贴边的分离感。 */ --shadow-glass: 0 14px 30px -20px rgba(48, 80, 140, 0.26), 0 4px 12px -8px rgba(48, 80, 140, 0.10); --shadow-glass-sm: 0 8px 20px -14px rgba(48, 80, 140, 0.20), 0 2px 8px -6px rgba(48, 80, 140, 0.08); --shadow-glass-hover: 0 18px 36px -20px rgba(48, 80, 140, 0.30), 0 6px 16px -10px rgba(48, 80, 140, 0.12); /* ========== 画布层 ========== */ --canvas-1: #e3eefc; --canvas-2: #e8e6fb; --canvas-base-1: #e9f0fa; --canvas-base-2: #e4ecf7; --canvas-base-3: #e7f1f4; /* 光斑：毛玻璃「透」的就是这五个色团，不能删 没有它们，backdrop-filter 无内容可模糊，卡片会退化成灰塑料板 */ --orb-1: #aecbf8; --orb-2: #c6bcfb; --orb-3: #a8dcf2; --orb-4: #aeebda; --orb-5: #ffcdb8; --orb-opacity: 0.60; /* 卡片内部光晕（模拟玻璃厚度） */ --glass-sheen-a: rgba(255, 255, 255, 0.90); --glass-sheen-b: rgba(178, 202, 246, 0.34); /* 轨道 / 进度条 */ --track-bg: rgba(255, 255, 255, 0.62); --track-inset: inset 0 1px 3px rgba(110, 135, 175, 0.18); /* 强调渐变（主按钮、进度填充）。仍是蓝色系，不引入第二个强调色 */ --glass-accent-a: #5b87f8; --glass-accent-b: #0066cc; /* ========== 表面令牌半透明化（玻璃化的关键一步） ========== styles.css 里 40+ 条规则写的是 background: var(--bg-1) / var(--w95) / var(--bg-glass)，这里只改值，不改任何选择器 → 一次性全部玻璃化。 */ --bg-1: rgba(255, 255, 255, 0.56); --bg-3: rgba(255, 255, 255, 0.44); --w95: rgba(255, 255, 255, 0.68); --w82: rgba(255, 255, 255, 0.48); --bg-glass: rgba(255, 255, 255, 0.42); /* 圆角：12 → 16，玻璃比实色更需要柔边（只在视觉层，不影响任何尺寸计算） */ --r-card: 16px; --r-sm: 10px; --radius-lg: 20px; --radius-md: 13px; --radius-sm: 9px; } /* ============================================================================ 暗色主题 关键认知：暗色玻璃是「深色半透明」，不是「白色半透明」。 用 rgba(255,255,255,.05) 会发灰发脏、边界糊掉； 暗底上阴影几乎看不见，层次全靠 --glass-line + --edge-hi 的亮边撑出来。 ============================================================================ */ [data-theme="dark"] { --glass-bg: rgba(15, 21, 33, 0.58); --glass-bg-soft: rgba(10, 15, 24, 0.50); --glass-solid: rgba(28, 36, 52, 0.78); --glass-hi: rgba(255, 255, 255, 0.07); --glass-line: rgba(255, 255, 255, 0.13); --edge-hi: rgba(255, 255, 255, 0.20); --edge-lo: rgba(255, 255, 255, 0.03); /* 暗色投影同样收敛：大扩散黑影在深底上会糊住相邻卡片边界 */ --shadow-glass: 0 16px 34px -22px rgba(0, 0, 0, 0.60), 0 5px 14px -10px rgba(0, 0, 0, 0.35); --shadow-glass-sm: 0 10px 24px -16px rgba(0, 0, 0, 0.45), 0 3px 10px -8px rgba(0, 0, 0, 0.28); --shadow-glass-hover: 0 20px 40px -22px rgba(0, 0, 0, 0.66), 0 7px 18px -10px rgba(0, 0, 0, 0.38); --canvas-1: #16243c; --canvas-2: #201d3b; --canvas-base-1: #0a101a; --canvas-base-2: #0c1420; --canvas-base-3: #0a141e; /* 暗色下光斑要更亮更饱和，否则没东西可透，卡片变死黑 */ --orb-1: #35619e; --orb-2: #5a41b5; --orb-3: #1f7296; --orb-4: #158270; --orb-5: #8f3f57; --orb-opacity: 0.76; --glass-sheen-a: rgba(255, 255, 255, 0.075); --glass-sheen-b: rgba(80, 130, 240, 0.11); --track-bg: rgba(255, 255, 255, 0.09); --track-inset: inset 0 1px 3px rgba(0, 0, 0, 0.40); --glass-accent-a: #3b6fe0; --glass-accent-b: #0a84ff; /* 表面令牌 */ --bg-1: rgba(15, 21, 33, 0.58); --bg-3: rgba(10, 15, 24, 0.52); --w95: rgba(24, 31, 45, 0.76); --w82: rgba(20, 26, 38, 0.60); --bg-glass: rgba(10, 15, 24, 0.50); } /* ============================================================================ 画布 ⚠️ 不用 background-attachment: fixed —— iOS Safari 上会掉帧， 本站在 html,body{height:100%;overflow:hidden} 下本来就不滚 body。 ============================================================================ */ body { background-color: var(--canvas-base-1); background-image: radial-gradient(1200px 820px at 4% -20%, var(--canvas-1) 0%, transparent 62%), radial-gradient(900px 700px at 96% -12%, var(--canvas-2) 0%, transparent 58%), linear-gradient(160deg, var(--canvas-base-1) 0%, var(--canvas-base-2) 44%, var(--canvas-base-3) 100%); transition: background-color 500ms ease, color 400ms ease; } /* 光斑层（由 glass-theme.js 动态插入，不改 index.html） z-index:-1 而不是 0 —— 0 会和 .bg-grid 打架，也会逼着 #app-view 提层， 一提层就把「弹窗 z-index 1500 / toast 999」的相对顺序全打乱。 负层级直接画在 body 背景之上、所有内容之下，最省事也最安全。 */ .aurora-layer { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; filter: blur(92px) saturate(125%); } .aurora-layer i { position: absolute; border-radius: 50%; opacity: var(--orb-opacity); transition: background 600ms ease, opacity 600ms ease; } .aurora-layer i:nth-child(1) { width: 740px; height: 740px; left: -200px; top: -250px; background: radial-gradient(circle at 40% 40%, var(--orb-1), transparent 68%); } .aurora-layer i:nth-child(2) { width: 600px; height: 600px; left: 28%; top: -230px; background: radial-gradient(circle at 50% 50%, var(--orb-2), transparent 68%); } .aurora-layer i:nth-child(3) { width: 800px; height: 800px; right: -280px; top: 60px; background: radial-gradient(circle at 50% 50%, var(--orb-3), transparent 68%); } .aurora-layer i:nth-child(4) { width: 640px; height: 640px; left: -120px; bottom: -260px; background: radial-gradient(circle at 50% 50%, var(--orb-4), transparent 68%); } .aurora-layer i:nth-child(5) { width: 460px; height: 460px; right: 6%; bottom: -170px; background: radial-gradient(circle at 50% 50%, var(--orb-5), transparent 68%); } /* ============================================================================ 打印：玻璃在纸上是一块白斑，直接退回实色墨线 ============================================================================ */ @media print { body { background: #fff !important; } .aurora-layer, .bg-grid { display: none !important; } .card, .stat-card, .hero, .sidebar, .topbar, .login-card, .modal, .toast { background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; border: 1px solid #ddd !important; } }