/* Dark Mode – aktiv per: */ /* Nach styles.css laden. Keine @media-Aktivierung, nur manuell via Klasse. */ /* Designsystem: Grund = Graphit, Primär = Violett, Akzent = Gold, Links = Blau */ body.dark-mode { color-scheme: dark; /* Neutrals */ --dm-bg: #0e0e11; --dm-bg-elev: #15161a; --dm-surface-1: #1b1c21; --dm-surface-2: #121318; --dm-border: #2a2d34; --dm-shadow: rgba(0,0,0,.45); /* Text */ --dm-text: #f0f1f5; --dm-text-muted: #c2c6d1; --dm-heading: #d8c9ea; /* Brand */ --dm-primary: #6d4a8e; /* Violett */ --dm-primary-strong: #4a2c5f; --dm-accent: #d3b26c; /* Gold */ --dm-link: #9cc7ff; /* Blau */ --dm-link-hover: #c8a7ff; /* Semantic tints (dezent für Hintergründe) */ --dm-success: #5ab37e; --dm-danger: #c96e6e; --dm-warning: #e5b55a; --dm-info: #64a0ca; /* Radius und Interaktionen */ --dm-radius: 10px; --dm-focus: 0 0 0 0.2rem rgba(211,178,108,0.25); } /* Grundfläche */ body.dark-mode { background: linear-gradient(135deg, var(--dm-bg) 0%, #14161b 100%) fixed; color: var(--dm-text); } /* Typografie */ body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { color: var(--dm-heading); } body.dark-mode p, body.dark-mode li, body.dark-mode dt, body.dark-mode dd, body.dark-mode label, body.dark-mode .form-label, body.dark-mode .form-text, body.dark-mode .dropdown-item, body.dark-mode .breadcrumb, body.dark-mode .nav-link, body.dark-mode .text-body { color: var(--dm-text) !important; } body.dark-mode .text-muted, body.dark-mode .text-secondary, body.dark-mode small, body.dark-mode .placeholder, body.dark-mode .table .text-muted { color: var(--dm-text-muted) !important; } /* Links */ body.dark-mode a, body.dark-mode .btn-link { color: var(--dm-link); } body.dark-mode a:hover, body.dark-mode .btn-link:hover { color: var(--dm-link-hover); } /* Navbar + Footer */ body.dark-mode .navbar, body.dark-mode .footer { background: linear-gradient(135deg, rgba(18,19,23,.98) 0%, rgba(14,14,17,.98) 100%); border-color: var(--dm-accent); box-shadow: 0 4px 20px var(--dm-shadow); color: var(--dm-text-muted); } body.dark-mode .nav-link { color: var(--dm-text) !important; } body.dark-mode .nav-link:hover { color: var(--dm-accent) !important; } body.dark-mode .navbar-toggler { border-color: var(--dm-accent); } body.dark-mode .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23d3b26c' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } /* Karten/Container */ body.dark-mode .card { background: var(--dm-bg-elev); border: 1px solid var(--dm-border); box-shadow: 0 8px 24px var(--dm-shadow); border-radius: var(--dm-radius); } body.dark-mode .card-header, body.dark-mode thead th { background: var(--dm-surface-1); color: var(--dm-text); border-color: var(--dm-border); } body.dark-mode .card-footer { background: #101114; border-top-color: var(--dm-border); } /* Page-Nav */ body.dark-mode .page-nav { background: var(--dm-bg-elev); box-shadow: 0 4px 12px var(--dm-shadow); border-radius: var(--dm-radius); } /* Tabellen */ body.dark-mode .table { background: var(--dm-bg-elev); color: var(--dm-text); } body.dark-mode .table td, body.dark-mode .table th { border-color: var(--dm-border); color: var(--dm-text); } body.dark-mode .table tbody tr:hover { background: var(--dm-surface-2); } body.dark-mode .table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,0.03); } body.dark-mode table a { color: var(--dm-link); } body.dark-mode table a:hover { color: var(--dm-link-hover); } /* =============== Buttons: vereinheitlicht =============== */ body.dark-mode .btn { border-radius: var(--dm-radius); border: 1px solid transparent; box-shadow: none; transition: filter .15s ease, transform .02s ease; } body.dark-mode .btn:focus-visible { outline: 0; box-shadow: var(--dm-focus); } body.dark-mode .btn:active { transform: translateY(0.5px); } /* Primär = Violett */ body.dark-mode .btn-primary { background: var(--dm-primary-strong); border-color: var(--dm-primary-strong); color: #fff; } body.dark-mode .btn-primary:hover { filter: brightness(1.06); } body.dark-mode .btn-primary:disabled, body.dark-mode .btn-primary.disabled { background: #3a214c; border-color: #3a214c; color: #bfa9d3; } /* Sekundär = neutrale Kante */ body.dark-mode .btn-secondary { background: var(--dm-surface-1); border-color: var(--dm-border); color: var(--dm-text); } body.dark-mode .btn-secondary:hover { filter: brightness(1.06); } /* Erfolgs-, Warn-, Info-, Gefahr-Buttons – Ton-in-Ton, einheitliche Logik */ body.dark-mode .btn-success { background: rgba(90,179,126,0.18); border-color: rgba(90,179,126,0.45); color: #d9f3e5; } body.dark-mode .btn-warning { background: rgba(229,181,90,0.18); border-color: rgba(229,181,90,0.45); color: #fff2d2; } body.dark-mode .btn-info { background: rgba(100,160,202,0.18); border-color: rgba(100,160,202,0.45); color: #e0f0fb; } body.dark-mode .btn-danger { background: rgba(201,110,110,0.18); border-color: rgba(201,110,110,0.45); color: #ffe3e3; } body.dark-mode .btn-success:hover, body.dark-mode .btn-warning:hover, body.dark-mode .btn-info:hover, body.dark-mode .btn-danger:hover { filter: brightness(1.06); } /* Outline-Varianten: nur Rahmen + Text, Hover füllt mit Farbe */ body.dark-mode .btn-outline-primary { border-color: var(--dm-primary); color: var(--dm-primary); background: transparent; } body.dark-mode .btn-outline-primary:hover { background: var(--dm-primary); color: #fff; } body.dark-mode .btn-outline-secondary { border-color: var(--dm-text-muted); color: var(--dm-text-muted); background: transparent; } body.dark-mode .btn-outline-secondary:hover { background: var(--dm-text-muted); color: var(--dm-bg); } body.dark-mode .btn-outline-success { border-color: var(--dm-success); color: var(--dm-success); background: transparent; } body.dark-mode .btn-outline-success:hover { background: var(--dm-success); color: #0e0f12; } body.dark-mode .btn-outline-warning { border-color: var(--dm-warning); color: var(--dm-warning); background: transparent; } body.dark-mode .btn-outline-warning:hover { background: var(--dm-warning); color: #1f1f1f; } body.dark-mode .btn-outline-info { border-color: var(--dm-info); color: var(--dm-info); background: transparent; } body.dark-mode .btn-outline-info:hover { background: var(--dm-info); color: #0e0f12; } body.dark-mode .btn-outline-danger { border-color: var(--dm-danger); color: var(--dm-danger); background: transparent; } body.dark-mode .btn-outline-danger:hover { background: var(--dm-danger); color: #0e0f12; } /* Link-Buttons an Linkpalette gebunden */ body.dark-mode .btn-link { color: var(--dm-link); text-decoration: none; } body.dark-mode .btn-link:hover { color: var(--dm-link-hover); text-decoration: underline; } /* Badges, Pills */ body.dark-mode .badge { color: #fff; } body.dark-mode .badge.bg-warning, body.dark-mode .badge.text-bg-warning { color: #1f1f1f; } body.dark-mode .badge.bg-info, body.dark-mode .badge.text-bg-info { color: #0e0f12; } /* Formulare */ body.dark-mode .form-control, body.dark-mode .form-select, body.dark-mode .form-check-input { background: var(--dm-bg-elev); color: var(--dm-text); border-color: var(--dm-border); border-radius: var(--dm-radius); } body.dark-mode .form-control::placeholder { color: #aeb3bf; opacity: 1; } body.dark-mode .form-control:focus, body.dark-mode .form-select:focus, body.dark-mode .form-check-input:focus { border-color: var(--dm-accent); box-shadow: var(--dm-focus); } body.dark-mode .form-check-input:checked { background-color: var(--dm-primary-strong); border-color: var(--dm-primary-strong); } /* Datei-Upload vereinheitlicht mit Buttons */ body.dark-mode .form-control[type="file"]{ background: var(--dm-bg-elev); color: var(--dm-text); border-color: var(--dm-border); } body.dark-mode .form-control[type="file"]::file-selector-button{ background-color: var(--dm-primary-strong); color: #fff; border: 1px solid var(--dm-primary-strong); border-radius: var(--dm-radius); transition: filter .15s ease, transform .02s ease; } body.dark-mode .form-control[type="file"]:hover::file-selector-button{ filter: brightness(1.06); } body.dark-mode .form-control[type="file"]::-webkit-file-upload-button{ background-color: var(--dm-primary-strong); color: #fff; border: 1px solid var(--dm-primary-strong); border-radius: var(--dm-radius); } /* Alerts */ body.dark-mode .alert { color: var(--dm-text); background: var(--dm-bg-elev); border-color: var(--dm-border); box-shadow: 0 4px 12px var(--dm-shadow); border-radius: var(--dm-radius); } body.dark-mode .alert-success { background: linear-gradient(135deg, rgba(74,157,106,0.12) 0%, rgba(90,179,126,0.12) 100%); } body.dark-mode .alert-danger { background: linear-gradient(135deg, rgba(179,90,90,0.12) 0%, rgba(201,110,110,0.12) 100%); } body.dark-mode .alert-warning { background: linear-gradient(135deg, rgba(229,181,90,0.12) 0%, rgba(217,168,78,0.12) 100%); } body.dark-mode .alert-info { background: linear-gradient(135deg, rgba(88,147,189,0.12) 0%, rgba(100,160,202,0.12) 100%); } /* Progress */ body.dark-mode .progress { background: #101114; border: 1px solid var(--dm-border); border-radius: var(--dm-radius); } body.dark-mode .progress-bar { background: var(--dm-accent); color: #101114; } /* Trennlinien, Medien */ body.dark-mode hr { border-color: var(--dm-border); } body.dark-mode img, body.dark-mode video { filter: none; } /* Fokus-Sichtbarkeit global */ body.dark-mode :focus-visible { outline: 3px solid var(--dm-accent); outline-offset: 2px; } /* Bootstrap-Variablen für konsistente Ableitungen */ body.dark-mode .table{ --bs-table-color: var(--dm-text); --bs-table-bg: var(--dm-bg-elev); --bs-table-border-color: var(--dm-border); --bs-table-striped-color: var(--dm-text); --bs-table-striped-bg: var(--dm-surface-2); --bs-table-hover-color: var(--dm-text); --bs-table-hover-bg: #171821; --bs-table-accent-bg: transparent; } body.dark-mode{ --bs-body-bg: var(--dm-bg); --bs-body-color: var(--dm-text); --bs-secondary-bg: var(--dm-bg-elev); --bs-tertiary-bg: var(--dm-surface-1); --bs-secondary-color: #cfd3de; --bs-tertiary-color: #b6bbca; --bs-link-color: var(--dm-link); --bs-link-hover-color: var(--dm-link-hover); --bs-heading-color: var(--dm-heading); --bs-border-color: var(--dm-border); --bs-btn-border-radius: var(--dm-radius); } /* Keep .table-dark truly dark in dark mode */ body.dark-mode .table-dark{ --bs-table-color: #e6e6e6; --bs-table-bg: #151821; --bs-table-border-color: rgba(255,255,255,.12); --bs-table-striped-color: #e6e6e6; --bs-table-striped-bg: #1a1e27; --bs-table-hover-color: #e6e6e6; --bs-table-hover-bg: #1e2330; --bs-table-bg-state: transparent; --bs-table-bg-type: transparent; } /* Dark: .table-dark Zebra + Hover */ body.dark-mode .table-dark{ --bs-table-color:#e6e6e6; --bs-table-bg:#151821; --bs-table-border-color:rgba(255,255,255,.12); --bs-table-striped-bg:#1a1e27; --bs-table-hover-bg:#1e2330; --bs-table-bg-state:transparent; --bs-table-bg-type:transparent; } /* Grundfüllung per inset-Fill */ body.dark-mode .table-dark > :not(caption) > *{ box-shadow: inset 0 0 0 9999px var(--bs-table-bg); } /* Zebra */ body.dark-mode .table-dark.table-striped > tbody > tr:nth-of-type(odd) > *{ box-shadow: inset 0 0 0 9999px var(--bs-table-striped-bg); } /* Hover */ body.dark-mode .table-dark.table-hover > tbody > tr:hover > *{ box-shadow: inset 0 0 0 9999px var(--bs-table-hover-bg); } /* === Dark mode tooltip contrast fix === */ body.dark-mode .tooltip, [data-bs-theme="dark"] .tooltip { --bs-tooltip-bg: #f8f9fa; --bs-tooltip-color: #212529; --bs-tooltip-opacity: 1; --bs-tooltip-border-color: rgba(0,0,0,.15); border: 1px solid var(--bs-tooltip-border-color); } /* Badge readability tweaks */ body.dark-mode .badge.bg-warning, body.dark-mode .badge.text-bg-warning { color: #1f1f1f; } body.dark-mode .badge.bg-info, body.dark-mode .badge.text-bg-info { color: #0e0f12; } body.dark-mode .badge.bg-primary, body.dark-mode .badge.text-bg-primary { color: #ffffff; } /* Hintergrundbild für Login und Registrierung im Darkmode beibehalten */ body[style*="background: url"], body.login-bg, body.register-bg { background: url("/static/background/login.webp") center center fixed no-repeat !important; background-size: cover !important; background-color: transparent !important; } /* 1) Gradient nur auf "normalen" Seiten anwenden */ body.dark-mode:not(.login-bg):not(.register-bg) { background: linear-gradient(135deg, var(--dm-bg) 0%, #14161b 100%) fixed; } /* 2) Auf Auth-Seiten das Foto erzwingen */ body.dark-mode.login-bg, body.dark-mode.register-bg { background: url("/static/background/login.webp") center center fixed no-repeat !important; background-size: cover !important; background-color: transparent !important; } /* Auth-Seiten: Bild im Darkmode erzwingen */ body.dark-mode:has(.login-card), body.dark-mode:has(.login-wrap) { background: url("/static/background/login.webp") center center fixed no-repeat !important; background-size: cover !important; background-color: transparent !important; } /* Gradient nur auf Seiten ohne Auth-Container */ body.dark-mode:not(:has(.login-card)):not(:has(.login-wrap)) { background: linear-gradient(135deg, var(--dm-bg) 0%, #14161b 100%) fixed; }