/* ========================================================================== EWB Radar -- right_controls.css Theme-Toggle (unten-rechts) und #right-controls (vertikale Button-Kette). Das Aussehen der Buttons in der Kette kommt aus buttons.css. ========================================================================== */ /* -------------------------------------------------------------------------- Theme-Toggle -- unten-rechts, analog zur Legende links-unten. Normalfall: sitzt auf --controls-bottom (gleiche Höhe wie Legende). Bei horizontaler Kollision mit der Controls-Bar springt er nach oben -- JS (updateThemeToggleBottom in theme.js) setzt --theme-toggle-bottom dynamisch via style.setProperty() auf #map-shell. -------------------------------------------------------------------------- */ #theme-toggle { position: absolute; right: 16px; bottom: var(--theme-toggle-bottom, var(--controls-bottom)); z-index: 20003; touch-action: none; /* Kein Pinch-Zoom der Karte über dem Toggle. */ display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; 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); font-size: 1.15rem; line-height: 1; color: var(--color-text-muted); transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), bottom var(--transition-fast); } #theme-toggle:hover { background: var(--color-accent-dim); border-color: rgba(57, 208, 216, 0.35); color: var(--color-accent); transform: scale(1.08); box-shadow: 0 0 14px var(--color-accent-glow); } #theme-toggle:active { transform: scale(0.95); } /* -------------------------------------------------------------------------- #right-controls -- vertikale Button-Kette rechts auf der Karte. Gestapelt über Side-Panel (`.side-panel`) und Legende (`.dbz-legend`). Der hohe Stack-Level liegt am Container selbst; die Geocoder-Kinder (Input z-index:1, Dropdown z-index:2) profitieren automatisch davon. Glassmorphism und Schatten identisch zu #theme-toggle. Button-Basis-Styles und active/pulse-States sind oben gemeinsam mit #prev-btn / #next-btn definiert. Responsive Overrides (< 1200px, < 1060px) liegen in side_panel.css, da sie auf denselben bottom-Formeln wie das Side-Panel aufbauen. -------------------------------------------------------------------------- */ #right-controls { position: absolute; right: 16px; top: calc(50% - var(--side-panel-height) / 2 - var(--space-2) - 40px); /* Über Side-Panel und Legende; trägt alle Geocoder-Kinder automatisch nach vorn. */ z-index: 20003; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); } /* Jeder Button in #right-controls bekommt den vollen Glas-Style. Überschreibt den --glass-bg-2 aus der Basis-Regel oben. */ #right-controls button { background: var(--glass-bg); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); box-shadow: var(--shadow-md); } /* -------------------------------------------------------------------------- Infobutton der Attribution (#attr-info-btn) -- nur auf schmalen Bildschirmen. ⚠️ Die Rollen sind VERTAUSCHT, und das ist der ganze Gedanke: Lage Leiste unten Knopf Desktop sichtbar gibt es nicht schmal, normal versteckt sichtbar schmal, aufgeklappt als Popover sichtbar Aufnahme sichtbar unten nicht im Bild (liegt außerhalb #map) Auf dem Telefon nimmt die Leiste die halbe Breite und steht dauernd im Weg; der Knopf vertritt sie. Im Bild ist es umgekehrt: dort gehört die Leiste an ihren gewohnten Platz, und der Knopf hat nichts verloren -- ein Bedienelement im weitergegebenen Bild sieht aus wie ein Fehler. Zwei Lagen, je nachdem, ob der Toggle an seinem gewohnten Platz sitzt: Toggle an gewohnter Stelle (Platz darüber): der Knopf steht ÜBER ihm -- links daneben träfe er die Controls-Bar, sobald der Platz knapp wird, und verdeckte dort ihre Knöpfe. Toggle selbst ausgewichen (body.theme-toggle-raised, siehe updateThemeToggleBottom() in theme.js): der Knopf steht LINKS davon, auf derselben (angehobenen) Höhe -- dort ist stattdessen über beiden Platz. Ist der Toggle ausgeblendet (embed-hide-theme-toggle), steht der Knopf an dessen Platz und weicht der Controls-Bar aus wie er: updateThemeToggleBottom() misst dann den Knopf selbst und hebt ihn über die Bar, sobald sie bis unter ihn reicht. Die Regel steht als Letztes und gewinnt bei gleicher Spezifität gegen die Lage links vom Toggle. -------------------------------------------------------------------------- */ /* Die Kantenmaße des Knopfes stehen an #map-shell, nicht in seiner eigenen Regel: die aufgeklappte Attributionsleiste braucht dieselbe Unterkante und dieselbe Höhe, um genau eine Knopfhöhe plus --space-2 darüber zu stehen (body.attr-info-open #attr-bar, s.u.). Eine Formel in der Knopfregel erreicht die Leiste nicht; eine Custom Property auf dem gemeinsamen Vorfahren erreicht beide. Jeder Zustand unten setzt deshalb --attr-info-bottom statt `bottom` -- die Leiste folgt dadurch von selbst mit. ⚠️ Träger ist #map-shell und NICHT `body`, obwohl die Zustandsklassen am body sitzen: --theme-toggle-bottom wird von updateThemeToggleBottom() (theme.js) auf #map-shell gesetzt, und eine Custom Property vererbt sich nur nach UNTEN. Am body gelesen ist sie leer, und der Rückfallwert var(--controls-bottom) übernimmt still -- der Knopf steht dann im ausgewichenen Zustand auf der gewohnten Höhe des Toggles, also auf der Controls-Bar, deren Knöpfe er dort verdeckt. Knopf und Leiste liegen beide in #map-shell und sehen die Variablen von dort. */ #map-shell { --attr-info-size: 44px; --attr-info-bottom: calc(var(--controls-bottom) + var(--attr-info-size) + var(--space-2)); /* Rechte Kante der ganzen rechten Schiene. Den Knopf gibt es nur unterhalb von 1060px, und dort stehen Side-Panel, Feature-Buttons (side_panel.css) und Theme-Toggle (responsive.css) auf 8px -- er fluchtet mit ihnen. Der Wert steht als Variable, weil die ausgewichene Lage ihn weiterrechnet. */ --attr-info-right: 8px; } #attr-info-btn { position: absolute; right: var(--attr-info-right); bottom: var(--attr-info-bottom); /* ⚠️ Zwischen der Leiste und dem Dreipunkt-Menü, und NICHT so hoch wie die Nachbarn rechts. Über der Leiste (#controls, controls.css): in der engen Lage steht der Knopf neben ihr. Seine Sprechblase steht in der Ebene (tooltip_layer.js) und hängt nicht an dieser Folge. Unter dem Dreipunkt-Menü (#controls-overflow, overflow.css): der Knopf steht im Hochformat genau über dem ⋮, und von dort klappt das Menü nach oben auf. Mit dem Stapelwert der rechten Spalte läge er über Knöpfen des Menüs, und elementFromPoint träfe dort den Infobutton statt des Menüs. Das Menü ist eine angetippte Antwort, er ist Dauerinventar. Das aufgeklappte Popover ist davon unberührt -- es hängt an #attr-bar und trägt seinen eigenen Wert (s.u.). */ z-index: 20000; touch-action: none; display: none; /* Desktop: es gibt ihn nicht. */ align-items: center; justify-content: center; width: var(--attr-info-size); height: var(--attr-info-size); 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); font-size: 1.15rem; line-height: 1; color: var(--color-text-muted); cursor: pointer; } /* Toggle selbst ausgewichen -- der Knopf zieht auf dieselbe (angehobene) Höhe und rückt links neben ihn, statt weiter über seiner gewohnten Stelle zu stehen (dort wäre jetzt nichts mehr, worüber er stehen könnte). */ body.theme-toggle-raised #map-shell { --attr-info-bottom: var(--theme-toggle-bottom, var(--controls-bottom)); } body.theme-toggle-raised #attr-info-btn { right: calc(var(--attr-info-right) + var(--attr-info-size) + var(--space-2)); } /* Kein Toggle da -- der Knopf steht an dessen Platz: auf der gewohnten Höhe oder angehoben, je nachdem, was updateThemeToggleBottom() (theme.js) an ihm misst. Eine feste Höhe --controls-bottom stünde überall auf der Controls-Bar, wo die bis an den rechten Rand reicht -- im Hochformat immer. Nach rechts gilt die Kante der Schiene, egal ob theme-toggle-raised nebenher gesetzt ist (siehe Erklärung oben an #attr-info-btn). */ body.embed-hide-theme-toggle #map-shell { --attr-info-bottom: var(--theme-toggle-bottom, var(--controls-bottom)); } body.embed-hide-theme-toggle #attr-info-btn { right: var(--attr-info-right); } @media (max-width: 1059.9px) { #attr-info-btn { display: flex; } /* Die Leiste weicht dem Knopf -- außer sie ist aufgeklappt oder im Bild. ⚠️ `body` steht davor, und zwar zwingend: die Grundregel `#attr-bar { display: flex }` steht in leaflet_overrides.css, und die Datei wird in index.html NACH dieser hier geladen. Beide Selektoren haben dieselbe Spezifität (1,0,0) -- eine Media Query erhöht sie nicht --, also gewinnt die spätere Datei, und die Leiste blieb auf dem Telefon sichtbar: unten am Rand, im Desktop-Stil, unter der Controls-Bar. Mit `body` steht sie auf (1,0,1) und gewinnt. Popover (1,1,1) und Aufnahme (1,1,0) tragen je eine Klasse mehr und schlagen sie weiterhin -- die beiden Ausnahmen bleiben. */ body #attr-bar { display: none; } body.attr-info-open #attr-bar { display: flex; /* ⚠️ Aufgeklappt gehört sie ÜBER Legende (`.dbz-legend`) und Side-Panel -- am Bild gesehen: sie lag darunter, sobald eines von beiden offen war, und ein Popover hinter einem anderen Element sieht aus wie ein Fehler. 20004 liegt auch über den Knöpfen (20003), damit die Reihenfolge nicht an der DOM-Position hängt. Eingeklappt bleibt die Leiste bei ihren 400 -- dort ist sie Kartenrand, kein Bedienelement. */ z-index: 20004; right: 8px; /* Genau eine Knopfhöhe plus --space-2 über der Unterkante des Knopfes -- aus denselben Variablen, die auch er liest. Eine eigene Formel aus --theme-toggle-bottom setzt die Leiste dagegen auf die Höhe des Toggles und damit auf den Knopf selbst, sobald der über dem Toggle steht. */ bottom: calc(var(--attr-info-bottom) + var(--attr-info-size) + var(--space-2)); border-radius: var(--radius-md); max-width: calc(100vw - 16px); white-space: normal; /* ⚠️ Die REIHE bricht um, nicht nur der Text in einem Eintrag. Ein Eintrag aus einem Wort wird nicht schmaler als das Wort; ohne den Umbruch der Reihe liefen die letzten Einträge rechts aus dem Fenster, und jeder Eintrag ist eine Quellenangabe. */ flex-wrap: wrap; } /* ⚠️ FÜR DIE AUFNAHME: an ihrem gewohnten Platz am unteren Rand, unabhängig davon, ob der Knopf angetippt war. Ohne diese Regel bekäme ein Bild vom Telefon GAR KEINE Attribution -- nicht nur den Pflichttext nicht, sondern auch EWB, Quelle, OSM und CARTO nicht: der Zeichner überspringt jedes Element mit display:none, und genau das ist die Leiste hier im Normalfall. Der Popover-Zustand wird für die Aufnahme ohnehin zurückgenommen (screenshot.js), die beiden Regeln treten also nie gegeneinander an. */ /* ⚠️ Im Bild bricht der Pflichttext UM, statt über den Rand zu laufen. Ohne max-width und white-space ist die Leiste breiter als das Telefon: gemessen 571 px in einem 390 px breiten Fenster, linke Kante bei -181 px -- EWB, Logo und Quelle standen damit außerhalb des Bildes, und genau die drei tragen die Attribution. Mehrzeilig ist der Kompromiss: die Leiste wird höher, dafür steht alles drin. Der Zeichner kann das -- er misst jede Zeile einzeln über eine Range (drawTextNode in screenshot.js). flex-wrap bricht dazu die REIHE um, wie im Popover: ein Eintrag aus einem Wort wird nicht schmaler als das Wort, und ohne den Umbruch der Reihe stünden die letzten Einträge rechts außerhalb des Bildes. 100% statt 100vw: die Leiste liegt in #map, und im Embed kann die Karte schmaler sein als das Fenster. */ #attr-bar.attr-bar--shot { display: flex; right: 0; bottom: 0; border-radius: var(--radius-md) 0 0 0; max-width: 100%; white-space: normal; flex-wrap: wrap; } } /* -------------------------------------------------------------------------- Hochformat -- hier steht die Controls-Bar über die ganze Breite, und beide Nachbarn des Infobuttons haben dadurch eine feste Lage am rechten Rand. Im Querformat gilt das nicht (die Bar ist dort zentriert), deshalb steht die Lage der aufgeklappten Leiste hier und nicht im Block darüber. -------------------------------------------------------------------------- */ @media (max-width: 600px) and (orientation: portrait) { /* ⚠️ Für den Knopf steht hier bewusst KEINE eigene Lage: die Bar läuft im Hochformat über die volle Breite, damit meldet updateThemeToggleBottom() (theme.js) eine Überlappung, sobald es die Bar gibt, und body.theme-toggle-raised setzt Höhe und Lage nach rechts -- links neben dem angehobenen Toggle, ohne Toggle an dessen Platz. Ist die Bar selbst ausgeblendet, weicht niemand aus, und der Knopf steht wie im Grundzustand über dem Toggle; eine feste Toggle-Höhe an dieser Stelle setzte ihn dann auf den Toggle. Ein Fall in attribution_layers.test.js rechnet die Überlappung aus denselben Zahlen nach. */ /* ⚠️ Aufgeklappt verdeckt die Leiste den eingeklappten Side-Panel-Knopf dahinter VOLLSTÄNDIG. Vorher hing sie am Infobutton (dessen Oberkante + 8px) und traf den Knopf dahinter um ein bis zwei Pixel: er schaute oben 2px und unten 1px hervor, was wie ein Rand aussieht und nicht wie ein Knopf. Deshalb dieselbe Unterkante wie der Knopf (--panel-bottom) und mindestens dessen Höhe (Token + 1px Rahmen je Seite). Reichweite: gemeint ist der EINGEKLAPPTE Knopf. Ist das Panel ausgeklappt, ragt es über die Leiste hinaus -- dann ist es ein offenes Bedienelement und kein Rand. */ body.attr-info-open #attr-bar { bottom: var(--panel-bottom); min-height: calc(var(--side-panel-collapsed-height) + 2px); } }