feat(theme): 全局装饰遮罩 + 尺寸统一;全局审阅修复对比度/暗色/平板布局

用户反馈的两点:
1. 遮罩看不出效果 → 人物与单车统一全局半透明 settings.decoOpacity(默认 .78)
   (此前 0.92/0.80 不一致且几乎无感),各自保留边缘渐隐
2. 切视图时人物比例变化 → 删掉卡片视图专用的 300px 高度,两种视图尺寸一致
3. 保留原始素材 → 原图归档 assets-src/,处理流程固化为 scripts/prepare-artwork.py

全局审阅发现并修复:
- 无障碍对比度:两套主题的状态色当文字用时远低于 AA(最低 2.56:1)→ 双色体系
  (填充色 ≥3:1 保持鲜亮 / 文字色 ≥4.5:1 同色系加深),暗色模式同步
- 暗色模式主题失效:顶栏/卡片/表头/分组行是硬编码白色 → 改为随模式切换的变量
- 平板竖屏 768px 表格需内部横滚 242px → 自动切卡片阈值 700 → 1024
- Cloudflare Worker 快照补齐 dataUpdatedAt/updateIntervalSec/dataFilter
- 清理失效 CSS(.logo .halo)

测试脚本修掉两个自身 bug(均为误报):color(srgb/…) 与半透明底的解析、
渐变背景被误判为透明。verify-views 新增对比度断言 8 条,四套合计 89 项全通过。
This commit is contained in:
tamakyi
2026-10-13 21:55:44 +08:00
parent 6f9a2d33ce
commit a7408e2bb5
26 changed files with 581 additions and 324 deletions
+17 -14
View File
@@ -5,10 +5,13 @@
--text: #111827;
--text-2: #6b7280;
--up: #16a34a;
--up-text: #15803d;
--up-bg: #f0fdf4;
--down: #dc2626;
--down-text: #b91c1c;
--down-bg: #fef2f2;
--pending: #d97706;
--pending-text: #92400e;
--pending-bg: #fffbeb;
--accent: #2563eb;
--uptime-ok: #16a34a;
@@ -28,10 +31,13 @@
--text: #e5e7eb;
--text-2: #9ca3af;
--up: #4ade80;
--up-text: #4ade80;
--up-bg: #10281c;
--down: #f87171;
--down-text: #f87171;
--down-bg: #2a1517;
--pending: #fbbf24;
--pending-text: #fbbf24;
--pending-bg: #2a2113;
--accent: #60a5fa;
--uptime-none: #2a2f3a;
@@ -101,15 +107,15 @@ body {
font-weight: 650;
white-space: nowrap;
}
.pill.ok { background: var(--up-bg); color: var(--up); }
.pill.bad { background: var(--down-bg); color: var(--down); }
.pill.pending { background: var(--pending-bg); color: var(--pending); }
.pill.ok { background: var(--up-bg); color: var(--up-text); }
.pill.bad { background: var(--down-bg); color: var(--down-text); }
.pill.pending { background: var(--pending-bg); color: var(--pending-text); }
.stat { text-align: center; min-width: 44px; }
.stat b { display: block; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat label { font-size: 11px; color: var(--text-2); }
.stat-up b { color: var(--up); }
.stat-down b { color: var(--down); }
.stat-up b { color: var(--up-text); }
.stat-down b { color: var(--down-text); }
#refresh-btn {
display: inline-flex;
@@ -150,9 +156,6 @@ body {
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }
.icon-btn.active { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
/* 光环仅在白子主题下显示 */
.logo .halo { display: none; }
/* ---------- 视图切换 ---------- */
.view-switch { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.view-btn {
@@ -286,7 +289,7 @@ body {
overflow: hidden;
text-overflow: ellipsis;
}
.card[data-status="down"] .card-detail { color: var(--down); }
.card[data-status="down"] .card-detail { color: var(--down-text); }
.empty {
grid-column: 1 / -1;
@@ -322,8 +325,8 @@ body {
color: var(--text-2);
}
.footer .version { margin-left: auto; }
.demo-chip { padding: 1px 8px; border-radius: 999px; background: var(--pending-bg); color: var(--pending); font-weight: 600; }
.warn-chip { padding: 1px 8px; border-radius: 999px; background: var(--down-bg); color: var(--down); font-weight: 600; }
.demo-chip { padding: 1px 8px; border-radius: 999px; background: var(--pending-bg); color: var(--pending-text); font-weight: 600; }
.warn-chip { padding: 1px 8px; border-radius: 999px; background: var(--down-bg); color: var(--down-text); font-weight: 600; }
/* 窄屏(手机 / 竖屏平板):顶栏改为三行——标题 / 统计 / 控件,避免挤成一团 */
@media (max-width: 820px) {
@@ -374,9 +377,9 @@ body[data-view="table"] .grid { display: block; }
.t-state { white-space: nowrap; }
.t-state .dot { display: inline-block; margin-right: 6px; vertical-align: middle; }
tr[data-status="up"] .t-state { color: var(--up); }
tr[data-status="down"] .t-state { color: var(--down); }
tr[data-status="pending"] .t-state { color: var(--pending); }
tr[data-status="up"] .t-state { color: var(--up-text); }
tr[data-status="down"] .t-state { color: var(--down-text); }
tr[data-status="pending"] .t-state { color: var(--pending-text); }
.t-name { white-space: nowrap; }
.t-name .type-badge { margin-left: 8px; }
.t-target {