:root{ --brand-primary: #004b9c; --brand-secondary: #0b3b1a; --brand-accent: #ffd24d; --brand-navbar-bg: #004b9c; --brand-navbar-text: #ffffff; } /* Navbar */ .navbar{ background: var(--brand-navbar-bg) !important; } .navbar .navbar-brand, .navbar .nav-link, .navbar .navbar-text{ color: var(--brand-navbar-text) !important; } .navbar .nav-link.active, .navbar .dropdown-item.active{ color:#fff !important; } /* Buttons */ .btn-primary{ background: var(--brand-primary) !important; border-color: var(--brand-primary) !important; } .btn-outline-primary{ color: var(--brand-primary)!important; border-color: var(--brand-primary)!important; } .btn-outline-primary:hover{ background: var(--brand-primary)!important; color:#fff!important; } /* Badges (Stände) */ .badge.bg-success{ background: var(--brand-primary) !important; } .badge.bg-danger{ background: #c62828 !important; } /* Links */ a{ color: var(--brand-primary); } a:hover{ color: var(--brand-secondary); } /* Cards headers */ .card-header{ background: #f3f5f4; } /* Login */ .auth-card{ max-width: 420px; } .logo-box{ display: flex; justify-content: center; margin-bottom: 1rem; } .logo-box img{ width: 15%; /* gleiche Breite wie Eingabefelder */ max-width: none; /* keine Begrenzung durch Container */ height: auto; /* Höhe automatisch anpassen */ } /* === Darkmode (aktiv bei ) === */ :root[data-bs-theme="dark"]{ color-scheme: dark; --brand-navbar-bg: #0b1b2b; --brand-navbar-text: #e5e7eb; } [data-bs-theme="dark"] body{ background-color:#0b0f14; color:#e5e7eb; } [data-bs-theme="dark"] .card{ background-color:#121826; border-color:#1f2a37; } [data-bs-theme="dark"] .card-header{ background:#0f1720; } [data-bs-theme="dark"] .table{ color:#e5e7eb; } [data-bs-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd)>*{ color:#e5e7eb; background-color:#0f1720; } [data-bs-theme="dark"] a{ color:#93c5fd; } [data-bs-theme="dark"] a:hover{ color:#bfdbfe; } /* Login: force dark background when data-bs-theme=dark, even if body has .bg-light */ [data-bs-theme="dark"] body.bg-light{ background-color:#0b0f14 !important; } /* === Meisterschaft: Dark-mode header rules (global) === */ [data-bs-theme="dark"] .card .card-header{ background-color: var(--bs-gray-800) !important; color: var(--bs-white) !important; border-bottom-color: rgba(255,255,255,.15) !important; } [data-bs-theme="dark"] .card .card-header .text-muted{ color: rgba(255,255,255,.75) !important; } [data-bs-theme="dark"] .card .card-header a{ color: inherit !important; text-decoration-color: rgba(255,255,255,.6); } /* Tables */ [data-bs-theme="dark"] table thead th, [data-bs-theme="dark"] .table thead th{ background-color: var(--bs-gray-800) !important; color: var(--bs-white) !important; border-bottom-color: rgba(255,255,255,.25) !important; } [data-bs-theme="dark"] .table .thead-light th, [data-bs-theme="dark"] .table thead th.bg-light, [data-bs-theme="dark"] .table thead th.bg-body, [data-bs-theme="dark"] .table thead th.bg-body-tertiary, [data-bs-theme="dark"] .table thead tr.bg-light > th{ background-color: var(--bs-gray-800) !important; color: var(--bs-white) !important; } [data-bs-theme="dark"] .table thead th a{ color: inherit !important; text-decoration-color: rgba(255,255,255,.6); } /* === /Meisterschaft: Dark-mode header rules (global) === */ /* === Meisterschaft: Dark-mode panel (.bg-light) fixes === */ [data-bs-theme="dark"] .bg-light{ background-color: var(--bs-gray-800) !important; color: var(--bs-white) !important; } [data-bs-theme="dark"] .bg-light.border{ border-color: rgba(255,255,255,.15) !important; } [data-bs-theme="dark"] .bg-light .form-label{ color: rgba(255,255,255,.85) !important; } [data-bs-theme="dark"] .bg-light .form-text{ color: rgba(255,255,255,.65) !important; } /* === /Meisterschaft: Dark-mode panel (.bg-light) fixes === */ /* === Meisterschaft: Dark-mode table hover fixes (results-table) === */ [data-bs-theme="dark"] .results-table tbody tr:hover td, [data-bs-theme="dark"] .results-table tbody tr:hover th{ background-color: rgba(255,255,255,.06) !important; } /* Tweak generic .table-hover variable in dark mode for consistency */ [data-bs-theme="dark"] .table-hover{ --bs-table-hover-bg: rgba(255,255,255,.06); --bs-table-hover-color: var(--bs-body-color); } /* === /Meisterschaft: Dark-mode table hover fixes (results-table) === */ /* === Meisterschaft: Dark-mode fix for .bg-white wrappers (e.g., table-responsive) === */ [data-bs-theme="dark"] .bg-white{ background-color: var(--bs-gray-900) !important; color: var(--bs-body-color) !important; } /* stronger selector for common wrapper pattern */ [data-bs-theme="dark"] .table-responsive.bg-white{ background-color: var(--bs-gray-900) !important; } /* === /Meisterschaft: Dark-mode fix for .bg-white wrappers === */ /* === Merged from legacy /assets/app.css === */ .badge-lane { min-width: 32px; } .card-header { background: #f8f9fa; } /* === /Merged from legacy /assets/app.css === */ /* === Admin Nav (buttons row) – light/dark styling === */ .admin-nav{ gap:.5rem; } .admin-nav .btn{ border-width:1px; } /* Light mode: subtle hover background */ :root .admin-nav .btn.btn-outline-primary, :root .admin-nav .btn.btn-outline-secondary, :root .admin-nav .btn.btn-outline-success, :root .admin-nav .btn.btn-outline-info, :root .admin-nav .btn.btn-outline-warning, :root .admin-nav .btn.btn-outline-danger, :root .admin-nav .btn.btn-outline-dark{ background-color: transparent; } :root .admin-nav .btn:hover{ background-color: var(--bs-gray-100); } /* Dark mode: soft filled look for outline buttons */ [data-bs-theme="dark"] .admin-nav .btn.btn-outline-primary, [data-bs-theme="dark"] .admin-nav .btn.btn-outline-secondary, [data-bs-theme="dark"] .admin-nav .btn.btn-outline-success, [data-bs-theme="dark"] .admin-nav .btn.btn-outline-info, [data-bs-theme="dark"] .admin-nav .btn.btn-outline-warning, [data-bs-theme="dark"] .admin-nav .btn.btn-outline-danger, [data-bs-theme="dark"] .admin-nav .btn.btn-outline-dark{ background-color: rgba(255,255,255,.06); color: var(--bs-white); border-color: rgba(255,255,255,.15); } [data-bs-theme="dark"] .admin-nav .btn:hover{ background-color: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); } /* Active/current state (works if .active is set on link) */ .admin-nav .btn.active, .admin-nav .btn[aria-current="page"]{ box-shadow: inset 0 0 0 1px var(--bs-primary); } [data-bs-theme="dark"] .admin-nav .btn.active, [data-bs-theme="dark"] .admin-nav .btn[aria-current="page"]{ background-color: rgba(255,255,255,.18); border-color: rgba(255,255,255,.35); } /* === /Admin Nav – light/dark styling === */ /* === Admin Nav override: white text & outline in dark mode === */ [data-bs-theme="dark"] .admin-nav .btn{ color: #fff !important; border-color: #fff !important; } [data-bs-theme="dark"] .admin-nav .btn:hover{ color: #fff !important; border-color: #fff !important; background-color: rgba(255,255,255,.12) !important; } /* === /Admin Nav override === */ /* === Global Dark-mode: make .btn-light & .btn-outline-light readable === */ [data-bs-theme="dark"] .btn-light, [data-bs-theme="dark"] .btn-outline-light{ color: #fff !important; border-color: #fff !important; background-color: rgba(255,255,255,.06) !important; } [data-bs-theme="dark"] .btn-light:hover, [data-bs-theme="dark"] .btn-outline-light:hover{ background-color: rgba(255,255,255,.12) !important; border-color: #fff !important; color: #fff !important; } /* Handle explicit .border utility on light buttons */ [data-bs-theme="dark"] .btn-light.border{ border-color: #fff !important; } /* === /Global Dark-mode buttons === */ /* === Global Dark-mode: readable outline buttons (sitewide) === */ [data-bs-theme="dark"] .btn-outline-primary, [data-bs-theme="dark"] .btn-outline-secondary, [data-bs-theme="dark"] .btn-outline-success, [data-bs-theme="dark"] .btn-outline-info, [data-bs-theme="dark"] .btn-outline-warning, [data-bs-theme="dark"] .btn-outline-danger, [data-bs-theme="dark"] .btn-outline-dark{ color: #fff !important; border-color: rgba(255,255,255,.7) !important; background-color: rgba(255,255,255,.06) !important; } [data-bs-theme="dark"] .btn-outline-primary:hover, [data-bs-theme="dark"] .btn-outline-secondary:hover, [data-bs-theme="dark"] .btn-outline-success:hover, [data-bs-theme="dark"] .btn-outline-info:hover, [data-bs-theme="dark"] .btn-outline-warning:hover, [data-bs-theme="dark"] .btn-outline-danger:hover, [data-bs-theme="dark"] .btn-outline-dark:hover{ background-color: rgba(255,255,255,.12) !important; border-color: #fff !important; color: #fff !important; } /* Keep .btn-light covered too (added earlier) */ /* === /Global Dark-mode: readable outline buttons === */ /* === Dark-mode: make .btn-outline-danger light red (soft fill) === */ [data-bs-theme="dark"] .btn-outline-danger{ color: #fff !important; background-color: rgba(var(--bs-danger-rgb, 220, 53, 69), .15) !important; /* light red */ border-color: rgba(var(--bs-danger-rgb, 220, 53, 69), .6) !important; } [data-bs-theme="dark"] .btn-outline-danger:hover{ background-color: rgba(var(--bs-danger-rgb, 220, 53, 69), .24) !important; /* a bit stronger on hover */ border-color: rgba(var(--bs-danger-rgb, 220, 53, 69), .9) !important; color: #fff !important; } /* === /Dark-mode .btn-outline-danger === */