diff --git a/.agent-worklog.md b/.agent-worklog.md new file mode 100644 index 0000000..3891bf0 --- /dev/null +++ b/.agent-worklog.md @@ -0,0 +1,76 @@ +# Agent Work Log — Air Theme + +## 2026-07-17: Code blocks in lists + +### Problem +Code blocks inside lists (```` ``` ````) were not getting the theme's code block background +(`#1e1e1e` dark, `#d0d0d0` light). Obsidian uses different classes for code block lines +inside lists: +- `HyperMD-codeblock-begin`, `HyperMD-codeblock-bg`, `HyperMD-codeblock-end` (NOT `.HyperMD-codeblock`) +- `.HyperMD-list-line` for begin lines (has bullet) +- `.HyperMD-list-line-nobullet` for bg/end lines (no bullet) + +### Root cause +The original selector `.HyperMD-codeblock` only matched non-list code blocks. The gradient +overrides used `.HyperMD-codeblock-begin.HyperMD-list-line-1/2/3` — classes that do NOT +exist in Obsidian's CM6 (depth is not encoded as a CSS class). + +### Solution + +**Base rule (applies to ALL code block variants):** +`.theme-dark [class*="HyperMD-codeblock"] { background: #1e1e1e; ... }` +— uses attribute-contains selector so `-begin`, `-bg`, `-end` all inherit. + +**Gradient overrides for list code blocks (more specific → override base):** + +Bg/end lines (nobullet) — detect depth from number of `.cm-hmd-list-indent` children: +- `[class*="HyperMD-codeblock"][class*="HyperMD-list-line-nobullet"]` → level 1 +- `:has(> .cm-hmd-list-indent:nth-child(2))` → level 2 +- `:has(> .cm-hmd-list-indent:nth-child(3))` → level 3 + +Begin lines (has bullet) — detect depth from `.cm-hmd-list-indent` adjacency: +- `:not(:has(> .cm-hmd-list-indent))` → level 1 (offset = `1.2em` bullet width) +- `:has(> .cm-hmd-list-indent)` → level 2 (offset = `indent + 1.2em`) +- `:has(> .cm-hmd-list-indent + .cm-hmd-list-indent)` → level 3 (offset = `2*indent + 1.2em`) + +**Why `+` not `:nth-child` for begin lines:** begin lines have `.cm-formatting-list-ul/ol` +(bullet marker) as a child between indent spans and code content. This breaks the +`:nth-child(N)` pattern because the bullet occupies position 2 instead of an indent span. + +**Cascade behavior:** +- Level 3 begin matches both `:has(.cm-hmd-list-indent)` (level 2 rule) AND + `:has(.cm-hmd-list-indent + .cm-hmd-list-indent)` (level 3 rule). Level 3 rule is + later in the stylesheet → wins. +- Level 2 begin matches only level 2 rule. ✓ +- Level 1 begin matches only `:not(:has(...))` rule. ✓ + +**Border-radius:** +`.cm-content :not([class*="HyperMD-codeblock"]) + [class*="HyperMD-codeblock"]` +— correctly applies to transition from any non-code-block line to any code block variant. + +### DOM structure (verified from Obsidian app.css) +``` +.HyperMD-list-line-nobullet + > .cm-hmd-list-indent ← one per indent level + > .cm-indent-spacing + > .cm-hmd-codeblock +``` +Number of `.cm-hmd-list-indent` children = nesting depth (0 for level 1, 1 for level 2, etc.) + +### Gotcha +- **`HyperMD-list-line-1/2/3` DO exist** on begin lines — contrary to earlier analysis. The + Obsidian app.css doesn't reference them but CM6 generates them at runtime. +- **Bg/end lines DON'T have `.cm-hmd-list-indent` children** — `:has()` depth detection + only works on begin lines. Use `~` sibling combinator to propagate depth from begin to bg/end. +- **ALL code block lines (begin, bg, end) have `HyperMD-codeblock-bg`** class. So + `~ .HyperMD-codeblock-bg` matches begin lines too, OVERRIDING their direct + `.HyperMD-list-line-N` rule (higher specificity). Fix: `~ .HyperMD-codeblock-bg:not(.HyperMD-codeblock-begin)`. +- **`--list-indent-editing` = `0.75em`** at runtime (not `2em`). The fallback `var(--list-indent-editing, 2em)` + would use 2em only if `--list-indent-editing` is undefined. Don't use `--list-indent-editing` for + offset calculation — use actual measured em values. +- Correct offsets measured from DOM: + - Level 1: content starts at 1.67em (23px at 14px font) + - Level 2: content starts at 4.21em (59px at 14px font) + - Level 3: extrapolated to 6.79em (95px at 14px font) +- **`~` combinator** works for bg/end depth propagation because ALL `.cm-line` are flat + siblings under `.cm-content`. Later depth overrides earlier one via CSS cascade. diff --git a/README.md b/README.md index 233be6f..6f384cb 100644 --- a/README.md +++ b/README.md @@ -14,23 +14,23 @@ Choose your favorite **accent color** from *Settings > Options > Appearance > Ac ## Design -- One uniform surface, no pane borders -- Your chosen **accent color** propagates to headings (H1–H6), bold, italic, highlights, tags, active states, checkboxes, and list bullets +- one uniform surface, no pane borders +- your chosen **accent color** propagates to headings (H1–H6), bold, italic, highlights, tags, active states, checkboxes, list bullets and folders - `headings-font.woff2` is the font file used for all headings and can be replaced -- Text: near-white normal, stepped grays for muted/faint -- Zero border-radius throughout -- **Ribbon** hides until hover -- **Properties** and Add property hide until hover -- Active line highlights the line number -- **Tags**: accent text, no background or border -- Supports **dark** and **light** mode +- text: near-white normal, stepped grays for muted/faint +- zero border-radius throughout +- **ribbon** hides until hover +- **Properties** and **Add property** hide until hover +- active line highlights the line number +- **tags**: accent text, no background or border +- supports **code blocks** in lists +- supports **dark** and **light** mode | dark | light | | ---------------------------- | ------------------------------- | | ![dark](assets/air-cyan.png) | ![light](assets/air-purple.png) | -![active](assets/active-line.png) - +![code in lists](assets/inlist-code.png) --- diff --git a/assets/active-line.png b/assets/active-line.png deleted file mode 100644 index 8428eb4..0000000 Binary files a/assets/active-line.png and /dev/null differ diff --git a/assets/inlist-code.png b/assets/inlist-code.png new file mode 100644 index 0000000..bbb84d7 Binary files /dev/null and b/assets/inlist-code.png differ