/* ========================================================================== EWB Radar – overflow.css Controls-Overflow-Menü (#controls-overflow) und Drei-Punkte-Trigger (#overflow-trigger) inkl. CSS-Anchor-Positioning-Logik. Mittelpunkt mehrerer Bug-Issues (#140, #141, #142). Ausgelagert aus style.css (Modularisierung, Issue #94). ========================================================================== */ /* -------------------------------------------------------------------------- Controls-Overflow-Menü (Portrait-Modus) #controls-overflow stapelt überschüssige Bottom-Buttons vertikal ÜBER der Controls-Bar. Wird per JS mit .is-open getoggled. Positionierung — Progressive Enhancement: - Standard (alle Browser): Position per JS-Custom-Properties (--overflow-left / --overflow-bottom), in alignOverflow() (features.js) aus getBoundingClientRect() des Triggers berechnet. Robust & cross-browser. - Enhancement: CSS Anchor Positioning. alignOverflow() aktiviert die Klasse .has-anchor-pos auf testweise, MISST aber bei jedem Sync ob das Menü dadurch real bündig am Trigger landet — und nimmt die Klasse sonst zurück. Nötig weil anchor() layout-abhängig bricht: Firefox verankert z.B. falsch sobald der Anker (#overflow-trigger) in einem transformierten #controls liegt (translateX(-50%) > 600px), rendert aber korrekt ohne Transform (≤ 600px). Reines CSS.supports()/@supports oder ein synthetischer Test erfasst das nicht. Greift Anchor Positioning → JS-Variablen werden vom CSS überschrieben; bricht es → Klasse weg → JS-Fallback positioniert. -------------------------------------------------------------------------- */ /* Standard für alle Browser: Position per JS-Custom-Properties. Fallback-Werte (8px / calc) greifen vor dem ersten alignOverflow()-Lauf. */ #controls-overflow { position: absolute; left: var(--overflow-left, 8px); bottom: var(--overflow-bottom, calc(var(--controls-bottom) + var(--controls-height) + var(--space-2))); } /* Enhancement: native Anchor-Verankerung — nur wenn alignOverflow() in features.js am echten Menü gemessen hat dass anchor() korrekt rendert (.has-anchor-pos). Überschreibt left/bottom mit anchor(); die JS-Variablen werden dann ignoriert. */ html.has-anchor-pos #overflow-trigger { anchor-name: --overflow-trigger; } html.has-anchor-pos #controls-overflow { position-anchor: --overflow-trigger; /* Menü-Linke-Kante bündig mit Trigger-Linker-Kante */ left: anchor(left); /* Menü-Unterkante = Trigger-Oberkante + space-2 Luft nach oben */ bottom: calc(anchor(top) + var(--space-2)); } #controls-overflow { z-index: 20002; /* über #right-controls (20000) und #controls (10001) */ display: flex; flex-direction: column-reverse; /* neuester Button ganz oben */ gap: var(--space-2); /* #140: kein Pinch-Zoom/Touch-Scroll der Karte über dem Overflow-Menü. */ touch-action: none; /* Versteckt: nach unten verschoben + unsichtbar */ opacity: 0; pointer-events: none; transform: translateY(8px); will-change: opacity, transform; /* verhindert transparenten Glitch beim ersten syncOverflow() */ transition: opacity var(--transition-smooth), transform var(--transition-smooth); } #controls-overflow.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); } /* Overflow-Buttons: identisch zum Control-Button-Stil mit vollem Glas-Look */ #controls-overflow button { display: flex; align-items: center; justify-content: center; width: 40px; /* Bar-Button-Größe, unabhängig von --portrait-btn-size */ height: 40px; border-radius: var(--radius-xl); border: 1px solid var(--color-border); background: var(--glass-bg); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); box-shadow: var(--shadow-md); color: var(--color-text-muted); font-size: 1.1rem; line-height: 1; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); } #controls-overflow button:hover { /* opake Glas-Basis + Akzent-Tint, analog zu active-State: --glass-bg bleibt sichtbar, Akzent-Tint kommt drüber */ background: color-mix(in srgb, var(--color-accent) 15%, var(--glass-bg)); border-color: rgba(57, 208, 216, 0.30); color: var(--color-accent); transform: scale(1.06); } #controls-overflow button:active { transform: scale(0.96); background: var(--color-accent-dim); } /* Drei-Punkte-Trigger-Button in der Controls-Bar */ #overflow-trigger { font-size: 1rem; /* 1.3rem → 1rem: Firefox-baseline-Bug mit ⋮ bei großem font-size */ font-weight: 900; /* display:grid + place-items:center: zwingt Firefox zur exakten geometrischen Zentrierung des ⋮-Zeichens – unabhängig von Baseline-Verschiebungen durch font-metrics. Robuster als line-height oder padding-Korrekturen. */ display: grid; place-items: center; padding: 0; letter-spacing: 0; color: var(--color-text-muted); } #overflow-trigger[aria-expanded="true"] { color: var(--color-accent); background: var(--color-accent-dim); border-color: rgba(57, 208, 216, 0.30); } /* #141: Kein Hover-Scale solange das Menü offen ist. transform: scale(1.06) vergrößert die Trigger-Bounding-Box (Ursprung = Mitte → Kanten wandern ~1px nach außen); das per anchor() live verankerte Menü folgt dieser Verschiebung und ruckt sichtbar. Im offenen Zustand liefert der aria-expanded-Akzent ohnehin schon Hover-Feedback. Browser-agnostisch — greift auch für Firefox, sobald es anchor() in transformierten Ancestors korrekt umsetzt (vgl. #142). #controls vorangestellt, um "#controls button:not(#play-btn):hover" (2,1,1) in der Spezifität zu schlagen → (2,2,0). */ #controls #overflow-trigger[aria-expanded="true"]:hover { transform: none; } /* Overflow-Trigger-Tooltip unterdrücken wenn Menü offen ist – analog zu .geocoder-wrap--open ~ [data-t-tooltip]::after */ #overflow-trigger[aria-expanded="true"][data-t-tooltip]::after { display: none !important; }