/*
* Syntax-Highlighting-Farben für den HTML-Code-Editor (highlight.js Tokens).
* Eigenständiges Stylesheet (kein Tailwind-Build) — wird direkt von Propshaft
* ausgeliefert und im Layout via stylesheet_link_tag "highlight" geladen.
* Dark-Mode über die .dark-Klasse am (wie im Rest der App).
*/
/* Editor-Fläche: Code nicht umbrechen, damit Zeilennummern sauber sitzen. */
.code-editor {
white-space: pre;
tab-size: 2;
}
/* Zeilennummern-Gutter (codejar/linenumbers).
* linenumbers.js setzt inline `mix-blend-mode: difference` + `color` = Editor-
* Textfarbe; dadurch werden die Zahlen gegen den Hintergrund invertiert und
* praktisch unsichtbar. Mit !important den Blend-Mode abschalten und eine
* eigene, kontrastreiche Farbe erzwingen (überschreibt die Inline-Styles). */
.codejar-linenumbers {
mix-blend-mode: normal !important;
color: #6b7280 !important; /* gray-500 — sichtbar auf hellem Gutter */
}
.dark .codejar-linenumbers {
color: #9ca3af !important; /* gray-400 — sichtbar auf dunklem Gutter */
}
/* Token-Farben — hell (an GitHub angelehnt). */
.hljs-comment,
.hljs-quote { color: #6a737d; font-style: italic; }
.hljs-tag,
.hljs-name { color: #22863a; }
.hljs-attr,
.hljs-attribute { color: #6f42c1; }
.hljs-string { color: #032f62; }
.hljs-meta { color: #6a737d; }
.hljs-symbol,
.hljs-number { color: #005cc5; }
/* Token-Farben — dunkel. */
.dark .hljs-comment,
.dark .hljs-quote { color: #8b949e; }
.dark .hljs-tag,
.dark .hljs-name { color: #7ee787; }
.dark .hljs-attr,
.dark .hljs-attribute { color: #79c0ff; }
.dark .hljs-string { color: #a5d6ff; }
.dark .hljs-meta { color: #8b949e; }
.dark .hljs-symbol,
.dark .hljs-number { color: #79c0ff; }