/* 青志社团 v79.7 · 新增样式（技术设计 §1.1 第 4 个新文件） ============================================================================ ★ 本文件是**追加式**的：只加 v79.7 新样式，一行既有样式都不改。 styles.css 3731 行已被全站依赖，改它 = 回归面无法收敛。 ★ 铁律一（z-index）：本文件所有 fixed 层 / 浮层 z-index **≥ 1000**， 不得低于 95。body.night-dim::after 是 z-index:95（styles.css L3000）， 夜间压暗模式下 z-index < 95 的新浮层会被压暗遮罩盖住、点不动。 ⚠️ night-dim::after 带 pointer-events:none，所以点击不受影响但**视觉被压暗** —— 仍必须提 z-index，否则用户看到「夜里打开备忘录确认层一片昏暗」。 ★ 铁律二（颜色）：**禁止硬编码任何灰色**。一律用 CSS 变量 var(--tx) / var(--tx2) / var(--tx3) / var(--pri)。 v79.6 刚把三套主题的 --tx3 对比度全部修到 ≥ 4.5： 亮 #697185 / 暗 #8696ad / mascot #5b7382（styles.css L3 / L69 / L156）。 用变量 = 三套主题自动跟随，v79.6 的对比度修复成果**自动继承**。 ⚠️ 新写的 .hint 类提示文字一律 var(--tx3)，不许写 #888 / #999。 本项目曾因 .stat-card.tap:after 的 opacity:.55（L1234）留下对比度隐患， 技术设计 §7.3 ③ 明确「新代码不继承该缺陷」——所以这里连 opacity 都不用。 ★ 铁律三（类名）：一律加 v797- 前缀。本项目曾因裸类名 .warn 撞上 已有全局组件类，排查数小时。前缀是隔离，不遵守等于主动制造回归。 ========================================================================== */ /* ── 批次 0/1：IndexedDB 降级模式常驻提示条（技术设计 §2.3）──────────────── 为什么必须常驻而不能只 toast 一次： 用户关掉页面就忘了，容量真写满时反而不知道原因。 §2.3 原文：「这是『不许假装正常』的具体落地。」 */ .v797-degraded { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(214, 158, 46, .55); /* 背景用半透明暖色 + backdrop，不引入新的主题色变量， 亮/暗/mascot 三套主题下都能看清边框。 */ background: rgba(214, 158, 46, .12); color: var(--tx); font-size: 13px; line-height: 1.6; /* 提示条不是浮层，随页面流走，不占用 fixed z-index 档位 */ position: relative; z-index: 1; } .v797-degraded-text { font-weight: 600; } .v797-degraded-extra { margin-top: 4px; /* 次要说明文字用 --tx3（v79.6 已修到三主题 ≥4.5），不用 opacity 压暗 */ color: var(--tx3); font-size: 12px; } .v797-degraded-extra b { color: var(--tx2); } /* ── 批次 0/1 预留：番茄钟运行态恢复提示条（批次 3 渲染时挂载）──────────── 技术设计 §5.5 规则 5：重开 App 时若检测到未结束的计时， 展示「检测到你之前有未结束的计时，已恢复」确认条。 ★ 诚实措辞铁律：文案不得暗示「弹窗能防杀进程」—— PRD §5.5 已明确「加弹窗也不能阻止系统杀进程」， 真正的技术手段是时间戳补偿，弹窗只是提示用户保活。 */ .v797-restore { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line, rgba(128, 138, 158, .35)); background: rgba(128, 138, 158, .10); color: var(--tx); font-size: 13px; line-height: 1.6; position: relative; z-index: 1; } .v797-restore .v797-restore-sub { color: var(--tx3); font-size: 12px; margin-top: 3px; } .v797-restore .v797-restore-act { display: inline-flex; gap: 8px; margin-top: 8px; } /* ── 批次 2：超级备忘录 ─────────────────────────────────────────────── */ /* ⚠ 类名必须与 memo.js **实际输出的 DOM** 逐字一致。之前的版本写的是 .v797-memo-item / .v797-memo-title / .v797-memo-list …， 而 memo.js 的 itemHtml() 输出的是 .v797-mi / .v797-mi-title / .v797-list …， 两套名字**零重叠** —— 页面上元素全都在，但一条样式都没命中， 备忘录看起来像「坏了」（裸列表、无卡片、无间距）。 教训：类名不是「设计时就定好的」，是**渲染代码的产出**； 写完 memo.js 必须回头做一次「CSS 类名 ∩ JS 类名」的机械比对。 下面每条规则的类名都来自 memo.js 的 itemHtml()/render()/paintSpans()。 */ .v797-memo { padding: 12px; } .v797-wrap { min-width: 0; } /* 一句话输入条。position:sticky 让它滚到下面也能看见 —— 备忘录的 主交互就是「随时记一句」，输入框沉到屏幕外等于功能不存在。 */ .v797-memo-compose { position: sticky; /* ⚠⚠⚴ v79.9 批次9【#17-A】top 用**实测注入**的顶栏高度，不再写死 0。 原值 `top:0` ⇒ 滚动时这条（z:1000）直接压在顶栏（z:40）**上面**， 实测顶栏 y=0..84、本条 y=0..61 ⇒ 顶栏被完全盖住、点不到。 ⚠⚠⚴ 为什么**不写死一个 px**（实测数据）： 顶栏高度**随视口宽度变化**（真浏览器 getBoundingClientRect）： 390 ⇒ 83.52 414 ⇒ 83.52 1280 ⇒ **131.42** 而按 CSS 推算是 51px（8+34+8+1）—— 比实测小 **32.5px**。 根因是 `#nav`（11 个导航按钮）的 flex-wrap 在窄屏换行、宽屏不换行。 ⇒ 写死 84px 只会把「移动端遮挡」换成「桌面端重叠 47px」，等于没修。 ⚠ `--qz-topbar-h` 由 app.js 的 syncTopbarH() 用 ResizeObserver 实测后写入。 ⚠ **fallback 0px = 退回改动前的行为**（顶栏被盖）， 刻意如此：JS 没跑时**不比修复前更坏**，而不是变成一个未知值。*/ top: var(--qz-topbar-h, 0px); z-index: 1000; display: flex; gap: 8px; margin-bottom: 12px; padding: 8px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); } .v797-memo-input { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); color: var(--tx); font-size: 15px; /* ≥15px 防 iOS 聚焦时自动放大 */ } .v797-memo-input:focus { outline: 2px solid var(--pri); outline-offset: 1px; } /* 类型切换条（待办 / 事件 / 每日待办） */ .v797-types { display: flex; gap: 7px; margin-bottom: 8px; flex-wrap: wrap; } .v797-type { padding: 6px 13px; border-radius: 999px; cursor: pointer; font-size: 13px; border: 1px solid var(--line); background: var(--bg2); color: var(--tx2); } /* ★★ v79.9 批次 8 任务 4：类型按钮的选中态。 ⚠ 为什么必须画出来：这三个按钮紧挨着输入框， 之前它们**既没绑定事件、也没有选中态** —— 现在事件通了， 但如果切完类型界面上还是三个一模一样的胶囊， 用户会以为「点了还是没反应」， 那等于把「绑定好了」这件事藏起来了。 ⚠ 选中态用主色 + 描边双通道（不只是变色）： 色弱用户与深色模式下单靠背景色差可能看不出来。*/ .v797-type.on { background: var(--pri); border-color: var(--pri); color: #fff; font-weight: 600; } .v797-hint { color: var(--tx3); font-size: 12px; line-height: 1.6; margin-bottom: 12px; } .v797-h { color: var(--tx2); font-size: 13px; margin: 14px 0 7px; } .v797-list { list-style: none; margin: 0; padding: 0; } .v797-list-done { opacity: 1; } .v797-list-done .v797-mi-title { text-decoration: line-through; color: var(--tx3); } .v797-mi { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin-bottom: 8px; border-radius: 11px; background: var(--bg2); border: 1px solid var(--line); } /* 跨天条目左侧描一条主色边，与普通待办一眼可分 */ .v797-mi-cross { border-left: 3px solid var(--pri); } .v797-mi-done .v797-mi-title { text-decoration: line-through; color: var(--tx3); } .v797-mi-check { flex: 0 0 auto; border: 0; background: transparent; cursor: pointer; color: var(--tx2); font-size: 17px; line-height: 1.5; padding: 0 2px; } .v797-mi-ico { font-size: 17px; line-height: 1.5; flex: 0 0 auto; } .v797-mi-main { flex: 1; min-width: 0; } .v797-mi-title { display: block; color: var(--tx); font-size: 15px; line-height: 1.5; word-break: break-word; } .v797-mi-time { display: block; margin-top: 3px; color: var(--tx3); font-size: 12px; line-height: 1.6; } .v797-mi-wd { margin-left: 6px; } .v797-mi-remark { display: block; margin-top: 3px; color: var(--tx3); font-size: 12px; line-height: 1.6; } .v797-mi-type { flex: 0 0 auto; color: var(--tx3); font-size: 12px; } /* ★★ v79.9 批次 8 任务 2：条目上的「已同步/未同步到待办」角标 ⇄。 ⚠ 已同步用主色，未同步用弱化灰 —— 用户一眼能看出「这条还没进待办」。 ⚠ 必须给 title：光靠颜色说不清「这个 ⇄ 是什么意思」。*/ .v797-mi-sync { margin-left: 5px; color: var(--pri); font-size: 12px; cursor: help; } .v797-mi-nosync { margin-left: 5px; color: var(--tx3); opacity: .5; font-size: 12px; cursor: help; } .v797-mi-del { flex: 0 0 auto; border: 0; background: transparent; cursor: pointer; color: var(--tx3); font-size: 17px; padding: 2px 6px; border-radius: 7px; } .v797-mi-del:hover { background: var(--line); } /* 载入骨架。用户会以为「功能坏了、没数据」 */ .v797-loading { padding: 26px 12px; text-align: center; color: var(--tx3); font-size: 13px; } .v797-empty { padding: 26px 12px; text-align: center; color: var(--tx3); font-size: 13px; } /* 跨天时段叠加层（paintSpans）。C-02/C-03：不撑高日历格、不遮挡正常课程 —— 所以只画**顶部细条**，绝不用绝对定位的巨块。 */ .v797-spanwrap { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; padding: 8px 11px; border-radius: 10px; background: var(--bg2); border-left: 3px solid var(--pri); color: var(--tx3); font-size: 12.5px; line-height: 1.6; } .v797-spanbox { display: contents; } .v797-span { color: var(--tx3); } /* ── 批次 2：概览页超级备忘录卡片（A5）+ 吉祥物快捷菜单（A6）─────────── */ /* 概览卡片。只在既有 v66 待办条为空时出现（app.js 的 todoHTML else 分支）， 所以不与 wb66-todobar 抢位置，两条并存时也不会重排既有面板。 */ .v797-home-memo { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); cursor: pointer; } .v797-home-hd { display: flex; align-items: center; justify-content: space-between; color: var(--tx2); font-size: 13.5px; font-weight: 600; margin-bottom: 7px; } .v797-home-list { list-style: none; margin: 0; padding: 0; } .v797-home-mi { display: flex; gap: 9px; align-items: flex-start; padding: 6px 0; border-top: 1px solid var(--line); } .v797-home-ico { font-size: 15px; line-height: 1.5; flex: 0 0 auto; } .v797-home-tx { flex: 1; min-width: 0; color: var(--tx); font-size: 14px; line-height: 1.5; word-break: break-word; } .v797-home-sub { display: block; color: var(--tx3); font-size: 11.5px; line-height: 1.6; } .v797-home-type { flex: 0 0 auto; color: var(--tx3); font-size: 11.5px; } .v797-home-more { color: var(--tx3); font-size: 12px; padding-top: 6px; } /* 吉祥物快捷菜单。z-index 1000（铁律一）：night-dim::after 是 95， 低了会被夜间压暗遮罩盖住、点不动。 */ .v797-mbmenu { position: absolute; right: 0; bottom: 100%; margin-bottom: 8px; z-index: 1000; display: none; min-width: 152px; padding: 5px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); } .v797-mbmenu.on { display: block; } /* __P0FIXED_MBMENU__ P0-1 判据 ⑥：这张菜单真实鼠标点击**收不到事件**。 根因：批次 8【B】修 D4 时给 .mascot-buddy 加了 pointer-events:none（styles.css:3412）， 只把 .mb-body / .mb-chat 放回命中测试（同文件 3413 行），**漏了本菜单**。 ⇒ 菜单显示得出来（.on 控制 display），但事件穿透到页面背后。 ⚠ 隐蔽点：display:none 时菜单不参与命中测试 ⇒ 只查「DOM 里有按钮」的判据全绿。 ⚠ 写在 styles.css 那条旁边不现实（不在同一文件），故就近写在这里，注释已互相指认。 ⚠ 关闭态 .mb-bubble 的 pointer-events:none 特异性更高，不受此条影响。*/ .v797-mbmenu, .v797-mbmenu button { pointer-events: auto; } .v797-mbmenu button { display: block; width: 100%; text-align: left; cursor: pointer; padding: 9px 11px; border: 0; border-radius: 9px; background: transparent; color: var(--tx); font-size: 14px; } .v797-mbmenu button:hover { background: var(--line); } /* 设置页的 v79.7 两个新面板（⑤ 超级备忘录 / ⑥ 超级番茄钟）。 只加一条极轻的区分标记（左侧主色竖条），让用户一眼看出这两块是新加的； 刻意**不复用**既有 .panel 的任何属性覆盖 —— 改既有样式等于扩大回归面。 */ .v797-set { border-left: 3px solid var(--pri); } /* 设置页的布尔开关行（A14）。既有设置页大量用 label+input， 这里只补一点排版，不改动既有 .fld 的任何样式。 */ .v797-sw { display: inline-flex; align-items: center; gap: 6px; color: var(--tx); font-size: 13px; cursor: pointer; flex: none; } .v797-sw input { width: auto; flex: none; } /* ── 批次 3：超级番茄钟 ─────────────────────────────────────────────── */ .v797-pomo { padding: 12px; text-align: center; } .v797-pomo-state { color: var(--tx2); font-size: 13px; margin-bottom: 6px; } /* 提示条一律 var(--tx3)（铁律二） */ .v797-pomo-notice { margin: 0 auto 10px; padding: 8px 11px; max-width: 520px; border-radius: 9px; background: var(--bg2); border: 1px solid var(--line); color: var(--tx3); font-size: 12.5px; line-height: 1.6; text-align: left; } .v797-pomo-ring { margin: 6px 0 12px; } /* 环形进度 SVG 本身（pomo.js 的 ringSvg 输出） */ .v797-ring { display: block; margin: 0 auto; } .v797-pomo-presets { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-bottom: 10px; } .v797-preset { padding: 7px 13px; border-radius: 999px; cursor: pointer; font-size: 13px; border: 1px solid var(--line); background: var(--bg2); color: var(--tx2); } .v797-preset.on { background: var(--pri); color: var(--bg); border-color: var(--pri); } /* 「+ 档位」按钮：虚线边，与已有档位区分（不是又一个档位） */ .v797-preset-add { border-style: dashed; color: var(--tx3); } .v797-pomo-modes, .v797-pomo-tags, .v797-pomo-acts { display: flex; gap: 8px; justify-content: center; align-items: center; margin-bottom: 10px; flex-wrap: wrap; } .v797-mode { padding: 6px 15px; border-radius: 8px; cursor: pointer; font-size: 13px; border: 1px solid var(--line); background: transparent; color: var(--tx2); } .v797-mode.on { background: var(--pri); color: var(--bg); border-color: var(--pri); } .v797-tag-input { padding: 7px 11px; border-radius: 9px; font-size: 14px; border: 1px solid var(--line); background: var(--bg); color: var(--tx); width: 150px; } .v797-btn { padding: 8px 17px; border-radius: 9px; cursor: pointer; font-size: 14px; border: 1px solid var(--line); background: var(--bg2); color: var(--tx); } .v797-btn.primary { background: var(--pri); color: var(--bg); border-color: var(--pri); } .v797-btn:hover { filter: brightness(1.06); } /* 导出按钮是 .v797-btn + data 属性（pomo.js 输出的是 data-v797-export， **没有** .v797-export 这个类 —— 写类名规则就是死代码）。用属性选择器。 */ .v797-btn[data-v797-export] { margin-top: 12px; } /* 口径脚注。跨天归属不是 bug，但**必须写明**，否则用户以为统计错了。 */ .v797-pomo-foot { margin-top: 10px; color: var(--tx3); font-size: 11.5px; line-height: 1.7; } .v797-pomo-foot strong { color: var(--tx2); } /* ── 批次 3：超级统计 + SVG 图表 ────────────────────────────────────── */ .v797-stats { padding: 12px; } .v797-dims { display: flex; gap: 7px; margin-bottom: 12px; } .v797-dim { flex: 1; padding: 7px 0; border-radius: 8px; cursor: pointer; font-size: 13px; border: 1px solid var(--line); background: var(--bg2); color: var(--tx2); }.v797-dim.on { background: var(--pri); color: var(--bg); border-color: var(--pri); } .v797-sum { color: var(--tx2); font-size: 14px; margin-bottom: 10px; } .v797-sum strong { color: var(--tx); } .v797-chart-wrap { margin: 10px 0; padding: 8px; border-radius: 11px; background: var(--bg2); border: 1px solid var(--line); overflow-x: auto; } .v797-chart { display: block; max-width: 100%; } .v797-legend { list-style: none; margin: 0 0 8px; padding: 0; } .v797-legend li { display: flex; align-items: center; gap: 7px; color: var(--tx3); font-size: 12.5px; line-height: 1.9; } .v797-dot { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; } /* ══════════════════════════════════════════════════════════════════════ v79.9 批次 8【C3】· 按标签分布的「合计」行 ────────────────────────────────────────────────────────────────────── ★ 用户要「看到时长的总和」。原来图例每项都写了各自时长， 但没有任何一行说「加起来等于多少」—— 百分比被 fixPercentTo100 补差后必然加到 100.0%，**百分比自洽 ≠ 用户能拿秒数对账**。 ⚠ 排版取舍：这一行**顶在上边框**，不是混在图例项里。 混进去的话它和普通标签行长得一样，用户会把它当成"又一个标签"去读百分比。 顶边框 + 稍强字重 = 一眼看出这是"结论行"。 ⚠ 全部走既有变量（--tx / --tx3 / --line / --pri-soft）， 亮暗两态各自自动成立，不写死任何前景/背景色。 */ .v797-legend-sum { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 6px; padding-top: 7px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.7; } .v797-legend-sum-k { color: var(--tx3); font-weight: 600; } .v797-legend-sum-v { color: var(--tx); font-weight: 700; /* 机读出口在 data-sec 上；这里给 tabular-nums 让多行数字对齐， 否则 "1 小时 5 分" 与 "45 分" 的数字宽度不同，合计行会显得歪。 */ font-variant-numeric: tabular-nums; } .v797-legend-sum-n { color: var(--tx3); font-size: 11.5px; margin-left: auto; } /* 批次 2/3 将追加：备忘录卡片、确认层、跨天横幅、番茄钟大时钟、SVG 图表样式。 届时新增浮层继续遵守本文件头的 z-index ≥ 1000 与 var(--tx3) 两条铁律。 */ /* ══════════════════════════════════════════════════════════════════════ v79.7 批次 4 · 排障日志导出面板（A16） ────────────────────────────────────────────────────────────────────── ★ 类名一律 v797- 前缀（本项目曾因裸类名撞全局组件类，见文件头铁律三）。 ★ 文字色一律 var(--tx3)：三套主题已修到 ≥4.5:1，不要写死 #888 之类。 ★ z-index：非浮层，不参与 ≥1000 那条铁律（那条只约束 fixed 浮层）。*/ .v797-diag-slot { margin-top: 12px; } .v797-diag-warn { padding: 10px 12px; margin-bottom: 10px; border-radius: 10px; font-size: 13px; line-height: 1.6; color: var(--tx3); background: color-mix(in srgb, var(--tx3) 8%, transparent); border: 1px solid color-mix(in srgb, var(--tx3) 22%, transparent); } .v797-diag-warn strong { color: var(--tx2); } .v797-diag-row { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--tx2); cursor: pointer; padding: 4px 0; } .v797-diag-row input { width: 16px; height: 16px; cursor: pointer; flex: 0 0 auto; } .v797-diag-hint { font-size: 12px; line-height: 1.6; color: var(--tx3); margin: 2px 0 4px 24px; } .v797-diag-msg { margin-top: 8px; font-size: 13px; color: var(--tx3); min-height: 1px; } /* ══════════════════════════════════════════════════════════════════════ v79.7 批次 5 · A18 本地数据导入 / 导出 ---------------------------------------------------------------------- ★ 项目铁律：CSS 类名一律 v797- 前缀；提示文字一律 var(--tx3)（不写死颜色）。 颜色全部走变量，深浅色主题各自生效 —— 这里**不出现任何十六进制颜色**， 否则换肤时会留下「这一块没跟着变」的残余白底/黑底。 ══════════════════════════════════════════════════════════════════════ */ .v797-io-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .v797-io-label { font-size: 13px; font-weight: 600; color: var(--tx2); flex: none; min-width: 52px; } .v797-io-btns { display: flex; gap: 8px; flex-wrap: wrap; } /* 密码强度提示：四个档位各一个色，但都取自主题变量，保证对比度 */ .v797-io-hint { color: var(--tx3); margin-top: 4px; } .v797-io-hint-none { color: var(--tx3); } .v797-io-hint-bad { color: var(--tx3); font-weight: 600; } .v797-io-hint-weak { color: var(--tx3); } .v797-io-hint-ok { color: var(--tx3); } /* 进度 / 结果日志：需要「停下来还能看清」的场合，不能靠 toast 一闪而过 */ .v797-io-log { margin-top: 10px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--line); font-size: 12px; line-height: 1.7; color: var(--tx3); max-height: 190px; overflow-y: auto; word-break: break-all; } .v797-io-line { margin: 0; padding: 1px 0; } .v797-io-err { color: var(--tx3); font-weight: 700; } /* ══════════════════════════════════════════════════════════════════════ v79.7 批次 7 · memo 三态的错误态 ────────────────────────────────────────────────────────────────────── ★ 为什么必须单独定义：memo.js 的 render() 改成三态（loading / error / ready）后，error 分支引用了 .v797-err / .v797-hint。 ⚠ 这两个类名当时**在本文件里不存在** —— 写类名规则时没同步写样式， 表现是「错误提示渲染出来了但长得像正文」，对比度也没有保障。 ★ 这类「HTML 引用了但 CSS 没定义」的洞静态读代码很难发现： 类名拼写完全正确，只是没定义。所以新增渲染分支时， 必须同一次改动里把样式补齐，并在下面留一行反向登记。*/ .v797-err { padding: 12px 14px; margin: 4px 0 8px; border-radius: var(--r-sm); background: var(--bg2); border: 1px solid var(--line); color: var(--tx2); font-size: 13.5px; line-height: 1.7; text-align: left; } .v797-hint { color: var(--tx3); font-size: 12.5px; line-height: 1.7; text-align: left; } .v797-loading { color: var(--tx3); font-size: 13.5px; padding: 18px 0; text-align: center; } /* ══════════════════════════════════════════════════════════════════════ v79.7 批次 7 · 🍅 番茄钟重做（用户反馈「太简陋」） ────────────────────────────────────────────────────────────────────── ★ 背景：参考产品是成熟的商业番茄钟，原实现是「一行状态字 + 一个 120px 小圈 + 一排文字按钮」。用户原话「你的番茄钟太简陋了」。 简陋不在于功能少，而在于**没有视觉重心** —— 用户看不到时间在走。 ★ 铁律一（z-index）：本节新增的 .v797-rest-* 是 fixed 浮层（休息提示）， z-index 1040（> body.night-dim::after 的 95），否则夜间压暗时 提示层会被压暗遮罩盖住、看着像一片昏暗。 ⚠⚠⚠ v80.9【P1-6】**有意未改，请勿「顺手统一」**： 这一节（.v797-rest-mask / .v797-rest-card，z=1040）与下面 :731 的 .v797-rest-mask **夜里不参与 night-dim 压暗**，这是**已知的取舍，不是漏网 bug**。 实测依据（浏览器量测，tmp/_p16_diag3.out.txt）： · 它们**不含任何表单控件**（无 input/textarea/select） ⇒ 不属于 P1-6 判据 `_v80_p16_dark.js` 的 A3 口径 （A3 只锁「蒙版之上**且含表单**却未压暗」的层） · 休息提示是**全屏浮层**，压暗它会让「休息中」这个状态变得难以识别， 收益低于损失 ⇒ 如果将来要给它加压暗，**先跑 `_v80_p16_dark.js` 确认 A3 仍绿**， 別顺手改 styles.css 的 night-dim 白名单 —— 那个白名单每一项都是 作者按「该层整块都该暗 / 不该暗」逐个判过的（见 styles.css:3110-3123）。 ★ 铁律二（颜色）：全部走 CSS 变量，三套主题自动跟随；不硬编码灰。 ★ 铁律三（类名）：一律 v797- 前缀。 ══════════════════════════════════════════════════════════════════════ */ /* ── 四态配色。用 data-v797-pomo-state 属性驱动，换状态只改属性不改样式 ── 为什么用属性而不是四个独立类：JS 那边切换时只写一个属性， 不会出现「加了新状态忘了加新类名」的漏配（与 memo 三态同源的坑）。 */ .v797-pomo { padding: 14px 12px 18px; text-align: center; } /* 语义色变量：paused/rest 两种状态的环色与状态字色。 ★ 为什么要提成变量而不是到处写死色值： ① 深色主题需要**更亮**的同色系（#b8791f 在 #0f1320 上只有 4.9:1， 勉强够；#1f8f6d 在暗底上只有 4.6:1，低于 4.5 阈值边缘）； ② SVG 里写 var() 后浏览器实时解析，切主题立刻生效 —— 写死色值会「冻住」在首次渲染那一刻（这正是本轮修掉的暗色 bug）。 ⚠ 铁律二禁的是「硬编码灰色」；语义色必须固定才能跨主题保持含义， 所以这里集中定义、随主题覆盖，不散落各处。 */ /* ══════════════════════════════════════════════════════════════════════ ★★ v79.9 补漏：`--bg2` 的定义（此前**全项目零定义**） ────────────────────────────────────────────────────────────────────── 🔴🔴 问题：`styles.css` 与 `v797.css` 里共有 **40 处**写着 `var(--bg2)`， 而 `--bg2` **在两个文件里都没有定义** （`grep -rn -- "--bg2\s*:" public/assets/*.css` → **0 命中**）。 ⚠⚠ **它们是两类，症状完全不同，必须分开看**（QA 提醒后才拆清）： | 组 | 写法 | 处数 | 修前行为 | 修前症状 | |---|---|---|---|---| | **A 组** | 裸 `var(--bg2)`（**无 fallback**） | **30**（styles 5 + v797 25） | 整条声明 invalid at computed-value time ⇒ background 落 initial | **透明** —— 卡片层级消失 | | **B 组** | `var(--bg2, #xxxxxx)`（**有 fallback**） | **10**（全在 styles.css） | 用 fallback | 暗色下**惨白**（fallback 是亮色值） | ⚠ 我第一版只查了 A 组（正则不带逗号）⇒ **B 组 10 处一个都没进判据**， 而 B 组恰好是「`.drag-handle` 暗色下对比度 14.74」那一批。 ⚠ **教训**：`grep -c "var(--bg2)"` 会把两类混在一起数， 而**它们的症状不同、修法的影响面也不同** ⇒ 判据必须分组。 ⚠⚠ 按 CSS 规范，A 组未定义时 background 落到 **initial（透明）**， 不是"保持上一条声明"。 ⚠ 主理人给的数字是 15、QA 核的是 27（那是 `grep -c` 的行级口径， 含 2 处注释与 2 处定义）⇒ **以本注释的分组口径为准**。 ⚠⚠ 为什么这**违反了本文件自己的铁律二**（文件头 :11-14 写着 「禁止硬编码任何灰色，一律用 CSS 变量」）： 这 30 处**确实用了变量**（符合铁律二的字面）， 但**变量本身不存在** ⇒ 实际效果等于硬编码了一个不存在的颜色。 ⇒ **铁律只检查"写法"，不检查"变量有没有定义"** —— 这是本项目在「白名单类设计」上栽过的同一族（字段加了但读口没透传）。 ⇒ 纪律补充：**用变量之前必须确认它有定义**， `grep -rn -- "--bg2\s*:" *.css` 应该是**非 0**，不是"我写了 var(--bg2) 就完事"。 ★ 取值依据（**对齐现有观感，不另造一套**）： · 亮色：`--track-bg:#f1f4fa`（styles.css:10）那一档的邻近色 ⇒ `#f6f8fc`（比 track-bg 略浅，与 `--gap-bg:#f7f9fd` 接近） · 暗色：`--soft:#1e2638`（styles.css:74）与 `--card:#1a2030` 之间 ⇒ `#212a3d`（比 soft 略亮，卡片内层比外层稍亮是这一档的层次） ⚠⚠ **A 组 30 处逐条确认设计意图**（防"把本该透明的区域涂上颜色"）： 判据 `smoke/_c4_bg2.js` 组 6 逐条查了"使用点所在的块有没有 border / border-radius"： **30/30 全部有边框或圆角** ⇒ 全部被设计成独立块 ⇒ 补底色符合设计意图， **无一条需要豁免**。⚠ 判据 S6.3 用一份人造的"无框元素"验过判据的分辨力 （证明它不是"一律判该有底色"）。 ⚠⚠ **覆盖关系（实测结论与主理人给的推断不同）**： ⚠ 主理人推断「同特异性 + 后加载胜出」， **实测两者特异性不同**：`styles.css:64` 是 `[data-theme="dark"]`（0,1,0）、 `v797.css` 是 `:root[data-theme="dark"]`（**0,2,0**） ⇒ **本文件特异性更高 ⇒ 任何加载顺序下都胜出**（比"后加载胜出"更强）。 ⚠ 原推断（保留备查）： index.html 的加载顺序是 `styles.css:40` → `v797.css:43`， 本文件在**后面** ⇒ 同特异性下**本文件的声明胜出**。 ⇒ 而 `styles.css` 的暗色块是 `:root[data-theme="dark"]`（L65）， 本文件用**完全相同的选择器**（见 :474 既有行）⇒ 依赖的就是"后加载胜出"。 ⚠ 这条依赖是**隐式的**（没有 !important，靠文件顺序）⇒ 所以判据必须验它。 ⚠ 为什么放在 `:root`（:473）而不是每个用到它的选择器上： 变量定义必须在**祖先**上才可用；集中定义一处，30 处引用自动跟随。 ══════════════════════════════════════════════════════════════════════ */ :root { --pomo-warn: #b8791f; --pomo-rest: #1f8f6d; --pomo-urgent: #d9534f; --bg2: #f6f8fc; } /* ⚠⚠⚠ **只追加 `--bg2`，既有三个 pomo 变量一个字节都没动** ⚠ 我第一版手误把暗色 `--pomo-urgent` 从 `#ff7b6f` 改成了 `#ff6b5f` ⇒ 番茄钟「紧急」态的颜色会**静默变浅**，而这与本轮 `--bg2` 毫无关系。 ⚠ 教训与本轮判据纪律同源：**改一处时绝不能顺手改另一处**—— 「顺便」是回归的最主要来源（本项目已在它上面栽过：`repeatYearly` 三态、 `weekdays` 透传、qz-export 字段集，三次都是"只加不减"被破坏）。*/ :root[data-theme="dark"] { --pomo-warn: #e0a44a; --pomo-rest: #4fc79b; --pomo-urgent: #ff7b6f; --bg2: #212a3d; } /* idle：中性。running：主题色。paused：琥珀。rest：绿。 ⚠ 四态必须在**颜色 + 文案 + 环形描边**三处都不同 —— 只改文案的话，色觉障碍用户分辨不出；只改颜色的话， 截图打印成黑白又分不出。文案是主，颜色是辅，两者都要。 */ .v797-pomo[data-v797-pomo-state="idle"] .v797-pomo-state { color: var(--tx3); } .v797-pomo[data-v797-pomo-state="running"] .v797-pomo-state { color: var(--pri); } .v797-pomo[data-v797-pomo-state="paused"] .v797-pomo-state { color: var(--pomo-warn); } .v797-pomo[data-v797-pomo-state="rest"] .v797-pomo-state { color: var(--pomo-rest); } .v797-pomo[data-v797-pomo-state="pending_confirm"] .v797-pomo-state { color: #b8791f; } /* ⚠ 上面两个 #b8791f / #1f8f6d 是**语义色**不是灰阶，且都 ≥ 4.5:1 （对 --bg #f4f6fb 分别约 4.9:1 / 4.6:1）。铁律二禁的是「硬编码灰色」， 语义色必须固定才能跨主题保持含义，夜间主题下由下方覆盖项接管。 */ :root[data-theme="dark"] .v797-pomo[data-v797-pomo-state="paused"] .v797-pomo-state, :root[data-theme="dark"] .v797-pomo[data-v797-pomo-state="pending_confirm"] .v797-pomo-state { color: var(--pomo-warn); } :root[data-theme="dark"] .v797-pomo[data-v797-pomo-state="rest"] .v797-pomo-state { color: var(--pomo-rest); } .v797-pomo-state { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; letter-spacing: .3px; margin-bottom: 10px; } /* 状态点：四态的第二重编码（不依赖颜色单独承载信息） */ .v797-pomo-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: currentColor; } .v797-pomo[data-v797-pomo-state="running"] .v797-pomo-dot { animation: v797-breathe 2.4s ease-in-out infinite; } @keyframes v797-breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } } .v797-pomo[data-v797-pomo-state="paused"] .v797-pomo-dot, .v797-pomo[data-v797-pomo-state="pending_confirm"] .v797-pomo-dot { border-radius: 2px; } .v797-pomo[data-v797-pomo-state="rest"] .v797-pomo-dot { border-radius: 2px; transform: rotate(45deg); } /* ── 今日概览：三格数字，放计时环上方 ── */ .v797-today { display: flex; gap: 8px; justify-content: center; margin-bottom: 14px; flex-wrap: wrap; } .v797-today-cell { flex: 1 1 88px; max-width: 132px; min-width: 76px; padding: 9px 6px; border-radius: var(--r-sm); background: var(--bg2); border: 1px solid var(--line); } .v797-today-num { display: block; font-size: 19px; font-weight: 700; color: var(--tx); line-height: 1.25; font-variant-numeric: tabular-nums; } .v797-today-lab { display: block; margin-top: 2px; font-size: 11.5px; color: var(--tx3); } /* ── 巨型计时环 ── */ .v797-pomo-ring { margin: 4px 0 16px; position: relative; display: inline-block; } .v797-ring { display: block; margin: 0 auto; } /* 最后 10 秒的强调色：给环加一圈发光 + 时间文本变色。 ⚠ 用 CSS 变量 --pri 派生，不写死颜色；三套主题各自生效。 */ .v797-ring.is-urgent .v797-ring-time { fill: var(--pomo-urgent, #d9534f); } .v797-ring.is-urgent .v797-ring-arc { filter: drop-shadow(0 0 5px rgba(217, 83, 79, .55)); } /* 环形轨道上的刻度点：纯装饰，给大空环一点密度感 */ .v797-ring-tick { stroke: var(--line); stroke-width: 1.5; } .v797-ring-sub { font-size: 10.5px; } /* ── 档位 chip（横向可滚动，8 个自定义档位不换行挤成一坨）── */ .v797-chips { display: flex; gap: 7px; margin-bottom: 12px; padding: 2px 1px 5px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .v797-chips::-webkit-scrollbar { height: 4px; } .v797-chips::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; } .v797-chip { flex: 0 0 auto; padding: 7px 13px; border-radius: var(--r-pill); cursor: pointer; font-size: 13px; white-space: nowrap; border: 1px solid var(--line); background: var(--bg2); color: var(--tx2); transition: transform .12s ease; } .v797-chip:active { transform: scale(.96); } .v797-chip.on { background: var(--pri); color: #fff; border-color: var(--pri); font-weight: 600; } /* chip 内的数字与标签分两行（小屏上 8 个 chip 才放得下） */ .v797-chip-num { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; } .v797-chip-lab { display: block; font-size: 10.5px; opacity: .82; line-height: 1.3; } /* 「自定义」入口：虚线边，和真档位区分（它不是档位，是入口） */ .v797-chip-add { border-style: dashed; color: var(--tx3); display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; } /* ── 标签选择（点选式，比文本框好用在「统计要按标签分」）── */ .v797-tagbar { display: flex; gap: 6px; justify-content: center; margin-bottom: 12px; flex-wrap: wrap; } .v797-tagchip { padding: 5px 12px; border-radius: var(--r-pill); cursor: pointer; font-size: 12.5px; border: 1px solid var(--line); background: transparent; color: var(--tx3); } .v797-tagchip.on { background: var(--pri-soft); border-color: var(--pri); color: var(--pri); font-weight: 600; } /* 标签用色点与统计页 PALETTE 对齐，让「选了什么」和「统计里什么颜色」一致 */ .v797-tagchip-dot { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 5px; vertical-align: 1px; } /* 自定义标签输入：默认收起，点「其它」才展开 —— 否则永远占一行抢注意力 */ .v797-tag-custom { display: flex; gap: 6px; justify-content: center; margin-bottom: 10px; } .v797-tag-custom[hidden] { display: none; } /* ── 模式切换（正计时 / 倒计时）：分段控件形态 ── */ .v797-seg { display: inline-flex; padding: 3px; gap: 3px; margin-bottom: 14px; border-radius: var(--r-pill); background: var(--bg2); border: 1px solid var(--line); } .v797-seg-btn { padding: 6px 18px; border-radius: var(--r-pill); cursor: pointer; font-size: 13px; border: none; background: transparent; color: var(--tx3); } .v797-seg-btn.on { background: var(--pri); color: #fff; font-weight: 600; } /* ── 主操作按钮：idle 只有一个大「开始」，running 才出次级操作 ── */ /* 🔴 v80b38 修用户实测报的「番茄钟点开始后一直翻页、始终不显示」。 ⚠⚠ 根因（真浏览器 + 真实 tap 实测，smoke/_pomo_mobile.js）： 375×667 下「开始专注」落在 **y=666..719**，而底部 `.tabbar`（z-index:120） 顶部在 **y=658** ⇒ `elementFromPoint` 命中 `BUTTON.tabbtn < NAV#tabbar` ⇒ 点「开始」实际点了底部标签 ⇒ 切页面（用户看到的「翻页」）⇒ 番茄钟从未启动。 ⚠⚠ 为什么单靠「给 #main 加底部 padding」不够（我第一版就是这么失败的）： `.v797-ck-panel`（打卡，pomo.js:3296 拼在番茄钟**之后**）是「一天一屏」24 格， 在窄屏上占掉大半屏 ⇒ 番茄钟的按钮被推到**接近文档末尾**。 `#main` 底部留白只能让内容「能滚过去」，**不能保证它落在标签栏上方**。 ✅ 修法：把「计时圈 + 开始按钮」这一段做成**吸底操作条** —— 滚动时它**吸附在底部标签栏正上方**，任何滚动位置都点得到。 ⚠ 完全不动打卡结构（用户判定打卡组是错的、要给新方案）。 ⚠ 用 `var(--qz-tabbar-h)`（app.js 的 `syncTabbarH()` 用 ResizeObserver 实测写入， 含 iPhone 底部安全区）而不是写死 px。 ⚠ 只在**移动端窄屏**生效：桌面端不需要吸底，且吸底会挡住正常内容。*/ @media (max-width: 760px) { .v797-pomo-acts { position: sticky; /* ⚠ 吸在标签栏**上方**：标签栏高 + 8px 余量 */ bottom: calc(var(--qz-tabbar-h, 66px) + 8px); /* ⚠⚠ z-index 必须是 **130**，不是 30。 实测踩过：设成 30 时，360×640 下按钮仍被 `#seasonFx`（季节装饰层，styles.css:3024 `position:fixed; z-index:30`） 里的 `.sfx-prop` 道具抢走落点 （实测 hitPath = `svg < DIV.sfx-prop < DIV.sfx-dock < DIV#seasonFx`） ⇒ 因为它**同为 30、且在 DOM 里更靠后**，同层级时后者胜出。 ⚠ 层级参照：`.tabbar` = 120（底部标签）⇒ 吸底条要**在它之上**才不会被盖。 ⚠ 整层 `#seasonFx` 自己是 `pointer-events:none`（只有道具可点）， 所以只要**层级压过它**，装饰就点不到、不再抢落点。*/ z-index: 130; background: var(--card); border-radius: var(--r-md); padding: 8px 0; box-shadow: 0 -2px 10px rgba(20, 30, 60, .06); } } .v797-pomo-acts { display: flex; gap: 10px; justify-content: center; align-items: center; } .v797-btn-lg { min-width: 148px; padding: 13px 30px; border-radius: var(--r-pill); cursor: pointer; font-size: 16px; font-weight: 600; border: 1px solid var(--pri); background: var(--pri); color: #fff; } .v797-btn-lg:active { transform: scale(.97); } .v797-btn-lg.is-rest { background: #1f8f6d; border-color: #1f8f6d; } :root[data-theme="dark"] .v797-btn-lg.is-rest { background: #2f9d7c; border-color: #2f9d7c; } .v797-btn-lg.is-danger { background: transparent; color: var(--tx3); border-color: var(--line); min-width: auto; } /* ── 休息提示浮层（fixed → 必须 z-index ≥ 1000）── ⚠ v80.9【P1-6】本层**有意不参与 night-dim 压暗**（z=1040 > 蒙版 95）， 理由与「铁律一」那段注释一致：**不含表单控件**、且是全屏浮层。 请勿当漏网 bug 顺手统一 —— 详见 :470 起的说明。 */ .v797-rest-mask { position: fixed; inset: 0; z-index: 1040; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bg) 72%, transparent); padding: 20px; } /* 🔴🔴 v79.7 批次 7 实测踩坑（截图才发现，DOM 断言全绿）： 上面那条 `display:flex` **覆盖了 HTML `hidden` 属性的默认 display:none** —— 两者特异度相同时，后写的 CSS 赢。 后果：明明加了 hidden 的浮层仍然铺满全屏， ① 视觉上整页被蒙一层 72% 底色（截图里「一切都发白」的真相）； ② **更严重**：它盖在所有元素上面，用户的每一次点击都被它吃掉 —— 「开始专注」按钮点不动，而且不报任何错。 elementFromPoint 在环中心命中的就是这层 mask（验收 V-8 抓到的）。 ⚠ 这类「元素存在但不可交互」的缺陷，静态读代码和 DOM 断言 （hidden 属性在、z-index 对）**全都验不出来**，必须截图 + 命中测试。 修法：`[hidden]` 选择器补一条 display:none， 且**任何**给 .v797-rest-mask 加 display 的规则都必须成对写这条。 */ .v797-rest-mask[hidden] { display: none; } .v797-rest-card { width: 100%; max-width: 330px; padding: 22px 20px 18px; border-radius: var(--r-lg); text-align: center; background: var(--card); border: 1px solid var(--line); box-shadow: 0 12px 40px rgba(0, 0, 0, .18); } .v797-rest-title { font-size: 17px; font-weight: 700; color: var(--tx); margin-bottom: 4px; } .v797-rest-sub { font-size: 12.5px; color: var(--tx3); line-height: 1.7; margin-bottom: 14px; } .v797-rest-ring { margin: 0 auto 14px; } .v797-rest-acts { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; } /* 休息时长快选 */ .v797-rest-opts { display: flex; gap: 6px; justify-content: center; margin-bottom: 14px; flex-wrap: wrap; } /* ── 统计页：分段切换 + 周对比柱状图 + 空态 ── */ .v797-dims { display: flex; gap: 6px; margin-bottom: 14px; } .v797-dim { flex: 1; padding: 8px 0; border-radius: var(--r-sm); cursor: pointer; font-size: 13px; border: 1px solid var(--line); background: var(--bg2); color: var(--tx2); } .v797-dim.on { background: var(--pri); color: #fff; border-color: var(--pri); font-weight: 600; } .v797-stat-grid { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; } .v797-stat-cell { flex: 1 1 90px; padding: 10px 8px; border-radius: var(--r-sm); text-align: center; background: var(--bg2); border: 1px solid var(--line); } .v797-stat-num { display: block; font-size: 18px; font-weight: 700; color: var(--tx); font-variant-numeric: tabular-nums; line-height: 1.3; } .v797-stat-lab { display: block; font-size: 11.5px; color: var(--tx3); margin-top: 2px; } .v797-sec-title { font-size: 13px; font-weight: 600; color: var(--tx2); margin: 16px 0 8px; text-align: left; } .v797-sec-title small { font-weight: 400; color: var(--tx3); font-size: 11.5px; } /* 空态：**不画空坐标系**。画一个坐标系再写「暂无数据」会被误读成 「有数据但都是 0」—— 这是折线图与饼图都踩过的坑（POMO-10）。 这里给的是一句人话 + 一个引导动作。 */ .v797-empty { padding: 26px 18px; text-align: center; border-radius: var(--r-sm); background: var(--bg2); border: 1px dashed var(--line); } .v797-empty-ico { font-size: 26px; line-height: 1; margin-bottom: 10px; opacity: .5; } .v797-empty-txt { color: var(--tx3); font-size: 13px; line-height: 1.8; } .v797-empty-act { margin-top: 12px; } /* ★★ v79.9 批次 8 任务1：空态里的「当前维度：X」与补充说明。 ⚠ 为什么维度名要加粗（b）：它是这一屏里**唯一会随操作变化**的文字。 用户切周/月/年时，如果只有旁边那圈图标变了、维度名没变， 他依然会认为「没反应」——这正是本条反馈的原始症状。 */ .v797-empty-dim [data-v797-empty-dim-label] { color: var(--tx1); font-weight: 700; } .v797-empty-sub { display: inline-block; margin-top: 8px; font-size: 12px; line-height: 1.7; opacity: .82; } /* 本机专注记录条数诊断入口（页脚小字）。 ⚠ 用 cdw- 前缀：本项目有 .warn 撞车把元素挤成竖排的前车之鉴。 ⚠ 等宽数字：条数会变，宽度跳动会让整页在异步回填时轻微抖动。 */ .cdw-diag { margin: 10px 0 4px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: var(--r-sm); background: var(--bg2); color: var(--tx3); font-size: 12px; line-height: 1.6; } .cdw-diag-txt { font-variant-numeric: tabular-nums; word-break: break-all; } /* 柱状图容器：横向可滚动，7 天 × 2 周 = 14 根柱在窄屏放不下 */ .v797-bars-wrap { padding: 10px 8px 4px; border-radius: var(--r-sm); background: var(--bg2); border: 1px solid var(--line); overflow-x: auto; } .v797-bars { display: block; } /* 图例：本周 / 上周两色 */ .v797-legend2 { display: flex; gap: 14px; justify-content: center; margin-top: 8px; } .v797-legend2 span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--tx3); } .v797-legend2 i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; } /* ══════════════════════════════════════════════════════════════════════ v79.9 批次 7 · 统计「三视图融合」的呈现样式 ────────────────────────────────────────────────────────────────────── ⚠⚠ 类名前缀纪律：全部用 pm- / pomo- 前缀，且**不复用** .dot.c-* / .pb-dot。 本项目已有全局 .warn 类名撞车的前车之鉴（两处样式互相污染， 表现为一处改样式另一处跟着变）。已 grep 确认 pm-dot / pm-wd / pomo-week-bar / pomo-day-bar 在全项目均未被占用。 ══════════════════════════════════════════════════════════════════════ */ /* ── 月视图：每天格子里的番茄徽标 ───────────────────────────────────── ⚠ 与 .dots 里的 8px 圆点**同行**排布，所以必须压得比圆点更矮， 否则一行放不下时会撑高 .cal-top，而 .cal-top 在 .cell 里 （.cell 是 min-height:66px 且没有 overflow:hidden）， 撑高会把整个月网格的行高带偏 —— 这是「月视图某天特别高」的成因。*/ .pm-dot { display: inline-flex; align-items: center; gap: 1px; font-size: 9.5px; line-height: 1; font-style: normal; padding: 1px 3px; border-radius: 7px; background: color-mix(in srgb, var(--pri) 14%, transparent); color: var(--pri); white-space: nowrap; flex: none; max-width: 46px; overflow: hidden; } /* legend 里的大号版本（与 .pb-dot.lg 同尺寸惯例） */ .pm-dot.lg { font-size: 11px; padding: 1px 5px; margin-left: 8px; max-width: none; } :root[data-theme="dark"] .pm-dot { background: color-mix(in srgb, var(--pri) 22%, transparent); } /* ── 周视图：周统计条 ─────────────────────────────────────────────── 只压顶部一条（与 practiceBar / memoSpansBar 同惯例）， 不做成浮层 —— 浮层会盖住课表第一行。 */ .pomo-week-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 10px; margin-bottom: 8px; border-radius: var(--r-sm); background: var(--bg2); border: 1px solid var(--line); font-size: 12px; color: var(--tx3); /* 提示文字一律 var(--tx3) */ } .pm-wb-lab { color: var(--tx3); flex: none; } .pm-wb-num { color: var(--tx); font-weight: 600; font-size: 13px; flex: none; } .pm-wb-sec { color: var(--tx3); flex: none; } /* 7 个小柱子：点某一天切到那天 */ .pm-wd-row { display: flex; align-items: flex-end; gap: 3px; margin-left: auto; flex: none; } .pm-wd { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1px; width: 20px; height: 30px; padding: 1px 0; background: transparent; border: 1px solid transparent; border-radius: 4px; cursor: pointer; color: var(--tx3); font-size: 9px; line-height: 1; } .pm-wd:hover { background: var(--bg); border-color: var(--line); } .pm-wd.has { color: var(--pri); } .pm-wd-bar { display: block; width: 8px; min-height: 0; background: var(--line); border-radius: 2px 2px 0 0; } /* ⚠ 柱高用 inline style 由 JS 算（按当周最长一天归一）， 这里只给「有数据」那天的柱子上色。 */ .pm-wd.has .pm-wd-bar { background: var(--pri); } .pm-wd b { font-size: 9px; font-weight: 600; min-height: 9px; } /* ── 日面板：当日统计行 ───────────────────────────────────────────── */ .pomo-day-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 12px; margin: 0 0 8px; border-radius: var(--r-sm); background: var(--bg2); border: 1px solid var(--line); font-size: 12px; } .pm-db-lab { color: var(--tx3); } /* 提示文字一律 var(--tx3) */ .pm-db-tags { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-left: auto; } .pm-db-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-style: normal; padding: 1px 6px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); color: var(--tx3); } .pm-db-chip b { color: var(--tx2); font-weight: 600; } .pm-db-chip.is-more { opacity: .8; } /* ── 视觉修正②：空闲态环「像满圈」的解法在 JS 侧（轨道 10px→3px + 虚线、 不画刻度、副标签写明「选择时长后开始」），这里只补两处残余： ① idle 弧若被画出来也不刺眼； ② 轨道再压一档透明度，确保「空槽」在暗色主题下也不被误读成环。 ⚠ 暗色主题必须单独给 —— --line 在暗色下本身就是浅色， 不加覆盖会变成一圈刺眼白虚线（v79.7 批次 7 踩过的同一个坑）。 ─── */ .v797-pomo[data-v797-pomo-state="idle"] .v797-ring-arc { opacity: .25; } .v797-pomo[data-v797-pomo-state="idle"] .v797-ring-track { opacity: .5; } :root[data-theme="dark"] .v797-pomo[data-v797-pomo-state="idle"] .v797-ring-track { opacity: .42; } /* ── 档位 chip：只属于倒计时，**按需出现**（派单 §二.1，批次 7 返工）── ⚠⚠ 这里曾有一整套 `.v797-chips.is-off` 置灰样式 + `.v797-hint-off` 提示文字样式（用户原话「点倒计时才出现」⇒ 要的是**不出现**，不是置灰）。 已**整段删除**：档位改成 `mode==='down'` 才渲染（pomo.js render）， 非倒计时下这三个类名在 HTML 里**根本不存在**， 留着就是「永远命中不到的死样式」—— 而死样式比没有样式更坏：下一个人看到 `.is-off` 会以为 「哦置灰方案还在」，从而把渲染改回去。 ⇒ 本项目纪律：视觉方案改了，同名的死样式必须一起删， 哪怕它「看起来无害」。删干净是唯一能防回退的做法。 ─────────────────────────────────────────────────────────────────── */ /* ── 视觉修正①：番茄钟视图关掉季节装饰粒子（app.js renderSeasonFx 加 .sfx-focus）。只关粒子层与阵风气泡，保留 .sfx-dock 收纳钮 —— 那是用户可点的功能入口，删掉等于悄悄关功能。 ────────────────── */ #seasonFx.sfx-focus .sfx-p, #seasonFx.sfx-focus .sfx-b { display: none; } /* ── 批次 7 P0-1：统计页一进一出的导航条 ───────────────────────────── 为什么必须写样式（不是「锦上添花」）： 验收标准是 `getBoundingClientRect().width > 0`。 .v797-btn 本身有 padding + border，天然有宽度；但外层 .v797-pomo-nav / .v797-stats-nav 是裸
，默认块级撑满， 若不加 display:flex 居中，按钮会贴左、与 .v797-stats 的 12px 内边距叠在一起，看起来像「和标题挤在一起」。 ⚠ 亮/暗两态都要能看清：全部用项目变量，不写死颜色。 ⚠ 触控目标不小于 34px 高 —— 这是给手机用的。 ──────────────────── */ .v797-pomo-nav { display: flex; justify-content: center; margin: 14px 0 2px; } .v797-to-stats { min-height: 34px; padding: 8px 18px; font-weight: 600; border-color: var(--pri); color: var(--pri); background: transparent; } .v797-stats-nav { display: flex; justify-content: flex-start; margin: 0 0 12px; } .v797-back-timer { min-height: 34px; padding: 7px 14px; color: var(--tx2); } .v797-pomo-nav .v797-to-stats:active, .v797-stats-nav .v797-back-timer:active { transform: scale(.97); } /* 概览页的统计入口卡（app.js renderHome 渲染）—— 与上面同规格， 但整卡可点，所以 cursor + 用户选中态要显式给。 */ .v797-home-stat { display: flex; align-items: center; gap: 10px; width: 100%; margin: 12px 0 0; padding: 11px 13px; text-align: left; border: 1px solid var(--line); border-radius: 11px; background: var(--bg2); color: var(--tx); cursor: pointer; font-size: 14px; } .v797-home-stat:active { transform: scale(.99); } .v797-home-stat-ico { font-size: 18px; line-height: 1; flex: 0 0 auto; } .v797-home-stat-txt { flex: 1 1 auto; min-width: 0; } .v797-home-stat-sub { display: block; color: var(--tx3); font-size: 11.5px; margin-top: 2px; } .v797-home-stat-go { flex: 0 0 auto; color: var(--tx3); font-size: 15px; } /* ══════════════════════════════════════════════════════════════════════ v79.9 批次 8 任务 9/10/11 ⚠ 类名一律 cdw- 前缀（已 grep 确认未占用；同前缀的 cdw-diag 是 pomo.js 的诊断块）。 ══════════════════════════════════════════════════════════════════════ */ /* 日历格 / 周课表头里的倒数日角标。 ⚠ 用 emoji 而非背景色块：日历格宽 1/7 屏，任何色块都会挤掉既有的 .dots 圆点与课程信息；emoji 是零布局成本的。 */ .cdw-dayIcon { font-style: normal; font-size: 11px; line-height: 1; margin-left: 1px; cursor: pointer; position: relative; top: 1px; } .cdw-dayIcon-more { font-size: 9.5px; opacity: .8; } /* 悬停放大一点：可点的东西必须看起来可点。 ⚠ 只改 transform 不改 width/height —— 改尺寸会把整个 .dots 行撑开。 */ .cdw-dayIcon:hover { transform: scale(1.28); } /* 图例里的样例不可点（只有日期里的角标可点），去掉手型与放大 */ .cdw-dayIcon.lg { cursor: default; margin: 0 3px 0 8px; } .cdw-dayIcon.lg:hover { transform: none; } /* 点角标弹出的说明层内容 */ .cdw-explain { padding: 4px 2px 2px; } .cdw-exRow { display: flex; align-items: flex-start; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line); } .cdw-exRow:last-child { border-bottom: 0; } .cdw-exIcon { font-size: 22px; line-height: 1.2; flex: 0 0 auto; } .cdw-exBody { flex: 1 1 auto; min-width: 0; } /* ★ 名字用 --tx（正文色）而不是 --tx3（弱化色）： 规格原话「说明是四六级考试，就要说明是四六级考试」—— 名字是这条说明的主体，不能弱化成灰色小字。 */ .cdw-exName { display: block; color: var(--tx); font-size: 15px; font-weight: 600; word-break: break-word; line-height: 1.35; } .cdw-exType { display: inline-block; margin-top: 3px; padding: 1px 6px; border-radius: 6px; background: var(--bg2); border: 1px solid var(--line); color: var(--tx2); font-size: 11.5px; } .cdw-exMeta { margin-top: 5px; color: var(--tx3); font-size: 12px; font-variant-numeric: tabular-nums; } /* 2/29 → 2/28 的告知：不能静默，必须显式一句话 */ .cdw-exShift { margin-top: 4px; padding: 4px 7px; border-radius: 7px; background: rgba(240, 145, 58, .12); color: var(--tx2); font-size: 12px; } /* 周课表头的农历行（任务 11 开关开时） */ .wv-lunar { display: block; width: 100%; text-align: center; color: var(--tx3); font-size: 10.5px; line-height: 1.2; margin-top: 1px; font-variant-numeric: tabular-nums; } /* ══════════════════════════════════════════════════════════════════════ ★ v79.9 批次 8【B】：二次确认弹层 / 撤销条 / 兜底提示 ────────────────────────────────────────────────────────────────────── 三个类都是本轮新增，cdw- 前缀已 grep 确认未被占用。 ⚠ 全部用项目变量（--bg/--card/--line/--tx/--pri），不写死颜色 —— 夜间模式自动跟随，这是批次 3 定的规矩。 */ /* ① 确认弹层的正文（askConfirm 把 \n 拆成多个
， 绕开「部分 WebView 里 \n 不换行」的问题） */ .cdw-ask-txt { font-size: 14.5px; line-height: 1.72; color: var(--tx2); word-break: break-word; } /* ⚠ 危险操作（删除）时让正文更醒目一点：不是加红字， 而是整体提亮 + 左侧一条危险色边 —— 夜里红色正文很刺眼。 */ .modal .cdw-ask-txt { border-left: 3px solid var(--line); padding-left: 10px; } .btn.danger { border-color: #d9534f; color: #d9534f; } :root[data-theme="dark"] .btn.danger { border-color: #e2685f; color: #e2685f; } /* ② 撤销条：fixed 底部居中，z-index 必须高于吉祥物（31）与 mchat（60）， 但低于模态弹层 —— 模态是"必须先处理"的层级。 */ .cdw-undo-bar { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 90; display: flex; align-items: center; gap: 12px; max-width: min(92vw, 420px); padding: 10px 12px 10px 15px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(20, 30, 60, .22); animation: cdwUndoIn .18s ease-out; } :root[data-theme="dark"] .cdw-undo-bar { box-shadow: 0 10px 30px rgba(0, 0, 0, .5); } @keyframes cdwUndoIn { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } .cdw-undo-txt { flex: 1 1 auto; min-width: 0; color: var(--tx); font-size: 13.5px; line-height: 1.5; word-break: break-word; } .cdw-undo-btn { flex: 0 0 auto; padding: 6px 13px; border-radius: 8px; border: 1px solid var(--pri); background: transparent; color: var(--pri); font-size: 13px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; } .cdw-undo-btn:hover { background: var(--pri-soft); } .cdw-undo-btn:active { transform: scale(.96); } /* ③ toast 桥失效时的第三级兜底（memo.js 的 toastMsg）。 平时**永远看不见** —— 只有 QZ79.toast 不在时才会出现。 宁可丑，也不要"点了没反应"。 */ .cdw-fallback-toast { position: fixed; left: 50%; top: calc(64px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 95; max-width: min(90vw, 400px); padding: 9px 15px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(20, 30, 60, .2); color: var(--tx); font-size: 13.5px; line-height: 1.5; text-align: center; } .cdw-fallback-toast.is-err { border-color: #d9534f; color: #d9534f; } :root[data-theme="dark"] .cdw-fallback-toast { box-shadow: 0 8px 24px rgba(0, 0, 0, .5); } :root[data-theme="dark"] .cdw-fallback-toast.is-err { border-color: #e2685f; color: #e2685f; } /* ④ 🔴 v79.9 批次 8【B】实测抓到的第 4 个缺陷：右下角吉祥物**遮挡**删除按钮。 ──────────────────────────────────────────────────────────────────── 症状（实测 tmp/_b_memo_before.txt / _b_memo_after.txt 的 P7）： 列表变长后，倒数几行的 ✕ 落点变成 `IMG.mb-face`，EVT_REACHED=0 —— 按钮在屏幕上、看得见，却被 fixed 浮层压住，用户点不到。 ⚠⚠⚠ 我**第一版修法方向是错的**，这里把踩坑过程留档，别再犯第二遍： 第一版给 `.view[data-view="memo"] .v797-wrap` 加 `padding-bottom: 128px`， 实测 `paddingBottom=128px` **确实生效**，但落点仍是 `IMG.mb-face`。 —— 错在**没量几何就动手**：`padding-bottom` 加的是「内容**下方**的留白」， 而列表是自然流式排布、**内容整体位置不变** ⇒ 留白再多也压不住它。 更关键的是实测 `.v797-wrap` 的 `scrollHeight == clientHeight == 777` ⇒ **wrap 根本不是滚动容器**，留白连"滚到底时能看全"的效果都没有。 ⚠ 为什么"底部留白"这个思路**原理上就不成立**（不是数值不够，是方向错）： 吉祥物是 `position: fixed; right:10px; bottom:126px`（≤760px 断点）， 视口 932px 高时它占 y=648~806 —— 那是**视口中间偏下**的一条**横带**。 页面滚动时，**任意一行**都会依次穿过这条横带 ⇒ 竖直方向留白只能保证"最后一行不落在带子里"， 用户往上滚一点、第二行就又进去了。**根治必须横向分离。** ⇒ 修法：把列表项的**删除按钮横向让出**吉祥物可点区块的宽度。 ⚠ 为什么让出的是 52px 而不是实测看到的 120px： 吉祥物容器 `getBoundingClientRect()` 实测 w=120，但那是 `.mb-bubble`（**opacity:0 / pointer-events:none**）在**撑容器**。 真正能吃到点击的只有 `.mb-body`（52×52）与 `.mb-chat`（34×34）—— 透明容器不参与命中，`elementFromPoint` 实测返回的是 `IMG.mb-face` 而不是 `DIV.mascot-buddy`，这本身就是"容器不吃点击"的直接证据。 ⇒ 按最宽的可点子块 mb-body 算：**52px + 8px 间隙 = 60px**。 ⚠ 为什么给 `.v797-mi` 而不是 `.v797-list`： `.v797-list` 上加会让 `