 Ulas
|
d27216203f
|
feat: Phase 2 - Glass Modul-Komponenten
glass.css - Phase 2 Ergänzungen:
Form-Inputs:
- Glass-Border (--glass-border-subtle) + verbesserter Focus-Ring
mit color-mix-basiertem Glow statt einfacher box-shadow
- Modal-Inputs: explizit --color-surface-2 als Hintergrund
Sticky Headers:
- backdrop-filter auf --blur-sm + saturate(160%) mit Glass-Tokens
- Hintergrund 80% opak statt 90% für mehr sichtbaren Blur-Effekt
- Glass-Border unten
Toasts:
- --radius-glass-card (20px) statt --radius-sm
- Standard-Toast: Dark-Glass mit backdrop-filter
- Farbige Toasts: specular inset-highlight
Filter-Chips:
- Inaktiv: --glass-border-subtle
- Aktiv: Glass backdrop-filter + Accent-Tint + specular highlight
Priority Badges:
- Capsule-Radius (--radius-glass-chip)
- 1px semi-transparente Farb-Border
Toggle Switch:
- Specular Highlight + Gegenlicht auf Thumb via inset box-shadow
- Animation verwendet --transition-glass Easing
Dashboard Widgets:
- Glass-Border + --glass-shadow-sm
- Specular ::before Highlight-Linie oben
FAB-Backdrop (Dashboard):
- blur(4px) + 18% Dimming statt 25%
contacts.css, notes.css, shopping.css:
- Search-Inputs direkt auf Glass-Tokens migriert
(--radius-glass-button, --glass-border-subtle, Glass-Focus-Ring)
|
2026-04-13 17:05:19 +02:00 |
|
|
Ulas
|
b63418b475
|
feat: Phase 1 - Liquid Glass Shell Components
Neue Datei public/styles/glass.css (rein additiv, kein bestehender
Code verändert, nur optische Overrides über @supports-Guards):
Bottom Navigation:
- backdrop-filter + background-color auf --glass-* Tokens umgestellt
- Active-Item: konzentrische Glass-Kapsel (color-mix + inset highlight)
- Hover (Maus): subtiles Glass-Pill via color-mix
Sidebar (Desktop ≥ 1024px):
- backdrop-filter blur(8px) saturate(160%) mit --glass-bg-elevated
- Glass-Border + --glass-shadow-md
- Active-Item: Glass-Pill + specular inset-shadow
Modal:
- Overlay: reduziertes Dimming + blur(4px) Page-Blur (Tiefeneffekt)
- Panel: --glass-bg-elevated + backdrop-filter + --glass-shadow-lg
- Sticky Header: matching Glass-BG für sauberes sticky-Verhalten
Buttons:
- .btn--primary: --radius-glass-button (capsule) + specular highlight
- .btn--secondary: capsule radius
- .btn--ghost hover: glass backdrop-filter
FAB:
- Specular-Highlight oben + Absenkung unten via inset box-shadow
Cards:
- .card--interactive hover: Glass-lift (nur auf hover-fähigen Geräten)
Accessibility:
- prefers-reduced-transparency: specular highlights + glass shadows deaktiviert
- prefers-reduced-motion: alle Transitions auf 0.01ms
|
2026-04-13 16:59:04 +02:00 |
|