/* === RESET & BASE === */ /* Inter selbst gehostet (Variable Font, latin-Subset inkl. Umlaute + €) — kein Google-Fonts-Request mehr: schneller, offline-faehig, DSGVO-sauber. Die Datei deckt als Variable Font alle Gewichte 400–700 ab. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/inter-latin.woff2') format('woff2'); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Das hidden-Attribut blendet IMMER aus — auch Elemente, deren Klasse ein eigenes display setzt (.actions, .chips, flex/grid-Container). Ohne diese Regel gewinnt die Klasse gegen den UA-Default und JS-Toggles per `hidden` bleiben wirkungslos; Module mussten dafuer je Klasse eigene Regeln bauen. */ [hidden] { display: none !important; } input, textarea, select, button { font-family: inherit; font-size: inherit; color: inherit; } input, textarea, select { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.5rem 0.75rem; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(91, 75, 196, 0.15); } /* Suchfelder bleiben beim Fokus dezent — kein Akzent-Ring */ input[type="search"]:focus { border-color: var(--color-border); box-shadow: none; } /* Strukturelle Tokens — Farben/Schatten definiert ausschliesslich themes.css (frueher lag hier ein kompletter Dark-Satz, der nur wegen der Bundle- Reihenfolge base→themes unsichtbar blieb) */ :root { --radius: 10px; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--color-bg); color: var(--color-text); line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Links (seit 0.75.0, docs/frontend.md → „Links"): interne Textlinks ruhig in Textfarbe ohne Unterstreichung — erkennbar an Ort und Hover. Hover/Fokus: Unterstreichung + Linkfarbe, sichtbarer Fokusring. Externe Links (neues Fenster, rel=external, absolute http(s)-URL) behalten die Linkfarbe. Alle Selektoren per :where() auf Element-Spezifitaet (0,0,1): Bausteine mit eigener Klasse (.btn, .badge, .chip, .tab, .tile, .stat, Navigation) gewinnen immer und bleiben unveraendert. Fliesstext (.markdown) unterstreicht zusaetzlich. */ a { color: var(--color-text); text-decoration: none; } a:where(:hover, :focus-visible) { color: var(--color-link, var(--color-primary-text, var(--color-primary))); text-decoration: underline; text-underline-offset: 0.15em; } a:where(:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 2px; } a:where([target="_blank"], [rel~="external"], [href^="http://"], [href^="https://"]) { color: var(--color-link, var(--color-primary-text, var(--color-primary))); } /* Optionales Kennzeichen fuer externe Links: … */ .link-external::after { content: "\2197"; display: inline-block; margin-left: 0.15em; font-size: 0.8em; text-decoration: none; } h1 { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; } h2 { font-size: 1.1rem; font-weight: 600; } /* === THEME DEFINITIONEN === */ /* 2 Modi: Light (Default) + Dark */ /* Aktives Theme: data-theme Attribut auf ("light" | "dark") */ /* Brand-Akzent (faictory, themeunabhaengig): zweifarbiger Verlauf wie auf faictory.de fuer Primaer-Buttons + Sidebar-Marke/Nav-Avatar. Core-Default; ein Projekt-CI kann --accent/--accent-2/--accent-gradient uebersteuern (partials/ci-style.php). Konsumiert via var(--accent-gradient, var(--color-primary)) in components.css (.btn--primary) und layout.css (Marke, Nav-Avatar). */ :root { --accent: #f97467; --accent-2: #790a0a; --accent-gradient: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); } /* --- LIGHT (Default) --- */ [data-theme="light"], :root { --color-primary: #5b4bc4; --color-primary-dark: #4d3fa6; --color-primary-light: #efedf9; --color-bg: #f6f5fa; --color-surface: #ffffff; --color-surface-hover: #faf9fd; --color-text: #211e33; --color-text-muted: #6f6d7a; --color-text-light: #a8a29e; --color-border: #e7e5e4; --color-border-light: #f5f5f4; --color-success: #059669; --color-success-light: #ecfdf5; --color-error: #dc2626; --color-error-light: #fef2f2; --color-warning: #d97706; --color-warning-light: #fffbeb; --color-info: #2563eb; --color-info-light: #eff6ff; /* Status als Text auf der hellen Statusflaeche (.alert--*, .badge--*): dunklere Stufe, damit AA (>= 4.5:1) auf *-light erreicht wird (tests/ci-contrast.test.php) */ --color-success-text: #047857; --color-error-text: #b91c1c; --color-warning-text: #b45309; --color-info-text: #1d4ed8; /* Schrift auf --color-warning als Flaeche (Nav-Badge, .count--warning) */ --color-on-warning: #1c1917; /* Badge-/Status-Farben (.badge--*, .status-select, .tag): Flaeche + Schrift */ --badge-muted-bg: #f3f4f6; --badge-muted-fg: #6f6d7a; --badge-gray-bg: #e5e7eb; --badge-gray-fg: #374151; --badge-blue-bg: #dbeafe; --badge-blue-fg: #1e40af; --badge-purple-bg: #ede9fe; --badge-purple-fg: #6d28d9; --badge-teal-bg: #ccfbf1; --badge-teal-fg: #0f766e; --badge-green-bg: #dcfce7; --badge-green-fg: #166534; --badge-yellow-bg: #fef3c7; --badge-yellow-fg: #92400e; --badge-orange-bg: #ffedd5; --badge-orange-fg: #9a3412; --badge-red-bg: #fee2e2; --badge-red-fg: #991b1b; --badge-pink-bg: #fce7f3; --badge-pink-fg: #9d174d; --badge-brown-bg: #f5e8d8; --badge-brown-fg: #78350f; --shadow: 0 1px 2px rgba(33,30,51,0.05), 0 4px 16px rgba(33,30,51,0.06); --shadow-md: 0 4px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04); --shadow-lg: 0 10px 15px rgba(0,0,0,0.06), 0 4px 6px rgba(0,0,0,0.03); /* Kacheln (.tile): grosser Radius, weicher Schatten, Hover staerker */ --tile-radius: calc(var(--radius, 10px) + 6px); --tile-border: rgba(33,30,51,0.06); --shadow-tile: 0 1px 2px rgba(33,30,51,0.04), 0 6px 20px rgba(33,30,51,0.08); --shadow-tile-hover: 0 2px 4px rgba(33,30,51,0.05), 0 14px 32px rgba(33,30,51,0.14); --login-gradient: linear-gradient(135deg, #faf5ff 0%, #fafaf9 50%, #f5f3ff 100%); --color-favorite: #fbbf24; } /* --- DARK --- */ [data-theme="dark"] { --color-primary: #897dd5; --color-primary-dark: #5b4bc4; --color-primary-light: rgba(137, 125, 213, 0.12); --color-bg: #09090b; --color-surface: #18181b; --color-surface-hover: #27272a; --color-text: #fafafa; --color-text-muted: #a1a1aa; --color-text-light: #71717a; --color-border: #27272a; --color-border-light: #1e1e22; --color-success: #34d399; --color-success-light: rgba(52, 211, 153, 0.12); --color-error: #f87171; --color-error-light: rgba(248, 113, 113, 0.12); --color-warning: #fbbf24; --color-warning-light: rgba(251, 191, 36, 0.12); --color-info: #60a5fa; --color-info-light: rgba(96, 165, 250, 0.12); --color-success-text: #34d399; --color-error-text: #f87171; --color-warning-text: #fbbf24; --color-info-text: #60a5fa; --color-on-warning: #18181b; --badge-muted-bg: rgba(161, 161, 170, 0.12); --badge-muted-fg: #a1a1aa; --badge-gray-bg: rgba(161, 161, 170, 0.18); --badge-gray-fg: #d4d4d8; --badge-blue-bg: rgba(96, 165, 250, 0.16); --badge-blue-fg: #93c5fd; --badge-purple-bg: rgba(167, 139, 250, 0.16); --badge-purple-fg: #c4b5fd; --badge-teal-bg: rgba(45, 212, 191, 0.16); --badge-teal-fg: #5eead4; --badge-green-bg: rgba(74, 222, 128, 0.16); --badge-green-fg: #86efac; --badge-yellow-bg: rgba(250, 204, 21, 0.16); --badge-yellow-fg: #fde68a; --badge-orange-bg: rgba(251, 146, 60, 0.16); --badge-orange-fg: #fdba74; --badge-red-bg: rgba(248, 113, 113, 0.16); --badge-red-fg: #fca5a5; --badge-pink-bg: rgba(244, 114, 182, 0.16); --badge-pink-fg: #f9a8d4; --badge-brown-bg: rgba(217, 160, 102, 0.16); --badge-brown-fg: #e7c9a5; --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.25); --shadow-md: 0 4px 6px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.25); --shadow-lg: 0 10px 25px rgba(0,0,0,0.45), 0 4px 10px rgba(0,0,0,0.3); --tile-border: #27272a; --shadow-tile: 0 1px 2px rgba(0,0,0,0.35), 0 6px 20px rgba(0,0,0,0.3); --shadow-tile-hover: 0 2px 4px rgba(0,0,0,0.4), 0 14px 32px rgba(0,0,0,0.5); --login-gradient: linear-gradient(135deg, #09090b 0%, #0f0a1f 50%, #09090b 100%); --color-favorite: #fbbf24; } /* Light-Theme Alert-Borders: kraeftigere Border, weil die *-light-Hintergruende im Light-Mode fast weiss sind */ [data-theme="light"] .alert--success { border-color: #a7f3d0; } [data-theme="light"] .alert--error { border-color: #fecaca; } [data-theme="light"] .alert--warning { border-color: #fde68a; } [data-theme="light"] .alert--info { border-color: #bfdbfe; } /* Dark/Light-Switch (Einstellungen → Erscheinungsbild) */ .theme-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: calc(var(--radius) - 3px); } .theme-switch-opt { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: calc(var(--radius) - 3px); font-size: 13px; font-weight: 600; color: var(--color-text-muted); text-decoration: none; transition: all 0.15s; } .theme-switch-opt:hover { color: var(--color-primary); } .theme-switch-opt--active { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow); } .theme-switch-opt--active:hover { color: var(--color-text); } /* === Icon System (SVG inline, Linear-Style) === */ /* Monochrome, 1px stroke, currentColor */ .icon { display: inline-block; width: 16px; height: 16px; vertical-align: middle; flex-shrink: 0; } .icon--sm { width: 14px; height: 14px; } .icon--lg { width: 20px; height: 20px; } /* Icons als background-image SVG (currentColor via filter) */ .icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* === Avatar (Sidebar-Benutzer-Chip + Konto-Popover) === Frueher gab es hier die komplette Top-Navigation (.nav*). Die ist entfernt — Sidebar ist das einzige Layout. Nur die Avatar-Klassen bleiben, weil sie der Benutzer-Chip und das Konto-Menue (partials/_usermenu-popover.php) nutzen. */ .nav-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary); color: var(--color-on-primary, #fff); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; } .nav-avatar-img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } /* Bereichs-Icon im Switcher (main.php, $areaIcon) */ .app-sidebar-area-icon { vertical-align: -2px; margin-right: 5px; } /* === Main Content === */ .main { padding: 0; width: 100%; } /* Container-Varianten: tragen das Padding, damit .main padding-frei bleibt. * So koennen Module mit eigener Sidebar edge-to-edge im .main sitzen, * waehrend normaler Content bequem Abstand hat. */ .container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 2rem; } .container--narrow { width: 100%; max-width: 640px; margin: 0 auto; padding: 2rem; } .container--wide { width: 100%; max-width: none; margin: 0; padding: 1rem; } /* === Seitenfluss: Abstand zwischen Bloecken (seit 0.76.0) ======================== * Jeder sichtbare Block im Seiteninhalt (.container, .page-main, .section) hat Abstand zum * vorherigen — auch Bausteine ohne eigenen margin-bottom (.grid, .tiles, .actions, p, form). * Nur margin-top mit Spezifitaet 0 (:where): vertikale Margins fallen mit dem margin-bottom * von .card/.alert/.page-header zusammen (Maximum, keine Summe); jede Klasse mit eigenem * margin-top (.mt-0, .section-lead, .list-pagination) gewinnt. Token: --flow-space. * Enge Paare bleiben eng: nach .section-title/-head, Seitenkopf, Toolbar, Chips, Reitern und * Filter-Panel gilt der Abstand des Vorgaengers; nach Absatz/Ueberschrift ein kleinerer (--flow-space-sm). */ :root { --flow-space: 1.25rem; --flow-space-sm: 0.75rem; } :where(.container, .container--narrow, .container--wide, .page-main, .section) > :where(:not(script, style, template, link, meta, input[type="hidden"], [hidden], dialog, .modal)) ~ :where(*) { margin-top: var(--flow-space); } :where(.container, .container--narrow, .container--wide, .page-main, .section) > :where(p, h1, h2, h3, h4) + :where(*) { margin-top: var(--flow-space-sm); } :where(.container, .container--narrow, .container--wide, .page-main, .section) > :where(.section-title, .section-head, .page-header, .back-link, .list-toolbar, .list-views, .chips, .tabs, .tabs-select, #filter-panel, .card-head) + :where(*) { margin-top: 0; } /* Lange Woerter/URLs in Fliesstext brechen um, statt die Seite zu verbreitern */ :where(.container, .container--narrow, .container--wide) :where(p, li, dd, .alert, .section-lead, .page-lead, .page-title, .section-title) { overflow-wrap: break-word; } /* Aktionsleisten: ein einzelner Button, der breiter als die Zeile ist (Blaettern mit langem Titel), bricht um statt die Seite zu verbreitern — normale Buttons passen und bleiben einzeilig */ .actions > .btn, .page-actions .btn, .section-actions .btn { max-width: 100%; white-space: normal; } /* === Ende Seitenfluss 0.76.0 === */ /* ============================================================ * Minimal-Layout (body[data-layout="minimal"], layouts/minimal.php, seit 0.67.0) * Kopf mit CI/Logo, Inhalt, Fusszeile — keine Sidebar. Default fuer externe * Benutzer (docs/extern.md). Glocke/Konto-Menue sind die Core-Komponenten der * Sidebar; hier klappen ihre Popover nach unten. * ============================================================ */ body[data-layout="minimal"] { min-height: 100vh; display: flex; flex-direction: column; } .app-minimal-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .app-minimal-header-inner { max-width: 1400px; margin: 0 auto; padding: 0.75rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .app-minimal-brand { display: inline-flex; align-items: center; gap: 0.75rem; min-width: 0; color: var(--color-text); text-decoration: none; } .app-minimal-brand:hover { text-decoration: none; } .app-minimal-brand-logo { display: inline-flex; align-items: center; border-radius: calc(var(--radius) - 2px); padding: 2px; } .app-minimal-brand-logo img { max-height: 40px; max-width: 180px; display: block; } .app-minimal-brand-name { display: flex; flex-direction: column; font-weight: 700; font-size: 1.05rem; line-height: 1.2; min-width: 0; } .app-minimal-brand-claim { font-weight: 400; font-size: 0.8rem; color: var(--color-text-muted); } .app-minimal-actions { display: flex; align-items: center; gap: 0.5rem; } .app-minimal-tools { margin: 0; } .app-minimal-tools .app-sidebar-tool { color: var(--color-text-muted); } .app-minimal-tools .app-sidebar-tool[data-tip]::after { bottom: auto; top: calc(100% + 6px); } .app-minimal-tools .app-sidebar-bell-menu { bottom: auto; top: calc(100% + 8px); left: auto; right: 0; } .app-minimal-user { display: inline-flex; align-items: center; gap: 0.5rem; padding: 4px 8px 4px 4px; border-radius: 999px; color: var(--color-text); } .app-minimal-user:hover { background: var(--color-surface-hover); } .app-minimal-user-name { font-weight: 600; font-size: 0.9rem; } .app-minimal-nav { display: flex; width: fit-content; max-width: calc(100% - 4rem); margin: 0 auto 0.75rem; overflow-x: auto; } .app-minimal-main { flex: 1; } .app-minimal-footer { padding: 1rem 2rem; text-align: center; font-size: 0.8rem; color: var(--color-text-muted); border-top: 1px solid var(--color-border); } @media (max-width: 640px) { .app-minimal-header-inner { padding: 0.6rem 1rem; } .app-minimal-user-name { display: none; } } /* ============================================================ * Sidebar-Layout (body[data-layout="sidebar"]) * Haupt-Navi wandert in eine fixe linke Spalte, Modul-Submenues * werden zu ausklappbaren Unterelementen. * * Breiten-Management via CSS-Variable --sidebar-width. Beim Collapse * wird nur die Variable geaendert, alles andere (Sidebar, Content, * Transitions) folgt automatisch. * ============================================================ */ body[data-layout="sidebar"] { --sidebar-width: 240px; --sidebar-gap: 0.5rem; } /* Collapsed-Mode: Sidebar schrumpft zur schmalen Icon-Rail (66px), sie bleibt * sichtbar. Nur die Variable aendert sich — .main und .app-sidebar folgen. * Wieder-Aufklappen ueber die Brand-Marke (app.js). */ body[data-layout="sidebar"][data-sidebar-collapsed="1"] { --sidebar-width: 66px; --sidebar-gap: 0px; } /* Gap wird ueber margin-left erzeugt, NICHT ueber padding-left. * Dadurch bleibt .main's Padding einheitlich bei 2rem und alle Views * die sich mit 'margin: -2rem' in .main rausziehen funktionieren konsistent. */ body[data-layout="sidebar"] .main { margin-left: calc(var(--sidebar-width) + var(--sidebar-gap)); width: calc(100% - var(--sidebar-width) - var(--sidebar-gap)); padding: 0; min-height: 100vh; transition: margin-left 0.2s ease, width 0.2s ease; } .app-sidebar { display: none; position: fixed; left: 0; top: 0; width: var(--sidebar-width, 240px); /* folgt der Collapse-Variable: 240px <-> 66px */ height: 100vh; /* --sidebar-* setzt das CI-Theming (partials/ci-style.php); ohne CI gilt das Theme. */ background: var(--sidebar-bg, var(--color-surface)); border-right: 1px solid var(--color-border); box-shadow: none; padding: 20px 12px; z-index: 100; flex-direction: column; gap: 4px; transition: width 0.2s ease, padding 0.2s ease; } body[data-layout="sidebar"] .app-sidebar { display: flex; } /* Collapsed: schmale Icon-Rail (Prototyp-Spec) — Labels/Name/Claim/Meta aus, * Icons zentriert. Die Sidebar bleibt sichtbar, verschwindet NICHT. */ body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar { padding: 20px 10px; overflow: visible; } body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-brand { justify-content: center; padding: 4px 0 18px; } body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-brand-name, body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-group-label { display: none; } body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-link { justify-content: center; padding: 9px 0; gap: 0; position: relative; } /* Eingeklappt: die Nav darf nicht clippen, sonst wird der Icon-Tooltip abgeschnitten. */ body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-nav { overflow: visible; } /* Label wird zum Tooltip: weisse Schrift auf schwarzem, abgerundetem "Button" rechts neben dem Icon. */ body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-link-label { display: block; position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); flex: none; padding: 6px 11px; background: #1a1a22; color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap; border-radius: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.12s ease; z-index: 300; } body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-link:hover .app-sidebar-link-label { opacity: 1; visibility: visible; } body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-user { justify-content: center; margin: 6px -10px 0; padding: 12px 0 2px; gap: 0; } body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-user-meta { display: none; } /* Brand nach Prototyp-Spec: Mark + Name/Claim + Collapse-Pfeil, keine Trennlinie. */ .app-sidebar-brand { padding: 0; display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* Logo-Darstellung: ENTWEDER neben dem Schriftzug (--mark, Default) ODER ueber die volle Breite mit Titel darunter (--full). Das Logo kann optional eine eigene Hintergrundfarbe bekommen (ci_logo_bg = "Marke"), unabhaengig von der Sidebar- Farbe — z. B. ein schwarzes Logo auf gelbem Grund. */ .app-sidebar-brand-logo-link { display: inline-flex; text-decoration: none; min-width: 0; } .app-sidebar-brand-box { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; } .app-sidebar-brand-box--bg { padding: 5px 7px; border-radius: 8px; } .app-sidebar-brand-img { display: block; max-width: 100%; height: auto; } /* Modus "neben dem Schriftzug": kompaktes Logo in Zeilenhoehe, Titel daneben. */ .app-sidebar-brand--mark .app-sidebar-brand-box { height: 30px; } .app-sidebar-brand--mark .app-sidebar-brand-box--bg { height: 36px; } .app-sidebar-brand--mark .app-sidebar-brand-img { height: 100%; width: auto; max-width: 140px; } /* Modus "volle Breite": Logo oben, Titel darunter. Die Breite (ci_logo_width) steht als Inline-Style am Link; Box und Bild fuellen sie. */ .app-sidebar-brand--full { flex-direction: column; align-items: stretch; gap: 12px; position: relative; } .app-sidebar-brand--full .app-sidebar-brand-logo-link { align-self: center; max-width: 100%; } .app-sidebar-brand--full .app-sidebar-brand-box { width: 100%; } .app-sidebar-brand--full .app-sidebar-brand-img { width: 100%; } .app-sidebar-brand--full .app-sidebar-brand-name { flex: none; text-align: center; align-self: center; max-width: 100%; } /* Linksbuendiges Vollbreiten-Logo (CI ci_logo_align = left): Logo UND Titel an den linken Rand statt zentriert — damit Marke und Schriftzug eine Kante teilen. */ .app-sidebar-brand--full.app-sidebar-brand--left .app-sidebar-brand-logo-link { align-self: flex-start; } .app-sidebar-brand--full.app-sidebar-brand--left .app-sidebar-brand-name { align-self: flex-start; text-align: left; } /* Einklapp-Pfeil oben rechts statt in einer eigenen Zeile: spart Hoehe. */ .app-sidebar-brand--full .app-sidebar-collapse-btn { position: absolute; top: 0; right: 0; } /* Eingeklappte Icon-Rail (66px): kein Platz fuers Logo — ausblenden, die Rail zeigt nur den Aufklapp-Button (siehe unten). */ body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-brand-logo-link { display: none; } .app-sidebar-brand-name { font-weight: 700; font-size: 15px; color: var(--sidebar-ink-strong, var(--color-text)); text-decoration: none; letter-spacing: -0.01em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Claim unter dem App-Namen (CI-Feld ci_claim, z.B. "CRM & Projekte") */ .app-sidebar-brand-claim { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--sidebar-ink, var(--color-text-muted)); opacity: 0.75; margin-top: -2px; } /* ---- Bereichs-Switcher (docs/frontend.md "Bereiche") ---------------------- * 2 Bereiche: Segmented-Pill ueber dem Dashboard-Link. 3+: Combobox-Button * mit Popover. Eingeklappte Rail zeigt nur die Initialen (Regeln unten). */ .app-sidebar-areas { margin: 0 0 14px; flex-shrink: 0; position: relative; } .app-sidebar-areas--pill { display: flex; padding: 3px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: calc(var(--radius) - 3px); gap: 2px; } /* Textfarben theme-basiert (nicht --sidebar-ink): der Pill-Hintergrund ist * --color-bg, nicht die CI-Sidebar-Farbe — sidebar-ink waere darauf unlesbar. */ .app-sidebar-area-seg { flex: 1; text-align: center; padding: 5px 8px; border-radius: calc(var(--radius) - 3px); font-size: 12.5px; font-weight: 600; color: var(--color-text-muted); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-sidebar-area-seg:hover { color: var(--color-primary-text, var(--color-primary)); } .app-sidebar-area-seg--active { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow); } .app-sidebar-area-seg--active:hover { color: var(--color-text); } .app-sidebar-area-seg-initial { display: none; } /* Combobox (3+ Bereiche): Button mit aktuellem Label + Chevron, Popover-Liste. */ .app-sidebar-area-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: calc(var(--radius) - 3px); font-size: 13px; font-weight: 600; color: var(--color-text); cursor: pointer; } .app-sidebar-area-btn:hover { border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); } .app-sidebar-area-btn-label { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-sidebar-area-btn-initial { display: none; } .app-sidebar-area-chevron { flex: 0 0 auto; opacity: 0.6; } .app-sidebar-area-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: calc(var(--radius) - 2px); box-shadow: var(--shadow-lg); padding: 4px; z-index: 300; } .app-sidebar-area-item { display: block; padding: 7px 10px; border-radius: calc(var(--radius) - 4px); font-size: 13px; font-weight: 500; color: var(--color-text); text-decoration: none; } .app-sidebar-area-item:hover { background: color-mix(in srgb, var(--color-text-muted) 9%, transparent); } .app-sidebar-area-item--active { color: var(--color-primary-text, var(--color-primary)); font-weight: 600; } /* Eingeklappte Icon-Rail: Pill wird zur Initial-Spalte, Combobox zum Initial-Button. */ body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-areas--pill { flex-direction: column; border-radius: calc(var(--radius) - 3px); padding: 3px; } body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-area-seg { padding: 6px 0; border-radius: calc(var(--radius) - 3px); } body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-area-seg-label { display: none; } body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-area-seg-initial { display: inline; } body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-area-btn { justify-content: center; padding: 7px 0; gap: 0; } body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-area-btn-label, body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-area-chevron { display: none; } body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-area-btn-initial { display: inline; } body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-area-menu { left: calc(100% + 8px); right: auto; top: 0; min-width: 180px; } .app-sidebar-nav { flex: 1; min-height: 0; /* Viele Reiter bei wenig Hoehe: die Nav scrollt, Elemente darunter (Usermenue, Projekt-Buttons) bleiben sichtbar und liegen nie darueber. */ overflow-y: auto; overscroll-behavior: contain; } .app-sidebar-module { display: block; line-height: 1.4; } /* Gruppen-Ueberschrift in der Nav (manifest.nav_group + config app.nav_groups). Standardmaessig NICHT eingerueckt: linksbuendig mit der linken Kante der Link-Pills (padding-left 0), einheitlich ueber alle Projekte. */ .app-sidebar-group-label { padding: 1.5rem 0.5rem 0.35rem 0; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sidebar-ink, var(--color-text-light)); opacity: 0.75; } .app-sidebar-group-label:first-child { padding-top: 0.35rem; } /* Nav-Reiter als abgerundete Pills (CI-Default aus CRM): kein Border-Left, keine eckige Voll-Breite — Hover/Active liegen als abgerundete Flaeche inset in der 12px-Sidebar-Polsterung. Hover = zarter Ink-Wash, Active = Primaerfarbe dezent auf Surface. */ .app-sidebar-link { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: calc(var(--radius) - 3px); color: var(--sidebar-ink, var(--color-text-muted)); text-decoration: none; font-size: 13.5px; font-weight: 500; white-space: nowrap; cursor: pointer; } .app-sidebar-link:hover { background: color-mix(in srgb, var(--sidebar-ink, var(--color-text-muted)) 9%, transparent); color: var(--sidebar-ink-strong, var(--color-text)); } .app-sidebar-link--active { background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)); color: var(--color-primary-text, var(--color-primary)); font-weight: 600; } .app-sidebar-link-icon { display: flex; align-items: center; flex: 0 0 auto; opacity: 0.75; } .app-sidebar-link--active .app-sidebar-link-icon { opacity: 1; } .app-sidebar-link-label { flex: 1; } /* Nav-Badge (manifest.nav_badge, z.B. faellige Wiedervorlagen): Pille am rechten Rand. */ .app-sidebar-link-badge { flex: 0 0 auto; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--color-warning); color: var(--color-on-warning); font-size: 0.68rem; font-weight: 700; line-height: 18px; text-align: center; } /* Text-Badge (nav_badge liefert String, z.B. "60 %", seit 0.74.0): neutral statt Warnfarbe — ein Stand ist Information, kein offener Punkt. */ .app-sidebar-link-badge--text { /* folgt der Linkfarbe (auch aktiv auf heller Pille in dunkler CI-Sidebar) */ background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Eingeklappt: Badge schrumpft zum Punkt oben rechts am Icon — Zahl entfaellt, das "hier ist was offen"-Signal bleibt sichtbar. */ body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-link-badge { position: absolute; top: 5px; right: 8px; min-width: 8px; width: 8px; height: 8px; padding: 0; font-size: 0; line-height: 0; } /* Klickbarer User-Chip unten: oeffnet das Settings-Modal (Button-Reset noetig, * da im Core ein *
*
F-012
*
Titel
…
*
* * */ .kanban { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; padding-bottom: 0.5rem; } .kb-col { flex: 1 1 0; min-width: 218px; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg); } .kb-col--done { border-style: dashed; } .kb-col-head { display: flex; align-items: center; gap: 0.4rem; min-height: 2.15rem; padding: 0 0.35rem 0.4rem; font-size: 0.82rem; font-weight: 600; color: var(--color-text); } .kb-col-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Aktion im Spaltenkopf (Plus): rechts, erst bei Hover/Fokus sichtbar — auf Touch immer */ .kb-col-head .btn--icon { margin-left: auto; opacity: 0; transition: opacity 0.15s; } .kb-col:hover .kb-col-head .btn--icon, .kb-col-head .btn--icon:focus-visible { opacity: 1; } @media (hover: none) { .kb-col-head .btn--icon { opacity: 1; } } .kb-col-body { display: flex; flex-direction: column; gap: 0.5rem; min-height: 60px; border-radius: calc(var(--radius) - 2px); } .kb-col-body.dragover { background: var(--color-primary-light); outline: 2px dashed var(--color-primary); outline-offset: -2px; } .kb-card { padding: 0.6rem 0.7rem; border: 1px solid var(--color-border); border-radius: calc(var(--radius) - 2px); background: var(--color-surface); box-shadow: var(--shadow); color: var(--color-text); cursor: pointer; } .kb-card[draggable="true"] { cursor: grab; } .kb-card:hover { border-color: var(--color-primary); } .kb-card.dragging { opacity: 0.45; } .kb-card.is-saving { opacity: 0.7; } /* Markierung: Farbpunkt .kb-card-dot im Kartenkopf (plus leicht getoenter Rahmen) — keine Linie links. *
F-012Bug
*/ .kb-card--primary { --kb-tone: var(--color-primary); } .kb-card--error { --kb-tone: var(--color-error); } .kb-card--warning { --kb-tone: var(--color-warning); } .kb-card--primary, .kb-card--error, .kb-card--warning { border-color: color-mix(in srgb, var(--kb-tone) 40%, var(--color-border)); } .kb-card-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--kb-tone, var(--color-text-light)); } .kb-card-dot + * { margin-right: auto; } .kb-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; margin-bottom: 0.3rem; } .kb-card-title { margin-bottom: 0.4rem; font-size: 0.85rem; font-weight: 600; line-height: 1.3; color: var(--color-text); } .kb-card-title:last-child { margin-bottom: 0; } .kb-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; font-size: 0.72rem; color: var(--color-text-muted); } .kb-card-meta .icon { vertical-align: -1px; } .kb-card-meta-end { margin-left: auto; white-space: nowrap; } .kb-empty { padding: 0.75rem 0; text-align: center; font-size: 0.78rem; color: var(--color-text-light); } /* === Tab-Panels (Reiter-Inhalt; .tabs/.tab existieren bereits oben) === */ /* === Utilities (einzweckige Klassen) === * Ersetzen die haeufigsten Inline-Styles in Views (style="color:var(--color-text-muted)", * margin-top:1rem, display:inline ...). Bewusst klein: nur was wiederholt vorkam. */ .text-muted { color: var(--color-text-muted); } .text-xs { font-size: 0.75rem; } .text-sm { font-size: 0.85rem; } .mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .inline { display: inline; } /* Vertikaler Stapel mit gleichmaessigem Abstand (statt margin je Kind) */ .stack { display: flex; flex-direction: column; gap: 0.75rem; } .stack--sm { gap: 0.4rem; } /* Aktionen nebeneinander (Formular-Fuss ausserhalb eines Popups, Button-Gruppen) */ .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .actions--end { justify-content: flex-end; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } /* Nur fuer Screenreader sichtbar (seit 0.75.0) — z. B. Text zu einem Farbpunkt */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* === Element-Katalog (showcase/index.php): Demo-Bausteine === */ .demo-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; } .demo-row + .demo-row { margin-top: 0.9rem; } .demo-row > .demo-note { flex: 1 1 20rem; margin-top: 0; } .demo-narrow { max-width: 520px; } .demo-lead { max-width: 680px; } /* Rahmen um ein Seiten-Beispiel (Seitenkopf), damit es nicht wie der echte Kopf wirkt */ .demo-frame { padding: 1.25rem 1.25rem 0.25rem; border: 1px dashed var(--color-border); border-radius: var(--radius); margin-bottom: 1rem; } .demo-frame .page-header { margin-bottom: 1rem; } .demo-note { font-size: 0.78rem; color: var(--color-text-muted); margin-top: 0.5rem; } .demo-note code, code.inline-code { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 5px; padding: 0.05rem 0.35rem; font-size: 0.78rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } /* --- Kompaktes Formular-Grid (Settings-Panels: SMTP, Team, Profil, 2FA) --- Basis-Primitive fuer Label-ueber-Feld-Formulare. base.css stylt zwar jedes input/select generisch (Rahmen/Padding), aber ohne diese Regeln stehen Labels inline in Default-Groesse und die Felder stapeln full-width statt im 2-Spalten- Grid. Aus dem faictory-igepa-Projekt (project.css, "Golden-Master modules.css") in den Core zurueckportiert, damit alle Feature-Panels sauber rendern. Die spezifischeren .stammdaten-grid-Regeln weiter unten ueberschreiben das Label- Layout dort bewusst (Label links neben Feld). */ .crm-compact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem 0.75rem; } @media (max-width: 640px) { .crm-compact-grid { grid-template-columns: 1fr; } } .crm-field label { display: block; font-size: 0.8rem; font-weight: 500; color: var(--color-text); margin-bottom: 0.3rem; } .crm-field input, .crm-field select, .crm-field textarea { width: 100%; padding: 0.4rem 0.625rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 0.85rem; background: var(--color-bg); color: var(--color-text); } /* Checkbox/Radio nie full-width ziehen (die generische .crm-field-input-Regel oben wuerde sie sonst strecken → Label rutscht weg, Kontrollkaestchen mittig). Betrifft z. B. den Button-Farbverlauf-Schalter im CI-Panel. */ .crm-field input[type="checkbox"], .crm-field input[type="radio"] { width: auto; } .crm-field textarea { resize: vertical; min-height: 2.5rem; font-family: inherit; } .crm-field input:focus, .crm-field select:focus, .crm-field textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15); } /* --- CI-Panel: Formular in thematische Abschnitte, zweispaltig (Masonry) --- Jeder .ci-section-Block bleibt beim Umbruch ganz (break-inside: avoid). Bei Platzmangel faellt columns auf eine Spalte zurueck. */ .ci-form-grid { columns: 2 17rem; column-gap: 1rem; } .ci-section { break-inside: avoid; margin: 0 0 1rem; padding: 0.9rem 1rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); } .ci-section > h4 { margin: 0 0 0.85rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-border-light, var(--color-border)); font-size: 0.9rem; font-weight: 600; letter-spacing: -0.01em; color: var(--color-text); } .ci-section .crm-field + .crm-field { margin-top: 0.9rem; } /* Farben im Raster statt untereinander: zwei Spalten, Abstand ueber gap (die Abschnitts-Adjacency-Regel oben wird hier neutralisiert). */ .ci-color-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem 0.75rem; margin-bottom: 0.9rem; } .ci-color-grid .crm-field + .crm-field { margin-top: 0; } /* Farbfeld (ci.php $colorPair): nativer Farbwaehler + Hex-Textfeld nebeneinander. .crm-field-Praefix, damit die Regeln die generische .crm-field-input-Regel (width:100%, padding) ueberstimmen. --compact = feste 100px fuer Verlauf/Marke. */ .crm-field .ci-color-pair { display: flex; gap: 0.5rem; align-items: center; } .crm-field .ci-color-input { width: 42px; height: 34px; padding: 2px; border: 1px solid var(--color-border); border-radius: calc(var(--radius) - 3px); background: var(--color-surface); cursor: pointer; flex-shrink: 0; } .crm-field .ci-color-hex { min-width: 0; width: 100%; font-family: ui-monospace, monospace; } .crm-field .ci-color-pair--compact .ci-color-hex { width: 100px; } .ci-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.25rem; } /* Klickbares Logo-Feld: die Anzeige (Label) oeffnet den Dateidialog; Hover zeigt „Ändern". Kein separater Datei-Button. Selektoren mit .crm-field-Praefix, damit sie die generischen .crm-field label/input-Regeln ueberstimmen. */ .crm-field .logo-picker { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 96px; min-height: 56px; max-width: 220px; margin-bottom: 0; padding: 6px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: inherit; font-weight: 400; cursor: pointer; overflow: hidden; transition: border-color .15s, background .15s; } .crm-field .logo-picker:hover { border-color: var(--color-primary); } .crm-field .logo-picker:not(.logo-picker--filled) { border-style: dashed; } .crm-field .logo-picker:not(.logo-picker--filled):hover { background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)); } .crm-field .logo-picker--sm { min-width: 52px; min-height: 52px; } .crm-field .logo-picker-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .crm-field .logo-picker-img { max-width: 100%; max-height: 64px; height: auto; width: auto; object-fit: contain; } .crm-field .logo-picker--sm .logo-picker-img { max-height: 40px; } .crm-field .logo-picker-empty { color: var(--color-text-muted); font-size: 0.85rem; padding: 0.35rem 0.55rem; text-align: center; } .crm-field .logo-picker-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 0.78rem; font-weight: 600; opacity: 0; transition: opacity .15s; pointer-events: none; } .crm-field .logo-picker--filled:hover .logo-picker-overlay { opacity: 1; } .crm-field .logo-picker-remove { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0.4rem 0 0; font-weight: 400; font-size: 0.8rem; color: var(--color-text-muted); cursor: pointer; } /* --- Stammdaten (Settings): Split-Layout + Beleg-Fusszeilen-Vorschau --- */ .stammdaten-split { display: grid; grid-template-columns: 1fr 360px; gap: 1rem; align-items: start; } @media (max-width: 1100px) { .stammdaten-split { grid-template-columns: 1fr; } } .stammdaten-intro { color: var(--color-text-muted); font-size: 0.8rem; margin: 0 0 1.25rem; line-height: 1.5; } .stammdaten-sub { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin: 1.5rem 0 0.85rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border-light); } .stammdaten-grid { display: flex; flex-direction: column; } .stammdaten-grid .crm-field { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: 0.5rem 1.25rem; padding: 0.6rem 0; border-bottom: 1px solid var(--color-border-light); } .stammdaten-grid .crm-field:last-child, .stammdaten-grid .stammdaten-check:last-child { border-bottom: 0; } .stammdaten-grid .crm-field label { margin: 0; font-size: 0.82rem; font-weight: 500; color: var(--color-text); } .stammdaten-grid .crm-field input, .stammdaten-grid .crm-field select { width: 100%; } .stammdaten-check { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0; border-bottom: 1px solid var(--color-border-light); font-size: 0.85rem; color: var(--color-text-muted); cursor: pointer; } .stammdaten-check input { flex-shrink: 0; } .stammdaten-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border-light); } @media (max-width: 640px) { .stammdaten-grid .crm-field { grid-template-columns: 1fr; align-items: start; gap: 0.3rem; } } .beleg-foot-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; font-size: 0.75rem; line-height: 1.55; color: var(--color-text-muted); padding-top: 12px; border-top: 1px solid var(--color-border-light); } .beleg-foot-preview strong { color: var(--color-text); } /* === Busy-State (Ladeanimation fuer Aktions-Buttons/Forms, siehe app.js ctBusy) === */ /* Opt-in per data-busy. Der Spinner ersetzt den Button-Text, waehrend eine Aktion laeuft (synchron bis Seitenwechsel oder AJAX-Abschluss). Verhindert Doppel-Klick. */ .ct-busy { cursor: progress !important; opacity: 0.85; } .ct-busy .ct-busy-spinner, .ct-busy-spinner { display: inline-block; width: 0.9em; height: 0.9em; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: ct-spin 0.6s linear infinite; vertical-align: -0.1em; box-sizing: border-box; } .ct-busy-text { margin-left: 0.5em; } @keyframes ct-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .ct-busy-spinner { animation-duration: 1.4s; } } /* === Job-Tray (Hintergrund-Jobs Stufe 2, siehe app.js ctJobs) === */ /* Persistente Anzeige aktiver Hintergrund-Jobs unten rechts. Ueberlebt Navigation (ctJobs.resume() holt offene Jobs nach jedem Seitenladen). */ .ct-jobs-tray { position: fixed; bottom: 1rem; right: 1rem; z-index: 9998; display: flex; flex-direction: column; gap: 0.5rem; max-width: min(22rem, calc(100vw - 2rem)); pointer-events: none; } .ct-job { pointer-events: auto; display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.85rem; background: var(--color-surface, #fff); color: var(--color-text, #1a1a2e); border: 1px solid var(--color-border, rgba(0, 0, 0, 0.1)); border-radius: var(--radius, 8px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); font-size: 0.85rem; line-height: 1.3; } /* Ergebnis als Farbpunkt statt Linie links (laufend: Spinner) */ .ct-job.is-done::before, .ct-job.is-failed::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--color-success, #16a34a); } .ct-job.is-failed::before { background: var(--color-error, #dc2626); } .ct-job.is-clickable { cursor: pointer; } .ct-job-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ct-job-meta { flex: 0 0 auto; font-variant-numeric: tabular-nums; opacity: 0.7; } /* SMTP-Verbindungsstatus (Feature smtp): dauerhaftes Badge je Konto im Panel. Zustand kommt als Modifier smtp-status--never|ok|fail aus der View. */ .smtp-status { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.9rem; padding: 0.5rem 0.75rem; border-radius: var(--radius); background: var(--color-bg, #f5f4f7); } .smtp-status strong { font-size: 0.85rem; } .smtp-status--never strong { color: var(--color-text-muted, #6b7280); } .smtp-status--ok strong { color: var(--color-success, #1a7f4b); } .smtp-status--fail strong { color: var(--color-error, #b42318); } .smtp-status-when { color: var(--color-text-muted); font-size: 0.78rem; } .smtp-status-error { flex-basis: 100%; color: var(--color-error); font-size: 0.78rem; } /* Team-Benutzerliste (Feature team): kompakte Spalten-Zeilen + Akkordeon. Spalten: Kürzel · Name · E-Mail (mittig) · Rolle (rechts) · Chevron. */ .team-member { border: 1px solid var(--color-border-light); border-radius: var(--radius); margin-bottom: 0.5rem; } .team-row { display: grid; grid-template-columns: 56px minmax(110px, 1.1fr) minmax(150px, 1.6fr) 160px 20px; align-items: center; gap: 0.75rem; padding: 0.7rem 0.85rem; } .team-row--head { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); font-weight: 600; padding: 0.3rem 0.85rem; } .team-row--summary { cursor: pointer; list-style: none; } .team-row--summary::-webkit-details-marker { display: none; } .team-row--summary:hover { background: var(--color-bg, #f5f4f7); border-radius: calc(var(--radius) - 2px); } .team-kuerzel { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 30px; padding: 0 6px; border-radius: calc(var(--radius) - 3px); background: var(--color-bg, #f5f4f7); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; color: var(--color-text-muted); } .team-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .team-email { color: var(--color-text-muted); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .team-row-role { text-align: right; } .team-chevron { color: var(--color-text-muted); font-size: 0.8rem; transition: transform 0.15s; text-align: right; } .team-member[open] .team-chevron { transform: rotate(180deg); } @media (max-width: 640px) { .team-row { grid-template-columns: 44px 1fr auto; } .team-row--head, .team-email { display: none; } } /* === Schmale Viewports: nichts verbreitert die Seite (seit 0.76.0) ========================== * Eigener Block am Dateiende (gewinnt gegen gleich spezifische Regeln oben). Gefunden per * Seiten-Audit bei 390 px: Raster-Spalten mit breiter Tabelle, Aktions-/Kopfleisten ohne * Umbruch, Datei-Eingabe, Auswahlfelder und lange Links in Hinweisen. */ .grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 900px) { .grid--cols-3, .grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { .grid--cols-2, .grid--cols-3, .grid--cols-4 { grid-template-columns: minmax(0, 1fr); } } .grid > * { min-width: 0; } .section-actions { flex-wrap: wrap; min-width: 0; max-width: 100%; } .page-actions { min-width: 0; max-width: 100%; } .page-actions :is(select, input:not([type="checkbox"], [type="radio"])) { max-width: 100%; } .version-badges { flex: 0 1 auto; min-width: 0; max-width: 100%; } .attachments-input, input[type="file"] { max-width: 100%; } .alert > * { min-width: 0; } .alert { overflow-wrap: anywhere; } .search-page-form { flex-wrap: wrap; } .search-page-input { min-width: 0; } .section-actions, .page-actions { overflow-wrap: anywhere; } .chip { max-width: 100%; } :is(.chips, .actions) > .chip { white-space: normal; } .list-toolbar :is(select, input:not([type="checkbox"], [type="radio"])), .actions > select { max-width: 100%; min-width: 0; } .page-title-row > .page-title { min-width: 0; overflow-wrap: anywhere; } /* === Ende Schmale Viewports 0.76.0 === */ /* === Seitenfluss fuer Abschnittsueberschriften (seit 0.76.0) === * .section-title/.section-head setzen margin: 0 0 … (Spezifitaet 0,1,0) und schlugen damit den * Seitenfluss aus layout.css — eine Ueberschrift direkt nach .grid/.tiles/.split klebte daran. * Gleiche Selektoren wie layout.css → „Seitenfluss", hier mit :is() auf Klassen-Spezifitaet; * Abstands-Utilities (.mt-0/1/2) an der Ueberschrift gewinnen weiter. */ :where(.container, .container--narrow, .container--wide, .page-main, .section) > :where(:not(script, style, template, link, meta, input[type="hidden"], [hidden], dialog, .modal)) ~ :is(.section-title, .section-head):not(.mt-0, .mt-1, .mt-2) { margin-top: var(--flow-space); } :where(.container, .container--narrow, .container--wide, .page-main, .section) > :where(p, h1, h2, h3, h4) + :is(.section-title, .section-head):not(.mt-0, .mt-1, .mt-2) { margin-top: var(--flow-space-sm); } :where(.container, .container--narrow, .container--wide, .page-main, .section) > :where(.section-title, .section-head, .page-header, .back-link, .list-toolbar, .list-views, .chips, .tabs, .tabs-select, #filter-panel, .card-head) + :is(.section-title, .section-head):not(.mt-0, .mt-1, .mt-2) { margin-top: 0; } /* === Ende Seitenfluss Abschnittsueberschriften 0.76.0 === */ /* === Responsive === */ @media (max-width: 768px) { .container, .container--narrow, .container--wide { padding: 1rem; } .page-actions { margin-left: 0; justify-content: flex-start; } } /* ========================================================================= * PWA / Standalone — systemweit, unabhaengig vom Modul. * * Greift NUR, wenn die App vom Homescreen als installierte App laeuft * (display-mode: standalone bzw. iOS legacy navigator.standalone -> .pwa-standalone). * Im normalen Browser-Tab bleibt alles unveraendert. * * Ziel: Inhalte aus den Geraete-"Notches"/Home-Indicator-Bereichen halten * (safe-area-insets) und Touch-Bedienung angenehm machen. * * Layout-Container (app/views/layouts/main.php): die fixe linke Spalte ist *