/* ========================================================================== FEX – eigene Gestaltungsschicht über Bootstrap 5.3 -------------------------------------------------------------------------- Muss außerhalb von inc/ liegen: inc/ ist per inc/.htaccess und dem FEX_APP-Guard für direkte Zugriffe gesperrt. Eingebunden über accentStyle() in inc/theme.php und damit automatisch auf allen drei Seiten mit eigenem : Hauptanwendung (inc/views/head.php), Login (inc/auth.php) und Gast-Freigabe (inc/guest_share.php). Bootstrap schaltet über data-bs-theme am um (gesetzt vor dem ersten Paint durch themeInitScript()). Alle Farben stehen deshalb doppelt: einmal in :root und einmal unter [data-bs-theme="dark"]. ========================================================================== */ /* ── Design-Tokens ────────────────────────────────────────────────────────── */ :root { --fex-accent: #4f46e5; --fex-accent-rgb: 79, 70, 229; --fex-accent-hover: #4338ca; --fex-accent-active: #3730a3; --fex-accent-soft: rgba(79, 70, 229, .10); --fex-canvas: #f5f6fb; --fex-canvas-2: #eceefa; --fex-surface: #ffffff; --fex-surface-alt: #fafbff; --fex-border: rgba(15, 23, 42, .10); --fex-muted: #6b7280; --fex-radius: 14px; --fex-radius-sm: 10px; --fex-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .18); --fex-shadow-lg: 0 24px 60px -24px rgba(15, 23, 42, .35); /* Bootstrap-Variablen auf den Akzent umbiegen */ --bs-primary: #4f46e5; --bs-primary-rgb: 79, 70, 229; --bs-link-color: #4f46e5; --bs-link-color-rgb: 79, 70, 229; --bs-link-hover-color: #4338ca; --bs-link-hover-color-rgb: 67, 56, 202; --bs-focus-ring-color: rgba(79, 70, 229, .25); --bs-body-bg: #f5f6fb; --bs-border-color: rgba(15, 23, 42, .10); } [data-bs-theme="dark"] { /* Auf dunklem Grund ist das gleiche Indigo zu dunkel — der Akzent wird eine Stufe heller, sonst verschwinden Links und Fokusringe im Hintergrund. */ --fex-accent: #818cf8; --fex-accent-rgb: 129, 140, 248; --fex-accent-hover: #a5b4fc; --fex-accent-active: #c7d2fe; --fex-accent-soft: rgba(129, 140, 248, .14); --fex-canvas: #0e1016; --fex-canvas-2: #151827; --fex-surface: #171a23; --fex-surface-alt: #1c2029; --fex-border: rgba(255, 255, 255, .09); --fex-muted: #9aa2b1; --fex-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px -12px rgba(0, 0, 0, .7); --fex-shadow-lg: 0 24px 60px -24px rgba(0, 0, 0, .85); --bs-primary: #818cf8; --bs-primary-rgb: 129, 140, 248; --bs-link-color: #a5b4fc; --bs-link-color-rgb: 165, 180, 252; --bs-link-hover-color: #c7d2fe; --bs-link-hover-color-rgb: 199, 210, 254; --bs-focus-ring-color: rgba(129, 140, 248, .3); --bs-body-bg: #0e1016; --bs-body-color: #e5e7eb; --bs-border-color: rgba(255, 255, 255, .09); --bs-secondary-color: #9aa2b1; --bs-emphasis-color: #f3f4f6; } /* ── Grundfläche ──────────────────────────────────────────────────────────── */ body { background: var(--fex-canvas); background-image: radial-gradient(1200px 600px at 15% -10%, var(--fex-canvas-2), transparent 60%); background-attachment: fixed; min-height: 100vh; } .text-muted { color: var(--fex-muted) !important; } /* ── Buttons ──────────────────────────────────────────────────────────────── */ .btn { --bs-btn-border-radius: var(--fex-radius-sm); font-weight: 500; } .btn-primary { --bs-btn-bg: var(--fex-accent); --bs-btn-border-color: var(--fex-accent); --bs-btn-hover-bg: var(--fex-accent-hover); --bs-btn-hover-border-color: var(--fex-accent-hover); --bs-btn-active-bg: var(--fex-accent-active); --bs-btn-active-border-color: var(--fex-accent-active); --bs-btn-disabled-bg: var(--fex-accent); --bs-btn-disabled-border-color: var(--fex-accent); --bs-btn-focus-shadow-rgb: var(--fex-accent-rgb); } .btn-outline-primary { --bs-btn-color: var(--fex-accent); --bs-btn-border-color: var(--fex-accent); --bs-btn-hover-bg: var(--fex-accent); --bs-btn-hover-border-color: var(--fex-accent); --bs-btn-active-bg: var(--fex-accent); --bs-btn-active-border-color: var(--fex-accent); --bs-btn-focus-shadow-rgb: var(--fex-accent-rgb); } [data-bs-theme="dark"] .btn-primary, [data-bs-theme="dark"] .btn-outline-primary:hover { --bs-btn-color: #10131c; --bs-btn-hover-color: #10131c; --bs-btn-active-color: #10131c; } /* Die Aktionsspalte trägt reine Icon-Buttons; ohne feste Breite springen die Spalten je nach Icon-Breite. */ .fex-actions .btn { --bs-btn-padding-x: .5rem; min-width: 2.1rem; } /* ── Formularfelder ───────────────────────────────────────────────────────── */ .form-control, .form-select { border-radius: var(--fex-radius-sm); border-color: var(--fex-border); } .form-control:focus, .form-select:focus { border-color: var(--fex-accent); box-shadow: 0 0 0 .2rem rgba(var(--fex-accent-rgb), .22); } .form-check-input:checked { background-color: var(--fex-accent); border-color: var(--fex-accent); } .form-check-input:focus { border-color: var(--fex-accent); box-shadow: 0 0 0 .2rem rgba(var(--fex-accent-rgb), .22); } .input-group-text { border-color: var(--fex-border); background: var(--fex-surface-alt); } /* ── Navigationsleiste ────────────────────────────────────────────────────── */ /* Ersetzt das frühere flächige .bg-primary: leicht durchscheinend, klebend, mit Akzentkante nach unten. Schrift bleibt hell (navbar-dark), damit in beiden Themes derselbe Kontrast gilt. */ .fex-navbar { position: sticky; top: 0; z-index: 1030; background: linear-gradient(100deg, var(--fex-accent-active), var(--fex-accent)); border-bottom: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 6px 24px -18px rgba(0, 0, 0, .9); padding-block: .55rem; } [data-bs-theme="dark"] .fex-navbar { background: linear-gradient(100deg, #1c1f3a, #262a52); } .fex-navbar .navbar-brand { letter-spacing: -.01em; } .fex-navbar .btn-outline-light { --bs-btn-border-color: rgba(255, 255, 255, .35); --bs-btn-hover-bg: rgba(255, 255, 255, .16); --bs-btn-hover-border-color: rgba(255, 255, 255, .5); --bs-btn-border-radius: var(--fex-radius-sm); } /* ── Karten ───────────────────────────────────────────────────────────────── */ .card { border: 1px solid var(--fex-border); border-radius: var(--fex-radius); background: var(--fex-surface); box-shadow: var(--fex-shadow); } .card-header { background: transparent; border-bottom: 1px solid var(--fex-border); font-weight: 600; padding-block: .8rem; } /* Akzentkarte des Text-Editors — löst das früher fest verdrahtete #4f46e5 ab. */ .fex-card-accent { border-color: rgba(var(--fex-accent-rgb), .55); } .fex-header-accent { background: linear-gradient(100deg, var(--fex-accent-active), var(--fex-accent)); color: #fff; border-bottom-color: transparent; } [data-bs-theme="dark"] .fex-header-accent { color: #10131c; } .fex-toolbar .card-body { padding-block: .75rem; } /* ── Tabellen ─────────────────────────────────────────────────────────────── */ .fex-table { --bs-table-bg: transparent; --bs-table-hover-bg: var(--fex-accent-soft); } .fex-table thead th { background: var(--fex-surface-alt); color: var(--fex-muted); font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--fex-border); white-space: nowrap; } .fex-table td, .fex-table th { border-color: var(--fex-border); } .fex-table tbody tr:last-child td { border-bottom: 0; } .fex-row-dir td { background: rgba(var(--fex-accent-rgb), .045); } .fex-name { color: var(--bs-emphasis-color); } a.fex-name:hover { color: var(--fex-accent); } /* Größen und Zähler stehen untereinander — Ziffern mit gleicher Laufweite. */ .fex-num { font-variant-numeric: tabular-nums; } .fex-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem; } .table-responsive { border-radius: 0 0 var(--fex-radius) var(--fex-radius); } /* ── Sonstige Bausteine ───────────────────────────────────────────────────── */ .badge { font-weight: 600; } .breadcrumb { background: var(--fex-surface); border: 1px solid var(--fex-border); border-radius: var(--fex-radius-sm); padding: .5rem .9rem; margin-bottom: 0; box-shadow: var(--fex-shadow); } .alert { border: 1px solid var(--fex-border); border-radius: var(--fex-radius); box-shadow: var(--fex-shadow); } .modal-content { border: 1px solid var(--fex-border); border-radius: var(--fex-radius); background: var(--fex-surface); box-shadow: var(--fex-shadow-lg); } .modal-header, .modal-footer { border-color: var(--fex-border); } .list-group-item { background: transparent; border-color: var(--fex-border); } .progress { border-radius: 999px; } /* Von fileIcon() für Audio/Video benutzt; Bootstrap kennt kein text-purple. */ .text-purple { color: #8b5cf6 !important; } [data-bs-theme="dark"] .text-purple { color: #a78bfa !important; } /* ── Login- und Gastfehlerseite ───────────────────────────────────────────── */ .fex-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: radial-gradient(900px 500px at 20% 0%, rgba(var(--fex-accent-rgb), .30), transparent 55%), radial-gradient(700px 500px at 90% 100%, rgba(var(--fex-accent-rgb), .18), transparent 55%), var(--fex-canvas); } .fex-auth .card { width: 100%; max-width: 400px; box-shadow: var(--fex-shadow-lg); } .fex-theme-corner { position: fixed; top: 1rem; right: 1rem; z-index: 5; } @media (max-width: 575.98px) { .fex-actions { justify-content: flex-start; } }