/* ============================================================ davidgaming.top 统一 UI 框架 v2 · 2026-09-08 所有子域共用：顶部导航 + 页脚 + 设计令牌 + 通用元件 v2 新增：浅色/深色双主题（html[data-theme="dark"]） 导航主题切换按钮 .dg-theme-toggle 图表色板令牌（csgo SVG / 条形图暗色适配） 卡片高亮动画 .flash（战绩看板定位跳转） 引入方式： 页面需在 最前放置主题引导脚本（见 dg-theme.js 说明） ============================================================ */ :root{ --dg-blue:#0066cc; --dg-blue-focus:#0071e3; --dg-blue-on-dark:#2997ff; --dg-ink:#1d1d1f; --dg-ink-80:#333333; --dg-ink-48:#7a7a7a; --dg-on-dark:#f5f5f7; --dg-on-dark-muted:#a1a1a6; --dg-canvas:#ffffff; --dg-parchment:#f5f5f7; --dg-black:#0a0a0c; --dg-hairline:#e0e0e0; --dg-divider:#f0f0f0; --dg-maxw:1200px; /* 图表色板（浅色） */ --dg-chart-grid:rgba(0,0,0,.12); --dg-chart-dim:#7a7a7a; --dg-chart-ink:#1d1d1f; color-scheme:light; } /* ---------- 深色主题令牌 ---------- 同时覆盖页面本地令牌（--canvas/--ink 等，各页 :root 定义）， html[attr] 特异性高于 :root，页面无需改动即跟随换肤 */ html[data-theme="dark"]{ --dg-ink:#f5f5f7; --dg-ink-80:#d6d6da; --dg-ink-48:#98989f; --dg-on-dark:#f5f5f7; --dg-on-dark-muted:#a1a1a6; --dg-canvas:#0f0f11; --dg-parchment:#1a1a1d; --dg-black:#0a0a0c; --dg-hairline:#2c2c30; --dg-divider:#242428; --dg-chart-grid:rgba(255,255,255,.14); --dg-chart-dim:#98989f; --dg-chart-ink:#f5f5f7; color-scheme:dark; /* 页面本地令牌映射 */ --canvas:#0f0f11; --parchment:#1a1a1d; --pearl:#141416; --ink:#f5f5f7; --ink-80:#d6d6da; --ink-48:#98989f; --hairline:#2c2c30; --divider:#242428; --black:#0a0a0c; --tile-1:#161618; --tile-2:#1c1c1f; --on-dark:#f5f5f7; --on-dark-muted:#a1a1a6; --gray:#98989f; --dim:#98989f; /* 图表令牌（无前缀别名，csgo 模板使用） */ --chart-grid:rgba(255,255,255,.14); --chart-dim:#98989f; --chart-ink:#f5f5f7; } :root{ --chart-grid:rgba(0,0,0,.12); --chart-dim:#7a7a7a; --chart-ink:#1d1d1f; } /* ---------- 顶部导航 ---------- */ .dg-nav{background:var(--dg-black);height:48px;position:sticky;top:0;z-index:1000; backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)} .dg-nav-in{max-width:var(--dg-maxw);margin:0 auto;padding:0 22px;height:48px; display:flex;align-items:center;justify-content:space-between;gap:18px} .dg-brand{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;flex:none} .dg-brand-mark{width:24px;height:24px;border-radius:7px;background:var(--dg-blue);color:#fff; display:grid;place-items:center;font-size:10px;font-weight:700;letter-spacing:.3px} .dg-brand-name{font-size:13px;font-weight:600;letter-spacing:-.1px;color:#fff} .dg-brand-name small{font-weight:400;opacity:.55} .dg-nav-links{display:flex;align-items:center;gap:4px;min-width:0;overflow-x:auto;scrollbar-width:none} .dg-nav-links::-webkit-scrollbar{display:none} .dg-nav-links a{color:rgba(255,255,255,.78);font-size:12.5px;letter-spacing:-.1px; padding:6px 11px;border-radius:9999px;white-space:nowrap;transition:color .15s,background .15s} .dg-nav-links a:hover{color:#fff;background:rgba(255,255,255,.1)} .dg-nav-links a[aria-current="page"]{color:#fff;background:rgba(0,102,204,.55);font-weight:600} .dg-nav-cta{display:inline-flex;align-items:center;gap:5px;flex:none; background:var(--dg-blue);color:#fff;font-size:12px;font-weight:600; padding:6px 13px;border-radius:9999px;transition:background .15s} .dg-nav-cta:hover{background:var(--dg-blue-focus);color:#fff} /* ---------- 主题切换按钮（导航右侧） ---------- */ .dg-theme-toggle{display:inline-flex;align-items:center;justify-content:center; width:30px;height:30px;flex:none;border:none;border-radius:9999px;cursor:pointer; background:rgba(255,255,255,.1);color:#fff;font-size:14px;line-height:1;padding:0; transition:background .15s,transform .12s} .dg-theme-toggle:hover{background:rgba(255,255,255,.22)} .dg-theme-toggle:active{transform:scale(.92)} .dg-theme-group{display:inline-flex;align-items:center;gap:8px;flex:none} @media(max-width:833px){.dg-nav-links a{padding:6px 9px}.dg-nav-cta{display:none}} @media(max-width:640px){ .dg-brand-name{display:none} .dg-nav-in{padding:0 14px} .dg-nav-links{margin-left:auto} } /* ---------- 页脚 ---------- */ .dg-foot{background:var(--dg-parchment);color:var(--dg-ink-80);padding:56px 22px 40px} .dg-foot-in{max-width:var(--dg-maxw);margin:0 auto;display:grid; grid-template-columns:2fr 1fr 1fr 1fr;gap:28px} .dg-foot .dg-brand{color:var(--dg-ink)} .dg-foot .dg-brand-name{color:var(--dg-ink)} .dg-foot-brand p{font-size:13px;color:var(--dg-ink-48);line-height:1.7;max-width:300px;margin-top:10px} .dg-foot-col h4{font-size:12px;font-weight:600;letter-spacing:.8px;text-transform:uppercase; margin-bottom:12px;color:var(--dg-ink)} .dg-foot-col a{display:block;font-size:14px;line-height:2.3;color:var(--dg-ink-80)} .dg-foot-col a:hover{color:var(--dg-blue);text-decoration:underline} .dg-foot-legal{max-width:var(--dg-maxw);margin:36px auto 0;padding-top:18px; border-top:1px solid var(--dg-hairline);font-size:12px;color:var(--dg-ink-48); display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px} .dg-foot-legal a{color:var(--dg-ink-48)} .dg-foot-legal a:hover{color:var(--dg-blue)} @media(max-width:834px){ .dg-foot-in{grid-template-columns:1fr 1fr} .dg-foot-brand{grid-column:1/-1} } @media(max-width:419px){.dg-foot-in{grid-template-columns:1fr}} /* ---------- 通用元件 ---------- */ .dg-wrap{max-width:var(--dg-maxw);margin:0 auto;padding:0 22px} .dg-btn{display:inline-flex;align-items:center;justify-content:center; background:var(--dg-blue);color:#fff;font-size:15px;font-weight:500; padding:10px 22px;border-radius:9999px;border:1px solid transparent;min-height:42px; transition:transform .12s ease,background .15s} .dg-btn:hover{background:var(--dg-blue-focus);color:#fff} .dg-btn:active{transform:scale(.96)} .dg-btn-ghost{background:transparent;color:var(--dg-blue);border:1px solid var(--dg-blue)} .dg-btn-ghost:hover{background:rgba(0,102,204,.08);color:var(--dg-blue)} .dg-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--dg-ink-80); background:var(--dg-parchment);border:1px solid var(--dg-hairline);border-radius:9999px;padding:5px 12px} /* ---------- 卡片定位高亮（战绩看板 ID 跳转） ---------- */ @keyframes dg-flash{0%{box-shadow:0 0 0 3px rgba(0,102,204,.55)}100%{box-shadow:0 0 0 3px rgba(0,102,204,0)}} .pcard.flash{animation:dg-flash 1.6s ease 1} /* ============================================================ 深色主题 · 页面组件适配 （针对各子域页面中硬编码浅色的部件做定点覆盖） ============================================================ */ /* —— 条形轨道类（news 排名板 / csgo 数据条） —— */ html[data-theme="dark"] .bar-track, html[data-theme="dark"] .ov-bar, html[data-theme="dark"] .map-track, html[data-theme="dark"] .pro-bar, html[data-theme="dark"] .season-bar{background:rgba(255,255,255,.12)} /* —— news 排名板铜牌位与悬停 —— */ html[data-theme="dark"] .rank.g3{color:#0f0f11} html[data-theme="dark"] .news-item:hover, html[data-theme="dark"] .tab:hover{border-color:#3a3a40} /* —— csgo 战绩看板 —— */ html[data-theme="dark"] .g-A{background:rgba(41,151,255,.14);color:var(--dg-blue-on-dark);border-color:var(--dg-blue-on-dark)} html[data-theme="dark"] .g-B{background:var(--dg-parchment);color:var(--dg-ink-80)} html[data-theme="dark"] .g-C{background:var(--dg-parchment);color:var(--dg-ink-48)} html[data-theme="dark"] .g-D{background:var(--dg-parchment);color:#6e6e73} html[data-theme="dark"] .rk, html[data-theme="dark"] .rk.bot{background:rgba(255,255,255,.09);color:var(--dg-ink-48)} html[data-theme="dark"] .rk.top{background:rgba(41,151,255,.18);color:var(--dg-blue-on-dark)} html[data-theme="dark"] .s-struggle{color:#fbbf24;background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.32)} html[data-theme="dark"] .s-stable_good{color:#4fbf6b;background:rgba(79,191,107,.1);border-color:rgba(79,191,107,.32)} html[data-theme="dark"] .staleness{background:#3a2e10;color:#fcd34d} html[data-theme="dark"] .dg-foot{background:var(--dg-parchment)} /* —— 门户 home 动态条（浅色区块下的部件） —— */ html[data-theme="dark"] .up-item{background:var(--dg-parchment);border-color:var(--dg-hairline)} html[data-theme="dark"] .up-item b{color:var(--dg-ink)} html[data-theme="dark"] .up-item.warn{border-color:#5a4310;background:#2a2110} html[data-theme="dark"] .up-item.warn span{color:#fbbf24} html[data-theme="dark"] .metro-link{color:var(--dg-ink-48);border-color:var(--dg-hairline)} html[data-theme="dark"] .metro-link:hover{color:var(--dg-blue-on-dark);border-color:var(--dg-blue-on-dark)} /* —— 滚动条与文本选区 —— */ html[data-theme="dark"] ::selection{background:rgba(41,151,255,.35)}