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:
@@ -1,4 +1,4 @@
|
||||
const VERSION = '0.8.3';
|
||||
const VERSION = '0.9.0';
|
||||
const HB_LIMIT = 48;
|
||||
const UPTIME_DAYS = 90;
|
||||
const BROWSER_CONCURRENCY = 6;
|
||||
@@ -507,9 +507,12 @@ function renderViewSwitch() {
|
||||
}
|
||||
}
|
||||
|
||||
// 窄屏(手机)判定:表格在最窄的屏幕上必须横向拖动,不如默认给卡片视图
|
||||
// 表格在窄屏必须横向滚动。实测表格最小舒适宽度约 1010px(列含心率图与可用率条),
|
||||
// 因此视口窄于 1024px 时默认落到卡片;用户显式选择过视图则以选择为准。
|
||||
const TABLE_MIN_WIDTH = 1024;
|
||||
|
||||
function isNarrowScreen() {
|
||||
return window.matchMedia('(max-width: 700px)').matches;
|
||||
return window.innerWidth < TABLE_MIN_WIDTH;
|
||||
}
|
||||
|
||||
function resolveView() {
|
||||
@@ -792,6 +795,9 @@ function applyTheme(theme, { persist = true } = {}) {
|
||||
state.theme = THEMES[theme] ? theme : 'default';
|
||||
if (state.theme === 'default') delete document.body.dataset.theme;
|
||||
else document.body.dataset.theme = state.theme;
|
||||
// 装饰(人物/单车)的全局透明度:一个值同时作用于两者,避免其中一个更抢眼
|
||||
const decoOpacity = Number(state.config?.settings?.decoOpacity);
|
||||
document.body.style.setProperty('--sh-deco-opacity', String(Number.isFinite(decoOpacity) && decoOpacity > 0 && decoOpacity <= 1 ? decoOpacity : 0.78));
|
||||
if (persist) {
|
||||
try {
|
||||
localStorage.setItem('shiroko.theme', state.theme);
|
||||
|
||||
Reference in New Issue
Block a user