/* design-system: migriert */ /* ========================================================================== Plugin Marketplace (AP6a Grundgerüst + AP6b Feinschliff) — Vollbild-Modal- Styling. Baut bewusst auf den bestehenden Primitiven aus style.css auf statt ein zweites System daneben aufzumachen: .modal-overlay/.modal-dialog (Modal- Grundgerüst), .settings-input (Formularfelder), .btn-primary/.btn-danger/ .icon-btn (Aktionen), .badge/.list-empty/.page-title/.page-subtitle, .section-toolbar (Filterzeile), .settings-nav/.tab-btn (Reiter), .settings-toggle-row (Checkbox-Zeile). Farben, Abstände, Radien, Schrift und Bewegung kommen ausschließlich aus tokens.css. AP6c (Schließen-Fix): Sichtbarkeit des Overlays läuft über die .is-open-Klasse (siehe .marketplace-modal-overlay unten), nicht über ein Inline-Style im Template -- Details dort und in marketplace.js. AP7 Apple-Design-Plan (Optik-Stufe 4, 2026-10-12): - Auftritt und Abgang gespiegelt. Mit motion.js (window.NCMotion) wächst der Dialog per Feder aus dem Auslöser (transform-origin am Sidebar- Eintrag) und schrumpft beim Schließen auf demselben Weg zurück; die Klasse .nm-motion schaltet dafür die CSS-Keyframes ab. Ohne motion.js laufen die Keyframes aus style.css (nm-dialog-in/-out, nm-scrim-in/-out), ebenfalls mit Ursprung am Auslöser (marketplace.js setzt transform-origin in beiden Fällen). .is-closing hält das Overlay für die Dauer des Abgangs sichtbar, aber inert. - Reduced Motion, Reduced Transparency und mehr Kontrast laufen allein über die Token (--motion-scale, --dur-*, --spring, --material-*, --glass-border, --border-width, --focus-ring-width); hier steht dafür kein eigener Media-Block. - Karten als innere Ebene des Dialogs: --fill-1 statt Glas mit Blur (DESIGNRICHTUNG 2.5: höchstens zwei Ebenen, nie zwei durchlässige Flächen übereinander). Meta-Zeilen in --text-secondary, weil --text-dim auf --fill-1 über --panel-elevated nur 4.34:1 erreicht. - Die Filterzeile bleibt beim Scrollen oben stehen und ist das einzige Material im Dialog (--material-regular-*): die Karten laufen sichtbar darunter durch, statt an einer harten Linie zu enden. - Typografie in rem über die Skala, Satzschreibung statt GROSS (H5), Radien 8/12/16 über --radius-s/-m/-l, Gedrückt-Zustände mit --press-scale. Favoriten-Herz und „Neu“-Badge nehmen den Akzent statt --accent-red/--accent-teal (die sind Aufnahme/Peak bzw. Wellenform vorbehalten, tokens.css). - _marketplace_modal.html ist Golden-Vorlage des C-Clients und bleibt unverändert; alles hier wirkt nur über vorhandene Klassen. ========================================================================== */ /* Reine Sichtbarkeits-Hilfsklasse für Formular-Label, die nur dem Screenreader einen Namen für Suchfeld/Kategorie-Auswahl geben (die Platzhalter/Icons allein reichen nicht als zugänglicher Name). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* AP6c: Sichtbarkeit läuft über diese Klasse statt über ein Inline-Style im Template -- ein von einer restriktiven CSP verworfenes Inline-Style könnte das Overlay sonst dauerhaft sichtbar lassen, ohne dass open() je gelaufen ist. .modal-overlay (style.css) setzt display:flex ohne Bedingung -- diese Regel kommt in der Ladereihenfolge NACH style.css (siehe base.html) und gewinnt bei gleicher Spezifität. */ .marketplace-modal-overlay { display: none; } .marketplace-modal-overlay.is-open, .marketplace-modal-overlay.is-closing { display: flex; } /* Abgang ohne motion.js: gespiegelte Keyframes aus style.css. Während des Abgangs nimmt das Overlay keine Klicks mehr an (zusätzlich inert, siehe marketplace.js). */ .marketplace-modal-overlay.is-closing { pointer-events: none; animation: nm-scrim-out var(--dur-base) var(--ease) forwards; } .marketplace-modal-overlay.is-closing > .marketplace-modal-dialog { animation: nm-dialog-out var(--dur-base) var(--ease) forwards; } /* Mit motion.js führt die Feder, die Keyframes schweigen. */ .marketplace-modal-overlay.nm-motion, .marketplace-modal-overlay.nm-motion > .marketplace-modal-dialog { animation: none; } /* Vollbild-Dialog (Produktentscheidung: kein Slide-in-Panel, keine eigene Seite) — größer als das Einstellungen-Modal, damit das Karten-Raster Platz hat. Fläche, Rand, Radius (--radius-l) und Schatten kommen aus .modal-dialog. dvh, damit die mobile Adressleiste nichts abschneidet. */ .marketplace-modal-dialog { width: 100%; max-width: 1280px; height: 88vh; height: 88dvh; max-height: 88dvh; } /* Fokus liegt beim Öffnen auf dem Dialog-Wurzelelement selbst — gleiches Muster wie beim Einstellungen-Modal (siehe style.css). */ .marketplace-modal-dialog:focus { outline: none; } /* Keine Maske am Körper: eine mask-image macht ihn in Chromium zur Backdrop-Wurzel, und der Weichzeichner der mitlaufenden Filterzeile (unten) bliebe wirkungslos (gemessen: Kartentext darunter gestochen scharf). Oben bildet die Filterzeile als Material die Kante, unten übernimmt ein mitlaufender Verlauf in der Dialogfarbe den weichen Auslauf. Unter mehr Kontrast endet der Inhalt hart (wie --scroll-edge-mask: none in tokens.css). */ .marketplace-modal-body { padding-top: 0; -webkit-mask-image: none; mask-image: none; /* Per Tab fokussierte Karten nicht unter der mitlaufenden Filterzeile verstecken (WCAG 2.4.11): Höhe der Zeile plus ihr Abstand. */ scroll-padding-top: calc(var(--control-h-m) + 2 * var(--space-2) + var(--space-4)); } .marketplace-modal-body::after { content: ""; position: sticky; /* Chromium hält sticky-Elemente innerhalb des Innenabstands; der Körper hat unten --scroll-edge-size Innenabstand (style.css), der Verlauf soll aber bündig an der sichtbaren Unterkante liegen. */ bottom: calc(-1 * var(--scroll-edge-size)); display: block; flex-shrink: 0; /* .modal-body ist ein Flex-Container, sonst schrumpft der Verlauf auf 0 */ height: var(--scroll-edge-size); margin-top: calc(-1 * var(--scroll-edge-size)); background: linear-gradient(to bottom, transparent, var(--panel-elevated)); pointer-events: none; } @media (prefers-contrast: more) { .marketplace-modal-body::after { display: none; } } /* Sidebar-Eintrag ist hier ein