/* ============================================================ 微博监控 · 设计令牌（双端共用） Desktop / Mobile 各自内联布局样式，这里只放变量与基础重置 【使用规则】业务样式只准引用这里的令牌，不准再写十六进制色值。 例外仅限两类：① 深色面（侧栏/深色卡片）里需要单独校准的亮色； ② 图表系列的分类色。两者都已在此定义成令牌，仍不许硬编码。 令牌分五组： 1. 中性（面 / 线 / 文字） 2. 品牌（橙） 3. 语义（成功 / 警告 / 危险 / 信息 / 紫 / 粉），每族 5 档 4. 图表与特效 5. 排版（字号 / 字重 / 行高 / 字距） 语义族 5 档的分工（不能混用）： --x base 浅底上的文字、图标、实心按钮底 --x-deep 深文字 浅色软底上的文字（对比度更高） --x-soft 软底 徽章、提示条的背景 --x-line 描边 软底的边框 --x-bright 亮色 深色底上的点、进度条、图表笔画 ============================================================ */ :root{ /* ===== 1. 中性 ===== */ --bg:#F3F4F6; /* 页面底 */ --surface:#FFFFFF; /* 卡片、弹层 */ --surface-2:#F9FAFB; /* 次级面：表头、hover、极浅底 */ --fill:#F0F2F5; /* 填充底：分段控件槽、进度槽、chip */ --fill-2:#E8EBF0; /* 填充底加深：hover 态、轨道 */ --line:#E7E9EE; /* 默认分隔线、输入框边 */ --line-soft:#F1F3F6; /* 极淡分隔：表格行、列表内分隔 */ --line-strong:#D9DEE6; /* 加重描边：hover 边框、卡片描边 */ --icon-mute:#C3CAD5; /* 空状态图标、禁用状态图形 */ --hover-tint:#FFFBF9; /* 表格行 / 列表项 hover：品牌色 2% 混白，比冷灰 --surface-2 更贴暖底 */ --text:#14161C; /* 主文字 */ /* 文字三级对比度（在 --bg #F3F4F6 上）：约 16:1 / 6.5:1 / 4.7:1 原来的 --text-3 #96A0B0 只有 2.4:1 —— 表头、状态标签、说明文字 在浅灰底上几乎糊成一片，是这套界面最影响可读性的一处。 深浅靠字重和字号拉开层次，不靠「淡到看不见」。 */ --text-2:#4F5866; /* 次文字：说明、表单标签、表头 */ --text-3:#656E7E; /* 弱文字：时间、单位、计数、占位 */ --text-sep:#CBD2DD; /* 装饰符号：面包屑斜杠、路径分隔 */ --on-brand:#FFFFFF; /* 品牌色底 / 深色底上的文字：恒定纯白，不随 --surface 变化 */ /* ===== 2. 品牌 ===== */ --brand:#FF6B35; --brand-deep:#E4551F; --brand-mid:#FF8A4C; --brand-soft:#FFF2EC; --brand-line:#FFD9C7; /* 品牌软底描边 */ /* 品牌浅底上的正文：直接写 --brand-deep 太红、--text-2 又太灰， 这个偏棕的橙是唯一在 #FFF2EC 上读起来不刺眼的品牌色 */ --brand-ink:#A6461A; /* 顶部信息条的重点词：橙软底 #FFF2EC 上 5.24:1、蓝软底 #EBF2FE 上 5.10:1。 不复用 --danger-deep —— 那个偏玫红且语义是「危险」，标注普通重点会误导； 也要比 --brand-ink 更红，否则在橙底上「重点」和正文一个色相。 */ --tip-em:#C81E1E; /* ===== 3. 语义（每族 5 档，见文件头分工） ===== */ --success:#0F9D58; --success-deep:#0B7F47; --success-soft:#E8F7EF; --success-line:#CDEBD9; --success-bright:#5CD68F; --warn:#E9A23B; --warn-deep:#B47818; --warn-soft:#FDF4E5; --warn-soft-hi:#FFF9F0; /* 软底渐变的高亮端 */ --warn-line:#F3DFC0; --warn-bright:#F3C06A; --danger:#DC3D43; --danger-deep:#C42F35; --danger-soft:#FDECEC; --danger-line:#F2D3D3; --danger-bright:#F0739A; --info:#3D7EF0; --info-deep:#2A66D9; --info-soft:#EBF2FE; --info-bright:#5B8DEF; --violet:#7C6BF0; --violet-deep:#5B49D6; --violet-soft:#EEECFE; --violet-bright:#8B7BF0; /* 粉：仅供头像渐变第 6 色使用（图表分类色不另设，直接用语义族） */ --pink:#E8779A; --pink-deep:#C24A72; /* ===== 4. 特效 ===== */ --brand-focus:rgba(255,107,53,.55); /* 输入框聚焦边框 */ --overlay:rgba(17,24,39,.4); /* 弹层遮罩 */ --ring:0 0 0 3px rgba(255,107,53,.12); /* 焦点环 */ /* ===== 身份渐变（头像 / 任务类型徽章） ===== 原来是 6 组手写渐变散在两端的 HTML 与 core.js 的 AVA 数组里， 18 个色值彼此不成体系（绿那组偏向荧光、粉那组偏紫）。 这里统一到语义族的 base→deep 两端，明暗关系才和按钮、徽章一致。 --av-0 专给「未选择 / 占位」用，故意是无彩灰。 */ --av-1:linear-gradient(140deg,#FF8A4C,#E4551F); /* 橙 */ --av-2:linear-gradient(140deg,#5B8DEF,#2A66D9); /* 蓝 */ --av-3:linear-gradient(140deg,#8B7BF0,#5B49D6); /* 紫 */ --av-4:linear-gradient(140deg,#34C77B,#0B7F47); /* 绿 */ --av-5:linear-gradient(140deg,#E9A23B,#B47818); /* 琥珀 */ --av-6:linear-gradient(140deg,var(--pink),var(--pink-deep)); /* 粉 */ --av-7:linear-gradient(140deg,#6B7A90,#47536A); /* 灰蓝 */ --av-8:linear-gradient(140deg,#4D5B78,#2C3548); /* 深蓝（侧栏快链） */ --av-0:linear-gradient(140deg,#C3CAD5,#AEB6C4); /* 占位灰 */ /* ===== 第三方平台徽章（品牌色，不并入语义族） ===== 百度 / 夸克 / UC / 迅雷 的识别色属于外部品牌资产， 改了就不再是那家平台了。收成令牌只为「不再散落硬编码」。 */ --plat-baidu:linear-gradient(140deg,#3D7EF0,#2563D8); --plat-quark:linear-gradient(140deg,#5B6BF0,#3B47C8); --plat-quark-fg:#5B6BF0; /* 夸克单色图标（无渐变场合） */ --plat-uc:linear-gradient(140deg,#FF8A4C,#E4551F); --plat-xunlei:linear-gradient(140deg,#6B7A90,#47536A); /* ===== 图标色调：柔底 + 深描边 ===== 只设两个自定义属性，由 .si / .ico 等容器读取， 避免和 .sheet-item .si / .sl-item .si 这类选择器打特异性官司 */ --tint-brand-bg:#FFEDE3; --tint-brand-fg:#CC450F; --tint-blue-bg:#EBF2FE; --tint-blue-fg:#2A66D9; --tint-violet-bg:#EFECFF; --tint-violet-fg:#5B49D6; --tint-green-bg:#E5F8ED; --tint-green-fg:#0B7F47; --tint-amber-bg:#FAF0DA; --tint-amber-fg:#96620E; --tint-red-bg:#FDECEC; --tint-red-fg:#C42F35; --tint-slate-bg:#ECEFF4; --tint-slate-fg:#4E5867; /* 深色 */ --side:#12141A; --hero-a:#1C202A; --hero-b:#12141A; /* 形体 · 圆角阶梯 改造前散着 2/3/4/5/6/7/8/9/10/11/12/14/16/18/20 共 15 档， 相邻两档差 1px —— 同一排控件的圆角都不一样，看起来像各自为政。 收成 4 档 + 药丸，按「元素尺寸」选：小元素小圆角，大面板大圆角。 */ --r-xs:6px; /* 角标、kbd、微型标签、checkbox */ --r-sm:9px; /* 按钮、输入框、小卡片、图标底 */ --r-md:12px; /* 中等卡片、下拉、列表项 */ --r-lg:16px; /* 大面板、弹层、Hero 卡 */ --r-pill:999px;/* 药丸：标签、计数、头像圆 */ /* ===== 层级投影：四级，按「这块面离页面底多远」选 ===== 改造前全站只有 sh-1 / sh-2 / sh-pop 三档，而 sh-1 被同时用在 「贴底的表格卡」和「浮在最上的 KPI 卡」上 —— 两种深度一个阴影， 页面就只剩「平」这一种观感。现在按层给： --sh-0 贴底：表头、内嵌分区、行内 chip（几乎不投影，只靠底色分层） --sh-1 一级面：普通卡片，纸片厚度 --sh-2 二级面：可点的卡（KPI / 平台卡）、需要从周围跳出来的块 --sh-3 浮起：sticky 工具条、下拉、侧栏折叠区 --sh-pop 弹层：dialog / popover（最高，且带扩散） */ --sh-0:0 1px 1px rgba(17,24,39,.03); --sh-1:0 1px 2px rgba(17,24,39,.04), 0 1px 3px rgba(17,24,39,.05); --sh-2:0 12px 28px -10px rgba(17,24,39,.14), 0 2px 8px rgba(17,24,39,.04); --sh-3:0 6px 18px -8px rgba(17,24,39,.16), 0 1px 4px rgba(17,24,39,.05); --sh-pop:0 24px 56px -14px rgba(17,24,39,.26), 0 4px 12px rgba(17,24,39,.05); /* 内描边：替代 1px 实边做「面与面的分界」，比 border 更轻、不占盒模型 */ --hair:inset 0 0 0 1px var(--line); --hair-soft:inset 0 0 0 1px var(--line-soft); /* ===== 控件高度阶梯（按钮 / 输入 / 分段，双端共用四档） ===== 改造前桌面端按钮实测 23 种规格（24/26/27/28/30/32/34/36/38）， 同一屏里「刷新」34h、「添加」28h、「设置」24h、「保存」36h， 相邻两档只差 1-2px —— 读起来像四个不同系统拼出来的。 现在按钮只有四档，按「它在哪一排」选，不按手感微调： --h-xs 24px 表格行内文字动作（禁用 / 重置密码） --h-sm 28px 工具条、卡头、行内图标按钮 --h 34px 页面主按钮、表单提交 --h-lg 38px 单一大动作（发送 / 登录），每屏最多一个 */ --h-xs:24px; --h-sm:28px; --h:34px; --h-lg:38px; /* 输入框与按钮同高，否则「输入 + 按钮」成组时上下沿对不齐 */ --h-input:34px; --h-input-sm:28px; /* ===== 控件高度阶梯（移动端） ===== 手机是拇指操作，最小触摸目标 28，主操作 44（iOS HIG 推荐值）。 改造前实测 12 档：16/22/23/26/28/30/34/36/38/40/44/47 —— 其中 23 和 26、30 和 32、34 和 36 都是「只差 2-3px」的孪生兄弟。 现在四档 + 两个专用尺寸，按「它在哪一排」选： --mh-xs 28 标签旁的微型动作（删除 / 重置 / 档位标签） --mh-sm 32 卡头右侧、工具条、行内按钮 --mh 36 常规按钮（刷新 / 保存 / 开始监控） --mh-block 44 整行主操作（保存设置 / 立即发送） --mh-fab 48 浮动主操作（右下角新建 / 添加），全局唯一 --mh-tab 48 底部导航项（独立档，不参与按钮体系） */ --mh-xs:28px; --mh-sm:32px; --mh:36px; --mh-block:44px; --mh-fab:48px; --mh-tab:48px; --mh-input:40px; /* 字体 */ --font:"Inter","Segoe UI Variable Display","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif; --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace; /* ===== 字号阶梯（移动端，双端共用令牌） ===== 改造前 inline 里散着 8.5 / 9 / 9.5 / 10 / 10.5 / 11 / 11.5 / 12 / 12.5 / 13 / 13.5 / 14 / 14.5 / 15 / 16 / 17 / 18 / 20 / 22 / 34 / 38 共 21 档， 相邻两档只差 0.5px —— 看起来「每块都不一样」，读完一圈眼睛一直在重新对焦。 现在收成 6 档正文 + 3 档展示，正文最小 10px（4.7 寸屏上仍是 2x 渲染）。 */ --fz-cap:10px; /* 单位、计数、角标：跟着数字走，不承担阅读 */ --fz-meta:11px; /* 元信息、说明、hint：一句话带过 */ --fz-body:12px; /* 正文、按钮、选项说明 */ --fz-title:13px; /* 行标题、区块标题、输入值 */ --fz-h2:15px; /* 卡片标题、步进器数值、弹层标题 */ --fz-page:17px; /* 页面标题 */ --fz-xl:26px; /* 登录页大标题（展示型，不在正文阶梯内） */ --fz-lead:20px; /* 步进器按钮、大号操作符 */ --fz-kpi:22px; /* 指标大数 */ --fz-display:34px;/* 步进器数值、单值大数 */ --fz-hero:38px; /* Hero 数 */ /* 字重只有四档：650/680/550/520 在系统字体上会被凑成相邻档，看不出差别 */ --fw-r:400; --fw-m:500; --fw-sb:600; --fw-b:700; /* ===== 字号阶梯（桌面端） ===== 桌面是密集信息型界面，正文比移动端再小一档。改造前 inline 里散着 9.5 / 10 / 10.5 / 11 / 11.5 / 12 / 12.5 / 13 / 13.5 / 14 / 14.5 / 15 / 16 / 17 / 19 / 20 / 21 / 30 共 18 档，其中 7 组是「只差 0.5px」的孪生兄弟： 10.5 和 11、11.5 和 12、12.5 和 13、13.5 和 14 —— 肉眼看不出差别， 但会让每一块各自看起来像另一套设计。现在收成 7 档正文 + 2 档展示。 */ --fz-d-cap:10px; /* 角标、单位、kbd、微型标签 */ --fz-d-meta:11px; /* 表头、说明、时间、次级信息 */ --fz-d-body:12px; /* 表格内容、表单值、正文 */ --fz-d-title:13px; /* 行标题、按钮、导航项 */ --fz-d-head:14px; /* 卡片标题、区块标题 */ --fz-d-h2:15px; /* 卡片内大字、弹层标题 */ --fz-d-num:17px; /* 中等统计数字 */ --fz-d-h1:21px; /* 页面主标题、弹层大标题 */ --fz-d-hero:30px; /* KPI 首屏大数 */ /* ===== 行高（双端共用） ===== 改造前散着 1 / 1.2 / 1.4 / 1.45 / 1.5 / 1.55 / 1.6 / 1.65 / 1.7 / 1.72 / 1.75 / 1.95 / 15px / 16px 共 14 档。1.6 和 1.65、1.7 和 1.72 这种差距 在 12px 字号上只有 0.6px，看不出，却让相邻两段的行距看起来不齐。 收成 4 档，按「这段文字要读多快」选，而不是按感觉微调。 */ --lh-tight:1.2; /* 单行：标题、按钮、数字、徽章 */ --lh-snug:1.45; /* 短行：列表项标题、表单标签、卡片标题 */ --lh-base:1.6; /* 正文：表格内容、表单值、一句话说明 */ --lh-loose:1.75; /* 长段：段落、帮助文字、多行提示 */ /* ===== 字距 ===== 改造前 7 档（-.03/-.02/-.01/0/.01/.02/.07/.08/.1em）。 负数只给数字用（大字号数字视觉上会显散），正数只给全大写小标签用。 */ --ls-tight:-.02em; /* 数字、大字号标题 */ --ls-normal:0; /* 默认 */ --ls-wide:.06em; /* 全大写英文小标签、kbd */ /* ===== 深色面文字（侧栏 / 深色卡片） ===== 以前同一块深色底上并排住着 #E6EAF1 / #D7DCE5 / #E3E8F0 三种「主文字」， #98A2B3 / #8B94A6 / #9AA4B4 三种「次要文字」，肉眼分不出却各不相同。 */ --side-fg:#E6EAF1; /* 主文字 */ --side-fg-2:#98A2B3; /* 次文字：描述、状态、占位符 */ --side-fg-3:#7B8496; /* 弱文字：脚注 */ --side-fg-4:#39404E; /* 装饰：分隔点、极暗图形 */ --grad-panel:linear-gradient(158deg,#1B1F29 0%,#101218 58%,#15181F 100%); --side-fill:rgba(255,255,255,.08); } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{ font-family:var(--font); background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-feature-settings:"cv11","ss01"; text-rendering:optimizeLegibility; } button,input,select,textarea{font-family:inherit;color:inherit} /* 原生控件（下拉选项、勾选框）不继承 color，浏览器默认给纯黑， 会和整套文字色脱节；这里显式接回令牌 */ option,optgroup{color:var(--text);background:var(--surface)} /* ============================================================ 提示语里的重点 ------------------------------------------------------------ 两种提示语，不能同一套处理： 1) 灰字提示（.hint / .set-tip / 标题副说明 / 字段说明） 本体是 --text-3 弱灰，重点用 加深到 --text + 半粗。 **不上色**：这类文字满屏都是，一上色整页就花了。 2) 顶部信息条（.pool-tip / .post-tip） 自带品牌橙 / 信息蓝的浅底，正文本来就用同族深色 （--brand-ink、--text-2）， 再上同族色等于没有强调。 这里是**唯一**允许用颜色说话的提示：.em 上红字。 一条信息条最多标一处；都标等于都没标。 */ .hint b,.hint strong, .set-tip b,.set-tip strong, .set-title span b,.set-title span strong{ color:var(--text);font-weight:var(--fw-sb);font-variant-numeric:tabular-nums; } /* 紧贴标题的副说明：和标题同一行，只加深一档，不能比标题还抢眼 */ .set-label span b,.set-label span strong{color:var(--text-2);font-weight:var(--fw-m)} .pool-tip p b,.post-tip b{font-weight:var(--fw-sb)} .pool-tip p .em,.post-tip .em{color:var(--tip-em);font-weight:var(--fw-sb)} input,textarea,select{-webkit-appearance:none;appearance:none} a{color:inherit;text-decoration:none} ul,ol{list-style:none} img{max-width:100%;display:block} /* 通用工具 */ .num{font-variant-numeric:tabular-nums;letter-spacing:-.02em} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} .muted{color:var(--text-3)} .grow{flex:1;min-width:0} .hidden{display:none !important} /* 统一图标：所有 必须继承描边 */ svg.i{ width:18px;height:18px;flex:none; fill:none;stroke:currentColor; stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round; } ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:#D9DEE6;border-radius:10px;border:3px solid transparent;background-clip:padding-box} ::-webkit-scrollbar-thumb:hover{background:#C3CAD5;background-clip:padding-box} /* ===== 图标色调工具类（柔和底 + 深色描边，双端通用） ===== */ .t-brand {--tint-bg:var(--tint-brand-bg); --tint-fg:var(--tint-brand-fg)} .t-blue {--tint-bg:var(--tint-blue-bg); --tint-fg:var(--tint-blue-fg)} .t-violet{--tint-bg:var(--tint-violet-bg); --tint-fg:var(--tint-violet-fg)} .t-green {--tint-bg:var(--tint-green-bg); --tint-fg:var(--tint-green-fg)} .t-amber {--tint-bg:var(--tint-amber-bg); --tint-fg:var(--tint-amber-fg)} .t-red {--tint-bg:var(--tint-red-bg); --tint-fg:var(--tint-red-fg)} .t-slate {--tint-bg:var(--tint-slate-bg); --tint-fg:var(--tint-slate-fg)}