/* custom-select.css — v2 Custom-Select-Panel (Body-appended) Quelle: extrahiert aus app.css ("Custom-Select Panel"-Block). Inhalt 1:1. Klassen-Namespace `app-cs-*`. Panel haengt am Body, KEIN .app-scope-Prefix — es lebt visuell aber im v2-Kontext und wird via JS positioniert. Konsumenten: web/js/components/inputs/custom-select.js (rendert CS-Trigger + CS-Panel an Body); GuestStammdaten-Interessen-Field via `[data-cs-trigger]` (siehe gast.css fuer Trigger-Anpassung). ========================================================================== */ .app-cs-panel { /* Panel haengt am Body, braucht also KEIN .app-scope-Prefix — es lebt visuell aber im v2-Kontext. Klassen-Namespace via `app-cs-*`. */ /* fixed, nicht absolute: die Platzierung kommt aus dem Positionier-SSOT (LoD.positionAtAnchor), der viewport-relativ rechnet — genauso wie getBoundingClientRect() misst. Frueher stand hier `absolute`, und das JS addierte `window.scrollY` auf die gemessenen Werte, um in Dokument- Koordinaten umzurechnen. Beides gehoert zusammen: wer hier auf absolute zurueckdreht, muss die Scroll-Addition wieder einbauen. */ position: fixed; background: var(--color-surface); border: 1px solid var(--lod-gray-200); border-radius: var(--radius-lg); box-shadow: var(--lod-shadow-lg); z-index: var(--z-drawer-modal); min-width: 200px; max-width: calc(100vw - 16px); max-height: 320px; overflow-y: auto; padding: var(--space-1); font-family: var(--lod-font-body); font-size: 13px; } .app-cs-option { display: flex; align-items: center; gap: var(--space-2); padding: 7px var(--space-2-5); border-radius: 5px; cursor: pointer; color: var(--lod-gray-900); user-select: none; } .app-cs-option:hover, .app-cs-option.highlight { background: var(--lod-darkblue-50); } .app-cs-option.selected { background: var(--lod-turquoise-100); color: var(--lod-darkblue); font-weight: 600; } .app-cs-option .check { width: 14px; height: 14px; margin-left: auto; color: var(--lod-turquoise); opacity: 0; } .app-cs-option.selected .check { opacity: 1; } .app-cs-search { border: none; outline: none; width: 100%; padding: var(--space-2) var(--space-2-5); border-bottom: 1px solid var(--lod-gray-100); font-size: 13px; background: transparent; } .app-cs-empty { padding: var(--space-3) var(--space-2-5); font-size: 12px; color: var(--lod-gray-500); text-align: center; } /* ============================================================================ Custom Select (Fluent 2 Dropdown) — Trigger + Panel + Options + Dauer-Grid. aus base.css extrahiert. Klassen-Namespace `.cs-*` (Trigger lebt im Page-Scope, Panel ist body-appended und nutzt z-index: var(--z-popover)). ============================================================================ */ .cs-wrap { position: relative; display: inline-flex; min-width: 0; } /* Inherit sizing from the context the native select had */ .filter-dd + .cs-wrap, .cs-wrap:has(> .filter-dd) { flex: 1; min-width: 0; } /* ★★ `.app-scope`-PRÄFIX IST PFLICHT, NICHT KOSMETIK. `custom-select-legacy.js` ersetzt per MutationObserver JEDE native `` durch `.cs-wrap > button.cs-trigger`. Der Wrapper ist damit immer da — auch `EditableSelect` baut `.app-es cs-wrap` mit einem `` darin. `.cs-wrap` ist also die eigene Wurzelklasse des Bausteins, genau wie `audit-button-reset.js` es vorschreibt („die Regel mit der EIGENEN Wurzelklasse präfixen, bewusst NICHT `.app-scope`"). ★ NUR die drei Regeln mit Spezifität (0,1,0) brauchen das Präfix — Basis, `--placeholder` (setzt nur `color`, und der Reset setzt `color: inherit`) und `--filter`. `:hover`, `:focus-visible` und `.cs-open .cs-trigger` liegen schon bei (0,2,0) und haben immer gegriffen. Alle drei bleiben untereinander in Quell-Reihenfolge, also gewinnen `--filter` und `--placeholder` weiter über die Basis; und die flächeneigenen Regeln (≥ (0,2,0), ihre Stylesheets laden NACH dieser Datei) behalten ihren Vorrang — auch die absichtlich randlose `.app-scope .pauf-cm .cs-trigger` (0,3,0). Regelwerk: Memory `app-scope-button-reset` · Laufzeit-Werkzeug: `npm run audit:button-reset` · Regression-Riegel für die Datenschutz-Flächen: `npm run check:datenschutz-live`. */ /* ★★ DIE BASIS TRUG DIE FORM, DIE NIEMAND WOLLTE — gemessen, nicht vermutet. Sechs Flächen hatten sich eine eigene `.cs-trigger`-Optik gebaut, und ALLE SECHS nahmen `--radius-md`; nur die Basis hatte die Fluent-Underline-Form (`--radius-sm` nur oben + 2px Bottom-Akzent). Solange die Basis im App-Scope tot war, fiel das nicht auf: sie hat nie etwas gerendert. Mit dem `.cs-wrap`-Präfix rendert sie — und dann ist die Frage nicht mehr „welche Fläche weicht ab", sondern „warum ist der Standard der Ausreißer". Deshalb ist die Basis jetzt der De-facto-Standard: `--radius-md`, allseitiger Rahmen, kein Unterstrich-Akzent. ★★ VIER WERTE SIND ÜBER CUSTOM PROPERTIES ÖFFENBAR — und nur diese vier. Die drei identischen Nachbauten (datenschutz · pv-drawer · abrechnung, die „32px-Control-Familie") unterschieden sich von der Basis in genau vier Dingen: Rahmenfarbe, Schriftgröße, Textfarbe, Innenpolster. Alles andere — Höhe, Zeilenhöhe, das Chevron als Data-URI, Ellipse, Übergang, `box-sizing` — war ZEICHENGLEICH dreimal abgeschrieben. Genau diese Struktur liegt jetzt nur noch hier; eine Fläche setzt vier Variablen statt einen 15-Zeilen-Block zu duplizieren. Warum Custom Properties und keine Modifier-KLASSE: `custom-select-legacy.js` ersetzt jede native ` (editierbar), daher Text-Cursor. */ .app-es { position: relative; display: block; width: 100%; min-width: 0; } .app-es-input { width: 100%; cursor: text; } .app-es-input::placeholder { color: var(--color-text-tertiary); } .app-es-panel { display: block; }