/* ========================================================================= themes.css — Struktur-Styles fuer das Modul `themes` Zwei orthogonale Dimensionen auf : data-style = Struktur (glass | compact | soft) — DIESE Datei data-theme = Farbmodus (light | dark) — main.css Die drei Styles sind BEWUSST visuell stark unterschiedlich (nicht nur Radius-Nuancen), damit der Wechsel auf einen Blick erkennbar ist: glass «Glas · Rund» — runde Pill-Buttons, Glas-Blur, kuehl, durchscheinende Flaechen. Desktop-Dichte. compact «Terminal · Eckig»— 0px-Ecken ueberall, solides Daten-Terminal, Tabellen-Gitter + Zebra, maximale Dichte. soft «Komfort · Mobil» — Mobile-First: grosse Touch-Targets (>=52px), grosse runde Karten, warme creme-Toene, groessere Schrift, luftig. NEUES STYLE ERGAENZEN: 1. Registry-Eintrag in app/modules/themes/service.py → STYLES 2. Token-/Komponenten-Block hier: [data-style=""] { ... } plus optional [data-style=""][data-theme="dark"]. 3. Mini-Preview (.theme-preview--), Swatch-Dots (.style-dot---*) und Dropdown-Eintrag in _layout.html. Keine Migration, keine neuen Token-NAMEN in Templates (Theme-Token-Lint). ========================================================================= */ /* ========================================================================= GLASS — «Glas · Rund» Runde, durchscheinende Apple-Glass-Optik. Signatur: Pill-Buttons + grosse Radien + Backdrop-Blur. (glass ist sonst der main.css-Default; dieser Block schaerft die runde Charakteristik.) ========================================================================= */ [data-style="glass"] { --radius-glass: 18px; --radius-control: 14px; } /* Pill-Buttons — das deutlichste runde Erkennungszeichen */ [data-style="glass"] .btn-primary, [data-style="glass"] .btn-ghost, [data-style="glass"] .btn-danger, [data-style="glass"] .btn--sm { border-radius: var(--radius-pill); } /* Vollrunde Akzent-Pills + runde Inputs/Cards */ [data-style="glass"] .badge, [data-style="glass"] .pill, [data-style="glass"] .status-pill { border-radius: var(--radius-pill); } [data-style="glass"] .card { /* Sanfter Tiefenverlauf auf der Glasflaeche */ background-image: linear-gradient( 160deg, color-mix(in srgb, var(--color-surface-2) 60%, transparent), transparent 60% ); } [data-style="glass"] .topnav { -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); background-color: var(--color-surface); } /* ========================================================================= COMPACT — «Terminal · Eckig» Solides Daten-Terminal: 0px-Ecken, kein Blur, Tabellen-Gitter mit Spalten- UND Zeilen-Linien, Zebra-Streifen, maximale Dichte. Touch-Targets bleiben >= 40px. ========================================================================= */ [data-style="compact"] { /* Alles eckig */ --radius-glass: 0px; --radius-control: 0px; --radius-pill: 0px; /* Kein Glas */ --glass-blur: none; --glass-shadow: 0 0 0 1px var(--color-border) inset; --elev-1: 0 0 0 1px var(--color-border) inset; --elev-3: 0 4px 14px -6px rgba(15, 17, 21, 0.22); /* Maximale Dichte */ --card-pad: 0.75rem; --table-pad-y: 0.3rem; --table-pad-x: 0.55rem; --table-th-pad-y: 0.3rem; --font-size-table: 0.8125rem; --control-pad-y: 0.4rem; --control-pad-x: 0.9rem; --gap-base: 0.5rem; /* Solide, flache Flaechen */ --color-surface: #ffffff; --color-surface-2: #f4f4f2; --color-bg-glow: transparent; } [data-style="compact"][data-theme="dark"] { --color-surface: #161616; --color-surface-2: #1f1f1f; --glass-shadow: 0 0 0 1px var(--color-border) inset; --elev-1: 0 0 0 1px var(--color-border) inset; --elev-3: 0 4px 14px -6px rgba(0, 0, 0, 0.6); } /* Karten: harte 1px-Box, kein Schatten — wie Terminal-Panels */ [data-style="compact"] .card { border-width: 1px; box-shadow: none; background-image: none; } /* Card-Titel: prominente Bebas-Leiste mit Acid-Unterkante */ [data-style="compact"] .card__title { margin-bottom: 0.5rem; padding-bottom: 0.3rem; border-bottom: 2px solid var(--color-acid); } [data-style="compact"] .card__header { padding-bottom: 0.4rem; margin-bottom: 0.5rem; } /* Voll-Gitter-Tabelle: Spalten- + Zeilen-Linien, Zebra, scharfer Header */ [data-style="compact"] .table__th, [data-style="compact"] .table th { background: var(--color-surface-2); border: 1px solid var(--color-border-strong); border-bottom-width: 2px; } [data-style="compact"] .table__td, [data-style="compact"] .table td { border: 1px solid var(--color-border); } [data-style="compact"] .table__row:nth-child(even), [data-style="compact"] .table tbody tr:nth-child(even) { background: var(--color-surface-2); } [data-style="compact"] .table__row:hover, [data-style="compact"] .table tbody tr:hover { background: color-mix(in srgb, var(--color-acid) 16%, transparent); } /* Buttons: scharf, rechteckig, mit klarer Kante */ [data-style="compact"] .btn-primary, [data-style="compact"] .btn-ghost, [data-style="compact"] .btn-danger, [data-style="compact"] .btn-secondary { min-height: 2.5rem; /* 40px — nie darunter */ border-radius: 0; letter-spacing: 0.1em; } [data-style="compact"] .input, [data-style="compact"] .select, [data-style="compact"] .textarea, [data-style="compact"] .form-field input:not([type="checkbox"]):not([type="radio"]), [data-style="compact"] .form-field select, [data-style="compact"] .form-field textarea { padding-top: 0.3rem; padding-bottom: 0.3rem; min-height: 2.5rem; border-radius: 0; } /* Dichter, eckiger Topnav */ [data-style="compact"] .topnav__inner { height: 3rem; gap: 1.25rem; } [data-style="compact"] .page { gap: 1rem; } /* Kein Blur auf Overlays */ [data-style="compact"] .modal-backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; } [data-style="compact"] .modal-card, [data-style="compact"] .modal__content { border-radius: 0; } /* ========================================================================= SOFT — «Komfort · Mobil» Mobile-First: grosse Touch-Targets (>=52px), grosse runde SOLIDE Karten (kein Blur), warme creme-Toene, groessere Schrift, viel Luft. Auch am Desktop bewusst beruehrungsfreundlich. ========================================================================= */ [data-style="soft"] { /* Sehr runde Formen */ --radius-glass: 24px; --radius-control: 16px; --radius-pill: 999px; /* Solide warme Flaechen (KEIN Glas-Blur — klar abgesetzt von glass) */ --glass-blur: none; --glass-shadow: 0 1px 2px rgba(120, 90, 60, 0.05), 0 14px 32px -14px rgba(120, 90, 60, 0.22); --elev-1: 0 2px 6px -2px rgba(120, 90, 60, 0.14); --elev-3: 0 22px 48px -20px rgba(120, 90, 60, 0.30); /* Warme creme/sand-Toene — deutlich anders als glass (kuehl) / compact (grau) */ --color-bg-1: #faf6f1; --color-bg-2: #f3ece2; --color-bg-glow: rgba(198, 241, 53, 0.20); --color-surface: #fffdf9; --color-surface-2: #fffaf3; --color-surface-solid: #fffdf9; --color-input-bg: #fffdf9; --color-border: rgba(120, 90, 60, 0.12); --color-border-strong: rgba(120, 90, 60, 0.22); /* Mehr Luft + groessere Schrift (Mobile-Komfort) */ --card-pad: 1.75rem; --table-pad-y: 0.9rem; --table-pad-x: 1.1rem; --table-th-pad-y: 0.8rem; --font-size-table: 0.9375rem; --control-pad-y: 0.9rem; --control-pad-x: 1.6rem; --gap-base: 1.25rem; } [data-style="soft"][data-theme="dark"] { /* Warm-dunkle Variante (Espresso statt kuehl) */ --color-bg-1: #1a1611; --color-bg-2: #221c15; --color-bg-glow: rgba(198, 241, 53, 0.12); --color-surface: #261f17; --color-surface-2: #2e2619; --color-surface-solid: #261f17; --color-input-bg: #211b14; --color-border: rgba(235, 215, 185, 0.12); --color-border-strong: rgba(235, 215, 185, 0.20); --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 32px -14px rgba(0, 0, 0, 0.6); --elev-1: 0 2px 6px -2px rgba(0, 0, 0, 0.45); --elev-3: 0 22px 48px -20px rgba(0, 0, 0, 0.7); } /* Grosse, runde, vollflaechige Touch-Buttons */ [data-style="soft"] .btn-primary, [data-style="soft"] .btn-ghost, [data-style="soft"] .btn-danger, [data-style="soft"] .btn-secondary { min-height: 3.25rem; /* 52px Touch-Target */ border-radius: var(--radius-pill); font-size: 0.9375rem; } [data-style="soft"] .btn--sm { min-height: 2.75rem; border-radius: var(--radius-pill); } /* Grosse Touch-Eingaben */ [data-style="soft"] .input, [data-style="soft"] .form-field input:not([type="checkbox"]):not([type="radio"]), [data-style="soft"] .form-field select, [data-style="soft"] .form-field textarea { min-height: 3.25rem; border-radius: var(--radius-control); font-size: 0.9375rem; } /* Karten: gross, rund, solide, weicher warmer Schatten */ [data-style="soft"] .card { background-image: none; border-radius: var(--radius-glass); } /* Grosszuegige, gut antippbare Tabellenzeilen */ [data-style="soft"] .table__row, [data-style="soft"] .table tbody tr { border-bottom: 1px solid var(--color-border); } [data-style="soft"] .topnav__inner { height: 4rem; } /* ========================================================================= Picker-UI — Topnav-Style-Dropdown (_layout.html) Hex-Swatches leben bewusst HIER (CSS wird nicht vom Template-Token-Lint geprueft) — Werte entsprechen STYLES[*].preview_colors in service.py. ========================================================================= */ .topnav__style { position: relative; margin-right: 0.5rem; } .topnav__style-trigger { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-control); color: var(--color-muted); background: var(--color-surface-2); transition: color 150ms, border-color 150ms, background-color 150ms; } .topnav__style-trigger:hover { color: var(--color-text); border-color: var(--color-acid); } .topnav__style-trigger svg { width: 1rem; height: 1rem; display: block; } .topnav__style-menu { min-width: 15rem; } .style-menu-item { display: flex; align-items: center; gap: 0.625rem; } .style-menu-item--active { background-color: var(--color-acid-soft); font-weight: 700; } .style-menu-divider { border-top: 1px solid var(--color-border); margin: 0.375rem 0; } /* Mini-Swatch-Punkte (3 Hex pro Style, aus STYLES.preview_colors) */ .style-dots { display: inline-flex; gap: 0.2rem; flex-shrink: 0; } .style-dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; border: 1px solid var(--color-border-strong); display: inline-block; } /* glass = kuehl/weiss, rund */ .style-dot--glass-1 { background-color: #eef1f5; border-radius: 50%; } .style-dot--glass-2 { background-color: #c6f135; border-radius: 50%; } .style-dot--glass-3 { background-color: #ffffff; border-radius: 50%; } /* compact = grau, eckig (Swatches werden hier eckig dargestellt) */ .style-dot--compact-1 { background-color: #d8d8d4; border-radius: 0; } .style-dot--compact-2 { background-color: #c6f135; border-radius: 0; } .style-dot--compact-3 { background-color: #ffffff; border-radius: 0; } /* soft = warm creme, sehr rund */ .style-dot--soft-1 { background-color: #f3ece2; } .style-dot--soft-2 { background-color: #c6f135; } .style-dot--soft-3 { background-color: #fffdf9; } /* ========================================================================= Settings-Seite /themes — Style-Karten + CSS-gezeichnete Mini-Previews Jede Preview spiegelt den realen Charakter (rund/eckig/gross+warm). ========================================================================= */ .theme-style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--gap-base); } .theme-style-card { position: relative; display: flex; flex-direction: column; gap: 0.625rem; padding: 1rem; text-align: left; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-glass); color: var(--color-text); cursor: pointer; font: inherit; transition: border-color 150ms, transform 150ms, box-shadow 150ms; } .theme-style-card:hover { transform: translateY(-2px); border-color: var(--color-border-strong); } .theme-style-card:focus-visible { outline: 2px solid var(--color-acid); outline-offset: 2px; } .theme-style-card--active { border-color: var(--color-acid); box-shadow: 0 0 0 1px var(--color-acid) inset; } .theme-style-card__label { font-family: var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; font-size: 1.125rem; line-height: 1.1; } .theme-style-card__desc { font-size: 0.8125rem; color: var(--color-muted); line-height: 1.5; } .theme-style-card__badge { position: absolute; top: 0.75rem; right: 0.75rem; padding: 0.1rem 0.5rem; font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; background: var(--color-acid); color: var(--color-on-acid); border-radius: var(--radius-pill); } /* --- Mini-Preview (rein CSS-gezeichnet, mode-unabhaengig) --------------- */ .theme-preview { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.7rem; border: 1px solid rgba(15, 17, 21, 0.1); } .theme-preview__card, .theme-preview__row { display: block; border: 1px solid rgba(15, 17, 21, 0.1); } .theme-preview__card { height: 1.7rem; position: relative; } /* Acid-Akzent-Element in der Mini-Card (Form variiert pro Style) */ .theme-preview__card::after { content: ""; position: absolute; top: 0.4rem; left: 0.4rem; width: 1.4rem; height: 0.55rem; background: #c6f135; } .theme-preview__row { height: 0.62rem; } /* glass: rund, kuehl, Pill-Akzent, dezenter Schatten */ .theme-preview--glass { background: #eef1f5; border-radius: 14px; } .theme-preview--glass .theme-preview__card { background: rgba(255, 255, 255, 0.9); border-radius: 9px; box-shadow: 0 3px 8px rgba(15, 17, 21, 0.12); } .theme-preview--glass .theme-preview__card::after { border-radius: 999px; } .theme-preview--glass .theme-preview__row { background: rgba(255, 255, 255, 0.7); border-radius: 6px; } /* compact: eckig, grau, Voll-Gitter mit harten Trennern */ .theme-preview--compact { background: #d8d8d4; border-radius: 0; gap: 0; padding: 0.5rem; } .theme-preview--compact .theme-preview__card { background: #ffffff; border-radius: 0; height: 1.3rem; margin-bottom: 0.3rem; border-bottom: 2px solid #c6f135; } .theme-preview--compact .theme-preview__card::after { border-radius: 0; } .theme-preview--compact .theme-preview__row { background: #ffffff; border-radius: 0; height: 0.52rem; border: 1px solid rgba(15, 17, 21, 0.28); } .theme-preview--compact .theme-preview__row:nth-child(odd) { background: #efefec; } /* soft: sehr rund, warm creme, gross, weicher Schatten */ .theme-preview--soft { background: linear-gradient(160deg, #faf6f1 0%, #f3ece2 100%); border-radius: 20px; gap: 0.55rem; padding: 0.85rem; } .theme-preview--soft .theme-preview__card { background: #fffdf9; border-radius: 14px; height: 1.9rem; border-color: rgba(120, 90, 60, 0.14); box-shadow: 0 5px 14px rgba(120, 90, 60, 0.20); } .theme-preview--soft .theme-preview__card::after { border-radius: 999px; } .theme-preview--soft .theme-preview__row { background: #fffdf9; border-radius: 999px; height: 0.8rem; border-color: rgba(120, 90, 60, 0.12); } /* --- Farbmodus Segmented-Control ---------------------------------------- */ .theme-mode-seg { display: inline-flex; gap: 0; border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); overflow: hidden; } .theme-mode-seg__btn { font-family: var(--font-display); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.08em; padding: var(--control-pad-y) var(--control-pad-x); min-height: 2.75rem; background: var(--color-surface-2); color: var(--color-muted); border: none; cursor: pointer; transition: background-color 150ms, color 150ms; } .theme-mode-seg__btn + .theme-mode-seg__btn { border-left: 1px solid var(--color-border-strong); } .theme-mode-seg__btn:hover { color: var(--color-text); } .theme-mode-seg__btn:focus-visible { outline: 2px solid var(--color-acid); outline-offset: -2px; } .theme-mode-seg__btn--active { background: var(--color-acid); color: var(--color-on-acid); }