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)
This commit is contained in:
Ulas
2026-04-13 17:05:19 +02:00
parent b63418b475
commit d27216203f
4 changed files with 234 additions and 11 deletions
+6 -5
View File
@@ -65,17 +65,18 @@
.notes-toolbar__search-input {
width: 100%;
padding: var(--space-2) var(--space-2) var(--space-2) calc(var(--space-2) * 2 + 16px);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
border: 1px solid var(--glass-border-subtle);
border-radius: var(--radius-glass-button);
background: var(--color-surface);
color: var(--color-text-primary);
font-size: var(--text-md);
outline-offset: 2px;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.notes-toolbar__search-input:focus {
outline: 2px solid var(--color-accent);
border-color: transparent;
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
}
@media (min-width: 1024px) {