/* ========================================================================== 维吾尔文智能校对系统 · Web 端样式 设计要点： · 全站 RTL（维吾尔文从右向左），但控件标签保留中文副标便于操作 · 维文字体统一使用随应用分发的 UKIJCJK（见下方 @font-face）， 行高放宽（阿拉伯字母有上下加符） · 差错标记沿用 develop.md 4.1.1 的红/橙/蓝三级严重度配色 ========================================================================== */ /* ========================================================================== 维文正文字体 —— 全站统一 -------------------------------------------------------------------------- 字体文件随应用一起分发（static/fonts/UKIJCJK.woff2），而不是走 `http(s)://httaxi.silubaba.com.cn/fonts/...` 外链。三个理由： ① 不依赖外部域名的可用性与证书；站点不可达时界面不会退化成方框 ② 省一次跨域 DNS + TLS + 1.2MB 传输（字体是首屏渲染的阻塞资源） ③ 与 app.css 同源同版本，`no-cache` 策略下可一起失效、一起更新 `font-display: swap`：字体未就绪时先用系统字体渲染，下载完再替换。 若用 block，1.2MB 字体会让首屏出现最长 3s 的空白文字（FOIT）， 对正文是维文的应用来说体验明显更差。 `unicode-range` 限定在阿拉伯字母区段：中文副标、数字、英文等 交由 `--ui` 的系统字体渲染，避免用维文字体去显示它并不擅长的字形。 ========================================================================== */ @font-face { font-family: "UKIJCJK"; /* 【同时声明 woff2 与 ttf，让浏览器自选】 两行顺序有意义：浏览器取**第一个它能解码的**，不是第一个下载成功的。 因此体积小、压缩率高的 woff2 放前面，ttf 作为兜底 （老浏览器、或 woff2 文件没能随包分发时仍能工作）。 · woff2 —— 优先。同字体通常比 ttf 小 30–50% · ttf —— 兜底。你手上拿到的原始格式就是它，免转换也能跑 两个文件都缺失时，font-display: swap 会让文本用系统字体先渲染， 界面不会出现方框或长时间空白。 */ src: url("/static/fonts/UKIJCJK.woff2") format("woff2"), url("/static/fonts/UKIJCJK.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; /* 【这里刻意**不写** unicode-range】 原设计用 `unicode-range: U+0600-06FF, …` 把本字体限定在阿拉伯字母 区段，中文/英文交给 --ui 系统字体，理由是"避免用维文字体渲染它 不擅长的字形"。 但本字体命名为 UKIJCJK（CJK = 中日韩），**含汉字字形**，且需求是 "全系统统一使用 UKIJCJK"。若继续保留 unicode-range，中文区段 （U+4E00-9FFF）会被排除在外，中文仍走系统字体 —— 全站字体不统一。 去掉后本字体会作用于**所有字符**。若某字符该字体确实没有， 浏览器仍按 font-family 链回退到 --ui，不会出现方框。 */ } /* ========================================================================== ① 设计令牌（Design Tokens） -------------------------------------------------------------------------- 令牌层是这次升级的地基：颜色、间距、圆角、阴影、层级、动效全部收敛到这里。 之前这些值散落在 2300 行 CSS 里以字面量形式出现（同一个灰有好几种写法、 同一个阴影在三个文件里各写一遍），改一处永远改不干净。 【为什么暗色用 `[data-theme]` 而不是媒体查询】 三种状态必须同时成立：跟随系统 / 强制浅色 / 强制深色。 只有媒体查询做不到"强制浅色"（系统是深色时仍要能回到浅色）。 因此规则是**属性驱动**，`data-theme` 由 JS 写在 上： 强制深色 强制浅色 （无属性） 跟随系统 —— 由下方 @media 兜底 JS 在首屏之前就写入该属性，避免深色用户看到一闪的白屏（FOUC）。 【RTL 约定】下列语义变量全部保持 RTL 语义不变： --bg/--panel/--text/--border/--primary 含义与改造前一致，只是取值变化。 布局相关的逻辑属性（inline-start 等）一律不碰。 ========================================================================== */ :root { color-scheme: light; /* ---- 字体 ---- */ /* 【全站统一使用 UKIJCJK】 原先 --ui 的第一顺位是系统无衬线字体（Segoe UI / PingFang SC …）， UKIJCJK 只用在 --mono-uy（维文）上 —— 结果是中文界面走中文字体、 维文走 UKIJCJK，同一页面出现两套字形。 按"全系统使用 UKIJCJK"的要求，把它提到 --ui 首位：中文、维文、 数字、英文全部优先用同一套字形，版面观感统一。 后面保留系统字体兜底，作用有二： ① 该字体缺某个字形时（生僻字、特殊符号）能继续渲染，不出方框； ② 字体文件未能随包分发时，界面退化为系统字体，仍可用。 注意 UKIJCJK 之后先放维文字体再放中文字体：若字体缺维文字形， 优先由同为阿拉伯字母设计的 UKIJ Tuz Tom 接住，字形风格更接近。 */ --ui-ukij: "UKIJCJK", "UKIJ Tuz Tom", "Alkatip Basma Tom", "Noto Naskh Arabic", "Scheherazade New", "Amiri", "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif; --mono-uy: "UKIJCJK", "UKIJ Tuz Tom", "Alkatip Basma Tom", "Noto Naskh Arabic", "Scheherazade New", "Amiri", "Times New Roman", serif; --ui: var(--ui-ukij); /* 代码/命令/路径用等宽。 【为什么 UKIJCJK 不放在等宽链首位】 等宽字体的价值在于**字符宽度一致**（代码缩进对齐、表格里的 版本号/路径列），而 UKIJCJK 是比例字体，放首位会让这些内容 参差不齐 —— 比"字形不统一"更影响可读性。 因此等宽链保持拉丁等宽优先；维文/中文在代码块里极少出现， 真出现时也会落到后面的 UKIJCJK（放在等宽字体之后作为兜底）， 不会退化成方框。 */ --mono: "SFMono-Regular", "JetBrains Mono", Consolas, "Courier New", "UKIJCJK", monospace; /* ---- 中性色阶（浅色）---- 由"表面"到"文字"共 8 级。此前代码里 #f4f6f9 / var(--n-1) / var(--n-1) / var(--n-2) 混用，肉眼几乎分不出但让界面显得"脏"；现在统一走阶梯。 【本段曾有一处严重缺陷（本轮修复）】 `--n-1: var(--n-1)` / `--primary: var(--primary)` 这类**自引用**在 CSS 中是无效的：变量不能引用自己，浏览器会判定该变量为 "guaranteed-invalid"，于是使用它的属性整条失效。 后果是**只有浅色模式坏掉**（深色段与 @media 段都有明确字面值）： 主色按钮、成功状态、页面底色全部无颜色，界面呈灰白"褪色"状。 实测：浅色下 `--primary` / `--ok` / `--accent` / `--n-1` 全为空值。 这里全部改为**字面值**，彻底消除自引用。 【防回归】自测脚本已加断言：:root 内不允许出现 var(--x) 引用自身。 */ --n-0: #ffffff; /* 卡片/面板 */ --n-1: #f5f7fb; /* 页面底色（带一点蓝调，让白卡片"浮"起来） */ --n-2: #eef2f8; /* 次级填充、悬停 */ --n-3: #dfe5ef; /* 分隔线 */ --n-4: #c3ccdb; /* 强分隔线、控件描边 */ --n-5: #7b8798; /* 占位符、禁用文字（原 #94a0b3 在白底上仅 2.65:1，达不到 3:1 底线） */ --n-6: #5f6b7f; /* 次要文字 */ --n-7: #3a4457; /* 次级正文 */ --n-8: #171d2b; /* 正文 */ /* ---- 语义色（浅色）---- 【为什么额外定义 --*-rgb 通道变量】 界面里有大量半透明语义色（`rgba(229,57,53,.13)` 这类）， 此前是**写死的字面色**，深色模式下完全不变 —— 于是深色底上出现 一块刺眼的亮红，且这些色与 --error 的实际取值并不同源， 改一处主题色要满文件搜三遍还未必找全。 改成通道变量后，半透明色统一写成 rgba(var(--error-rgb), .13) 主题切换时自动跟随，且**与主色永远同源**，不会再漂移。 */ --primary-rgb: 29, 78, 216; --error-rgb: 200, 30, 30; --warning-rgb: 180, 83, 9; --info-rgb: 11, 107, 158; --ok-rgb: 4, 108, 78; --primary: #1d4ed8; /* 主色：加深至在 --primary-soft 上也达标 */ --primary-dark: #1e40af; --primary-soft: #e6efff; --primary-line: #b9d2fb; --on-primary: #ffffff; --error: #c81e1e; /* 原 #dc2626 在 --error-soft 上仅 3.95:1，加深至达标 */ --error-dark: #991b1b; --error-soft: #fee2e2; --warning: #b45309; /* 原 #d97706 在白底上 4.2:1，加深 */ --warning-dark: #92400e; --warning-soft: #fef3c7; --info: #0b6b9e; /* 原 #0e7dbe 在 --info-soft 上 3.90:1，加深 */ --info-soft: #e0f2fe; --ok: #046c4e; /* 原 #059669 在白底仅 3.77:1、在 --ok-soft 上 3.32:1 */ --ok-dark: #03543b; --ok-soft: #d1fae5; --accent: #7c3aed; /* 强调紫：用于"新增/精选"类弱强调 */ /* ---- 功能模块专属色（彩色语义化的核心）---- 【为什么每个模块要有自己的色】 七个标签页此前共用同一个主色，切换时只有内容变、色彩不变， 用户在深色/密集界面里很难靠余光确认"我现在在哪个模块"。 给每个模块一个**色相独立、饱和度一致**的专属色后， 标签选中态、模块标题、卡片描边、图标底色全部同色系呼应， 既保留了专业工具的克制（不花哨），又一眼可辨。 取值统一取 600–700 档饱和度，保证白底上对比度 ≥ 4.5:1。 */ --mod-check-rgb: 37, 99, 235; /* 校对 · 蓝 */ --mod-dict-rgb: 109, 40, 217; /* 词典 · 紫 */ --mod-build-rgb: 15, 118, 110; /* 建库 · 青 */ --mod-ocr-rgb: 194, 65, 12; /* OCR · 橙 */ --mod-review-rgb: 157, 23, 100; /* 审核 · 洋红 */ --mod-status-rgb: 4, 108, 78; /* 状态 · 绿 */ --mod-admin-rgb: 51, 65, 85; /* 管理 · 石板灰（克制的运维色） */ /* ---- 语义别名（供组件层引用，避免直接依赖 --n-* 数字）---- */ --bg: var(--n-1); --panel: var(--n-0); --panel-2: var(--n-2); --panel-3: var(--n-3); --border: var(--n-3); --border-strong: var(--n-4); --text: var(--n-8); --text-dim: var(--n-6); --text-faint: var(--n-5); /* ---- 阴影用的通道（深色下需整体加深，故也走变量）---- */ --shadow-rgb: 20, 30, 50; --shadow-alpha-1: .06; --shadow-alpha-2: .08; --shadow-alpha-3: .14; /* ---- 当前模块的主题色 ---- 由 JS 在每个视图切换时写入 `--mod-rgb`（如 "234, 88, 12"）， 所有模块化组件只引用 `--mod-rgb` / `--mod`， 因此新增模块不必再改 CSS —— 后台数据驱动。 */ --mod-rgb: var(--mod-check-rgb); --mod: rgb(var(--mod-rgb)); /* ---- 圆角 ---- */ --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-pill: 999px; /* ---- 阴影（两级，浅色）---- */ --shadow-sm: 0 1px 2px rgba(var(--shadow-rgb), var(--shadow-alpha-1)); --shadow: 0 1px 3px rgba(var(--shadow-rgb), var(--shadow-alpha-2)), 0 4px 16px rgba(var(--shadow-rgb), var(--shadow-alpha-1)); --shadow-lg: 0 8px 32px rgba(var(--shadow-rgb), var(--shadow-alpha-3)); /* 焦点环跟随主色，不再是写死的旧蓝 rgba(21,101,192) —— 换主色时 焦点态会一起变，避免"按钮蓝、焦点圈是另一种蓝"的错配。 */ --shadow-focus: 0 0 0 3px rgba(var(--primary-rgb), .28); /* ---- 间距阶梯（8 的倍数，含 4 的半档）---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; /* ---- 层级（此前 50/60/200/900/950 散落各处，无统一语义）---- */ --z-sticky: 50; --z-drop: 60; --z-overlay: 200; --z-modal: 900; --z-panel: 950; --z-toast: 1200; /* ---- 动效 ---- */ --dur-fast: .12s; --dur: .18s; --ease: cubic-bezier(.4, 0, .2, 1); } /* ========================================================================== ② 深色模式 -------------------------------------------------------------------------- 配色思路：不用纯黑（#000）做底 —— 纯黑与白色正文对比过大，长文本阅读 时会出现光晕（halation）。改用带蓝调的深灰 #12161f，正文降为 #e4e8f0。 主色在深色下**必须提亮**：原来的 var(--primary) 在白底上对比度 4.9:1 达标， 但在 #12161f 上只有 2.1:1 —— 完全不可读。故深色态换成 #6fb3ff 系列。 所有"软色"（--*-soft）不是把浅色值调暗，而是重新给一个**低饱和深色底**， 这样 badge / 提示条在深色下才不会变成刺眼的荧光块。 ========================================================================== */ [data-theme="dark"] { color-scheme: dark; --n-0: #1a1f2a; /* 卡片 */ --n-1: #12161f; /* 页面底 */ --n-2: #232a36; /* 次级填充 */ --n-3: #2c3442; /* 分隔线 */ --n-4: #3b4553; /* 强分隔线 */ --n-5: #6b7686; /* 占位符 */ --n-6: #98a3b3; /* 次要文字 */ --n-7: #c2cad6; /* 次级正文 */ --n-8: #e4e8f0; /* 正文 */ --primary: #6ea8fe; --primary-dark: #9cc7ff; --primary-soft: #17253c; --primary-line: #2c4a72; --on-primary: #0b1220; --error: #ff8a8a; --error-dark: #ffb3b3; --error-soft: #3a1e1e; --warning: #fbbf24; --warning-dark: #fcd34d; --warning-soft: #3a2c12; --info: #56c4f0; --info-soft: #14293a; --ok: #4ade80; --ok-dark: #86efac; --ok-soft: #14301f; --accent: #a78bfa; /* 【半透明通道在深色下必须整体调亮】 浅色用的 `--primary-rgb: 37,99,235` 放在 #12161f 上几乎不可见， 而大量组件是 `rgba(var(--primary-rgb), .14)` 这种"浅色底"。 深色下把通道换成高亮值，同一段 CSS 就能得到正确的发光效果， 不必给每个组件写一套深色特例。 */ --primary-rgb: 110, 168, 254; --error-rgb: 255, 138, 138; --warning-rgb: 251, 191, 36; --info-rgb: 86, 196, 240; --ok-rgb: 74, 222, 128; /* 模块色同步提亮，保证深色底上色相可辨 */ --mod-check-rgb: 96, 165, 250; --mod-dict-rgb: 167, 139, 250; --mod-build-rgb: 45, 212, 191; --mod-ocr-rgb: 251, 146, 60; --mod-review-rgb: 244, 114, 182; --mod-status-rgb: 74, 222, 128; --mod-admin-rgb: 148, 163, 184; --shadow-rgb: 0, 0, 0; --shadow-alpha-1: .4; --shadow-alpha-2: .45; --shadow-alpha-3: .55; --shadow-sm: 0 1px 2px rgba(var(--shadow-rgb), var(--shadow-alpha-1)); --shadow: 0 1px 3px rgba(var(--shadow-rgb), var(--shadow-alpha-2)), 0 6px 20px rgba(var(--shadow-rgb), var(--shadow-alpha-1)); --shadow-lg: 0 10px 40px rgba(var(--shadow-rgb), var(--shadow-alpha-3)); --shadow-focus: 0 0 0 3px rgba(var(--primary-rgb), .4); } /* 跟随系统：仅在用户**没有**手动指定主题时生效（无 data-theme 属性） */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --n-0: #1a1f2a; --n-1: #12161f; --n-2: #232a36; --n-3: #2c3442; --n-4: #3b4553; --n-5: #6b7686; --n-6: #98a3b3; --n-7: #c2cad6; --n-8: #e4e8f0; --primary: #6ea8fe; --primary-dark: #9cc7ff; --primary-soft: #17253c; --primary-line: #2c4a72; --on-primary: #0b1220; --error: #ff8a8a; --error-dark: #ffb3b3; --error-soft: #3a1e1e; --warning: #fbbf24; --warning-dark: #fcd34d; --warning-soft: #3a2c12; --info: #56c4f0; --info-soft: #14293a; --ok: #4ade80; --ok-dark: #86efac; --ok-soft: #14301f; --accent: #a78bfa; --primary-rgb: 110, 168, 254; --error-rgb: 255, 138, 138; --warning-rgb: 251, 191, 36; --info-rgb: 86, 196, 240; --ok-rgb: 74, 222, 128; --mod-check-rgb: 96, 165, 250; --mod-dict-rgb: 167, 139, 250; --mod-build-rgb: 45, 212, 191; --mod-ocr-rgb: 251, 146, 60; --mod-review-rgb: 244, 114, 182; --mod-status-rgb: 74, 222, 128; --mod-admin-rgb: 148, 163, 184; --shadow-rgb: 0, 0, 0; --shadow-alpha-1: .4; --shadow-alpha-2: .45; --shadow-alpha-3: .55; --shadow-sm: 0 1px 2px rgba(var(--shadow-rgb), var(--shadow-alpha-1)); --shadow: 0 1px 3px rgba(var(--shadow-rgb), var(--shadow-alpha-2)), 0 6px 20px rgba(var(--shadow-rgb), var(--shadow-alpha-1)); --shadow-lg: 0 10px 40px rgba(var(--shadow-rgb), var(--shadow-alpha-3)); --shadow-focus: 0 0 0 3px rgba(var(--primary-rgb), .4); } } * { box-sizing: border-box; } /* ========================================================================== ③ 可访问性基线 -------------------------------------------------------------------------- · prefers-reduced-motion：前庭功能障碍用户会被位移/缩放的动效引发 眩晕。这是**可访问性要求**，不是可选项。用 !important 是必要的 —— 动效散落在几十条 transition 里，逐条改不可能收敛。 · :focus-visible：键盘导航必须有可见焦点环；鼠标点击则不显示 （避免每次点按钮都留一圈蓝边）。 ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); } /* 输入类控件用光晕而非描边环：描边环会与控件自身边框叠成双线，显脏 */ input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-color: var(--primary); } /* 屏幕阅读器专用文字（视觉隐藏但可朗读） */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* 键盘用户跳过导航直达主内容（Tab 第一下出现） */ .skip-link { position: absolute; inset-inline-start: 50%; top: -100px; transform: translateX(50%); z-index: calc(var(--z-toast) + 1); background: var(--primary); color: var(--on-primary); padding: 10px 20px; border-radius: 0 0 var(--radius) var(--radius); font-size: 14px; font-weight: 600; text-decoration: none; transition: top var(--dur) var(--ease); } .skip-link:focus { top: 0; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--ui); font-size: 15px; } /* ---------------------------------------------------------------- 顶栏 */ .topbar { display: flex; align-items: center; gap: 18px; padding: 10px 20px; background: var(--panel); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: var(--z-sticky); box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .04); /* 【为什么允许换行】顶栏内容（品牌 + 标签 + 引擎徽章 + 用户徽章） 自然宽度约 900px。窄窗口下若禁止换行，尾部元素会被挤出视口 （实测 689px 宽时用户徽章坐标溢出 —— 点不到，表现为 "登录后找不到退出按钮"）。允许换行保证徽章任何宽度下都可达。 */ flex-wrap: wrap; row-gap: 8px; /* 【RTL 对齐说明 — 这个顶栏被反复改坏过四次，务必读完再动】 本页 dir=rtl，flex 主轴起点在**右边**，DOM 顺序直接映射为 物理**右 → 左**。当前 DOM 是 brand → tabs → engine-badge → user-menu， 故天然排成：品牌在物理最右、身份徽章在物理最左 —— 这正是 RTL 页面的两端对齐效果。**这里什么都不用做。** ⚠ 真凶从来不是"顺序"，而是下面这条**亚像素换行**： .tabs 若用 flex-grow:1，单行解算会把它撑到 783.09px，使整行 总额达 1400.09px，仅比可用 1400px 超出 **0.09px** → 触发换行， 顶栏诡异地变成两行。已改为 `flex: 0 1 auto`（见 .tabs 注释）。 四次失败记录（目标本身就设错了，外加三次错误手法）： ✗ 目标错误：想把 .user-menu 推到"物理右端" —— 但物理右端 已被 .brand 占据（RTL 下 DOM 首元素），两者不可能同时贴右； 这是**需求冲突**，不是 CSS bug。 ✗ 手法① margin-inline-start: auto → rtl 下 inline-start 是**右**侧， 徽章被顶到品牌区上（同侧重叠） ✗ 手法② margin-inline-end: auto → 方向虽对，但 flex-wrap 下 auto margin 会吸走整行剩余空间，让该元素**独占一行** ✗ 手法③ order: 4 → order 是**逻辑**排序，rtl 下指向物理最左， 与意图相反（实测坐标与修改前逐位相同） 教训：RTL 下不要用 order / auto margin 表达"物理右端"； 在该语言环境下 DOM 顺序天然就是正确的物理顺序。 */ } .brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .logo { width: 38px; height: 38px; display: grid; place-items: center; background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, #ffffff)); color: var(--on-primary); border-radius: 9px; font-family: var(--mono-uy); font-size: 24px; line-height: 1; padding-bottom: 4px; } .brand-text { display: flex; flex-direction: column; line-height: 1.25; } .brand-text strong { font-size: 15px; font-family: var(--mono-uy); } .brand-text small { color: var(--text-dim); font-size: 11.5px; } /* 标签页 —— 顶栏里**唯一**的弹性元素 */ /* 让它吸收所有空余空间，brand/engine-badge/user-menu 便自然分贴两端。 不要给它 order，也不要给其他子项加 order/auto margin： 本页 dir=rtl，DOM 顺序**已经**就是正确的物理顺序（右→左）， order 是逻辑序，加了反而会把元素映射到相反的一端。 （这一点被反复改坏过三次，详见 .topbar / .user-menu 的注释。） ⚠ flex-grow 用 0 而非 1 —— 这是个**实测出来的亚像素坑**： 用 flex-grow:1 时，单行解算会把 .tabs 撑到 783.09px， 导致整行总额 = 267.59+783.09+150.77+136.55+54 = **1400.09px**， 比可用宽度 1400px 超出 **0.09px** → 触发 flex-wrap 换行！ 表现为"1440 宽下顶栏莫名其妙变成两行"，而 0.09px 是谁都看不见的。 改成 `flex: 0 1 auto`（grow=0，只允许收缩）后，.tabs 保持其 max-content 559.2px，总额 1208.11px，留出 231.89px 余量， 在 1208px 以上都不会换行。 同理 overflow-x:auto 也不该在宽屏下出现（559.2 < 可用空间）。 */ .tabs { display: flex; gap: 4px; margin-inline-start: 8px; flex: 0 1 auto; min-width: 0; flex-wrap: wrap; /* 极窄时标签区自身横向滚动，而不是把徽章挤出去 */ overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { flex: 0 0 auto; } .tab { display: flex; flex-direction: column; align-items: center; gap: 1px; border: 1px solid transparent; background: transparent; color: var(--text-dim); padding: 6px 14px; border-radius: var(--radius-sm); cursor: pointer; font-family: var(--mono-uy); font-size: 14px; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .tab span { font-family: var(--ui); font-size: 10.5px; color: var(--text-dim); opacity: .85; } .tab:hover { background: var(--n-2); color: var(--text); } /* ========================================================================== 标签页 · 彩色模块化 -------------------------------------------------------------------------- 【设计意图】 七个标签此前**共用同一个主色**：选中态都是同一种蓝。在密集界面里 用户需要先"读"标题才能确认自己在哪个模块，切换标签时视觉上只有 一小块底色在动。这里让每个标签带上自己模块的色相 —— 一个色相独立、饱和度一致的专属色，选中时： · 底色 = 该模块色的极浅底（6% 不透明度） · 描边 = 该模块色的浅描边（32%） · 文字 = 该模块色的深色版 切换模块时色彩随之变化，余光即可辨认当前位置。 【为什么用 --mod-rgb 通道 + 三个透明度，而不是给每个标签写一条规则】 写七条 `.tab[data-view="dict"] { … }` 意味着**每加一个模块就要改 CSS**， 且七份近乎相同的声明会各自漂移（改了一处忘了另六处）。 这里改为：每个标签只需给出**自己的通道值**（一行 data 属性已在 HTML 里），视觉细节由下面这一条规则统一决定。 新增模块时只加一行 `--mod-xxx-rgb`，视觉自动到位。 【为什么用 color-mix 而不是再定义一堆 --mod-x-soft】 软色（浅底）本身是"模块色 + 透明度"的直接函数。让它由公式派生， 就不可能出现"某模块的软色和主色不同源"的错配。 color-mix 在 Chrome 111+ / Safari 16.2+ / Firefox 113+ 均可用， 本项目前端要求现代浏览器（已使用 :has、color-mix 等特性）。 ========================================================================== */ .tab.active { background: rgba(var(--tab-rgb), .10); border-color: rgba(var(--tab-rgb), .32); color: color-mix(in srgb, rgb(var(--tab-rgb)) 78%, var(--text)); } .tab.active span { color: color-mix(in srgb, rgb(var(--tab-rgb)) 88%, var(--text-dim)); } /* 选中标签底部再加一条 2px 色条：在 RTL 密集排版里，色条比底色 更容易被扫视到（底色变化只有几个百分点的明度差）。 */ .tab.active::after { content: ""; position: absolute; inset-inline: 14px; bottom: 1px; height: 2px; border-radius: 2px; background: rgb(var(--tab-rgb)); } .tab { position: relative; } /* 每个标签的模块色。用属性选择器而不是给每个标签加内联 style： 内联 style 会与 CSP 的 style-src 策略冲突，且不易被主题覆盖。 */ .tab[data-view="check"] { --tab-rgb: var(--mod-check-rgb); } .tab[data-view="dict"] { --tab-rgb: var(--mod-dict-rgb); } .tab[data-view="build"] { --tab-rgb: var(--mod-build-rgb); } .tab[data-view="ocr"] { --tab-rgb: var(--mod-ocr-rgb); } .tab[data-view="review"] { --tab-rgb: var(--mod-review-rgb); } .tab[data-view="status"] { --tab-rgb: var(--mod-status-rgb); } .tab[data-view="admin"] { --tab-rgb: var(--mod-admin-rgb); } /* 悬停时也带一点模块色暗示（仅未选中态） */ .tab:not(.active):hover { background: rgba(var(--tab-rgb, var(--primary-rgb)), .07); } .engine-badge { /* 不收缩项；**不要加 order、也不要加任何 auto margin**： order 在 rtl 下表达的是逻辑序（会映射到物理左端）， auto margin 在 flex-wrap 下会让本元素独占一行。 位置完全由 .tabs 的 flex:1 决定。 */ flex: 0 0 auto; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); background: var(--n-2); padding: 5px 11px; border-radius: 20px; white-space: nowrap; } .engine-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--n-5); flex: none; } .engine-badge.ready .dot { background: var(--ok); box-shadow: 0 0 0 3px rgba(var(--ok-rgb),.15); } .engine-badge.busy .dot { background: var(--warning); } .engine-badge.fail .dot { background: var(--error); } /* ---------------------------------------------------------------- 布局 */ .wrap { max-width: 1500px; margin: 0 auto; padding: 16px 20px 40px; } .view { display: none; } .view.active { display: block; } .toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .spacer { flex: 1; } /* =========================================================================== `hidden` 属性豁免（务必保留） =========================================================================== 【问题】浏览器 UA 样式表里的 `[hidden] { display: none }` 优先级**极低**， 任何作者样式表里的 `display` 声明都能盖掉它。所以凡是下面这种写法：