/* ===================================================================== EquiFeedBox — Design-Variante "AURORA" Glas-Design + Lebendigkeit: Aurora ist KEIN eigenes Design, sondern eine Animations-Schicht über dem Glas-Design. trägt dabei data-design="glass" (erbt ALLE Glas-Styles aus glass.css) und zusätzlich data-design-variant="aurora" — nur darauf zielen diese Regeln. Inhalt: 1. Lebendiger Seitenhintergrund (wandernde Farbschleier) 2. Karten: Eintritt + Schwebe-Hover 3. Buttons: federn + Glühen 4. Schalter: schnappen mit Overshoot + Leuchten 5. Status: pulsierender Online-Punkt, hüpfender Update-Pfeil 6. Modals/Toasts: federnder Eintritt 7. Reduced Motion: alles aus ===================================================================== */ /* ---------- 1. Seitenhintergrund: Aurora-Schleier ---------- */ /* Kräftigere Farbtupfer als im Glas-Design + deutlich lebhaftere Drift. body::before (Ebene aus glass.css) bekommt mehr Bewegung; body::after legt zwei zusätzliche Farbschleier darüber, die gegenläufig wandern und ihre Farbe langsam durchs Spektrum schieben (hue-rotate). */ :root[data-design-variant="aurora"] { --glass-page-bg: radial-gradient(1000px 600px at 12% 0%, rgba(122, 170, 235, 0.50), transparent 60%), radial-gradient(900px 560px at 95% 18%, rgba(110, 205, 170, 0.40), transparent 60%), radial-gradient(1100px 700px at 55% 105%, rgba(190, 150, 225, 0.42), transparent 60%), linear-gradient(160deg, #eef4fb, #dce8f5); } :root[data-design-variant="aurora"][data-theme="dark"] { --glass-page-bg: radial-gradient(1000px 600px at 12% 0%, rgba(64, 140, 190, 0.26), transparent 60%), radial-gradient(900px 560px at 95% 18%, rgba(60, 180, 150, 0.16), transparent 60%), radial-gradient(1100px 700px at 55% 105%, rgba(120, 90, 200, 0.22), transparent 60%), linear-gradient(160deg, #121a22, #07090d); } :root[data-design-variant="aurora"] body::before { inset: -10%; animation: aurora-drift 34s ease-in-out infinite alternate; } :root[data-design-variant="aurora"] body::after { content: ''; position: fixed; inset: -15%; z-index: -1; pointer-events: none; background: radial-gradient(620px 460px at 22% 75%, rgba(96, 200, 230, 0.22), transparent 65%), radial-gradient(720px 520px at 80% 30%, rgba(190, 140, 235, 0.20), transparent 65%); animation: aurora-sway 26s ease-in-out infinite alternate, aurora-hue 48s linear infinite; } :root[data-design-variant="aurora"][data-theme="dark"] body::after { background: radial-gradient(620px 460px at 22% 75%, rgba(45, 160, 190, 0.16), transparent 65%), radial-gradient(720px 520px at 80% 30%, rgba(140, 100, 220, 0.15), transparent 65%); } @keyframes aurora-drift { from { transform: translate3d(-2.5%, -1.5%, 0) scale(1.03); } to { transform: translate3d(2.5%, 2%, 0) scale(1.12); } } @keyframes aurora-sway { from { transform: translate3d(3%, 2%, 0) rotate(0.001deg); } to { transform: translate3d(-3%, -2.5%, 0) rotate(0.001deg); } } @keyframes aurora-hue { from { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(40deg); } to { filter: hue-rotate(0deg); } } /* ---------- 2. Karten: sanfter Eintritt + Schwebe-Hover ---------- */ :root[data-design-variant="aurora"] .device-card { animation: aurora-rise 0.5s cubic-bezier(0.22, 1.2, 0.36, 1) backwards; transition: transform 0.25s cubic-bezier(0.22, 1.2, 0.36, 1), box-shadow 0.25s ease; } :root[data-design-variant="aurora"] .device-grid > .device-card:nth-child(2) { animation-delay: 0.08s; } :root[data-design-variant="aurora"] .device-grid > .device-card:nth-child(3) { animation-delay: 0.16s; } :root[data-design-variant="aurora"] .device-grid > .device-card:nth-child(4) { animation-delay: 0.24s; } :root[data-design-variant="aurora"] .device-grid > .device-card:nth-child(5) { animation-delay: 0.32s; } /* Eintritts-Animation NUR beim echten Erst-Render: patchDeviceCard() ersetzt die Karte bei jedem WS-Status-Update per outerHTML (≈ minütlich) — das neue DOM-Element spielte aurora-rise sonst jedes Mal erneut ab und die sichtbare Karte blinkte (bei nth-child-Delay sogar kurz unsichtbar). */ :root[data-design-variant="aurora"] .device-card.no-entry-anim { animation: none; } :root[data-design-variant="aurora"] .device-card:hover { transform: translateY(-4px); } @keyframes aurora-rise { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } } /* Tab-Panels gleiten beim Wechsel sanft herein */ :root[data-design-variant="aurora"] .tab-panel.active { animation: aurora-fade 0.3s ease-out; } @keyframes aurora-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ---------- 3. Buttons: federn + Glühen ---------- */ :root[data-design-variant="aurora"] .btn { transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease; } :root[data-design-variant="aurora"] .btn:hover { transform: translateY(-1.5px); } :root[data-design-variant="aurora"] .btn:active { transform: scale(0.95); } /* Farbiges Glühen passend zur Button-Semantik (nur bei Hover, dezent) */ :root[data-design-variant="aurora"] .btn-primary:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 45%, transparent); } :root[data-design-variant="aurora"] .btn-success:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--success) 45%, transparent); } :root[data-design-variant="aurora"] .btn-danger:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--danger) 45%, transparent); } /* Aktiver Nav-Tab atmet ganz leicht (zieht den Blick auf den Ort der Seite) */ :root[data-design-variant="aurora"] .nav-tab { transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s, color 0.2s; } :root[data-design-variant="aurora"] .nav-tab:active { transform: scale(0.94); } /* ---------- 4. Schalter: schnappen + leuchten ---------- */ :root[data-design-variant="aurora"] .toggle-slider::before { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } :root[data-design-variant="aurora"] .toggle-slider { transition: background 0.25s ease, box-shadow 0.25s ease; } :root[data-design-variant="aurora"] .toggle input:checked + .toggle-slider { box-shadow: 0 0 12px color-mix(in srgb, var(--success) 55%, transparent); } /* ---------- 5. Status: Puls + Hüpfer ---------- */ /* Online-Badge bekommt einen pulsierenden Lebenszeichen-Punkt */ :root[data-design-variant="aurora"] .status-badge.status-online::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 0.35rem; animation: aurora-pulse 2.2s ease-in-out infinite; } @keyframes aurora-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); } 50% { opacity: 0.55; box-shadow: 0 0 0 5px transparent; } } /* "Update läuft …"-Badge: bewusst KEINE Animation (kein Pulsieren). */ /* Update-Pfeil hüpft sanft (lädt zum Antippen ein) */ :root[data-design-variant="aurora"] .update-badge { animation: aurora-hop 2.6s ease-in-out infinite; } @keyframes aurora-hop { 0%, 100%, 30% { transform: translateY(0); } 12% { transform: translateY(-3px); } 20% { transform: translateY(-1px); } } /* MQTT-Indikator pulsiert mit, solange verbunden */ :root[data-design-variant="aurora"] .mqtt-indicator.connected { animation: aurora-pulse 2.6s ease-in-out infinite; } /* ---------- 6. Modals & Toasts: federnder Eintritt ---------- */ :root[data-design-variant="aurora"] .modal, :root[data-design-variant="aurora"] .confirm-box { animation: aurora-spring-in 0.38s cubic-bezier(0.22, 1.2, 0.36, 1); } @keyframes aurora-spring-in { from { opacity: 0; transform: translateY(22px) scale(0.96); } to { opacity: 1; transform: none; } } :root[data-design-variant="aurora"] .toast { transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } /* Eingabefelder: Fokus blüht weich auf statt hart umzuschalten */ :root[data-design-variant="aurora"] input:focus, :root[data-design-variant="aurora"] select:focus, :root[data-design-variant="aurora"] textarea:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); transition: box-shadow 0.25s ease; } /* ---------- 7. Barrierefreiheit: Reduced Motion ---------- */ @media (prefers-reduced-motion: reduce) { :root[data-design-variant="aurora"] body::before, :root[data-design-variant="aurora"] body::after, :root[data-design-variant="aurora"] .device-card, :root[data-design-variant="aurora"] .tab-panel.active, :root[data-design-variant="aurora"] .modal, :root[data-design-variant="aurora"] .confirm-box, :root[data-design-variant="aurora"] .status-badge.status-online::before, :root[data-design-variant="aurora"] .status-badge.status-updating, :root[data-design-variant="aurora"] .update-badge, :root[data-design-variant="aurora"] .mqtt-indicator.connected { animation: none; } :root[data-design-variant="aurora"] .btn, :root[data-design-variant="aurora"] .nav-tab, :root[data-design-variant="aurora"] .device-card, :root[data-design-variant="aurora"] .toggle-slider, :root[data-design-variant="aurora"] .toggle-slider::before { transition: none; } /* Hover-/Active-Transforms ebenfalls neutralisieren: mit transition:none SPRÄNGEN sie sonst hart (ruckartiger als die weiche Animation, die Reduced Motion gerade vermeiden soll). */ :root[data-design-variant="aurora"] .device-card:hover, :root[data-design-variant="aurora"] .btn:hover, :root[data-design-variant="aurora"] .btn:active { transform: none; } }