/* ── Theme-Toggle (Light/Dark Pill-Switch) ───────────────────────────── Globales, theme-unabhaengiges Stylesheet. Die Hell/Dunkel-Optik des Schalters wird ueber das Attribut [data-theme-mode="light|dark"] am -Element gesteuert (serverseitig im eingeloggten CMS gesetzt, client-seitig am Login). Bewusst EIN Stylesheet statt pro Theme-Ordner. Optik nachempfunden dem Toggle von fewomieten.ferien-ticino.ch. */ .cms-theme-toggle { position: relative; width: 52px; height: 26px; border-radius: 13px; background-color: rgb(237, 232, 226); border: 1px solid rgb(214, 207, 200); cursor: pointer; padding: 0; margin: 0; flex-shrink: 0; -webkit-appearance: none; appearance: none; transition: background-color 0.2s ease, border-color 0.2s ease; } .cms-theme-toggle:focus-visible { outline: 2px solid rgb(0, 102, 204); outline-offset: 2px; } .cms-theme-toggle:disabled { opacity: 0.6; cursor: progress; } .cms-theme-toggle-knob { position: absolute; top: 1px; left: 1px; width: 22px; height: 22px; border-radius: 50%; background-color: rgb(255, 255, 255); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); z-index: 1; transition: transform 0.22s ease, background-color 0.2s ease; } .cms-theme-toggle-icon { position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px; display: inline-flex; align-items: center; justify-content: center; color: rgb(107, 99, 96); z-index: 2; pointer-events: none; transition: color 0.2s ease; } .cms-theme-toggle-icon svg { width: 100%; height: 100%; display: block; } .cms-theme-toggle-sun { left: 6px; } .cms-theme-toggle-moon { right: 6px; } /* Light-Modus (Default): Sonne hervorgehoben */ .cms-theme-toggle-sun { color: rgb(220, 145, 30); } /* Dark-Modus: Knob nach rechts, Mond hervorgehoben */ [data-theme-mode="dark"] .cms-theme-toggle { background-color: rgb(38, 40, 43); border-color: rgb(65, 68, 72); } [data-theme-mode="dark"] .cms-theme-toggle-knob { transform: translateX(24px); background-color: rgb(110, 115, 120); } [data-theme-mode="dark"] .cms-theme-toggle-sun { color: rgb(107, 99, 96); } [data-theme-mode="dark"] .cms-theme-toggle-moon { color: rgb(220, 215, 180); } /* ── Positionierung ────────────────────────────────────────────── */ /* Login: Toggle absolut in der unteren rechten Ecke der Login-Box. Hoehere Spezifitaet (.login-box .cms-theme-toggle) noetig, weil ".login-box button" sonst Breite/Farbe/Padding des Buttons ueberschreibt (Toggle wuerde sonst gestreckt). */ .login-box .cms-theme-toggle { position: absolute; bottom: 14px; right: 14px; width: 52px; height: 26px; padding: 0; background-color: rgb(237, 232, 226); border: 1px solid rgb(214, 207, 200); } [data-theme-mode="dark"] .login-box .cms-theme-toggle { background-color: rgb(38, 40, 43); border-color: rgb(65, 68, 72); } /* Topbar (eingeloggt): links neben dem Logo */ .cms-topbar .cms-theme-toggle { margin-right: 2px; }