 Ulas
|
2a2249182e
|
feat: Phase 3 - Micro-Interactions + Polish
glass.css - Phase 3 Ergänzungen:
Nav Auto-Hide (Section 18):
- .nav-bottom: will-change: transform + transition für smooth slide
- .nav-bottom--hidden: translateY(100% + safe-area) + pointer-events: none
Modal Spring-Entrance (Section 19):
- Desktop: glass-modal-scale-in mit --ease-glass (spring overshoot)
0.32s, scale(0.90) → scale(1) + translateY(8px) → 0
- Mobile: glass-sheet-in, sanfterer Slide (40% statt 100%) + opacity ramp
- Beide Animationen ersetzen die linearen layout.css-Varianten
Seitentransitionen (Section 20):
- In-Animationen: 0.30s mit --ease-glass statt 0.20s ease
- Out-Animationen: 0.14s mit --ease-out (schnell raus, langsam rein)
List-Stagger (Section 21):
- 0.28s + --ease-glass für physikalisch plausibleren Erscheinungseffekt
Focus-Ring (Section 22):
- transition auf outline-offset + box-shadow für sanften Focus-Pop
Skeleton Shimmer (Section 23):
- 105° Gradient mit glass-highlight-Tint statt flat-grey
- Hellerer Mittelpunkt simuliert Lichtreflexion
FAB Attention Pulse (Section 24):
- Einmaliger Ring-Expand 0.6s nach Erscheinen (fab-ring-pulse)
- Kombinierte animation-Deklaration mit fab-in
Accessibility (Section 25):
- prefers-reduced-motion deaktiviert alle Phase-3-Animationen
router.js:
- initNavHideOnScroll(): scroll-Listener auf #main-content
versteckt .nav-bottom beim Runterscrollen (+ 4px Hysterese)
zeigt wieder beim Hochscrollen (- 4px) oder bei < 10px
nur aktiv bei < 1024px (Mobile/Tablet, kein Desktop)
- wird in renderAppShell() nach initBottomNavSwipe() aufgerufen
|
2026-04-13 17:11:38 +02:00 |
|
|
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 |
|