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:
@@ -14,22 +14,33 @@ body[data-theme="shiroko"] {
|
||||
--surface: #ffffff;
|
||||
--border: #d3e6f5;
|
||||
--text: #17253d;
|
||||
--text-2: #5d7b9a;
|
||||
--up: #12b0a2;
|
||||
--text-2: #55708c;
|
||||
--up: #0da093;
|
||||
--up-text: #0e7c72;
|
||||
--up-bg: #e4faf6;
|
||||
--down: #e0524e;
|
||||
--down-text: #c0362f;
|
||||
--down-bg: #fdecec;
|
||||
--pending: #d99413;
|
||||
--pending: #c07d0d;
|
||||
--pending-text: #8a5a00;
|
||||
--pending-bg: #fff7e6;
|
||||
--accent: #1e9fd4;
|
||||
--uptime-ok: #12b0a2;
|
||||
--uptime-warn: #e5a52c;
|
||||
--accent: #0e7490;
|
||||
--uptime-ok: #0da093;
|
||||
--uptime-warn: #c07d0d;
|
||||
--uptime-bad: #e0524e;
|
||||
--uptime-none: #dbe8f3;
|
||||
--shadow: 0 1px 2px rgb(23 60 100 / 0.05), 0 10px 26px -20px rgb(23 60 100 / 0.35);
|
||||
--sh-sky: #8fe0ff;
|
||||
--sh-sky-deep: #2ea8dc;
|
||||
--sh-navy: #1c2f4d;
|
||||
/* 面板/表头/分组的底色与标题色随明暗模式切换(此前是硬编码浅色,暗色模式会「白顶栏 + 深页面」) */
|
||||
--sh-panel-1: #ffffff;
|
||||
--sh-panel-2: #f6fcff;
|
||||
--sh-card-2: #fbfdff;
|
||||
--sh-th-1: #f7fcff;
|
||||
--sh-th-2: #eef7fd;
|
||||
--sh-group: #eaf6fd;
|
||||
--sh-title: #1c2f4d;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@@ -40,15 +51,25 @@ body[data-theme="shiroko"] {
|
||||
--text: #e4eef7;
|
||||
--text-2: #8ba6bf;
|
||||
--up: #2fd4c2;
|
||||
--up-text: #4fe0cf;
|
||||
--up-bg: #0d2a2a;
|
||||
--down: #f4736c;
|
||||
--down-text: #f9a29c;
|
||||
--down-bg: #2c1518;
|
||||
--pending: #e8b344;
|
||||
--pending-text: #f0c76a;
|
||||
--pending-bg: #2a2113;
|
||||
--accent: #55c2ef;
|
||||
--uptime-ok: #2fd4c2;
|
||||
--uptime-none: #1a2b3d;
|
||||
--shadow: none;
|
||||
--sh-panel-1: #14243a;
|
||||
--sh-panel-2: #101d2c;
|
||||
--sh-card-2: #0e1a27;
|
||||
--sh-th-1: #16273c;
|
||||
--sh-th-2: #101d2c;
|
||||
--sh-group: #132437;
|
||||
--sh-title: #e4eef7;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -89,8 +110,8 @@ body[data-theme="shiroko"]::before {
|
||||
height: 93px;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
/* 半透明 + 两端渐隐,弱化「一块贴图」的突兀感 */
|
||||
opacity: 0.8;
|
||||
/* 全局半透明 + 两端渐隐,弱化「一块贴图」的突兀感 */
|
||||
opacity: var(--sh-deco-opacity, 0.78);
|
||||
filter: saturate(0.92);
|
||||
mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
|
||||
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
|
||||
@@ -99,7 +120,7 @@ body[data-theme="shiroko"]::before {
|
||||
|
||||
/* ---------- 顶栏:天蓝到白 + 底部围巾飘带 ---------- */
|
||||
body[data-theme="shiroko"] .topbar {
|
||||
background: linear-gradient(180deg, #ffffff 0%, #f6fcff 100%);
|
||||
background: linear-gradient(180deg, var(--sh-panel-1) 0%, var(--sh-panel-2) 100%);
|
||||
border-bottom: 0;
|
||||
box-shadow: var(--shadow);
|
||||
overflow: hidden;
|
||||
@@ -130,7 +151,7 @@ body[data-theme="shiroko"] .logo {
|
||||
100% { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sh-sky-deep), 0 0 12px rgb(46 168 220 / 55%); }
|
||||
}
|
||||
body[data-theme="shiroko"] .brand-text h1 {
|
||||
color: var(--sh-navy);
|
||||
color: var(--sh-title);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
@@ -178,7 +199,7 @@ body[data-theme="shiroko"] .card[data-status="up"] .dot { animation: halo-pulse
|
||||
/* ---------- 卡片 / 表格 / 交互 ---------- */
|
||||
body[data-theme="shiroko"] .card {
|
||||
border-left-width: 3px;
|
||||
background: linear-gradient(180deg, #ffffff, #fbfdff);
|
||||
background: linear-gradient(180deg, var(--sh-panel-1), var(--sh-card-2));
|
||||
}
|
||||
body[data-theme="shiroko"] .tab.active,
|
||||
body[data-theme="shiroko"] .view-btn.active {
|
||||
@@ -187,15 +208,15 @@ body[data-theme="shiroko"] .view-btn.active {
|
||||
}
|
||||
body[data-theme="shiroko"] #refresh-btn:hover { border-color: var(--accent); color: var(--accent); }
|
||||
body[data-theme="shiroko"] .monitor-table th {
|
||||
background: linear-gradient(180deg, #f7fcff, #eef7fd);
|
||||
color: var(--sh-navy);
|
||||
background: linear-gradient(180deg, var(--sh-th-1), var(--sh-th-2));
|
||||
color: var(--sh-title);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
body[data-theme="shiroko"] .monitor-table tbody tr:hover { background: rgb(46 168 220 / 6%); }
|
||||
body[data-theme="shiroko"] .group-row td {
|
||||
background: linear-gradient(90deg, #eaf6fd, #f7fcff);
|
||||
background: linear-gradient(90deg, var(--sh-group), var(--sh-th-1));
|
||||
border-left: 3px solid var(--sh-sky-deep);
|
||||
color: var(--sh-navy);
|
||||
color: var(--sh-title);
|
||||
}
|
||||
body[data-theme="shiroko"] .table-wrap { box-shadow: var(--shadow); }
|
||||
body[data-theme="shiroko"] .uptime-cell.lv-none {
|
||||
@@ -208,20 +229,21 @@ body[data-theme="shiroko"] #refresh-btn .wheel { animation: wheel-spin 0.9s line
|
||||
@keyframes wheel-spin { to { transform: rotate(360deg); } }
|
||||
|
||||
/* ---------- 简约风立绘(settings.artwork,默认指向内置形象) ---------- */
|
||||
/* --sh-deco-opacity 由面板按 settings.decoOpacity 注入,人物与单车共用同一个值 */
|
||||
body[data-theme="shiroko"] .artwork {
|
||||
position: fixed;
|
||||
right: 10px;
|
||||
bottom: 0;
|
||||
width: auto;
|
||||
height: min(44vh, 380px);
|
||||
height: min(40vh, 340px);
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
/* 半透明 + 上下渐隐遮罩:让它像背景插画而不是贴上去的贴纸 */
|
||||
opacity: 0.92;
|
||||
filter: drop-shadow(0 6px 18px rgb(23 60 100 / 12%));
|
||||
mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 90%, rgb(0 0 0 / 40%) 100%);
|
||||
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 90%, rgb(0 0 0 / 40%) 100%);
|
||||
/* 全局半透明(整张图统一淡化)+ 上下渐隐,读起来是背景插画而不是贴上去的贴纸 */
|
||||
opacity: var(--sh-deco-opacity, 0.78);
|
||||
filter: drop-shadow(0 6px 18px rgb(23 60 100 / 10%));
|
||||
mask-image: linear-gradient(180deg, transparent 0, #000 4%, #000 92%, rgb(0 0 0 / 45%) 100%);
|
||||
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 4%, #000 92%, rgb(0 0 0 / 45%) 100%);
|
||||
}
|
||||
/* 窄屏:立绘与固定装饰全部撤掉,避免压住内容或溢出(手机只保留配色与围巾飘带) */
|
||||
@media (max-width: 820px) {
|
||||
@@ -233,8 +255,7 @@ body[data-theme="shiroko"] .artwork {
|
||||
@media (max-height: 520px) {
|
||||
body[data-theme="shiroko"] .artwork { display: none; }
|
||||
}
|
||||
/* 卡片视图行数多、卡片更靠右下,立绘再收一档,尽量让它落在卡片之外的角落 */
|
||||
body[data-theme="shiroko"][data-view="cards"] .artwork { height: min(34vh, 300px); }
|
||||
/* 注:立绘尺寸在卡片/表格两种视图下必须保持一致,不再按视图改高度 */
|
||||
|
||||
/* 内容层置于装饰之上 */
|
||||
body[data-theme="shiroko"] .grid,
|
||||
|
||||
Reference in New Issue
Block a user