openclaw/oikos
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d27216203f96417cbf541196363a84b3dae060d2
oikos/public/styles/glass.css
T
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

443 lines
14 KiB
CSS
Raw Blame History

/**
* Modul: Liquid Glass - Shell Components (Phase 1)
* Zweck: Glass-Effekte für Navigation, Modal, Buttons, FAB
* Rein additiv: überschreibt nur optische Eigenschaften,
* keine Layout-, Größen- oder Funktionsänderungen.
* Abhängigkeiten: tokens.css (Section 16 Glass-Tokens), layout.css
*
* Aufbau:
* 1. Bottom Navigation
* 2. Sidebar (Desktop)
* 3. Modal (Overlay + Panel)
* 4. Buttons (Capsule + Specular)
* 5. FAB
* 6. Karten (hover-only)
* 7. Reduced-motion / Reduced-transparency Overrides
*/
/* ================================================================
* 1. Bottom Navigation — Glass Bar
*
* Upgrade von color-mix-Fallback auf --glass-* Tokens.
* Bereits vorhandenes backdrop-filter wird auf Tokens umgestellt.
* ================================================================ */
@supports (backdrop-filter: blur(1px)) {
.nav-bottom {
background-color: var(--glass-bg);
backdrop-filter: var(--blur-md) saturate(180%);
-webkit-backdrop-filter: var(--blur-md) saturate(180%);
border-top: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow-sm);
}
}
/* Active-State: Konzentrische Glass-Kapsel hinter aktivem Nav-Item */
.nav-item[aria-current="page"] {
background: color-mix(in srgb, var(--active-module-accent, var(--color-accent)) 14%, transparent);
border-radius: var(--radius-glass-chip);
box-shadow: inset 0 1px 0 var(--glass-highlight-subtle);
}
/* Hover-State auf Desktop (falls Maus vorhanden) */
@media (hover: hover) {
.nav-item:hover:not([aria-current="page"]) {
background: color-mix(in srgb, var(--color-text-tertiary) 8%, transparent);
border-radius: var(--radius-glass-chip);
}
}
/* ================================================================
* 2. Sidebar (Desktop ≥ 1024px) — Glass Panel
*
* backdrop-filter saturate() gibt dem Sidebar-Hintergrund einen
* leichten Farbboost vom Content. blur() wirkt auf überlappenden
* Content beim Scrollen in engen Layouts.
* ================================================================ */
@media (min-width: 1024px) {
@supports (backdrop-filter: blur(1px)) {
.nav-sidebar {
background: var(--glass-bg-elevated);
backdrop-filter: var(--blur-sm) saturate(160%);
-webkit-backdrop-filter: var(--blur-sm) saturate(160%);
border-right: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow-md);
}
}
/* Active-State in Sidebar: Glass Pill mit Akzentlinie */
.nav-sidebar .nav-item[aria-current="page"] {
background: color-mix(in srgb, var(--active-module-accent, var(--color-accent)) 12%, transparent);
border-radius: var(--radius-sm);
box-shadow: inset 0 1px 0 var(--glass-highlight-subtle);
}
}
/* ================================================================
* 3. Modal — Glass Overlay + Glass Panel
*
* Overlay: leichter Page-Blur ("Tiefenschärfe"-Effekt) +
* reduziertes Dimming (Glass braucht weniger Overlay-Dunkel).
* Panel: Glass-Hintergrund mit --glass-bg-elevated + leichtem blur.
* Header: Sticky-Header im Panel bekommt identisches Glass-BG.
* ================================================================ */
@supports (backdrop-filter: blur(1px)) {
.modal-overlay {
/* Weniger Dimming, dafür Page-Blur für Tiefeneffekt */
background-color: rgba(0, 0, 0, 0.30);
backdrop-filter: var(--blur-xs) saturate(120%);
-webkit-backdrop-filter: var(--blur-xs) saturate(120%);
}
.modal-panel {
background: var(--glass-bg-elevated);
backdrop-filter: var(--blur-sm);
-webkit-backdrop-filter: var(--blur-sm);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow-lg);
}
/* Sticky-Header: identisches Glass-BG damit beim Scrollen
der Blur-Layer nicht durch den Inhalt bricht */
.modal-panel__header {
background: var(--glass-bg-elevated);
border-bottom-color: var(--glass-border);
}
}
/* Bottom-Sheet Handle: etwas prominenter auf Glass */
@media (max-width: 767px) {
@supports (backdrop-filter: blur(1px)) {
.modal-panel::before {
background: var(--glass-border);
}
}
}
/* ================================================================
* 4. Buttons — Capsule Shape + Specular Highlight
*
* Primär-Button: Kapsel-Radius (--radius-glass-button = full)
* + subtiles Specular-Highlight (inset box-shadow oben)
* Sekundär-Button: leichte Glass-Border-Verfeinerung
* ================================================================ */
.btn--primary {
border-radius: var(--radius-glass-button);
box-shadow:
var(--shadow-sm),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn--primary:hover {
box-shadow:
var(--shadow-md),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn--secondary {
border-radius: var(--radius-glass-button);
}
/* Ghost-Buttons bekommen beim Hover ein leichtes Glass-Pill */
@supports (backdrop-filter: blur(1px)) {
.btn--ghost:hover {
background: color-mix(in srgb, var(--color-text-tertiary) 10%, transparent);
backdrop-filter: var(--blur-xs);
-webkit-backdrop-filter: var(--blur-xs);
}
}
/* ================================================================
* 5. FAB (Floating Action Button) — Specular Highlight
*
* Inset box-shadow erzeugt Specular-Highlight-Illusion (Lichtquelle
* von oben) ohne Canvas-Manipulation oder SVG-Filter.
* ================================================================ */
.fab {
box-shadow:
var(--shadow-lg),
inset 0 1px 0 rgba(255, 255, 255, 0.28),
inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}
.fab:hover {
box-shadow:
var(--shadow-lg),
inset 0 1px 0 rgba(255, 255, 255, 0.32),
inset 0 -1px 0 rgba(0, 0, 0, 0.16);
}
/* ================================================================
* 6. Cards — Glass auf hover (nur interaktive Cards)
*
* .card--interactive bekommt beim Hover einen Glass-Lift:
* leichter Blur + Glass-Border + erhöhter Schatten.
* Nicht auf Touch-Geräten (hover: hover).
* ================================================================ */
@media (hover: hover) {
@supports (backdrop-filter: blur(1px)) {
.card--interactive:hover {
background: var(--glass-bg-hover);
backdrop-filter: var(--blur-xs);
-webkit-backdrop-filter: var(--blur-xs);
border: 1px solid var(--glass-border-subtle);
box-shadow: var(--glass-shadow-md);
}
}
}
/* ================================================================
* 7. Accessibility Overrides
*
* prefers-reduced-transparency: Tokens aus tokens.css schalten
* backdrop-filter bereits ab. Hier zusätzliche Sicherheit für
* Elemente, die ohne @supports-Guard arbeiten (Specular-Highlights).
*
* prefers-reduced-motion: Alle Glass-Transitionen deaktivieren.
* (Animationen in layout.css mit animation: none bereits gedeckt,
* hier nur Glass-spezifische Transitions.)
* ================================================================ */
@media (prefers-reduced-transparency: reduce) {
.nav-item[aria-current="page"],
.nav-item:hover:not([aria-current="page"]) {
box-shadow: none;
}
.btn--primary,
.btn--primary:hover,
.fab,
.fab:hover {
box-shadow: var(--shadow-sm);
}
}
@media (prefers-reduced-motion: reduce) {
.nav-item,
.nav-sidebar .nav-item,
.btn,
.fab,
.card--interactive {
transition-duration: 0.01ms !important;
}
}
/* ================================================================
* PHASE 2 — Modul-Komponenten
* ================================================================ */
/* ================================================================
* 8. Form-Inputs — Glass Border + verbesserter Focus-Ring
*
* Kein backdrop-filter auf Inputs (würde Inhalte hinter dem Input
* in Modals unattraktiv unscharf rendern). Stattdessen: subtile
* Glass-Border + abgestufter Focus-Glow via CSS-Shadow.
* ================================================================ */
.input,
.form-input,
select.form-input,
textarea.form-input {
border-color: var(--glass-border-subtle);
background-color: color-mix(in srgb, var(--color-surface) 95%, transparent);
}
.input:focus,
.form-input:focus {
border-color: var(--color-accent);
box-shadow:
0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent),
inset 0 1px 2px rgba(0, 0, 0, 0.04);
}
/* ================================================================
* 9. Sticky Header — Glass-Token-Upgrade
*
* Bestehender backdrop-filter (blur(12px)) in layout.css wird auf
* --glass-* Tokens umgestellt. Hintergrund transparenter machen
* damit der Blur-Effekt besser sichtbar ist.
* ================================================================ */
@supports (backdrop-filter: blur(1px)) {
.sticky-header {
background-color: color-mix(in srgb, var(--color-bg) 80%, transparent);
backdrop-filter: var(--blur-sm) saturate(160%);
-webkit-backdrop-filter: var(--blur-sm) saturate(160%);
border-bottom: 1px solid var(--glass-border-subtle);
}
}
/* ================================================================
* 10. Toasts — Glass + Capsule
*
* Standard-Toast: Dark-Glass (neutrales --neutral-800 bleibt als
* Fallback). Farbige Toasts (success/danger/warning) bekommen nur
* den Capsule-Radius.
* ================================================================ */
.toast {
border-radius: var(--radius-glass-card);
box-shadow: var(--glass-shadow-md);
}
@supports (backdrop-filter: blur(1px)) {
.toast:not(.toast--success):not(.toast--danger):not(.toast--warning) {
background-color: color-mix(in srgb, var(--neutral-800) 90%, transparent);
backdrop-filter: var(--blur-sm);
-webkit-backdrop-filter: var(--blur-sm);
border: 1px solid rgba(255, 255, 255, 0.10);
}
}
/* Farbige Toasts: nur Capsule + specular, kein Blur */
.toast--success,
.toast--danger,
.toast--warning {
border-radius: var(--radius-glass-card);
box-shadow:
var(--glass-shadow-md),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
/* ================================================================
* 11. Filter-Chips — Glass Active State
*
* Inaktiver Chip: glass border (subtil).
* Aktiver Chip: voller Glass-Pip mit backdrop-filter + Accent-Tint.
* ================================================================ */
.filter-chip {
border-color: var(--glass-border-subtle);
}
.filter-chip:hover:not(.filter-chip--active) {
border-color: var(--glass-border);
background-color: color-mix(in srgb, var(--color-text-tertiary) 8%, transparent);
}
@supports (backdrop-filter: blur(1px)) {
.filter-chip--active {
background: color-mix(in srgb, var(--color-accent) 18%, transparent);
backdrop-filter: var(--blur-xs);
-webkit-backdrop-filter: var(--blur-xs);
border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
}
/* ================================================================
* 12. Priority Badges — Capsule Radius + Glass Border
*
* Upgradet --radius-xs auf --radius-glass-chip (capsule) für einen
* moderneren Look. Behält semantic colors bei.
* ================================================================ */
.priority-badge {
border-radius: var(--radius-glass-chip);
border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}
/* Nav-Badge (Overdue-Indikator) */
.nav-badge {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
/* ================================================================
* 13. Toggle-Switch — Specular Thumb
*
* Der weiße Thumb bekommt einen subtilen inset-Schatten der eine
* Specular-Highlight-Illusion erzeugt (Lichtquelle von oben-rechts).
* Die Animation verwendet bereits --ease-glass cubic-bezier.
* ================================================================ */
.toggle__track::after {
box-shadow:
var(--shadow-sm),
inset 0 1px 0 rgba(255, 255, 255, 0.90),
inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}
.toggle input:checked + .toggle__track::after {
transition: transform var(--transition-glass);
}
/* ================================================================
* 14. Dashboard-Widgets — Glass Cards
*
* .widget bekommt eine leichte Glass-Behandlung:
* Stärkere Border, subtiles Highlight oben.
* Kein backdrop-filter (Widgets sind über normalem Seitenhintergrund,
* kein dramatischer Tiefeneffekt nötig).
* ================================================================ */
.widget {
border: 1px solid var(--glass-border-subtle);
box-shadow: var(--glass-shadow-sm);
}
.widget::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: var(--glass-highlight-subtle);
border-radius: var(--radius-md) var(--radius-md) 0 0;
pointer-events: none;
}
/* Relative-Positionierung für ::before */
.widget {
position: relative;
}
/* ================================================================
* 15. FAB-Backdrop (Dashboard) — Glass Blur
*
* Der Overlay-Hintergrund beim Dashboard-FAB-Menü bekommt einen
* dezenten Blur-Effekt für mehr Tiefe.
* ================================================================ */
@supports (backdrop-filter: blur(1px)) {
.fab-backdrop--visible {
backdrop-filter: var(--blur-xs);
-webkit-backdrop-filter: var(--blur-xs);
background: rgba(0, 0, 0, 0.18);
}
}
/* ================================================================
* 16. Search-Inputs (Modul-Toolbars)
*
* Modul-CSS wird on-demand nach glass.css geladen. Glass-Styles für
* modul-spezifische Search-Inputs stehen daher in den jeweiligen
* Modul-CSS-Dateien (contacts.css, notes.css, shopping.css).
* Hier werden nur token-basierte Fallback-Regeln für generische Inputs
* innerhalb von Modals definiert (via .modal-panel .form-input).
* ================================================================ */
.modal-panel .form-input,
.modal-panel .input {
background-color: var(--color-surface-2);
}
/* ================================================================
* 17. Accessibility — Phase 2 Overrides
* ================================================================ */
@media (prefers-reduced-transparency: reduce) {
.filter-chip--active,
.toast:not(.toast--success):not(.toast--danger):not(.toast--warning) {
background-color: var(--color-accent-light);
border-color: var(--color-accent);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.sticky-header {
background-color: var(--color-bg);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
@media (prefers-reduced-motion: reduce) {
.toggle__track::after {
transition: none;
}
.toast {
animation-duration: 0.01ms !important;
}
}
Reference in New Issue View Git Blame Copy Permalink