/* board.css — 「📦 订单看板」(exceptionaltoolai.com) 亮色皮肤（白底），默认启用。 * * 契约：docs/ORDERBOARD_DESIGN.md §11。 * · 本文件【只】在看板站点加载（board.html），主平台的 style.css 一个字节都不改； * · 全部规则都挂在 `html.board-light` 下 —— 去掉 上的这个 class 就原样退回 style.css 的深色主题； * · 加载顺序 = style.css → board.css，且选择器带 `html.board-light` 前缀，特异性天然高于被覆盖的规则； * · 遵守既有的页面禁用字规则；不引用任何外部资源（无 @import、无外链字体/图片），零新增网络请求。 * * 结构： * §1 主题变量（15 个）+ 页面底色 * §2 style.css 里【非变量】的硬编码深色逐条纠正（按 style.css 行号顺序） * §3 看板专用板块：顶栏 / 口令页 / 进度条 / 子表集 / 汇总 / 周×维度 / 横幅 * §4 亮色皮肤切换按钮 */ /* ========================= §1 主题变量 + 页面底色 ========================= */ /* 15 个变量全部重定义（--bg/--bg2/--panel/--panel2/--line/--line2/--txt/--mut/--dim/ --acc/--acc2/--warn/--bad/--good/--sh）。--r/--r2 是圆角，与明暗无关，沿用 style.css。 对比度（WCAG，对 --panel #fff / 页面底 #f6f8fb 两种底色都成立）： 正文 --txt 16.2 : 1 次要 --mut 5.6 : 1 三级 --dim 5.4 : 1（压在 --bg2 上仍 4.8 : 1） --acc 4.7 --acc2 5.3 --warn 4.7 --bad 4.9 --good 5.0 注：--dim/--acc2/--warn/--bad/--good 比建议值再压暗了一档 —— 建议值 (#8b96ad/#12907c/#c98a0f/#d6404d/#1f9a5c) 在白底上只有 2.9~4.5:1，达不到「次要文字 ≥ 4.5:1」。 数值是无头 Chromium 逐元素实测的（tmp/theme_shots/audit.js：真实 CSSOM 算前景/背景合成后的比值）。 */ html.board-light{ --bg:#f6f8fb; --bg2:#eef2f7; --panel:#ffffff; --panel2:#f3f6fa; --line:#dfe5ee; --line2:#c8d2e0; --txt:#182033; --mut:#5b6880; --dim:#5f6a82; --acc:#2f6fe4; --acc2:#0e7a68; --warn:#9a6a0a; --bad:#d13440; --good:#157f49; --sh:0 6px 24px rgba(16,24,40,.08); color-scheme:light; } /* style.css 的 body 是深色径向渐变（#1b2540 → var(--bg)）：整块换成极浅灰纯色底， 白色卡片(--panel)浮在上面才有边界感；不用渐变，打印/截图/低色深屏幕都不会出现色带。 */ html.board-light body{background:var(--bg);color:var(--txt)} /* ========================= §2 style.css 硬编码深色逐条纠正 ========================= */ /* L15 滚动条滑块 #2c3650（深蓝灰）→ 浅灰，浅底上才看得出轨道与滑块的区别 */ html.board-light ::-webkit-scrollbar-thumb{background:#c3ccdb} html.board-light ::-webkit-scrollbar-thumb:hover{background:#aab6c9} /* L19 顶栏 rgba(16,21,34,.85)（近黑毛玻璃）→ 半透明白毛玻璃 + 细阴影分隔 */ html.board-light #topbar{background:rgba(255,255,255,.88);border-bottom:1px solid var(--line); box-shadow:0 1px 3px rgba(16,24,40,.05)} /* L29 #tabs button.active 的深蓝渐变在亮色下仍然是「主色实心 + 白字」，只把阴影调轻 */ html.board-light #tabs button.active{box-shadow:0 3px 10px rgba(47,111,228,.28)} /* L49 .btn:hover{color:#fff} → 白底上白字＝隐形；改成主色文字 + 主色边 + 淡蓝底 */ html.board-light .btn{background:var(--panel2);border-color:var(--line2);color:var(--txt)} html.board-light .btn:hover{border-color:var(--acc);color:var(--acc);background:#eef4ff} html.board-light .btn.ghost{background:transparent} html.board-light .btn.ghost:hover{background:#eef4ff} /* L50 .btn.primary 保持「主色实心 + 白字」（白底上对比度 4.7:1，是页面里最强的召唤动作） */ html.board-light .btn.primary{background:linear-gradient(135deg,var(--acc),#2559c4);color:#fff; border-color:transparent;box-shadow:0 2px 8px rgba(47,111,228,.24)} html.board-light .btn.primary:hover{color:#fff;background:linear-gradient(135deg,#3c7bee,#2559c4)} html.board-light .btn.danger:hover{border-color:var(--bad);color:var(--bad);background:#fdf1f2} html.board-light .btn[disabled],html.board-light button[disabled]{opacity:.45;cursor:not-allowed} /* L61 .chip.active{color:#fff;background:rgba(79,140,255,.15)} → 白字压在 15% 淡蓝上完全读不出； 亮色下改成主色实心 + 白字（与白纸卡片里的 .ac-chip.active 同一套语言） */ html.board-light .chip{background:var(--panel);border-color:var(--line2);color:var(--mut)} html.board-light .chip:hover{border-color:var(--acc);color:var(--acc);background:#f4f8ff} html.board-light .chip.active{background:var(--acc);border-color:var(--acc);color:#fff} html.board-light .chip.active:hover{background:#2559c4;border-color:#2559c4;color:#fff} html.board-light .chip[disabled]{opacity:.5;cursor:not-allowed} /* 表单控件：style.css 用 var(--bg2) 当输入底色；亮色下输入框用纯白 + 深一档边框，才「像」可输入 */ html.board-light input,html.board-light textarea,html.board-light select{ background:#fff;border-color:var(--line2);color:var(--txt)} html.board-light input::placeholder,html.board-light textarea::placeholder{color:var(--dim)} html.board-light input:focus,html.board-light textarea:focus,html.board-light select:focus{ border-color:var(--acc);box-shadow:0 0 0 3px rgba(47,111,228,.14)} /* L125-128 聊天气泡（看板不用，但同一份 style.css 里的深底代码块一并纠正，防以后误用） */ html.board-light .msg.bot pre,html.board-light .msg.bot code{background:var(--bg2);color:var(--txt)} html.board-light .msg.user{color:#fff} /* L139 tr:hover td{background:rgba(255,255,255,.02)} → 白底上加白＝无效；改成极淡的墨色 */ html.board-light tr:hover td{background:rgba(24,32,51,.035)} html.board-light th{color:var(--mut)} /* L145 遮罩/弹层：深色 scrim 在亮色主题下仍然正确（弹层要压住背景），只减轻不透明度 */ html.board-light .modal-bg{background:rgba(24,32,51,.42)} html.board-light .modal,html.board-light .omni-dd{background:var(--panel);border-color:var(--line2)} html.board-light .toast{background:var(--panel);border-color:var(--line2);box-shadow:0 8px 28px rgba(16,24,40,.14)} html.board-light .dt-modal{background:rgba(24,32,51,.42)} html.board-light .dt-modal-card{box-shadow:0 18px 60px rgba(16,24,40,.18)} /* L190-195 / L241-288 深底面板（3D 树提示、战情室代码块）：看板不加载这些视图， 但它们的 #0c1426 / rgba(10,18,34,…) 是纯深底硬编码，留着就是白页上的黑块 —— 一并纠正。 */ html.board-light .tree3d-tip,html.board-light .tree3d-legend{background:rgba(255,255,255,.92); border-color:var(--line2);color:var(--txt);box-shadow:0 10px 36px rgba(16,24,40,.14)} html.board-light .wr-think,html.board-light .wr-pack, html.board-light .wr-sopbanner,html.board-light .wr-appendix, html.board-light .vn-think,html.board-light .vn-thumb{background:var(--bg2);color:var(--txt)} html.board-light .wr-pack,html.board-light .vn-think{color:var(--mut)} /* L317/L329/L343/L384 .dt-name / .dt-ci b / .dt-link:hover / .dg-eval-body b 里的 color:#fff */ html.board-light .dt-name,html.board-light .dt-ci b,html.board-light .dg-eval-body b{color:var(--txt)} html.board-light .dt-link:hover{color:var(--acc);background:#eef4ff} /* L319/L357 深色主题下用「浅色前景 + 深色描边」的徽章，在白底上前景太浅 → 换成深文字 + 浅描边 */ html.board-light .dt-badge.L1,html.board-light .pill.ok{color:#0e7a68;border-color:#9dd6c8;background:#eefaf6} html.board-light .dt-badge.L2,html.board-light .pill.warn{color:#8a5e07;border-color:#e6cf95;background:#fdf7e8} html.board-light .dt-badge.L3,html.board-light .pill.bad{color:#b3303b;border-color:#efb3b8;background:#fdf1f2} html.board-light .pill{background:var(--bg2);color:var(--mut);border-color:var(--line2)} html.board-light .pill.good{color:var(--good);border-color:#9fd7bb;background:#eefaf3} /* L338-339 .dt-boundary（深红描边 + 浅粉字）→ 浅粉底 + 深红字 */ html.board-light .dt-boundary{background:#fdf1f2;border-color:#efb3b8;color:#8f2730} html.board-light .dt-boundary b{color:#b3303b} /* L366/L370/L373 细项表生成器的提示条 */ html.board-light .dg-note.warn{background:#fdf7e8;border-color:#e6cf95;color:#8a5e07} html.board-light .dg-infeas summary{color:var(--bad)} html.board-light .dg-verdict{background:linear-gradient(135deg,#eef4ff,#eefaf6);color:var(--txt)} html.board-light .dg-eval-h{background:linear-gradient(135deg,#f0edff,#eef4ff);color:var(--txt)} html.board-light .dg-tbl tr.lv td{background:rgba(24,32,51,.03)} html.board-light .dg-tbl td.dim{color:var(--txt)} /* L394 / L463 白纸卡片（图表卡 / 汇总台）：底色本来就是白 —— 问题在于页面也变白了， 卡片边界消失，而且 rgba(0,0,0,.25) 的重投影在浅底上显脏。改成清晰细边 + 轻投影。 */ html.board-light .viz-card{border:1px solid var(--line);box-shadow:0 1px 2px rgba(16,24,40,.04),0 4px 14px rgba(16,24,40,.06)} html.board-light .ac-console{border:1px solid var(--line);box-shadow:0 1px 2px rgba(16,24,40,.04),0 4px 14px rgba(16,24,40,.06)} /* 白纸卡片内部的浅灰小字（#94a3b8 ≈ 2.9:1）在深色外壳时代看得过去，白底整页后必须补足对比度 */ html.board-light .viz-ck-more,html.board-light .viz-kpi-dir,html.board-light .viz-sub, html.board-light .viz-kpi-lab,html.board-light .viz-ck-h,html.board-light .viz-export-lab, html.board-light .ac-hint,html.board-light .ac-panel-dim,html.board-light .ac-empty, html.board-light .ac-sub,html.board-light .ac-kpi-l,html.board-light .ac-attr-txt, html.board-light .ac-rank,html.board-light .ac-tbl tr.ac-other td{color:#5b6880} /* 白纸卡片里的选中 chip 用的是另一种蓝(#3b82c4，白字 4.06:1)，与外壳的 --acc 并排时既差半档对比度、 又像两套设计语言 —— 亮色下统一到 --acc（白字 4.65:1）。图表里的柱色保持不动（数据色另有一套）。 */ html.board-light .ac-chip.active{background:var(--acc);border-color:var(--acc)} html.board-light .ac-chip:hover,html.board-light .ac-chip-all:hover{border-color:var(--acc)} html.board-light .ac-chip-all.active{border-color:var(--acc);color:var(--acc)} /* L449 .viz-zoomwrap{background:#0b1020}（图表缩放画布的深底） */ html.board-light .viz-zoomwrap{background:var(--bg2);border-color:var(--line)} /* L542-560 笔记机器人的深底缩略图/灯箱（看板不加载，一并纠正） */ html.board-light .vn-lightbox{background:rgba(24,32,51,.72)} html.board-light .vn-thumb-x{color:#fff} /* L566/L571 对账条的红字（看板不画对账面板，保持语义色一致） */ html.board-light .od-recon .bad,html.board-light .od-recon tr.od-flag td{color:var(--bad)} /* 其它零散：图谱/离线计算器/战情室里的深底块（看板不加载） */ html.board-light .graphwrap{background:var(--bg2);border-color:var(--line)} html.board-light .gnode text{fill:var(--txt)} html.board-light .calc-privacy{background:linear-gradient(135deg,#eefaf3,#f4fbf7);border-color:#9fd7bb} html.board-light .calc-privacy b{color:var(--good)} html.board-light .wr-report h2,html.board-light .wr-headline, html.board-light .wr-verdict,html.board-light .wr-apr{color:var(--txt)} html.board-light .r3-ct{color:var(--txt)} html.board-light .formulabox{background:var(--bg2);color:var(--txt)} html.board-light .spectable th{color:var(--acc)} /* ========================= §3 看板板块 ========================= */ /* ---- 顶栏 ---- */ /* 【布局双保险，与明暗无关，故不加 html.board-light 前缀 —— board.css 本来就只在看板站点加载】 v2.68 时 style.css 那段 board 注释里写了「星号+斜杠」提前闭合注释，导致其后的 #board-scopes 规则整条作废 （口径 chip 条不撑开、右侧按钮挤到站名旁）。v2.69 已在 style.css 修掉那条注释；这里保留同一条规则作双保险。 */ #board-scopes{display:flex;gap:6px;flex:1;flex-wrap:wrap;align-items:center} html.board-light .brand .title{color:var(--txt)} html.board-light .brand .tagline,html.board-light #board-sub,html.board-light .board-sub{color:var(--mut)} /* style.css 里 .board-shards 写的是 var(--muted)（拼错，无此变量 → 退化成继承正文色）： 亮色下顺手把这行进度小字定回次要色，深色主题不受影响（覆盖只在本文件里）。 */ html.board-light .board-shards{color:var(--mut)} html.board-light .badge{background:var(--bg2);border-color:var(--line2);color:var(--acc2)} /* ---- 口令页 ---- */ html.board-light .board-gate{background:var(--panel);border:1px solid var(--line);box-shadow:var(--sh)} html.board-light .board-gate h2{color:var(--txt)} html.board-light .board-gate .sub{color:var(--mut)} html.board-light .board-code{background:#fff;border-color:var(--line2);color:var(--txt)} html.board-light .board-err{color:var(--bad)} /* ---- 分片进度条 ---- */ html.board-light .board-prog-bar{background:var(--bg2);border-color:var(--line2)} html.board-light .board-prog-fill{background:linear-gradient(90deg,var(--acc),var(--acc2))} html.board-light .board-prog-lab{color:var(--mut)} html.board-light .spin{border-color:var(--line2);border-top-color:var(--acc)} /* ---- 空态 / 提示 ---- */ html.board-light .empty{background:var(--panel);border-color:var(--line2);color:var(--mut)} html.board-light .empty.od-combo-na{color:var(--warn);border-color:#e6cf95;background:#fdf7e8} html.board-light .empty.od-pending{border-color:var(--line2);color:var(--dim)} /* 分片还在后台补齐的平台 chip：style.css 用 opacity .72 表示「等待中」，白底上只剩 3.1:1 —— 语义换成「虚线边 + 三级色」，等待感还在，字重新读得出来 */ html.board-light .chip.od-plat-pending{opacity:1;color:var(--dim);border-style:dashed} html.board-light .muted{color:var(--mut)} html.board-light .dim{color:var(--dim)} /* ---- 📚 子表集：左清单 ---- */ html.board-light .viz-list-it{background:var(--panel);border-color:var(--line)} html.board-light .viz-list-it:hover{border-color:var(--acc);background:#f4f8ff} html.board-light .viz-list-it.active{border-color:var(--acc);background:#e8f0ff;color:var(--txt)} html.board-light .viz-list-dim{color:var(--dim)} html.board-light .viz-domsel{background:#fff;border-color:var(--line2);color:var(--txt)} html.board-light .viz-panel-head{color:var(--txt)} html.board-light .dt-code{background:var(--bg2);border-color:var(--line2);color:var(--acc2)} html.board-light .od-fam-head{color:var(--mut);border-top-color:var(--line)} html.board-light .viz-zoom-lab{color:var(--mut)} html.board-light .viz-zoom-hint{color:var(--dim)} html.board-light .viz-real-dot{color:var(--good)} /* ---- 📐 周×维度 / 组合表：斑马纹、sticky 表头、小计/合计、灰显 ---- */ html.board-light .od-tblwrap{border-color:var(--line);background:var(--panel)} html.board-light .od-tbl{color:var(--txt)} html.board-light .od-tbl th,html.board-light .od-tbl td{border-bottom-color:var(--line)} /* sticky 表头必须是【不透明】底色，否则滚动时正文会透上来 */ html.board-light .od-tbl th{background:#eaeff7;color:var(--mut); box-shadow:inset 0 -1px 0 var(--line2)} html.board-light .od-tbl tbody tr:nth-child(even) td{background:rgba(24,32,51,.026)} html.board-light .od-tbl tbody tr:hover td{background:#eef4ff} html.board-light .od-tbl tr.od-total td{background:#e9eef7;border-top-color:var(--line2);color:var(--txt)} html.board-light .od-tbl tr.od-subtotal td{background:#eaf1ff;color:var(--txt)} html.board-light .od-tbl th.od-wp-sub,html.board-light .od-tbl td.od-wp-sub{background:#e4ecfb} html.board-light .od-tbl tr.od-other td{color:var(--mut)} /* 金额不可信渠道的灰显：深色下 opacity .6 的 --mut 尚可读，白底上会淡到看不见 → 保留「比正文浅一大截」的语义，但把对比度拉回 4.8:1 */ html.board-light .od-tbl td.od-untrusted{color:var(--dim);opacity:1;font-style:italic} html.board-light .od-tbl tr.od-wp-morerow td, html.board-light .od-tbl tr.od-wp-morerow:hover td{background:var(--bg2);color:var(--mut)} html.board-light .od-tbl th.od-wp-grp-start,html.board-light .od-tbl td.od-wp-grp-start{border-left-color:var(--line2)} html.board-light .od-flag-multi{color:var(--bad)} html.board-light .od-colsel{background:#fff;border-color:var(--line2);color:var(--txt)} html.board-light .od-wp-title{color:var(--txt)} /* ---- 横幅（§0.6 条件显隐一律显示 + 横幅） ---- */ html.board-light .od-banner-warn{background:#fdf1f2;border-color:#efb3b8;color:#8f2730} html.board-light .od-banner-info{background:#edf3ff;border-color:#c6d9fa;color:#3d4f6b} /* ---- 🔭 汇总（白纸卡片，只补页面底变白后失效的边界与浅字） ---- */ html.board-light .ac-tbl tr.ac-total td{background:#f1f5f9;border-top-color:var(--line2)} html.board-light .ac-panel{border-color:#e3e9f1} /* ========================= §4 皮肤切换按钮 ========================= */ /* 按钮常驻 #topbar，位于 #board-actions 之外（drawTop() 每次都会重写 #board-actions 的 innerHTML）。 */ #board-theme{flex:none;white-space:nowrap} html.board-light #board-theme{border-color:var(--line2);color:var(--mut);background:transparent} html.board-light #board-theme:hover{border-color:var(--acc);color:var(--acc);background:#eef4ff} /* ========================= §5 看板切换（顶栏左侧分段开关） ========================= */ /* 白底上要一眼读出「我在哪个看板 → 点哪里去另一个」： 当前项 = #1d4ed8 实心 + 白字（对比度 7.0 : 1，页面上最重的一块色） 另一项 = 白底 + 深蓝字 + 2px 主色边（看着就能点），hover 换浅蓝底 中间 ⇄ = 主色箭头，把「两者互切」这层意思画出来 外框再包一圈 2px 主色边 + 圆头，整体是一个分段开关而不是两个孤立按钮。 */ html.board-light .board-switch{background:#fff;border-color:#1d4ed8;box-shadow:0 1px 4px rgba(29,78,216,.2)} html.board-light .board-switch-item{color:#1d4ed8;border-color:#1d4ed8;background:#fff} html.board-light .board-switch-item:hover{background:#dbeafe;color:#1e3a8a;border-color:#1e3a8a} html.board-light .board-switch-item.active{background:#1d4ed8;border-color:#1d4ed8;color:#fff; box-shadow:0 2px 8px rgba(29,78,216,.3)} html.board-light .board-switch-item.active:hover{background:#1d4ed8;border-color:#1d4ed8;color:#fff} html.board-light .board-switch-arrow{color:#1d4ed8} /* 打印：始终白底黑字 */ @media print{ html.board-light body{background:#fff} html.board-light #topbar{position:static;background:#fff;box-shadow:none} #board-theme{display:none} html.board-light .board-switch{display:none} }