Live preview callout structure: .cm-embed-block.cm-callout > .markdown-rendered > .callout
Both .cm-callout and .callout were getting border-inline-start → double border.
Now .cm-callout is transparent with no border, only .callout gets the left border.
Obsidian applies inline styles (text-indent: -20px; padding-inline-start: 20px)
to .HyperMD-quote via CodeMirror. These inline styles have highest specificity
and cannot be overridden by CSS without !important.
Workaround: remove our padding/text-indent attempts on .HyperMD-quote, instead
add margin-left on .cm-quote child spans to create border-to-text spacing.
- Remove all callout/blockquote/icon element styling from _editor.scss
(kept CSS variable definitions only) to eliminate specificity conflicts
- _active-visual-overrides.scss is now the single source of truth
- Add semantic color mappings with --callout-background/--callout-border
for all callout types, targeting both .callout and .cm-line:has()
- Remove padding from .cm-line:has(.callout) — was doubling with
.callout's own padding, causing "four-side spacing" in live preview
- Live preview blockquote: box-shadow→border-inline-start for visual
consistency with reading mode
- Add .cm-callout-icon, .cm-callout-title, .cm-callout-content selectors
alongside .callout-* equivalents so live preview icons render
- Add icon rules to _active-visual-overrides.scss with full specificity
Root cause: --callout-background set on .callout[data-callout] but
background-color applied on .cm-line parent — CSS vars cascade down,
not up. Fixed by applying bg on .callout itself for both views.
- Restore 2px border width for callout + blockquote
- Unify reading + live preview: bg + border on .callout element
- .cm-line:has(.callout) only provides outer spacing (padding)
- Border width: 2px→1px for both callout and blockquote
- Blockquote padding: 2.5rem→1.25rem left, #spacing-4→#spacing-3 vertical
- Live preview callout: add padding-left: 0.75rem for border-text gap
- Split cm-line:has(.callout) from .callout in _active-visual-overrides
to prevent double left-border in live preview
- Reduce callout bg: 16%→12% (dark), 20%→14% (light)
- Add margin-right to .callout-icon for title spacing
- Increase blockquote padding: 2rem→2.5rem
- Use SCSS interpolation for spacing in padding shorthands
Body-prefixed high-specificity selectors were overriding all _editor.scss
changes. Updated to use new variable system:
- blockquote: warm gold border, transparent bg, 2rem padding
- callout: semantic left border + micro-tinted bg per type
- callout title: semantic color from --callout-border
- Add --blockquote-border-color override in theme-dark/light to prevent
green border leak from _base.scss
- Increase callout background opacity: 5%→10% (dark), 6%→12% (light)
- Increase blockquote left padding: 1.5rem→2rem
- Fix callout-icon with flex-shrink:0 and inline-flex to prevent
::before pseudo-element from wrapping to second line
- Reduce icon font-size to 0.9em for better visual fit
