builderadmin
/
NoteDiscovery
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

try to align

This commit is contained in:
Gamosoft 2026-05-06 15:34:16 +02:00
parent 7c489641f6
commit d67e2d458a
3 changed files with 50 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/index.html
View File

@ -703,17 +703,34 @@
to { opacity: 1; }
}
/* Syntax highlight colors using theme variables */
.syntax-overlay .md-heading { color: var(--accent-primary); font-weight: 600; }
.syntax-overlay .md-bold { color: var(--text-primary); font-weight: 700; }
.syntax-overlay .md-italic { color: var(--text-secondary); font-style: italic; }
.syntax-overlay .md-code { color: var(--accent-secondary, var(--accent-primary)); background: var(--bg-tertiary); border-radius: 2px; }
.syntax-overlay .md-link { color: var(--link-color, var(--accent-primary)); }
.syntax-overlay .md-link-url { color: var(--text-tertiary); }
.syntax-overlay .md-list { color: var(--accent-primary); }
.syntax-overlay .md-blockquote { color: var(--text-tertiary); font-style: italic; }
.syntax-overlay .md-hr { color: var(--border-primary); }
.syntax-overlay .md-wikilink { color: var(--link-internal, var(--accent-primary)); }
/*
* Syntax highlight colors — COLOR-ONLY (issue #212).
*
* Why no font-weight or font-style?
* The overlay sits on top of a transparent <textarea>. Macs render
* bold/italic monospace glyphs (Monaco, Menlo) with slightly
* different advance widths than regular glyphs, which shifts the
* overlay characters out of alignment with the textarea caret.
* Color-only highlighting (Cursor / One Dark Pro / Monokai style)
* keeps every glyph at the same width and the caret perfectly
* aligned on every platform.
*
* Each token uses a dedicated CSS variable (--syntax-*) with a
* fallback chained to an existing semantic theme token, so all
* existing themes keep working with sensible defaults; individual
* themes can override --syntax-bold/--syntax-italic/--syntax-code
* for fine-tuning.
*/
.syntax-overlay .md-heading { color: var(--syntax-heading, var(--accent-primary)); }
.syntax-overlay .md-bold { color: var(--syntax-bold, var(--warning)); }
.syntax-overlay .md-italic { color: var(--syntax-italic, var(--accent-primary)); }
.syntax-overlay .md-code { color: var(--syntax-code, var(--error)); background: var(--bg-tertiary); border-radius: 2px; }
.syntax-overlay .md-link { color: var(--syntax-link, var(--link-color, var(--accent-primary))); }
.syntax-overlay .md-link-url { color: var(--text-tertiary); }
.syntax-overlay .md-list { color: var(--syntax-list, var(--accent-primary)); }
.syntax-overlay .md-blockquote{ color: var(--syntax-blockquote, var(--text-tertiary)); }
.syntax-overlay .md-hr { color: var(--border-primary); }
.syntax-overlay .md-wikilink { color: var(--syntax-wikilink, var(--link-internal, var(--accent-primary))); }
.syntax-overlay .md-frontmatter { color: var(--text-tertiary); }
.syntax-overlay .md-codeblock { color: var(--text-secondary); background: var(--bg-tertiary); }

10
themes/dark.css
View File

@ -27,6 +27,16 @@
--error: #f87171;
--warning: #fbbf24;
/* Markdown syntax-highlight colors (color-only, no font-weight / italic) */
--syntax-heading: #60a5fa; /* blue */
--syntax-bold: #fbbf24; /* amber/yellow — Cursor-style */
--syntax-italic: #c084fc; /* violet */
--syntax-code: #f87171; /* salmon red */
--syntax-link: #60a5fa;
--syntax-list: #f59e0b; /* warm orange — stands out at line start */
--syntax-wikilink:#a5b4fc; /* indigo */
--syntax-blockquote: #9ca3af; /* muted gray */
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);

10
themes/light.css
View File

@ -27,6 +27,16 @@
--error: #ef4444;
--warning: #f59e0b;
/* Markdown syntax-highlight colors (color-only, no font-weight / italic) */
--syntax-heading: #2563eb; /* deep blue */
--syntax-bold: #b45309; /* deep amber — readable on white */
--syntax-italic: #7c3aed; /* deep violet */
--syntax-code: #be123c; /* crimson */
--syntax-link: #2563eb;
--syntax-list: #c2410c; /* burnt orange */
--syntax-wikilink:#4f46e5; /* indigo */
--syntax-blockquote: #6b7280; /* slate */
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);