212 lines
8.5 KiB
CSS
212 lines
8.5 KiB
CSS
/* =============================================================================
|
||
* 深蓝色 UI 规范 · 设计令牌（tokens.css）
|
||
* -----------------------------------------------------------------------------
|
||
* 这是《深蓝色 UI 规范》全站颜色 / 间距 / 圆角 / 阴影 / 字体的唯一可执行来源。
|
||
* 开发时优先 import 本文件并使用 var(--token)，不要在业务代码里硬编码 HEX。
|
||
*
|
||
* 文档对应：
|
||
* §1 色彩 → 原始色阶 --zs-*、功能语义 --func-*、装饰/图表色板
|
||
* §2 字体 → --font-* / --fs-*
|
||
* §3 阴影 → --shadow-*
|
||
* §4 圆角 → --radius-*
|
||
* §7 间距 → --spacing-*
|
||
* 组件级 token（--card-* / --modal-* / --kpi-* 等）保留在各分册的「CSS Token 参考」
|
||
* 小节中，均回落到本文件的原始/语义 token。
|
||
* ========================================================================== */
|
||
|
||
:root {
|
||
/* ---------------------------------------------------------------------------
|
||
* 1. 原始色阶（§1.1.2–§1.1.5）—— 01 最浅 → 10 最深
|
||
* ------------------------------------------------------------------------ */
|
||
|
||
/* 渐红系 ZS-001 —— 警示 / 错误 / 强调 */
|
||
--zs-001-01: #FFF1F0;
|
||
--zs-001-02: #FFCCC7;
|
||
--zs-001-03: #FFA39E;
|
||
--zs-001-04: #FF7875;
|
||
--zs-001-05: #FF4D4F;
|
||
--zs-001-06: #F5222D;
|
||
--zs-001-07: #CF1322;
|
||
--zs-001-08: #A8071A;
|
||
--zs-001-09: #820014;
|
||
--zs-001-10: #5C0011;
|
||
|
||
/* 渐蓝系 ZS-002 —— 信息 / 链接 / 次级操作（含主色） */
|
||
--zs-002-01: #E6F4FF;
|
||
--zs-002-02: #BAE0FF;
|
||
--zs-002-03: #91CAFF;
|
||
--zs-002-04: #69B1FF;
|
||
--zs-002-05: #4096FF;
|
||
--zs-002-06: #1677FF;
|
||
--zs-002-07: #0958D9;
|
||
--zs-002-08: #003EB3;
|
||
--zs-002-09: #002C8C;
|
||
--zs-002-10: #001D6C;
|
||
|
||
/* 渐青系 ZS-003 —— 成功 / 在线 / 数据高亮（含辅色） */
|
||
--zs-003-01: #E6FFFB;
|
||
--zs-003-02: #B5F5EC;
|
||
--zs-003-03: #87E8DE;
|
||
--zs-003-04: #5CDBD3;
|
||
--zs-003-05: #36CFC9;
|
||
--zs-003-06: #13C2C2;
|
||
--zs-003-07: #08979C;
|
||
--zs-003-08: #006D75;
|
||
--zs-003-09: #00474F;
|
||
--zs-003-10: #002329;
|
||
|
||
/* 深蓝系 ZS-004 —— 背景 / 容器 / 导航 / 文字（主题核心） */
|
||
--zs-004-01: #E8EDF5;
|
||
--zs-004-02: #C5CFE0;
|
||
--zs-004-03: #9BADC8;
|
||
--zs-004-04: #6E88B0;
|
||
--zs-004-05: #4A6491;
|
||
--zs-004-06: #2D4473;
|
||
--zs-004-07: #1A2F5A;
|
||
--zs-004-08: #122347;
|
||
--zs-004-09: #0C1836;
|
||
--zs-004-10: #060E24;
|
||
|
||
/* ---------------------------------------------------------------------------
|
||
* 2. 功能角色色（§1.1.6）—— 从色阶提取的语义别名
|
||
* ------------------------------------------------------------------------ */
|
||
--color-primary: var(--zs-002-06); /* #1677FF 主操作 */
|
||
--color-primary-hover: var(--zs-002-07); /* #0958D9 */
|
||
--color-primary-active: var(--zs-002-08); /* #003EB3 */
|
||
--color-link: var(--zs-002-05); /* #4096FF 链接 / 文本按钮 */
|
||
--color-accent: var(--zs-003-06); /* #13C2C2 辅色 */
|
||
|
||
--color-text: var(--zs-004-02); /* #C5CFE0 正文字体 */
|
||
--color-text-secondary: var(--zs-004-04); /* #6E88B0 次级字体 */
|
||
--color-text-disabled: var(--zs-004-05); /* #4A6491 禁用字体 */
|
||
--color-text-strong: #FFFFFF; /* 标题 / 强调 */
|
||
|
||
--color-bg-page: var(--zs-004-09); /* #0C1836 页面背景 */
|
||
--color-bg-container: var(--zs-004-07); /* #1A2F5A 容器背景 */
|
||
--color-bg-card: var(--zs-004-08); /* #122347 卡片背景 */
|
||
--color-bg-deepest: var(--zs-004-10); /* #060E24 全局底色 */
|
||
--color-border: var(--zs-004-07); /* #1A2F5A 容器边框 */
|
||
--color-border-strong: var(--zs-004-04); /* #6E88B0 控件边框 */
|
||
--color-white: #FFFFFF;
|
||
|
||
/* ---------------------------------------------------------------------------
|
||
* 3. 功能语义色（§1.1.9）—— 成功/警告/错误/信息/处理中
|
||
* 成功绿、警告橙为标准色系外补充色；其余复用色阶。
|
||
* ------------------------------------------------------------------------ */
|
||
--func-success: #52C41A; /* 补充色 · 成功绿 */
|
||
--func-warning: #FAAD14; /* 补充色 · 警告橙 */
|
||
--func-error: var(--zs-001-06); /* #F5222D */
|
||
--func-info: var(--zs-002-06); /* #1677FF */
|
||
--func-processing: var(--zs-003-06); /* #13C2C2 */
|
||
|
||
/* 浅底变体（Message / Alert / Tag 背景，16% 透明度） */
|
||
--func-success-bg: rgba(82, 196, 26, 0.16);
|
||
--func-warning-bg: rgba(250, 173, 20, 0.16);
|
||
--func-error-bg: rgba(245, 34, 45, 0.16);
|
||
--func-info-bg: rgba(22, 119, 255, 0.16);
|
||
|
||
/* ---------------------------------------------------------------------------
|
||
* 4. 小面积装饰色（§1.1.7）—— 仅点缀 / 徽标，勿做大面积背景
|
||
* ------------------------------------------------------------------------ */
|
||
--deco-violet: #6388FF;
|
||
--deco-danger: #F5222D;
|
||
--deco-brand-blue: #12306C;
|
||
--deco-teal: #478880;
|
||
--deco-alert: #950404;
|
||
|
||
/* ---------------------------------------------------------------------------
|
||
* 5. 字体（§2）
|
||
* ------------------------------------------------------------------------ */
|
||
--font-zh: 'Noto Sans S Chinese', 'Noto Sans SC', system-ui, sans-serif;
|
||
--font-num: 'D-DIN', 'Noto Sans S Chinese', sans-serif; /* 数据数字 */
|
||
--font-digital:'DS-Digital', 'D-DIN', sans-serif; /* 大屏特殊数字 */
|
||
--font-logo: 'DOUYUFont', 'Noto Sans S Chinese', sans-serif;
|
||
--font-table: 'Arial', 'Noto Sans S Chinese', sans-serif; /* 表格数字 */
|
||
|
||
/* 常用字号（后台系统，§2.1.2） */
|
||
--fs-12: 12px;
|
||
--fs-14: 14px;
|
||
--fs-16: 16px;
|
||
--fs-18: 18px;
|
||
--fs-20: 20px;
|
||
--fs-24: 24px;
|
||
--fs-26: 26px;
|
||
|
||
/* ---------------------------------------------------------------------------
|
||
* 6. 间距（§7）—— 8px 基准，密(≤16) / 疏(≥24)，禁用非阶梯值
|
||
* ------------------------------------------------------------------------ */
|
||
--spacing-1: 4px;
|
||
--spacing-2: 8px;
|
||
--spacing-3: 12px;
|
||
--spacing-4: 16px;
|
||
--spacing-5: 24px;
|
||
--spacing-6: 32px;
|
||
--spacing-7: 40px;
|
||
--spacing-8: 56px;
|
||
|
||
/* ---------------------------------------------------------------------------
|
||
* 7. 圆角（§4）
|
||
* ------------------------------------------------------------------------ */
|
||
--radius-button: 2px;
|
||
--radius-input: 2px;
|
||
--radius-tag: 2px;
|
||
--radius-card: 4px;
|
||
--radius-panel: 4px;
|
||
--radius-modal: 4px;
|
||
|
||
/* ---------------------------------------------------------------------------
|
||
* 8. 阴影（§3.1.4）
|
||
* ------------------------------------------------------------------------ */
|
||
--shadow-1: 0 2px 8px rgba(22, 119, 255, 0.12); /* 卡片悬浮 */
|
||
--shadow-2: 0 4px 16px rgba(22, 119, 255, 0.24); /* hover / 弹出层 */
|
||
--shadow-3: 0 8px 32px rgba(6, 14, 36, 0.6); /* Dialog / Drawer */
|
||
--shadow-modal-mask: rgba(6, 14, 36, 0.6); /* 遮罩 */
|
||
|
||
/* 常用渐变 */
|
||
--gradient-header: linear-gradient(180deg, #122347 0%, #0C1836 100%); /* 顶栏 §8.2.1 */
|
||
--gradient-title-line: linear-gradient(90deg, transparent 0%, #1677FF 50%, transparent 100%); /* 标题发光线 §8.2.4 */
|
||
}
|
||
|
||
/* =============================================================================
|
||
* 图表多系列色板
|
||
* ========================================================================== */
|
||
:root {
|
||
/* 通用图表色序（§1.1.8，面积大：柱/折线/饼，高彩度） */
|
||
--chart-g-1: #1677FF;
|
||
--chart-g-2: #13C2C2;
|
||
--chart-g-3: #4096FF;
|
||
--chart-g-4: #36CFC9;
|
||
--chart-g-5: #69B1FF;
|
||
--chart-g-6: #5CDBD3;
|
||
--chart-g-7: #91CAFF;
|
||
--chart-g-8: #87E8DE;
|
||
|
||
/* 小面积图表色序（§1.1.8，散点/迷你图/徽标） */
|
||
--chart-s-1: #4096FF;
|
||
--chart-s-2: #36CFC9;
|
||
--chart-s-3: #FF4D4F;
|
||
--chart-s-4: #FFA39E;
|
||
--chart-s-5: #6388FF;
|
||
--chart-s-6: #478880;
|
||
|
||
/* 多系列填充色板（§41，淡色系，分类并列默认色序） */
|
||
--chart-p-red: #FA9196;
|
||
--chart-p-redorange: #FCA58F;
|
||
--chart-p-orange: #FDB887;
|
||
--chart-p-amber: #FFCC80;
|
||
--chart-p-olive: #DCD69A;
|
||
--chart-p-green: #BAE1B3;
|
||
--chart-p-teal: #97EBCD;
|
||
--chart-p-cyan: #9EE4EA;
|
||
--chart-p-skyblue: #A2E1F9;
|
||
--chart-p-blue: #80BCFF;
|
||
}
|
||
|
||
/*
|
||
* 图表配色优先级（§41.3）：
|
||
* 有语义 → 用 --func-*；多分类并列 → 用 --chart-p-*（§41 色板）；
|
||
* 需强调单值 → 用 --chart-g-* / --chart-s-*（§1.1.8 高彩度）。
|
||
*
|
||
* 接入 ECharts 时按系列数取 option.color，见 §41.4 的 CHART_PALETTES。
|
||
*/
|