/** * Dark-Mode-Overrides für Fremd-Stylesheets (Ticket 7/8). * * Redactor, RedactorX, CodeMirror und der Color-Picker werden in index.html * direkt aus /public geladen und wissen nichts von MUI. Statt die Vendor-Dateien * zu patchen (was jedes Update überschreibt), liegen die Overrides hier und * hängen ausschliesslich an `[data-theme="dark"]` — dem Attribut, das der * ColorModeProvider auf setzt. Im Light-Modus greift keine einzige Regel * dieser Datei. * * Diese Datei muss in index.html NACH den Vendor-Stylesheets eingebunden sein. * * GRUNDSATZ (entschieden, siehe docs/dark-mode-plan.md:253): * Das Editor-Chrome — Toolbar, Rahmen, Panels, Modals, Statusbar — wird dunkel. * Die SCHREIBFLÄCHE BLEIBT WEISS. Der Inhalt ist Shop-Text, der später auf einer * meist hellen Storefront erscheint; eine dunkle Editorfläche würde die * WYSIWYG-Vorschau unehrlich machen. Die Flächen unter "Inhalt" weiter unten * sind deshalb bewusst hart gesetzt und dürfen nicht auf Tokens gezogen werden. */ [data-theme="dark"] { /* Chrome: Toolbar- und Container-Flächen, eine Stufe über der Seite */ --ly-ed-chrome: #252525; --ly-ed-chrome-hover: #323232; /* Schwebende Flächen: Dropdowns, Modals, Popups */ --ly-ed-surface: #1e1e1e; --ly-ed-text: rgba(255, 255, 255, 0.92); --ly-ed-text-muted: rgba(255, 255, 255, 0.6); --ly-ed-border: rgba(255, 255, 255, 0.12); --ly-ed-border-strong: rgba(255, 255, 255, 0.3); /* Akzent — im Light nutzt index.css hier #1a237e, das ist auf dunklem Grund zu dunkel (1.5:1) */ --ly-ed-accent: #8b74f0; /* Inhaltsfläche: bewusst hell, in BEIDEN Modi identisch */ --ly-ed-content-bg: #fff; --ly-ed-content-text: #333; } /* ------------------------------------------------------------------ * * Redactor (v1) * ------------------------------------------------------------------ */ [data-theme="dark"] .redactor-box, [data-theme="dark"] .redactor-box.redactor-styles-on { background: var(--ly-ed-chrome); } /* Die Rahmenregeln in index.css stehen mit !important, deshalb auch hier */ [data-theme="dark"] .ly-editor._redactor .redactor-box, [data-theme="dark"] .ly-editor._redactor textarea, [data-theme="dark"] .ly-editor._redactorx textarea { border-color: var(--ly-ed-border) !important; } [data-theme="dark"] .ly-editor._redactor:not(.read-only) .redactor-box:hover { border-color: var(--ly-ed-border-strong) !important; } [data-theme="dark"] .redactor-toolbar a, [data-theme="dark"] .redactor-air a { color: var(--ly-ed-text); background: var(--ly-ed-chrome); } [data-theme="dark"] .redactor-toolbar a.redactor-button-active { background: var(--ly-ed-chrome-hover); color: var(--ly-ed-text-muted); } [data-theme="dark"] .redactor-toolbar a.redactor-button-disabled, [data-theme="dark"] .redactor-air a.redactor-button-disabled { color: var(--ly-ed-text-muted); } [data-theme="dark"] .redactor-statusbar { background: var(--ly-ed-chrome); border-top: 1px solid var(--ly-ed-border); } [data-theme="dark"] .redactor-statusbar li, [data-theme="dark"] .redactor-statusbar a { color: var(--ly-ed-text-muted); } [data-theme="dark"] .redactor-dropdown { background-color: var(--ly-ed-surface); color: var(--ly-ed-text); border: 1px solid var(--ly-ed-border); } [data-theme="dark"] .redactor-dropdown a { color: var(--ly-ed-text); } [data-theme="dark"] .redactor-dropdown a:hover { background-color: var(--ly-ed-chrome-hover); } [data-theme="dark"] .redactor-modal { background: var(--ly-ed-surface); color: var(--ly-ed-text); } [data-theme="dark"] .redactor-modal input, [data-theme="dark"] .redactor-modal textarea, [data-theme="dark"] .redactor-modal select { background: var(--ly-ed-chrome); color: var(--ly-ed-text); border-color: var(--ly-ed-border); } /* index.css färbt Header, Tabs und Buttons der Modals mit #1a237e */ [data-theme="dark"] .redactor-modal-box .redactor-modal-header, [data-theme="dark"] .redactor-modal-tabs a:hover, [data-theme="dark"] .redactor-modal-tabs a.active, [data-theme="dark"] .ly-editor._redactor .redactor-modal button { color: var(--ly-ed-accent); } [data-theme="dark"] .ly-editor._redactor .redactor-modal button { border-color: var(--ly-ed-accent); } [data-theme="dark"] .ly-editor._redactor #redactor-overlay { background-color: rgba(0, 0, 0, 0.5); } [data-theme="dark"] .redactor-placeholder:before, [data-theme="dark"] .redactor-in figcaption[placeholder]:empty:before { color: rgba(0, 0, 0, 0.4); } /* ------------------------------------------------------------------ * * RedactorX (v2, Feature-Flag editor_v2) * ------------------------------------------------------------------ */ [data-theme="dark"] .rx-container { background-color: var(--ly-ed-chrome); border-color: var(--ly-ed-border); } [data-theme="dark"] .rx-toolbar-container.is-rx-toolbar, [data-theme="dark"] .rx-toolbar, [data-theme="dark"] .rx-statusbar { background-color: var(--ly-ed-chrome); } [data-theme="dark"] .rx-button-control { color: var(--ly-ed-text-muted); } [data-theme="dark"] .rx-button-control:hover { color: var(--ly-ed-text); background-color: var(--ly-ed-chrome-hover); } /** * Die Toolbar-Icons sind SVGs mit festem `fill` (redactorx.css:731), nicht * `currentColor` — eine `color`-Regel allein lässt sie unsichtbar. Alle vier * Zustände müssen mit, sonst kippen hover und toggled auf helle Flächen mit * dunklen Icons zurück. */ [data-theme="dark"] .rx-button-toolbar, [data-theme="dark"] .rx-button-topbar { color: var(--ly-ed-text); } [data-theme="dark"] .rx-button-toolbar svg, [data-theme="dark"] .rx-button-topbar svg { fill: var(--ly-ed-text); } [data-theme="dark"] .rx-button-toolbar:hover, [data-theme="dark"] .rx-button-topbar:hover, [data-theme="dark"] .rx-button-toolbar.toggled, [data-theme="dark"] .rx-button-topbar.toggled { background-color: var(--ly-ed-chrome-hover); color: var(--ly-ed-text); } [data-theme="dark"] .rx-button-toolbar:hover svg, [data-theme="dark"] .rx-button-topbar:hover svg, [data-theme="dark"] .rx-button-toolbar.toggled svg, [data-theme="dark"] .rx-button-topbar.toggled svg { fill: var(--ly-ed-text); } [data-theme="dark"] .rx-button-toolbar.active .rx-button-icon, [data-theme="dark"] .rx-button-topbar.active .rx-button-icon { border-color: var(--ly-ed-border); background-color: var(--ly-ed-chrome-hover); } [data-theme="dark"] .rx-button-toolbar.disable, [data-theme="dark"] .rx-button-toolbar.disable:hover, [data-theme="dark"] .rx-button-topbar.disable, [data-theme="dark"] .rx-button-topbar.disable:hover { color: var(--ly-ed-text-muted) !important; } [data-theme="dark"] .rx-button-toolbar.disable svg, [data-theme="dark"] .rx-button-topbar.disable svg { fill: var(--ly-ed-text-muted) !important; } [data-theme="dark"] .rx-button-context svg { fill: var(--ly-ed-text); } [data-theme="dark"] .rx-popup, [data-theme="dark"] .rx-dropdown { background-color: var(--ly-ed-surface); color: var(--ly-ed-text); border: 1px solid var(--ly-ed-border); } [data-theme="dark"] .rx-popup-header, [data-theme="dark"] .rx-popup-footer { background-color: var(--ly-ed-chrome); color: var(--ly-ed-text); border-color: var(--ly-ed-border); } [data-theme="dark"] .rx-popup-item, [data-theme="dark"] .rx-popup-header-item { color: var(--ly-ed-text); } /* Die Beschriftungen der Addbar-Kacheln haben eine eigene Klasse und werden von der Regel auf .rx-popup-item nicht erfasst */ [data-theme="dark"] .rx-popup-item-title, [data-theme="dark"] .rx-popup-item-text, [data-theme="dark"] .rx-popup-title { color: var(--ly-ed-text-muted); } [data-theme="dark"] .rx-popup-item:hover .rx-popup-item-title, [data-theme="dark"] .rx-popup-item:hover .rx-popup-item-text { color: var(--ly-ed-text); } [data-theme="dark"] .rx-popup-item svg, [data-theme="dark"] .rx-popup-header-item svg { fill: var(--ly-ed-text); } [data-theme="dark"] .rx-popup-item:hover, [data-theme="dark"] .rx-popup-header-item:hover { background-color: var(--ly-ed-chrome-hover); } [data-theme="dark"] .rx-form input, [data-theme="dark"] .rx-form textarea, [data-theme="dark"] .rx-form select, [data-theme="dark"] .rx-popup-fontcolor .tab input { background-color: var(--ly-ed-chrome); color: var(--ly-ed-text); border-color: var(--ly-ed-border) !important; } [data-theme="dark"] .rx-placeholder:before { color: rgba(0, 11, 29, 0.4); } /* index.css setzt die Textfarbe der Source-/Target-Container */ [data-theme="dark"] .ly-richtext-editor-source .ly-editor._redactorx .rx-container { color: var(--ly-ed-text-muted); } [data-theme="dark"] .ly-richtext-editor-target .ly-editor._redactorx .rx-container { color: var(--ly-ed-text); } /* ------------------------------------------------------------------ * * Inhalt — bleibt in beiden Modi hell. * Diese Regeln sind die eigentliche Umsetzung der Entscheidung: sie nageln * die Schreibfläche fest, damit sie von den Chrome-Regeln oben und von * künftiger Vererbung nicht erwischt wird. * ------------------------------------------------------------------ */ [data-theme="dark"] .redactor-styles, [data-theme="dark"] .rx-content, [data-theme="dark"] .rx-editor { background-color: var(--ly-ed-content-bg); color: var(--ly-ed-content-text); } [data-theme="dark"] .rx-content h1, [data-theme="dark"] .rx-content h2, [data-theme="dark"] .rx-content h3, [data-theme="dark"] .rx-content h4, [data-theme="dark"] .rx-content h5, [data-theme="dark"] .rx-content h6 { color: #000b1d; } /* Read-only behält seine zurückgesetzte helle Fläche */ [data-theme="dark"] .ly-editor.read-only .redactor-styles { background-color: #f2f2f2; } /* Die Code-Ansicht ist im Vendor-CSS bereits dunkel (#252525) und bleibt es */ /* ------------------------------------------------------------------ * * Color-Picker — steuert sich über eigene Variablen * ------------------------------------------------------------------ */ [data-theme="dark"] .color-picker, [data-theme="dark"] .color-picker__dialog { --color-color-picker__controls: #fff; --stroke-color-picker__controls: #fff; --shadow-color-picker__dialog: 1px 3px 6px rgba(0, 0, 0, 0.8); background-color: var(--ly-ed-surface); color: var(--ly-ed-text); border-color: var(--ly-ed-border); } [data-theme="dark"] .color-picker input, [data-theme="dark"] .color-picker__dialog input { background-color: var(--ly-ed-chrome); color: var(--ly-ed-text); border-color: var(--ly-ed-border); }