/* ============================================================ tokens.css — DataBoard Web 统一设计令牌（Design Tokens） ------------------------------------------------------------ 单一事实来源（Single Source of Truth）。所有组件样式只消费 这里的 CSS 变量，禁止在组件文件中写死颜色 / 尺寸 / 间距。 命名约定（规范化）： --brand* 品牌色族 --up/--down 语义色（涨红跌绿，中国惯例） --warn/--info 语义色 --text/--ink* 文字色（--ink* 为历史别名，逐步废弃） --bg/--surface/--paper/--card 表面色（后者为历史别名） --border* 边框色 --r* 圆角 radius --sh* 阴影 shadow --f-* 字体族 font --fs-* 字号 font-size --lh-* 行高 line-height --space-* 间距（4px 基准） --border-width* 边框宽度 --transition-* 过渡 --z-* 层级 z-index --container-* 容器宽度 --nav-h 导航高度 主题切换：在 上加 data-theme="dark" 即可整体换肤。 下方 [data-theme="dark"] 仅覆盖“需要反转”的令牌，其余继承。 历史别名（@deprecated）：theme_v2 / theme_brand 的命名。 仅用于兼容已写死的 inline var(--xxx) 与旧文档，新代码请勿使用。 ============================================================ */ :root { /* ===== 品牌色族 ===== */ --brand: #ef6a4c; /* 主品牌：强调 / 链接 / 细线 */ --brand-strong: #c2451c; /* 加深变体：配白字满足 WCAG AA 4.5:1 */ --brand-deep: #c2451c; --brand-soft: #fad4c2; /* 浅橙（占位） */ --brand-tint: #fdeee9; /* 淡橙底：tint 徽章 / 选中底 */ --brand-line: #f7af8c; /* 导航 / 标题左侧细橙线（沿用既有值） */ --brand-wash: #fbeee5; /* 极淡橙底：行 hover / 徽章底 */ /* ===== 语义色：涨红跌绿（中国惯例） ===== */ --up: #d93030; --up-tint: #fdecec; /* 涨 / 红 */ --down: #15803d; --down-tint: #e8f5ec; /* 跌 / 绿 */ --warn: #c2840a; --warn-tint: #fbf2dc; /* 警示 / 黄 */ --info: #2563eb; --info-tint: #eaf1fe; /* 信息 / 蓝 */ /* ===== 表面 / 背景 ===== */ --bg: #f5f6f8; /* 页面极浅灰底 */ --surface: #ffffff; /* 卡片 / 容器白底 */ --surface-2: #eef0f3; /* 浅灰底（表头 / 次级区域） */ --hover: #f4f6f8; /* 行 / 列表中性 hover 底 */ /* ===== 边框 ===== */ --border: #eceef1; /* 常规边框 */ --border-strong: #d8dde3; /* 强调边框 */ --border-width: 1px; --border-width-strong: 2px; --border-style: solid; /* ===== 文字 ===== */ --text: #1f2430; /* 主文字 */ --text-muted: #8b919c; /* 次要文字 */ --text-inverse: #ffffff; /* 反白文字（深色底上） */ /* ===== 圆角 ===== */ --r-sm: 4px; --r: 8px; --r-lg: 12px; --r-pill: 999px; /* ===== 阴影（柔和、克制；冷色 rgba 保证深浅主题一致） ===== */ --sh-1: 0 1px 3px rgba(24, 28, 45, .06), 0 1px 2px rgba(24, 28, 45, .04); --sh-2: 0 4px 12px rgba(24, 28, 45, .08), 0 2px 4px rgba(24, 28, 45, .04); --sh-3: 0 12px 32px rgba(24, 28, 45, .10), 0 4px 8px rgba(24, 28, 45, .05); /* ===== 字体族（含中文回退） ===== */ --f-sans: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif; --f-mono: "JetBrains Mono", "SF Mono", "Roboto Mono", Consolas, monospace; --f-display: "Fraunces", "Noto Serif SC", "STSong", Georgia, serif; /* ===== 字号（12 → 30，4px 节奏） ===== */ --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 30px; --fs-display: 3.5rem; /* 报错页状态码 hero 字号（设计令牌，组件内不写死像素） */ /* ===== 行高 ===== */ --lh-tight: 1.25; --lh-base: 1.5; --lh-relaxed: 1.7; /* ===== 字重 ===== */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ===== 间距（4px 基准） ===== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ===== 过渡 ===== */ --transition-fast: .15s ease; --transition-base: .25s ease; --transition-slow: .4s ease; --ease: cubic-bezier(.2, .8, .2, 1); /* ===== 层级 ===== */ --z-base: 1; --z-sticky: 100; --z-nav: 1000; --z-dropdown: 1100; --z-modal: 1200; /* ===== 布局 ===== */ --container-max: 1560px; --container-width: 90vw; /* ⚠️ 一屏锁定高度 —— 以下高度经过精确计算，使期指看板（page_future_v2） 的图表恰好在一个视口内完整显示。任何规范化调整都【不得】改动这些值， 否则会撑破单屏、出现滚动条。如需调整，必须同步重算整页预算。 */ --nav-h: 52px; /* 顶部导航栏（.navi）固定高，原版写死值，勿改 */ --status-h: 36px; /* 颈部状态栏（.status）固定高，原版写死值，勿改 */ /* ===== 断点参考（仅文档用途，媒体查询中直接写值） ===== */ /* --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px; */ /* ============================================================ 历史别名（@deprecated）—— 兼容已写死的 inline var() 与旧文档。 新代码一律使用上方规范化名称，迁移完成后可整体删除本段。 ============================================================ */ --paper: var(--bg); --paper-2: var(--surface-2); --card: var(--surface); --card-edge: var(--border); --card-edge-2: var(--border-strong); --ink: var(--text); --ink-2: #565d6b; --ink-3: var(--text-muted); --ink-4: #aeb4bf; --radius: var(--r); --radius-sm: var(--r-sm); --radius-lg: var(--r-lg); --radius-pill: var(--r-pill); --shadow-sm: var(--sh-1); --shadow-md: var(--sh-2); --shadow-lg: var(--sh-3); --font-sans: var(--f-sans); --font-mono: var(--f-mono); --t-fast: var(--transition-fast); --t: var(--transition-base); --red: var(--up); } /* ============================================================ 暗色主题：在 时生效。 只覆盖需要反转的令牌；品牌 / 语义色在深底上对比充足，保持不变。 ============================================================ */ [data-theme="dark"] { --bg: #14161c; --surface: #1c1f27; --surface-2: #23262f; --hover: #262a34; --border: #2a2e38; --border-strong: #383d49; --text: #e8eaed; --text-muted: #9aa0ac; --text-inverse: #14161c; --brand-tint: #3a1f17; --brand-wash: #281612; --up-tint: #3a1a1a; --down-tint: #15291c; --warn-tint: #2e2615; --info-tint: #16243f; --sh-1: 0 1px 3px rgba(0, 0, 0, .40), 0 1px 2px rgba(0, 0, 0, .30); --sh-2: 0 4px 12px rgba(0, 0, 0, .50), 0 2px 4px rgba(0, 0, 0, .35); --sh-3: 0 12px 32px rgba(0, 0, 0, .55), 0 4px 8px rgba(0, 0, 0, .40); } /* ============================================================ 全局滚动条皮肤（v315 兜底） ------------------------------------------------------------ 设计意图：scrollbar 是「皮肤级」全局行为（类似 body 底色/链接色）， 不属于业务组件。tokens.css 已被全站 100% link 覆盖（含 legacy 旧 web 页面 + v315 页面 + 手机 v2），在此追加一段即全站自动生效， 旧页面的 Windows 粗滚动条也立即变 6px 细条。 v315 体系内仍可显式 link /static/components/scrollbar.css（与本段 内容同步，v315 组件库规约 §4 要求组件显式化）；重复声明由浏览 器自然合并，无副作用。 覆盖范围：html 纵向滚动 + 任何内部溢出容器 (.chart-content / .chart2-content / .memo 等) 兼容：WebKit(Chrome/Edge/Safari) + Firefox 标准属性 ============================================================ */ /* Firefox */ html { scrollbar-width: thin; scrollbar-color: #c8cdd4 transparent; } html:hover { scrollbar-color: #b0b7c4 transparent; } /* WebKit 通用滚动条（作用于所有可滚动元素，含内部容器） */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #c8cdd4; border-radius: 3px; transition: background 200ms ease; } ::-webkit-scrollbar-thumb:hover { background: #b0b7c4; } ::-webkit-scrollbar-thumb:active { background: var(--brand, #ef6a4c); } /* Firefox 内部容器 */ .chart-content, .chart2-content, .table-page__body, .memo { scrollbar-width: thin; scrollbar-color: #c8cdd4 transparent; }