/* ========================================================================== 达播工作台 Design Tokens — 浅色主题 三层结构：Primitive(A1) → Semantic(A2) → Component(B/C) 主色 #0064E0（Meta 钴蓝，替换原 TDesign 腾讯蓝 #0052D9） 规则：全站禁用裸 hex（仅 #fff/#000 例外），一律引用本文件 CSS 变量。 2026-09-06 底座重构（第十七轮）： 1) 色彩统一为 TDesign 官方单一色板 —— 清除 Apple iOS 系统色、Tailwind 图表色 2) 字号基准 13px → 14px（对齐 TDesign fontBodyMedium），全站正文不再发虚 3) 字重 510/590 → 500/600（PingFang/Noto SC 真实字重，消除合成加粗） 4) 阴影重做三档可感知层级，卡片不再只靠 1px 边框 ========================================================================== */ :root { /* ------------------------------------------------------------------ 一、Primitive（A1-identity / A1-structure）—— 原始值，不直接用于组件 ------------------------------------------------------------------ */ /* 主色 · Meta 钴蓝（500=主色 #0064E0；600=hover 深、700=active 更深） */ --color-primary-50: #EDF4FE; /* 激活底 / 选中 tint / 行 hover */ --color-primary-100: #DBE8FE; --color-primary-200: #B9D3FD; --color-primary-300: #94BBFB; --color-primary-400: #5E9BF8; --color-primary-500: #0064E0; /* 基准主色（Meta 钴蓝） */ --color-primary-600: #0457CB; /* hover（比主色深） */ --color-primary-700: #0040A3; /* active（更深） */ --color-primary-800: #002B73; --color-primary-900: #001B4D; /* 中性色 · TDesign Gray1-14（14 阶，CIELab 亮度均分） */ --color-gray-0: #FFFFFF; --color-gray-50: #F3F3F3; /* Gray1 页面底 / hover 底 */ --color-gray-100: #EEEEEE; /* Gray2 */ --color-gray-200: #E8E8E8; /* Gray3 弱分隔线 */ --color-gray-300: #DDDDDD; /* Gray4 默认边框 */ --color-gray-400: #C6C6C6; /* Gray5 输入框描边 */ --color-gray-500: #A6A6A6; /* Gray6 禁用文字 */ --color-gray-600: #8B8B8B; /* Gray7 */ --color-gray-700: #777777; /* Gray8 */ --color-gray-800: #5E5E5E; /* Gray9 */ --color-gray-900: #4B4B4B; /* Gray10 */ /* 字体栈（全站唯一） */ --font-family-body: "Noto Sans SC", "PingFang SC", "Inter", -apple-system, sans-serif; --font-family-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; /* 字号阶梯（对齐 TDesign：12 / 14 / 16 / 20 / 24 / 30 / 36） 正文基准 14px —— 中文在 12px 以下会发虚，禁止再降到 13px。 */ --font-size-xs: 12px; /* 辅助 / 徽章 / 时间戳 / 表头小字 */ --font-size-sm: 14px; /* 表格正文 / 次级正文（原 13px，2026-09-06 提升） */ --font-size-base: 14px; /* 正文 / 表单基准（TDesign fontBodyMedium） */ --font-size-lg: 16px; /* 卡片标题 / 强调（TDesign fontBodyLarge） */ --font-size-xl: 20px; /* 模块标题 */ --font-size-2xl: 24px; /* 页面标题 */ --font-size-3xl: 30px; /* KPI 数字 */ --font-size-4xl: 36px; /* 看板大数字（极少用） */ /* 字重三级体系 注意：必须是 400 / 500 / 600 —— PingFang SC 与 Noto Sans SC 只有这三档， 用 510/590 会触发浏览器合成加粗，Mac/Windows 粗细不一致、字形边缘发毛。 */ --font-weight-regular: 400; /* Read */ --font-weight-medium: 500; /* Emphasize */ --font-weight-semibold: 600; /* Announce */ /* 行高 */ --font-line-height-body: 1.5; --font-line-height-tight: 1.2; /* 字距 */ --font-letter-spacing-body: 0; --font-letter-spacing-display: -0.02em; /* ≥30px 标题 */ --font-letter-spacing-caps: 0.06em; /* ALL CAPS */ /* 间距（4px 网格，禁止 5/7/11/13 等离网格野值） */ --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; /* 圆角阶梯（TDesign：3 / 6 / 9 / 12 / 9999，严格递增） */ --radius-none: 0; --radius-sm: 4px; /* 徽章 / 小标签 */ --radius-seg: 6px; /* 分段控件 / 筛选 / Tab 项 */ --radius-md: 8px; /* 按钮 / 输入框 / 菜单行 */ --radius-lg: 12px; /* 卡片 */ --radius-xl: 12px; /* 弹窗 / 抽屉 */ --radius-pill: 9999px; /* 头像 / 状态胶囊 */ --radius-full: var(--radius-pill); /* 兼容别名，勿再新增 50% / 999px 写法 */ /* 顶部区（第一行）的高度。 ▸ 2026-09-19 结构重排后，**全页顶部只有一行**（面包屑那行已撤，标签栏升为第一行）， 所以本值与 --header-height 相等，二者都指"顶部那一行"。 ⚠️ 为什么仍保留两个令牌：`--header-height` 还被 analytics.js 的 headerHeight() 读来当**吸顶高度**（它只关心"顶部占多高"，不关心归谁）； 而本令牌描述"标签栏 / 品牌区这一行多高"。两者当前同值、语义不同，别合并。 ▸ 高度按下述三次调整，**每次都要连着标签体量一起改**（只改栏高会让标签显小）： ① 2026-09-19 晚 56 → 60（乐哥：「顶栏要不再高一点点？现在感觉有点挤」）。 ⭐ 实测："挤"的主因**不是栏高而是间距** —— 工具按钮间只有 2px、标签间 4px。 那次是**三处一起调**才见效：栏高 56→60、标签 36→40、间距 2/4→6/6。 ② 2026-09-20 60 → 52（乐哥：「最上面的标签，是不是太大，太占位置了」）。 ⭐ 本轮实测出的客观依据（这才是"太大"的硬证据，不是感觉）： · 标签 40px **比全站所有按钮都大** —— `.btn`=36、`.btn--sm`=30； · 标签栏内图标钮 40px **比全站 `.icon-btn` 基准 36 大**（100 处在复用它）， 标签栏是**全站唯一**把它放大到 40 的地方； · 栏高 60px 是全站最高的横条。 ⇒ 收回高度、**间距 6px 一个字不动**（上一条已证间距才是治"挤"的药）。 栏 52 / 标签 34 / 图标钮 36：标签上下各留 9px，仍比图标钮大一圈、不显小， 量级与 Chrome 浏览器页签相当。内容区起点 84 → 76，**每屏净赚 8px**。 ⚠️⚠️ 改本值**必须同时**改 `--header-height`（下方 137 行）—— 两处不同值会让 分析页 `/analytics` 的目录条 sticky 错位（它读 --header-height 当吸顶高度： `top: var(--header-height)`，而它要贴在标签栏下沿）。 ⇒ 两值同源，改一个必须改另一个。 */ --tabs-bar-height: 52px; /* 阴影三档（可感知层级：卡片 md、悬浮/下拉 lg、描边 ring） 禁用过大的扩散值——8px 扩散在浅灰底上只会形成脏边而非纵深。 */ --shadow-flat: none; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.06); --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.08); --shadow-ring: 0 0 0 1px var(--color-border); --shadow-raised: var(--shadow-lg); /* 旧名兼容别名 */ /* 卡片浮起（苹果式）：0.5px 发丝线 + 大而散的柔影。用在纯白底弹层内的模块卡—— 白底上没有明暗差可用，只能靠这一层影把卡片"托"起来（浅灰底不适用，会显脏）。 */ --shadow-card-float: 0 0 0 0.5px rgba(16, 24, 40, 0.12), 0 1px 3px rgba(16, 24, 40, 0.04), 0 10px 22px rgba(16, 24, 40, 0.08); /* 动效（功能性，收敛 150ms；禁止弹性缓动） */ --motion-fast: 150ms; /* hover / active / 选中 */ --motion-base: 200ms; /* 下拉展开 / 抽屉滑入 */ --motion-slow: 300ms; /* 跨屏 / 弹窗 */ --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1); /* 图标（Lucide 内联 SVG，三档尺寸，stroke-width 2） */ --icon-size-sm: 16px; --icon-size-md: 20px; --icon-size-lg: 24px; --icon-stroke-width: 2; /* 布局 */ --container-max: 1440px; --form-max-width: 1120px; --sidebar-width: 240px; /* 设计稿侧边栏 240（Meta 折叠式） */ --sidebar-width-icon: 64px; --sidebar-offset: 14px; --page-padding: var(--space-8); /* 32px 灰色 gutter（设计稿内容区左右留白） */ /* ⚠️ 与 --tabs-bar-height 必须同值（见上方说明）：本值被 analytics.js 读作 **吸顶高度**、也被分析页目录条的 `top` 使用，改一个必须改另一个。 当前 52 = 标签栏高度（2026-09-20 由 60 收回，见上方第 ② 次调整）。 */ --header-height: 52px; --section-y: var(--space-8); --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; /* 层级 z-index */ --z-base: 0; --z-dropdown: 1000; --z-sticky: 1100; --z-modal: 1200; --z-toast: 1300; /* ------------------------------------------------------------------ 二、Semantic（A2）—— 语义别名，组件层引用的唯一入口 ------------------------------------------------------------------ */ /* 前景 · TDesign 文字灰阶（font-gray-1/2/3/4 = 黑 90%/60%/40%/26%） 对比度（白底）：primary 17.5:1 / secondary 5.7:1 / tertiary 2.85:1 tertiary 仅供占位符与禁用态，不得用于正文。 */ --color-fg: #1C1E21; /* 主文字 */ --color-fg-2: #3F4753; /* 正文 */ --color-muted: #5D6C7B; /* 次级 / 副标题 */ --color-meta: #8595A4; /* 辅助 / 时间戳 */ /* ⚠️ 历史变量补齐（2026-09-13）：`--color-fg-3` 早年被 4 处引用但**从未定义** （table.css 的 .kw-scope__sep、pages-influencer.css 一处、sample-distributions.js 圆点两处）。 其中 2 处没写 fallback → `color` 声明**静默失效**（继承父级色，长期无人发现）； 另 2 处写了 `var(--color-fg-3,#C7C7CC)` → 一直显示 fallback 值。 语义上它就是「第三级前景 = 辅助灰」，与 --color-meta 同级，故就地定义（而不是改 4 处调用点）—— 这样 4 处同时恢复正确，也不再有"引用了不存在的变量"这一隐患。 */ --color-fg-3: #8595A4; /* 三级前景（兼容历史命名，等价 --color-meta） */ --color-placeholder: #B9C1CC; /* 占位符 */ --color-disabled: #C4CBD4; /* 禁用 */ /* 表面（TDesign Gray1 / White：卡片与页面底有明确分层） */ --color-bg: #F5F6F8; /* 页面底 */ --color-surface: #FFFFFF; /* 卡片 */ --color-surface-2: #FAFBFC; /* hover / 表头底 */ /* 边框 */ --color-border: #E5E8EC; --color-border-soft: #EDEFF1; /* 卡片描边 */ /* 强调（每屏可见使用 ≤ 2 处：主 CTA + 激活态） */ --color-accent: var(--color-primary-500); --color-accent-hover: var(--color-primary-600); --color-accent-active: var(--color-primary-700); --color-accent-on: #FFFFFF; --color-accent-text: var(--color-primary-500); /* 主色文字/图标（链接、激活态） */ --color-accent-bg: var(--color-primary-50); /* 语义色（Meta 功能色：成功 / 告警 / 危险，浅底成对） */ --color-success: #31A24C; --color-success-bg: #EAF6EF; --color-warning: #F2A918; --color-warning-bg: #FEF5E7; --color-danger: #E41E3F; --color-danger-bg: #FDE8EB; --color-danger-soft: #FDE8EB; --color-price: var(--color-danger); /* 价格：与危险色同源，避免多一套红 */ --color-info: #0064E0; --color-info-bg: #EDF4FE; --color-info-soft: #EDF4FE; /* 语义文字色（无底色场景专用）：--color-success/--color-warning 是给「浅底+同色字」配对的， 单独当正文文字放在白底上小字可读性不足，故各深一档；仍属同色系，不引入新色相 */ --color-success-text: #1B7F3B; /* 白底上的成功文字（对比度 ≈5.0:1） */ --color-warning-text: #B25C0C; /* 白底上的警示文字（对比度 ≈4.8:1） */ /* 语义「描边 / 整行底」变体（2026-09-14 补，把散落在 pages.css 的硬编码色收进令牌） 用途：① 描边比 --color-warning 浅，边框上更柔和；② 整行警示底比 --color-warning-bg 更浅， 避免与行内内容抢视觉。--color-danger-strong / -border 同理，用于深底文字与危险描边。 */ --color-warning-border: #F2C879; /* 警示描边（如"待结算"卡片外框） */ --color-warning-bg-soft: #FFFBF0; /* 警示整行底（比 --color-warning-bg 更浅） */ --color-warning-bg-hover: #FFF6E3; /* 上者 hover */ --color-warning-accent: #E8A33D; /* 强调描边（行首色条） */ --color-danger-strong: #D93025; /* 白底危险文字（比 --color-danger 更深，对比更足） */ --color-danger-border: #F5B5AE; /* 危险描边 */ /* 统一「提示 / 警示条」规格（2026-09-14 乐哥定稿） ------------------------------------------------------------------ 乐哥原话：「所有的警示提醒，应该做成（截图）这种，**不需要右边清楚的叉**， 不要做成现在提成总览里那种**白底**的」 起因：提成总览 / 达人结算 / 华大对账 的说明条原为「近白底 + 左竖线」（--color-surface-2， 几乎与卡片同色）→ 不够醒目、且与看板页的「透明底 + 左竖线」形态各不相同。 定稿形态：**浅色底 + 圆角 + 左侧图标**（TDesign Alert 形态），**不带关闭叉**。 语义色**分两档保留**（不合并）： · 说明类（info）→ 浅蓝底 + 蓝图标 · 警示类（warn）→ 浅橙底 + 橙图标 ⚠️ 不把警示类也改成蓝色：那会让"警告"失去辨识度（乐哥要的是**形态统一**， 不是把所有提示都降级成同一种语义）。 用法：各页面自有类名（.an-banner / .st-rule__inner / .st-pending-bar …） 统一引用下面这组变量，保证以后新增提示条自动同规格。 */ --notice-radius: var(--radius-md); --notice-pad-y: var(--space-2); --notice-pad-x: var(--space-3); --notice-gap: var(--space-2); --notice-bg: var(--color-info-bg); --notice-border: var(--color-primary-100); --notice-ico: var(--color-info); --notice-fg: var(--color-fg-2); --notice-warn-bg: var(--color-warning-bg); --notice-warn-border: var(--color-warning-border); --notice-warn-ico: var(--color-warning); /* KPI 徽章色调（柔和色块：图标底 + 同色系深字。2026-09-14 立 —— 原先这套 5 色 在 dashboard.js 与 influencer-detail.js **各写一份**，改一处另一处不跟随； 收进令牌后成为唯一来源，JS 侧用 UI.cssVar() 读取。 */ --color-tone-blue-bg: var(--color-primary-50); --color-tone-blue-fg: var(--color-primary-500); --color-tone-teal-bg: #E1F5EE; --color-tone-teal-fg: #0F6E56; --color-tone-orange-bg: #FAEEDA; --color-tone-orange-fg: #854F0B; --color-tone-green-bg: #EAF3DE; --color-tone-green-fg: #3B6D11; --color-tone-purple-bg: #EEEDFE; --color-tone-purple-fg: #534AB7; /* 标签 / 头像缺色兜底 + 品牌色（2026-09-14 收进令牌，原先散在 ui.js 里硬编码） */ --color-tag-fallback: #A6ADBC; /* 标签未指定颜色时的兜底灰 */ --color-brand-starmedia: #2F6BFF; /* 星盟品牌蓝（仓库标签专用，非 TDesign 色板） */ --color-tag-location: #B45309; /* 排期日历「地点」标签（暖琥珀，刻意区别于达人/平台色） */ /* 页面水印 / 顶部横幅（watermark.js 专用；原先硬编码在 JS 里） */ --color-watermark: #7C8BA1; /* 平铺水印文字色（低透明度叠加） */ --color-watermark-strong: #64748B; /* 水印文字色（高透明度档） */ --color-banner-danger: #D43A38; /* 页面顶部红色提示条底色 */ /* 模块标题栏状态底（全局通用，2026-09-10 立） 用途：带「开启/关闭」状态开关的模块，标题栏整条底色随状态切换。 黄 = 开启（单独维护 / 偏离默认，需留意）；绿 = 关闭（跟随体系 / 默认正常态）。 用法：标题栏容器加 .is-on / .is-off → background 取 --color-head-on-bg / --color-head-off-bg， 标题文字取对应 --color-head-on-fg / --color-head-off-fg。 */ --color-head-on-bg: var(--color-warning-bg); /* 开启态标题底：浅黄 */ --color-head-on-fg: var(--color-warning-text); /* 开启态标题字：深橙 */ --color-head-off-bg: var(--color-success-bg); /* 关闭态标题底：浅绿 */ --color-head-off-fg: var(--color-success-text); /* 关闭态标题字：深绿 */ /* 图表分类色（TDesign 官方扩展色板，定性色板顺序：品牌蓝 → 天蓝 → 绿 → 黄 → 橙 → 红 → 紫 → 粉） 严禁再使用 Tailwind 默认色板。 */ --color-chart-1: #0064E0; /* 品牌蓝 */ --color-chart-2: #029CD4; /* Cyan5 */ --color-chart-3: #2BA471; /* Green5 */ --color-chart-4: #F5BA18; /* Yellow4 */ --color-chart-5: #E37318; /* Orange5 */ --color-chart-6: #D54941; /* Red6 */ --color-chart-7: #8E56DD; /* Purple6 */ --color-chart-8: #E851B3; /* Pink5 */ /* 事项类型色（TDesign 官方色板，全站统一，勿改） 2026-09-06：由 Apple iOS 系统色迁移至 TDesign 同族色 */ --color-item-arrival: #8B8B8B; /* 到达 Gray7 */ --color-item-trace: #2BA471; /* 溯源拍摄 Green5 */ --color-item-source-live: #008858; /* 溯源直播 Green6（深绿，区分溯源拍摄） */ --color-item-course: #0064E0; /* 小课堂 品牌蓝 */ --color-item-interview: #8E56DD; /* 博士访谈 Purple6 */ --color-item-live: #D54941; /* 带货直播 Red6 */ --color-item-departure: #A6A6A6; /* 离开 Gray6 */ --color-item-custom: #8B8B8B; /* 自定义事项 Gray7（统一、不显眼，与到达同灰） */ /* 事项类型浅底（TDesign 对应色阶 1-2，随主色成对维护） */ --color-item-arrival-soft: #EEEEEE; /* Gray2 */ --color-item-trace-soft: #E3F9E9; /* Green1 */ --color-item-source-live-soft: #C6F3D7; /* Green2 */ --color-item-course-soft: #EDF4FE; /* 主色浅底 */ --color-item-interview-soft: #FBF0FF; /* Purple1 */ --color-item-live-soft: #FFF0ED; /* Red1 */ --color-item-departure-soft: #F3F3F3; /* Gray1 */ --color-item-custom-soft: #EEEEEE; /* Gray2 */ /* ------------------------------------------------------------------ 三、Component（B-slot / C-extension）—— 组件专用 token ------------------------------------------------------------------ */ /* 聚焦环 */ --focus-ring: 0 0 0 3px rgba(0, 100, 224, 0.22); /* 按钮 */ --button-primary-bg: var(--color-accent); --button-primary-fg: var(--color-accent-on); --button-primary-hover: var(--color-accent-hover); --button-primary-active: var(--color-accent-active); --button-secondary-bg: transparent; --button-secondary-fg: var(--color-accent-text); --button-secondary-border: var(--color-gray-400); --button-ghost-bg: transparent; --button-ghost-fg: var(--color-fg); --button-danger-bg: var(--color-danger); --button-danger-fg: #FFFFFF; /* 输入框 */ --input-bg: var(--color-surface); --input-border: #E6E8EB; /* 设计稿标准浅灰描边（原 gray-400 #C6C6C6 偏深） */ --input-focus-border: var(--color-accent); --input-error-border: var(--color-danger); --input-disabled-bg: var(--color-surface-2); --input-disabled-text: var(--color-disabled); /* 开关：激活态轨道色。模块需换色时**只覆盖这个变量**，不要去重写 .switch 的选择器 （重写选择器会与组件默认规则同特异性、靠加载顺序生效，极易静默失效） */ --switch-active-bg: var(--color-accent); /* 表格 */ --table-header-bg: var(--color-surface-2); --table-header-fg: var(--color-meta); --table-row-hover: var(--color-primary-50); --table-row-alt: var(--color-bg); /* 隔行底色（斑马纹）：比主指标行 --color-surface-2 稍深，看得出差异但不喧宾 */ --table-divider: var(--color-border-soft); /* 徽章（状态「深字 + 浅底」成对） */ --badge-success-fg: var(--color-success); --badge-success-bg: var(--color-success-bg); --badge-warning-fg: var(--color-warning); --badge-warning-bg: var(--color-warning-bg); --badge-danger-fg: var(--color-danger); --badge-danger-bg: var(--color-danger-bg); --badge-info-fg: var(--color-info); --badge-info-bg: var(--color-info-bg); } /* 手机端：整体字号下调约 1px，让一屏显示更多内容（团队视力均无问题） */ @media (max-width: 768px) { :root { --font-size-xs: 11px; --font-size-sm: 13px; --font-size-base: 13px; --font-size-lg: 15px; --font-size-xl: 18px; --font-size-2xl: 21px; --font-size-3xl: 26px; --font-size-4xl: 32px; } } /* 无障碍：偏好减少动效时关闭位移/缩放，仅保留透明度变化 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }