/* ============================================================ vvid 全站主题系统 —— 单一真源（双主题 token） 借鉴参考站「Apple 暗色 + 玻璃拟态 + Lexend Deca + 影院卡」 用法：每页 引入本文件 + theme.js； 组件 CSS 用下列 token；旧变量名在各页做一层别名映射。 ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@300;400;500;600;700;800&display=swap'); :root{ /* 几何 / 动效（与主题无关） */ --radius-card:12px; --radius-sm:12px; --radius-md:16px; --radius-lg:22px; --radius-xl:28px; --glass-blur:saturate(180%) blur(20px); --spring:cubic-bezier(.34,1.56,.64,1); --ease:cubic-bezier(.4,.2,.2,1); /* 来源/装饰固定色（两主题通用，仅作小色块） */ --dot-yt:#ff5a6a; --dot-bili:#39c5e8; --dot-x:#cbd0d6; --dot-own:#c2b4ff; --dot-web:#7fd6a8; } /* ===================== 暗色（默认） ===================== */ html[data-theme="dark"]{ --bg:#0a0a0b; --bg-2:#101012; --bg-glow-1:rgba(124,108,255,.10); --bg-glow-2:rgba(255,120,150,.06); --surface:#1c1c1e; --surface-2:#232326; --text:#f5f5f7; --text-2:rgba(255,255,255,.64); --text-3:rgba(255,255,255,.40); --line:rgba(255,255,255,.09); --glass-bg:rgba(30,30,34,.55); --glass-edge:rgba(255,255,255,.14); --glass-highlight:inset 0 1px 0 rgba(255,255,255,.18); --shadow:0 10px 30px rgba(0,0,0,.45); --shadow-lift:0 20px 48px -10px rgba(0,0,0,.65); --pillow-inset:inset 0 1px 0 rgba(255,255,255,.06); --accent:#c2b4ff; --accent-strong:#a892ff; --accent-2:#ff9fb6; --accent-soft:rgba(170,146,255,.16); --accent-2-soft:rgba(255,159,182,.16); --chip-bg:rgba(255,255,255,.07); --chip-text:rgba(255,255,255,.82); --on-accent:#14101f; color-scheme:dark; } /* ===================== 白天 ===================== */ html[data-theme="light"]{ --bg:#f5f4f8; --bg-2:#efeef3; --bg-glow-1:rgba(124,108,240,.16); --bg-glow-2:rgba(255,150,170,.14); --surface:#ffffff; --surface-2:#f2f1f7; --text:#1a1824; --text-2:rgba(26,24,36,.62); --text-3:rgba(26,24,36,.42); --line:rgba(26,24,36,.10); --glass-bg:rgba(255,255,255,.62); --glass-edge:rgba(255,255,255,.75); --glass-highlight:inset 0 1px 0 rgba(255,255,255,.9); --shadow:0 10px 30px rgba(80,70,120,.14); --shadow-lift:0 22px 48px -14px rgba(80,70,120,.30); --pillow-inset:inset 0 2px 4px rgba(255,255,255,.9), inset 0 -3px 6px rgba(124,108,180,.10); --accent:#6f5fe0; --accent-strong:#5d4cd6; --accent-2:#ff7d9c; --accent-soft:rgba(111,95,224,.12); --accent-2-soft:rgba(255,125,156,.14); --chip-bg:rgba(26,24,36,.05); --chip-text:rgba(26,24,36,.74); --on-accent:#ffffff; color-scheme:light; } /* ===================== 共享：主题切换按钮 ===================== */ .theme-switch{ position:relative;width:46px;height:46px;flex:none;border-radius:13px;display:grid;place-items:center; background:var(--glass-bg);border:1px solid var(--glass-edge);box-shadow:var(--glass-highlight); -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur); color:var(--text-2);font-size:18px; transition:transform .25s var(--spring),color .2s,box-shadow .2s; } .theme-switch:hover{transform:translateY(-2px);color:var(--text);box-shadow:var(--shadow-lift)} .theme-switch .sun,.theme-switch .moon{position:absolute;transition:opacity .25s,transform .35s var(--spring)} html[data-theme="dark"] .theme-switch .sun{opacity:1;transform:none} html[data-theme="dark"] .theme-switch .moon{opacity:0;transform:scale(.4) rotate(-40deg)} html[data-theme="light"] .theme-switch .sun{opacity:0;transform:scale(.4) rotate(40deg)} html[data-theme="light"] .theme-switch .moon{opacity:1;transform:none} /* 分段式开关（侧栏用，可选） */ .theme-seg{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)} .theme-seg button{flex:1;padding:7px;border-radius:999px;font-size:13px;font-weight:500;color:var(--text-3);transition:.2s} .theme-seg button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow)} html[data-theme="dark"] .theme-seg button.on{background:var(--accent-soft);color:var(--accent)}