fix(projects): style the diff panel — 52 classes had no CSS at all
The project-detail Git panel's diff viewer emitted 52 class names that style.css had no rule for, so it rendered as browser defaults: Working / Staged / the base picker / ✕ Close as native OS buttons on a dark warm panel, and a diff body with no monospace font and no +/- colouring at all. The user's screenshot showed the toolbar; the audit (literal AND template-literal class names) found the rest. Adds the B1 diff-viewer block and the proj-*/tl-* rules, all on :root tokens, following the file's existing two-button-role doctrine. Also fixes, in passing: - .df-commit-btn hardcoded #1a1712 where THEME.md mandates var(--on-accent) for text on a gold background - .proj-pr-hidden — a "hidden" state class with no rule, so it never hid - .proj-dot-stuck — ClaudeStatus has 'stuck' but only four of the five dots were styled, so a stuck session was the same colour as "no signal" - --warn-wash: a derived token for the deletion wash, documented in THEME.md, so a re-skin moves the wash with --warn Notable decisions, recorded in the CSS comments: - .proj-tl-container gets NO height cap. Every capping mechanism tried (overflow-y:auto, mask-image, an ::after fade, a :has() row gate) cost more than the height it saved — the 5s wipe-and-re-append render loop cannot host a scroll position, and mask-clip:border-box ate the well's own border. It grew freely before this CSS existed; maxEvents=50 bounds it. - The horizontal scroller stays per-hunk on .df-lines. Hoisting it to .df-file would drag the file path out of view when you scroll right. - .df-file > .df-file-header keeps a smaller unscoped padding: the terminal page's .approval-preview also calls renderDiffFile(). Verified against the real DOM in a browser at 900px and 390x844 via a throwaway harness (removed before commit), not from the CSS text alone. typecheck exit 0; 2216 unit + 27 e2e tests pass.
This commit is contained in:
@@ -22,6 +22,7 @@
|
||||
| `--accent-2` | `#c9892f` | 深金(渐变 / hover) |
|
||||
| `--accent-soft` | `rgba(227,166,74,.15)` | 强调色半透明(选中底、chip、聚焦光晕) |
|
||||
| `--on-accent` | `#1a1305` | **金色底上的文字色**(深墨,保证对比度——金底配白字会糊) |
|
||||
| `--warn-wash` | `color-mix(in srgb, var(--warn) 24%, transparent)` | `--warn` 的 24% 半透明:diff 删除行底色。**由 `--warn` 派生**,换肤自动跟随,勿改写成 rgba 字面量(`--warn` 见 `:root` 的 Git 面板语义) |
|
||||
|
||||
## 状态色(语义独立,勿与强调色混用)
|
||||
|
||||
@@ -33,7 +34,7 @@
|
||||
| `--amber` | `#f5b14c` | 连接中 connecting |
|
||||
| `--red` | `#ff6b6b` | 断开 / 出错 disconnected / error |
|
||||
|
||||
> Project 面板里的 session 状态语义(v0.6):`working = --accent 金` · `waiting = --amber 琥珀(闪)` · `idle = 中性灰 #8b8a86` · `dirty = 暖琥珀`。
|
||||
> Project 面板里的 session 状态语义(v0.6):`working = --accent 金` · `waiting = --amber 琥珀(闪)` · `stuck = --warn` · `idle = 中性灰 #8b8a86` · `dirty = 暖琥珀`。
|
||||
|
||||
## 接入约定(改主题只改这里)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user