/* ===================================================================== EquiFeed — "Glas"-Design (Liquid Glass) Zweite Design-Achse neben Hell/Dunkel: . Diese Datei enthaelt AUSSCHLIESSLICH Regeln unter :root[data-design="glass"] — das klassische Design bleibt unberuehrt. Aufbau: 1. Token-Overrides (hell) — Variablen umdefinieren 2. Token-Overrides (dunkel) — Anthrazit-Variante 3. Seitenhintergrund — fixer Verlauf hinter allem 4. Glas-Oberflaechen — backdrop-filter-Komponenten 5. Detail-Anpassungen — Buttons, Inputs, Tooltip, ... 6. Fallbacks — @supports / reduced-transparency ===================================================================== */ /* ---------- 1. Token-Overrides: HELL ---------- */ :root[data-design="glass"] { /* Glas-Bausteine (nur in dieser Datei verwendet) */ --glass-bg: rgba(255, 255, 255, 0.45); --glass-elevated: rgba(255, 255, 255, 0.53); --glass-edge: rgba(255, 255, 255, 0.70); --glass-highlight: rgba(255, 255, 255, 0.85); --glass-input: rgba(255, 255, 255, 0.55); --glass-sat: 180%; --glass-page-base: #dde7f3; --glass-page-bg: radial-gradient(1000px 600px at 12% 0%, rgba(122, 170, 235, 0.42), transparent 60%), radial-gradient(900px 560px at 95% 18%, rgba(110, 205, 170, 0.30), transparent 60%), radial-gradient(1100px 700px at 55% 105%, rgba(190, 150, 225, 0.30), transparent 60%), linear-gradient(160deg, #eef4fb, #dce8f5); /* Basis-Tokens umbiegen: --bg dient im Glas-Design nur noch als Hover-/Einlege-Flaeche (Dropdown-Hover, Token-Anzeige, ...), der eigentliche Seitenhintergrund kommt aus --glass-page-bg (s.u.). */ --bg: rgba(127, 148, 180, 0.14); --card: var(--glass-bg); --card-elevated: var(--glass-elevated); --border: rgba(30, 58, 95, 0.13); --border-strong: rgba(30, 58, 95, 0.24); --shadow-sm: 0 2px 8px rgba(30, 58, 95, 0.08); --shadow-md: 0 8px 24px rgba(30, 58, 95, 0.10); --shadow-lg: 0 12px 32px rgba(30, 58, 95, 0.14); --radius: 20px; } /* ---------- 2. Token-Overrides: DUNKEL (Nachtblau-Schwarz, Basiston #0C1014) ---------- */ :root[data-design="glass"][data-theme="dark"] { --glass-bg: rgba(34, 52, 70, 0.36); --glass-elevated: rgba(42, 63, 84, 0.37); --glass-edge: rgba(160, 195, 230, 0.11); --glass-highlight: rgba(255, 255, 255, 0.11); --glass-input: rgba(5, 8, 12, 0.48); --glass-sat: 150%; --glass-page-base: #0c1014; --glass-page-bg: radial-gradient(1000px 600px at 12% 0%, rgba(60, 95, 130, 0.15), transparent 60%), radial-gradient(900px 560px at 95% 18%, rgba(85, 120, 155, 0.08), transparent 60%), radial-gradient(1100px 700px at 55% 105%, rgba(40, 70, 100, 0.13), transparent 60%), linear-gradient(160deg, #131a21, #080b0e); --bg: rgba(160, 195, 230, 0.06); --card: var(--glass-bg); --card-elevated: var(--glass-elevated); --text: #e4ebf2; --text-muted: #8c9fb1; --border: rgba(160, 195, 230, 0.10); --border-strong: rgba(160, 195, 230, 0.20); --scrollbar-thumb: #2a3c4e; --scrollbar-thumb-hover: #3a5168; /* Status/Badges: leicht transluzent, damit sie auf Glas liegen */ --status-online-bg: rgba(20, 83, 45, 0.55); --status-offline-bg: rgba(127, 29, 29, 0.55); --alert-error-bg: rgba(127, 29, 29, 0.55); --alert-success-bg: rgba(20, 83, 45, 0.55); --badge-admin-bg: rgba(76, 29, 149, 0.60); --badge-user-bg: rgba(7, 89, 133, 0.60); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.40); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.50); } /* ---------- 3. Seitenhintergrund ---------- */ /* Fester (nicht mitscrollender) Verlauf als eigene Ebene hinter dem Inhalt. position:fixed auf ::before statt background-attachment:fixed — letzteres ist auf iOS Safari notorisch kaputt. */ :root[data-design="glass"] body { background: var(--glass-page-base); } :root[data-design="glass"] body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--glass-page-bg); } /* Login-Seite: eigener Schimmer entfaellt, der Seitenverlauf reicht */ :root[data-design="glass"] #login-page { background: none; } /* ---------- 4. Glas-Oberflaechen ---------- */ :root[data-design="glass"] .card, :root[data-design="glass"] .device-card, :root[data-design="glass"] .login-card, :root[data-design="glass"] .skeleton-card, :root[data-design="glass"] .app-header, :root[data-design="glass"] .nav-tabs, :root[data-design="glass"] .modal, :root[data-design="glass"] .confirm-box, :root[data-design="glass"] .account-dropdown, :root[data-design="glass"] .toast, :root[data-design="glass"] .install-hint, :root[data-design="glass"] .control-box, :root[data-design="glass"] .api-token-row, :root[data-design="glass"] .theme-toggle-floating { background: var(--glass-bg); -webkit-backdrop-filter: blur(24px) saturate(var(--glass-sat)); backdrop-filter: blur(24px) saturate(var(--glass-sat)); border-color: var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-md); } /* Im klassischen Dark-Mode werden Karten auf --card-elevated gehoben — im Glas-Design sollen alle Flaechen dieselbe Transluzenz behalten. */ :root[data-design="glass"][data-theme="dark"] .device-card, :root[data-design="glass"][data-theme="dark"] .card, :root[data-design="glass"][data-theme="dark"] .login-card { background: var(--glass-bg); } /* Header/Tabs: nur Trennlinie unten, kein umlaufender Glasrand noetig */ :root[data-design="glass"] .app-header, :root[data-design="glass"] .nav-tabs { box-shadow: inset 0 1px 0 var(--glass-highlight); border-bottom-color: var(--glass-edge); } /* Geraetekarten INNERHALB einer Glas-Karte (Admin "Alle Geraete"): kein zweiter Blur-Layer — zwei Glasschichten uebereinander addieren sich sonst zu fast deckendem Weiss. Stattdessen nur zarte Aufhellung. */ :root[data-design="glass"] .card .device-card { background: rgba(255, 255, 255, 0.28); -webkit-backdrop-filter: none; backdrop-filter: none; } :root[data-design="glass"][data-theme="dark"] .card .device-card { background: rgba(255, 255, 255, 0.04); } /* Geraete-Karte: Status-Akzent links (3px gruen/rot) muss erhalten bleiben */ :root[data-design="glass"] .device-card { border-left-width: 3px; } :root[data-design="glass"] .device-card--online { border-left-color: var(--success); } :root[data-design="glass"] .device-card--offline { border-left-color: var(--danger); } :root[data-design="glass"] .device-card:hover { box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-lg); } /* Modals liegen ueber dem abgedunkelten Overlay — bei 55% Weiss mischt sich das Dunkel durch und die Karte wirkt grau. Daher hier deckender + heller; im Dark-Mode passt die normale Glasflaeche. */ :root[data-design="glass"] .modal, :root[data-design="glass"] .confirm-box { /* Gleiche Anmutung wie die Karten der Geraete-Seite: leicht kuehles Weiss, moderate Saettigung (115% war zu grau, 180% gab Gelbstich) */ background: rgba(250, 252, 255, 0.60); -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%); } :root[data-design="glass"][data-theme="dark"] .modal, :root[data-design="glass"][data-theme="dark"] .confirm-box { background: var(--glass-bg); } /* Modal-Hintergrund: staerker abdunkeln + mehr Blur (Inhalt dahinter ist Glas) */ :root[data-design="glass"] .modal-overlay, :root[data-design="glass"] .confirm-overlay { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); /* Nur leicht dimmen: ein dunkles Overlay schluckt die Pastelltoene des Seitenhintergrunds und macht die Modals grau statt blau-glasig */ background: rgba(15, 23, 42, 0.15); } :root[data-design="glass"][data-theme="dark"] .modal-overlay, :root[data-design="glass"][data-theme="dark"] .confirm-overlay { background: rgba(0, 0, 0, 0.30); } /* Sticky-Schliessen-Leiste am Ende des Einstellungs-Sheets: fast deckend. Voll-transluzent geht hier nicht — der Modal-Inhalt (z.B. der rote "Geraet loeschen"-Button) scrollt direkt dahinter durch, und iOS Safari wendet backdrop-filter auf sticky-Elementen in Scroll-Containern oft nicht an -> haesslicher Durchschein-Effekt. */ :root[data-design="glass"] .settings-sticky-close { background: rgba(247, 250, 254, 0.96); -webkit-backdrop-filter: blur(16px) saturate(var(--glass-sat)); backdrop-filter: blur(16px) saturate(var(--glass-sat)); border-top-color: var(--border); /* Randlos bis an die Modal-Kanten (Modal-Padding: 2rem Desktop) — sonst steht die fast deckende Leiste als sichtbarer Kasten im Glas-Modal. */ margin-left: -2rem; margin-right: -2rem; margin-bottom: -2rem; padding-left: 2rem; padding-right: 2rem; padding-bottom: 1rem; border-radius: 0 0 var(--radius) var(--radius); /* Sticky-Anker unter die Scrollport-Kante ziehen: deckt den Modal- Innenabstand ab, sonst scrollt dort Inhalt sichtbar unter der Leiste */ bottom: -2rem; } :root[data-design="glass"][data-theme="dark"] .settings-sticky-close { background: rgba(14, 19, 25, 0.97); } @media (max-width: 640px) { /* Bottom-Sheet: Modal-Padding 1rem 1.1rem, unten 1.25rem + Safe-Area */ :root[data-design="glass"] .settings-sticky-close { margin-left: -1.1rem; margin-right: -1.1rem; margin-bottom: calc(-1.25rem - env(safe-area-inset-bottom, 0px)); padding-left: 1.1rem; padding-right: 1.1rem; padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px)); border-radius: 0; bottom: calc(-1.25rem - env(safe-area-inset-bottom, 0px)); } } /* Semantische Toasts: Glasflaeche + farbiger Rand/Text statt deckender Farbflaeche — konsistent zu den Status-Badges */ :root[data-design="glass"] .toast-success { background: var(--glass-bg); border-color: color-mix(in srgb, var(--success) 50%, transparent); color: var(--alert-success-fg); } :root[data-design="glass"] .toast-error { background: var(--glass-bg); border-color: color-mix(in srgb, var(--danger) 50%, transparent); color: var(--alert-error-fg); } /* ---------- 5. Detail-Anpassungen ---------- */ /* Buttons als Pillen mit Tiefe — Apple-typisch */ :root[data-design="glass"] .btn { border-radius: 999px; } :root[data-design="glass"] .btn-primary { background: linear-gradient(180deg, #3b82f6, #2563eb); box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35); } :root[data-design="glass"] .btn-primary:hover { background: linear-gradient(180deg, #2f74ed, #1d4ed8); } :root[data-design="glass"] .btn-success { background: linear-gradient(180deg, #22b358, #16a34a); box-shadow: 0 4px 14px rgba(22, 163, 74, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.30); } :root[data-design="glass"] .btn-danger { background: linear-gradient(180deg, #e63946, #dc2626); box-shadow: 0 4px 14px rgba(220, 38, 38, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.30); } :root[data-design="glass"] .btn-warning { background: linear-gradient(180deg, #f7a821, #f59e0b); box-shadow: 0 4px 14px rgba(245, 158, 11, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.30); } :root[data-design="glass"] .btn-outline { background: var(--bg); border-color: var(--border-strong); box-shadow: inset 0 1px 0 var(--glass-highlight); } /* Theme-/Design-Umschalter im Header: runde Glas-Taste */ :root[data-design="glass"] .theme-toggle { border-radius: 50%; } /* Status-Badges (Online/Offline/Update): dezenter farbiger Rand, damit sie sich auf den transluzenten Karten besser abheben */ :root[data-design="glass"] .status-badge { border: 1px solid transparent; } :root[data-design="glass"] .status-online { border-color: color-mix(in srgb, var(--status-online-fg) 35%, transparent); } :root[data-design="glass"] .status-offline { border-color: color-mix(in srgb, var(--status-offline-fg) 35%, transparent); } :root[data-design="glass"] .status-updating { border-color: color-mix(in srgb, var(--warning) 45%, transparent); } /* Steuerungs-Modal: Box 1/2 nur hauchzart abgegrenzt — sehr leichte Flaeche, duenner Rand und weicher Schatten fuer dezente Tiefe (kein massiver weisser Kasten wie im klassischen Design) */ :root[data-design="glass"] .control-box { background: rgba(255, 255, 255, 0.30); border: 1px solid rgba(30, 58, 95, 0.10); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 4px 14px rgba(30, 58, 95, 0.12); -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 16px; padding: 0.9rem; } :root[data-design="glass"][data-theme="dark"] .control-box { background: rgba(255, 255, 255, 0.04); border-color: rgba(160, 195, 230, 0.10); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 14px rgba(0, 0, 0, 0.35); } /* Admin-Listenzeilen (Akkutypen, Benutzer): liegen IN einer Glas-Karte -> gleiche Anmutung wie .control-box in der Geraetesteuerung (kein zweiter Blur-Layer, dezente Aufhellung statt fast deckendem Weiss). */ :root[data-design="glass"] .battery-type-card { background: rgba(255, 255, 255, 0.30); border: 1px solid rgba(30, 58, 95, 0.10); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 4px 14px rgba(30, 58, 95, 0.12); -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 14px; } :root[data-design="glass"][data-theme="dark"] .battery-type-card { background: rgba(255, 255, 255, 0.04); border-color: rgba(160, 195, 230, 0.10); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 14px rgba(0, 0, 0, 0.35); } /* Schiebeschalter im iOS-Stil: Track mit Verlauf + Innenschatten (Tiefe), Knopf mit weichem Schatten und Glanzkante. Rot/Gruen-Semantik bleibt. */ :root[data-design="glass"] .toggle-slider { background: linear-gradient(180deg, #e25048, #c62622); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.30), inset 0 -1px 0 rgba(255, 255, 255, 0.14), 0 1px 0 rgba(255, 255, 255, 0.06); } :root[data-design="glass"] .toggle input:checked + .toggle-slider { background: linear-gradient(180deg, #25b258, #128a3e); } :root[data-design="glass"] .toggle-slider::before { background: linear-gradient(180deg, #ffffff, #eef1f5); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35), 0 0.5px 1px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.95); } /* Eingabefelder: leicht deckender als Karten, sonst verschwimmt der Inhalt */ :root[data-design="glass"] .form-group input[type="text"], :root[data-design="glass"] .form-group input[type="password"], :root[data-design="glass"] .form-group input[type="email"], :root[data-design="glass"] .form-group input[type="search"], :root[data-design="glass"] .form-group input[type="number"], :root[data-design="glass"] .form-group input[type="time"], :root[data-design="glass"] .form-group input[type="url"], :root[data-design="glass"] .form-group select, :root[data-design="glass"] .form-group textarea, :root[data-design="glass"] .timer-table input[type="time"], :root[data-design="glass"] .timer-table input[type="number"] { background: var(--glass-input); border-radius: 12px; } /* Tooltip (.info-tip): Basis-CSS nutzt color: var(--card) — im Glas-Design waere das transluzent. Deckende Farben erzwingen. */ :root[data-design="glass"] .info-tip::after { background: rgba(30, 41, 59, 0.92); color: #f8fafc; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } :root[data-design="glass"][data-theme="dark"] .info-tip::after { background: rgba(228, 235, 242, 0.94); color: #0c1014; } /* ---------- 6. Feinschliff (Navigation, Header, Animationen, Charts) ---------- */ /* Navigation als Segmented Control: aktiver Tab = Glas-Pille statt blauem Unterstrich */ :root[data-design="glass"] .nav-tabs { background: transparent; border-bottom: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0.65rem 1rem 0.35rem; gap: 0.4rem; } :root[data-design="glass"] .nav-tab { border: 1px solid transparent; border-radius: 999px; padding: 0.45rem 1.1rem; transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease); } :root[data-design="glass"] .nav-tab.active { color: var(--primary); background: var(--glass-bg); /* Im Hellen KEINE weisse Glas-Kante — wirkt auf hellem Grund wie ein Fremdkoerper; stattdessen zarte dunkle Kontur */ border-color: rgba(30, 58, 95, 0.12); box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-sm); -webkit-backdrop-filter: blur(16px) saturate(var(--glass-sat)); backdrop-filter: blur(16px) saturate(var(--glass-sat)); } :root[data-design="glass"][data-theme="dark"] .nav-tab.active { border-color: var(--glass-edge); } /* Header: Trennlinie/Schatten erst beim Scrollen einblenden (iOS-Stil). Die Klasse .is-scrolled pflegt app.js. */ :root[data-design="glass"] .app-header { border-bottom-color: transparent; transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); } :root[data-design="glass"] .app-header.is-scrolled { border-bottom-color: var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-md); } /* Modal-Einblendung am Desktop: sanftes Scale + Fade. Auf dem Phone (max-width 640) uebernimmt die vorhandene sheet-up-Animation. */ @media (min-width: 641px) { :root[data-design="glass"] .modal { animation: glass-modal-in 0.18s var(--ease); } } @keyframes glass-modal-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } } /* Sehr langsame Drift des Seitenverlaufs — kompositor-freundlich ueber transform (nicht background-position). inset -8% + scale verhindert sichtbare Raender beim Verschieben. */ :root[data-design="glass"] body::before { inset: -8%; animation: glass-drift 80s ease-in-out infinite alternate; } @keyframes glass-drift { from { transform: translate3d(-1.5%, -1%, 0) scale(1.02); } to { transform: translate3d(1.5%, 1%, 0) scale(1.08); } } /* Verlaufs-Charts (Akku/Klima): Linien minimal kraeftiger + weicher Schatten, damit sie auf transluzenten Flaechen nicht untergehen */ :root[data-design="glass"] .battery-chart polyline { stroke-width: 2.6; filter: drop-shadow(0 1.5px 2px rgba(15, 23, 42, 0.28)); } :root[data-design="glass"][data-theme="dark"] .battery-chart polyline { filter: drop-shadow(0 1.5px 3px rgba(0, 0, 0, 0.55)); } /* Karten-Icons (Batterie, Thermometer, Signalbalken): weicher Schattenwurf fuer etwas Tiefe auf den Glasflaechen */ :root[data-design="glass"] .battery-icon, :root[data-design="glass"] .climate-icon, :root[data-design="glass"] .info-signal svg, :root[data-design="glass"] .device-card-header-right > svg { filter: drop-shadow(0 1px 1.5px rgba(15, 23, 42, 0.35)); } :root[data-design="glass"][data-theme="dark"] .battery-icon, :root[data-design="glass"][data-theme="dark"] .climate-icon, :root[data-design="glass"][data-theme="dark"] .info-signal svg, :root[data-design="glass"][data-theme="dark"] .device-card-header-right > svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)); } /* Status-Punkte (Box offen/zu, MQTT-Indikator): flache Kreise wie im klassischen Design, nur mit ganz leichtem Schatten */ :root[data-design="glass"] .contact-dot, :root[data-design="glass"] .mqtt-indicator { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } /* Log-Icons vereinheitlichen: Emojis (🔋 🌡 ⏰ 👆 …) rendern als bunte Fremdkoerper zwischen den einfarbigen Glyphen (● ⚙ ✦). Trick: Glyphe transparent stellen und als text-shadow in der Typfarbe neu zeichnen — so werden auch Emojis zu einfarbigen Silhouetten. */ :root[data-design="glass"] .event-icon { color: transparent; text-shadow: 0 0 0 var(--evt-c, var(--text-muted)); } :root[data-design="glass"] .event-icon.evt-online, :root[data-design="glass"] .event-icon.evt-open { --evt-c: var(--success); } :root[data-design="glass"] .event-icon.evt-offline, :root[data-design="glass"] .event-icon.evt-close, :root[data-design="glass"] .event-icon.evt-ota-failed { --evt-c: var(--danger); } :root[data-design="glass"] .event-icon.evt-timer, :root[data-design="glass"] .event-icon.evt-command, :root[data-design="glass"] .event-icon.evt-ota, :root[data-design="glass"] .event-icon.evt-firmware, :root[data-design="glass"] .event-icon.evt-settings { --evt-c: var(--primary); } :root[data-design="glass"] .event-icon.evt-restart, :root[data-design="glass"] .event-icon.evt-log, :root[data-design="glass"] .event-row-skipped .event-icon { --evt-c: var(--text-muted); } @media (prefers-reduced-motion: reduce) { :root[data-design="glass"] body::before { animation: none; } :root[data-design="glass"] .modal { animation: none; } :root[data-design="glass"] .nav-tab { transition: none; } } /* ---------- 7. Fallbacks ---------- */ /* Ohne backdrop-filter (sehr alte Browser) bzw. bei "Transparenz reduzieren" (iOS/macOS-Bedienungshilfe): Flaechen fast deckend — gleiche Optik, ohne Durchschimmern. Die Variablen greifen ueberall, wo --glass-bg verwendet wird. */ @supports not (backdrop-filter: blur(1px)) { :root[data-design="glass"] { --glass-bg: rgba(255, 255, 255, 0.92); --glass-elevated: rgba(255, 255, 255, 0.95); --glass-input: rgba(255, 255, 255, 0.95); } :root[data-design="glass"][data-theme="dark"] { --glass-bg: rgba(24, 37, 50, 0.94); --glass-elevated: rgba(30, 46, 62, 0.95); --glass-input: rgba(7, 11, 15, 0.95); } } @media (prefers-reduced-transparency: reduce) { :root[data-design="glass"] { --glass-bg: rgba(255, 255, 255, 0.96); --glass-elevated: #ffffff; --glass-input: #ffffff; } :root[data-design="glass"][data-theme="dark"] { --glass-bg: rgba(24, 37, 50, 0.97); --glass-elevated: #1d2e3f; --glass-input: #070b0f; } }