/* ========================================================================== 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. z-index: 20003 -- höher als side-panel (10001) und legend (10001). 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); /* 20003 = über side-panel (10001) und legend (10001) -- 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 läge er teils unter der Controls-Bar, sobald der Platz knapp wird. 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), nimmt der Knopf dessen gewohnten Platz direkt ein -- unabhängig von den beiden Lagen oben, deshalb steht diese Regel als Letztes und gewinnt bei gleicher Spezifität. -------------------------------------------------------------------------- */ /* 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 unter der Controls-Bar, die ihn 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); /* ⚠️ 10001 und NICHT 20003 wie die Nachbarn rechts. Der Knopf steht im Hochformat genau über dem ⋮, und von dort klappt das Overflow-Menü (20002) nach oben auf: mit 20003 lag er über zwei seiner Knöpfe (gemessen 800 und 598 px² Überlappung, elementFromPoint traf den Infobutton statt des Menüs). Dasselbe gilt für die Tooltips (10500), die aus der Controls-Bar heraus aufgehen. Beide sollen ihn überbieten -- sie sind angetippte Antworten, er ist Dauerinventar. Untergrenze sind die Leaflet-Controls: deren Container liegt auf 1000 (vendor/leaflet/leaflet.css, .leaflet-top/.leaflet-bottom), darüber muss er bleiben, sonst verschwindet er unter den Zoom-Knöpfen. 10001 ist dasselbe Band, in dem Side-Panel und Status-Pille stehen -- Dauerinventar über der Karte, das kein Popup ist. Das aufgeklappte Popover ist davon unberührt -- es hängt an #attr-bar und bleibt auf 20004 (s.u.). */ z-index: 10001; 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 nimmt dessen gewohnten Platz direkt ein, 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(--controls-bottom); } body.embed-hide-theme-toggle #attr-info-btn { right: var(--attr-info-right); } @media (max-width: 1060px) { #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 (20002) und Side-Panel (10001) -- 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; } /* ⚠️ 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 die beiden letzten Zeilen 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). 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; } } /* -------------------------------------------------------------------------- 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 beides hier und nicht im Block darüber. -------------------------------------------------------------------------- */ @media (max-width: 600px) and (orientation: portrait) { /* ⚠️ Die Unterkante steht EXPLIZIT hier, nicht dem Standard-Zustand (über dem Toggle) überlassen: die volle Bar-Breite im Hochformat lässt darüber keinen Platz -- der Knopf bleibt deshalb auf Toggle-Höhe. Gesetzt wird die Variable, nicht `bottom`, damit die aufgeklappte Leiste dieselbe Kante sieht. Die Lage nach rechts steht bewusst NICHT hier: die Bar läuft im Hochformat über die volle Breite, damit meldet updateThemeToggleBottom() (theme.js) immer eine Überlappung, und body.theme-toggle-raised gilt in dieser Lage ausnahmslos. Der Knopf steht deshalb links neben dem angehobenen Toggle, und das ist die Lage, die hier gilt -- eine eigene Formel daneben wäre eine zweite Antwort auf dieselbe Frage. Ein Fall in attribution_layers.test.js rechnet die Überlappung aus denselben Zahlen nach. */ #map-shell { --attr-info-bottom: var(--theme-toggle-bottom, var(--controls-bottom)); } /* ⚠️ 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); } }