/* ============================================================================ KanzleiSimple - Liquid-Glass-UI (Huelle) ---------------------------------------------------------------------------- Laedt NACH tailwind.min.css. Umgeht das non-JIT-Tailwind (handgeschrieben). Grundsaetze: - Glas NUR auf der Huelle (Topbar, Sidebar, Dropdowns, Modals). Inhaltsflaechen (Tabellen, Formulare, Karten) bleiben flach/weiss -> Lesbarkeit. - backdrop-filter steht in @supports -> alte Browser bekommen die soliden Tailwind-Grundfarben (bg-white / bg-primary-800) = voll lesbar (WCAG). - prefers-reduced-motion respektiert. ============================================================================ */ /* ---- App-Hintergrund (solider, nicht-weisser Grundton fuers Glas) ---------- */ body.ks-app { background-color: #c6d4ea; } /* Solide Vollbild-Ebene (position:fixed) - deckt beim Scrollen immer den ganzen Viewport; body.h-full ist nur 100vh hoch und wuerde die Body-Farbe sonst auf 100vh clippen (= harte Linie unter dem Falz). Solide Farbe, keine Kante. */ body.ks-app::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-color: #c6d4ea; } /* ============================ GLAS (nur mit Support) ======================== */ @supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) { /* Topbar - helles Frosted Glass, Inhalt scrollt sichtbar darunter durch */ .ks-topbar { background-color: rgba(255, 255, 255, 0.58) !important; -webkit-backdrop-filter: blur(24px) saturate(195%); backdrop-filter: blur(24px) saturate(195%); border-bottom: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 1px 0 rgba(15, 23, 42, 0.05), 0 8px 24px -16px rgba(15, 23, 42, 0.25); } /* Sidebar - DUNKLES Glas, transluzenter (heller Text bleibt -> Kontrast bleibt) */ .ks-sidebar { background-color: rgba(7, 30, 60, 0.78) !important; -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%); border-right: 1px solid rgba(255, 255, 255, 0.10); } /* Overlay-Panels (Dropdowns: Benachrichtigungen, Benutzer, Timer, Ankuendigungen) */ .ks-glass-panel { background-color: rgba(255, 255, 255, 0.92) !important; -webkit-backdrop-filter: blur(44px) saturate(185%); backdrop-filter: blur(44px) saturate(185%); border: 1px solid rgba(255, 255, 255, 0.65) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 14px 44px -12px rgba(15, 23, 42, 0.32); } /* Dashboard-Kacheln - Liquid Glass auf den Karten (nur .stat-card/.dashboard-widget). Deckung bewusst hoch (0.80) fuer Lesbarkeit der Zahlen/Listen/Charts, Glas-Effekt (Blur/Saturate) bleibt erhalten. */ .stat-card, .dashboard-widget { background-color: rgba(255, 255, 255, 0.80) !important; -webkit-backdrop-filter: blur(26px) saturate(185%); backdrop-filter: blur(26px) saturate(185%); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(255, 255, 255, 0.25), 0 14px 38px -16px rgba(30, 64, 130, 0.32); } /* Inhalts-Karten aller uebrigen Seiten - dezentes Glas, Specular-Rim via inset */ body.ks-app main .bg-white.rounded-xl.ring-1.ring-gray-200:not(.stat-card):not(.dashboard-widget):not(.ks-glass-panel) { background-color: rgba(255, 255, 255, 0.60) !important; -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 12px 32px -16px rgba(30, 64, 130, 0.28); } /* Sekundaer-Buttons (weiss/Outline) - echtes Frosted Glass. Nur a/button. */ body.ks-app a.bg-white.ring-1, body.ks-app button.bg-white.ring-1 { background-color: rgba(255, 255, 255, 0.62) !important; -webkit-backdrop-filter: blur(12px) saturate(170%); backdrop-filter: blur(12px) saturate(170%); } body.ks-app a.bg-white.ring-1:hover, body.ks-app button.bg-white.ring-1:hover { background-color: rgba(255, 255, 255, 0.80) !important; } /* Modal-Backdrops - Seite dahinter weichzeichnen */ .ks-modal-backdrop { -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%); background-color: rgba(17, 24, 39, 0.34) !important; } /* Modal-Panels - leichter Glas-Touch (hohe Deckung fuer Lesbarkeit) */ .ks-modal-pop { background-color: rgba(255, 255, 255, 0.92) !important; -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.6); } } /* Modal-Backdrop-Deckung (Fallback OHNE backdrop-filter) */ .ks-modal-backdrop { background-color: rgba(17, 24, 39, 0.50); } /* ============================ GLAS-BUTTONS ================================== Liquid Glass auf allen Buttons: heller Specular-Oberrand + farbgetoenter Schwebeschatten + Mikro-Interaktion (Hover-Lift / Press). Farbige Buttons mit Sheen-Verlauf; weisse Sekundaer-Buttons sind oben im @supports frosted (ring bleibt erhalten -> bewusst KEIN box-shadow auf Weiss). Nur a/button. */ a.bg-primary-600, button.bg-primary-600, a.bg-primary-500, button.bg-primary-500, a.bg-red-600, button.bg-red-600, a.bg-green-600, button.bg-green-600, a.bg-emerald-600, button.bg-emerald-600, body.ks-app a.bg-white.ring-1, body.ks-app button.bg-white.ring-1 { transition: box-shadow 160ms ease, transform 90ms ease, filter 160ms ease, background-color 160ms ease; } a.bg-primary-600, button.bg-primary-600, a.bg-primary-500, button.bg-primary-500, a.bg-red-600, button.bg-red-600, a.bg-green-600, button.bg-green-600, a.bg-emerald-600, button.bg-emerald-600 { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.05) 45%, rgba(0, 0, 0, 0.08)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 1px 2px rgba(15, 23, 42, 0.18), 0 8px 20px -8px rgba(15, 23, 42, 0.30); } a.bg-primary-600, button.bg-primary-600, a.bg-primary-500, button.bg-primary-500 { box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(0,0,0,0.12), 0 1px 2px rgba(15,23,42,0.18), 0 8px 22px -8px rgba(2,132,199,0.5); } a.bg-red-600, button.bg-red-600 { box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(0,0,0,0.12), 0 1px 2px rgba(15,23,42,0.18), 0 8px 22px -8px rgba(220,38,38,0.5); } a.bg-green-600, button.bg-green-600, a.bg-emerald-600, button.bg-emerald-600 { box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(0,0,0,0.12), 0 1px 2px rgba(15,23,42,0.18), 0 8px 22px -8px rgba(22,163,74,0.5); } a.bg-primary-600:hover, button.bg-primary-600:hover, a.bg-primary-500:hover, button.bg-primary-500:hover, a.bg-red-600:hover, button.bg-red-600:hover, a.bg-green-600:hover, button.bg-green-600:hover, a.bg-emerald-600:hover, button.bg-emerald-600:hover, body.ks-app a.bg-white.ring-1:hover, body.ks-app button.bg-white.ring-1:hover { transform: translateY(-0.5px); filter: brightness(1.04); } a.bg-primary-600:active, button.bg-primary-600:active, a.bg-primary-500:active, button.bg-primary-500:active, a.bg-red-600:active, button.bg-red-600:active, a.bg-green-600:active, button.bg-green-600:active, a.bg-emerald-600:active, button.bg-emerald-600:active, body.ks-app a.bg-white.ring-1:active, body.ks-app button.bg-white.ring-1:active { transform: translateY(0.5px) scale(0.99); filter: brightness(0.98); } /* ============================ MODAL POP-IN ================================== */ @keyframes ksPopIn { from { opacity: 0; transform: scale(0.965) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } .ks-modal-pop { animation: ksPopIn 190ms cubic-bezier(0.22, 1, 0.36, 1); transform-origin: center; will-change: transform, opacity; } @media (prefers-reduced-motion: reduce) { .ks-modal-pop { animation: none; } } /* ============================ NOTIFICATION-BADGES ========================== */ .ks-bell-badge { position: absolute; top: 3px; right: 3px; height: 17px; min-width: 17px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; background: #f97316; color: #ffffff; font-size: 10.5px; font-weight: 500; line-height: 1; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95); pointer-events: none; } /* ============================================================================ UI-Auffrischung 1.4.0 — rein kosmetisch ---------------------------------------------------------------------------- Setzt auf den Klassen auf, die das Dashboard bereits mitbringt (.stat-card, .stat-card dt, .stat-card .stat-value, .dashboard-widget). KEINE Markup- und KEINE JavaScript-Aenderung: Sortable, Chart, Umschalter und Zeitraum-Schalter bleiben unberuehrt. Warum hier und nicht im Template: Das Dashboard hat 901 Zeilen mit Drag-and-drop und Chart-Logik. Ein Umschreiben waere das Gegenteil von "nur optisch". Ueber CSS aendert sich das Aussehen, ohne dass eine einzige Funktion angefasst wird. Tailwind laeuft NICHT im JIT-Modus — deshalb durchgaengig handgeschriebenes CSS, keine arbitrary values. ============================================================================ */ :root { --ks-radius: 14px; --ks-rand: rgba(255, 255, 255, 0.72); --ks-schatten-ruhe: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 30px -14px rgba(30, 64, 130, .30); --ks-schatten-hover: 0 2px 4px rgba(16, 24, 40, .05), 0 20px 42px -16px rgba(30, 64, 130, .40); --ks-akzent: #0284c7; } /* ---- Karten: gleicher Radius, ruhigere Schatten, feine Lichtkante ---------- */ body.ks-app .stat-card, body.ks-app .dashboard-widget { border-radius: var(--ks-radius); box-shadow: var(--ks-schatten-ruhe); transition: box-shadow .22s ease, transform .22s ease; } /* Lichtkante oben — gibt der Karte Tiefe, ohne einen Rahmen zu zeichnen */ body.ks-app .stat-card, body.ks-app .dashboard-widget { position: relative; } body.ks-app .stat-card::before, body.ks-app .dashboard-widget::before { content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95) 22%, rgba(255, 255, 255, .95) 78%, transparent); pointer-events: none; } /* Anheben beim Ueberfahren — nur auf Zeigergeraeten, nie auf Touch */ @media (hover: hover) and (pointer: fine) { body.ks-app .stat-card:hover, body.ks-app .dashboard-widget:hover { box-shadow: var(--ks-schatten-hover); transform: translateY(-2px); } } /* ---- Kennzahlen: klare Hierarchie, ruhige Ziffern ------------------------- */ body.ks-app .stat-card dt { font-size: .8125rem; font-weight: 500; letter-spacing: .01em; color: #64748b; } body.ks-app .stat-card .stat-value { font-variant-numeric: tabular-nums; /* Zahlen springen beim Wechsel nicht */ letter-spacing: -.02em; line-height: 1.1; } /* ---- Widget-Kopfzeilen: ruhiger Abschluss statt harter Linie -------------- */ body.ks-app .dashboard-widget h3 { letter-spacing: -.01em; } /* ---- Fokus sichtbar halten (Barrierefreiheit, nie entfernen) -------------- */ body.ks-app a:focus-visible, body.ks-app button:focus-visible, body.ks-app [tabindex]:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(2, 132, 199, .55); border-radius: 8px; } /* ---- Bewegung respektieren ----------------------------------------------- */ @media (prefers-reduced-motion: reduce) { body.ks-app .stat-card, body.ks-app .dashboard-widget { transition: none; } body.ks-app .stat-card:hover, body.ks-app .dashboard-widget:hover { transform: none; } }