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:
@@ -58,12 +58,12 @@
|
||||
.contacts-toolbar__search-input {
|
||||
width: 100%;
|
||||
padding: var(--space-2) var(--space-3) var(--space-2) 36px;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1.5px solid var(--color-border);
|
||||
border-radius: var(--radius-glass-button);
|
||||
border: 1.5px solid var(--glass-border-subtle);
|
||||
background-color: var(--color-surface-2);
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--text-md);
|
||||
transition: border-color var(--transition-fast);
|
||||
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
@@ -71,6 +71,7 @@
|
||||
outline: none;
|
||||
border-color: var(--color-accent);
|
||||
background-color: var(--color-surface);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
|
||||
Reference in New Issue
Block a user