/* ============================================================ prio-task globales Theme ============================================================ Wird von navbar.php auf JEDER Seite geladen. Specificity-Hinweis: Diese Datei wird im via eingebunden — also NACH den meisten Page-Inline-Styles im . Bei gleicher Specificity gewinnt sie damit automatisch (CSS-Cascade-Reihenfolge). ============================================================ */ /* ============================================================ Theme-Modus: data-theme="dark" (default), "light", oder "system". "system" folgt automatisch dem OS-Setting via @media-Query. ============================================================ */ :root, [data-theme="dark"], [data-theme="system"] { /* Dark — Default */ --pt-bg: #0b0d10; --pt-bg-soft: #14171c; --pt-surface: #1a1e25; --pt-surface-2: #20252e; --pt-surface-3: #2a2f3a; --pt-border: rgba(255,255,255,0.08); --pt-border-strong:rgba(255,255,255,0.14); --pt-text: #e8eaed; --pt-text-mute: #9aa0a6; --pt-text-strong: #ffffff; --pt-accent: #4f8cff; --pt-accent-hover: #6aa3ff; --pt-accent-soft: rgba(79,140,255,0.12); --pt-success: #22c55e; --pt-warning: #f59e0b; --pt-danger: #ef4444; --pt-shadow: 0 6px 24px -8px rgba(0,0,0,0.55); --pt-shadow-soft: 0 2px 8px -2px rgba(0,0,0,0.4); --pt-radius: 14px; --pt-radius-sm: 10px; --pt-radius-xs: 8px; color-scheme: dark; } /* Light explizit (data-theme="light") */ [data-theme="light"] { --pt-bg: #f7f8fb; --pt-bg-soft: #ffffff; --pt-surface: #ffffff; --pt-surface-2: #f1f4f8; --pt-surface-3: #e6ebf2; --pt-border: rgba(15,23,42,0.10); --pt-border-strong:rgba(15,23,42,0.20); --pt-text: #1f2937; --pt-text-mute: #5b6470; --pt-text-strong: #0b0d10; --pt-accent: #2563eb; --pt-accent-hover: #1d4ed8; --pt-accent-soft: rgba(37,99,235,0.10); --pt-success: #16a34a; --pt-warning: #d97706; --pt-danger: #dc2626; --pt-shadow: 0 6px 24px -10px rgba(15,23,42,0.18); --pt-shadow-soft: 0 2px 8px -2px rgba(15,23,42,0.10); color-scheme: light; } /* System-Mode: folgt prefers-color-scheme:light, ansonsten Dark-Tokens */ @media (prefers-color-scheme: light) { [data-theme="system"] { --pt-bg: #f7f8fb; --pt-bg-soft: #ffffff; --pt-surface: #ffffff; --pt-surface-2: #f1f4f8; --pt-surface-3: #e6ebf2; --pt-border: rgba(15,23,42,0.10); --pt-border-strong:rgba(15,23,42,0.20); --pt-text: #1f2937; --pt-text-mute: #5b6470; --pt-text-strong: #0b0d10; --pt-accent: #2563eb; --pt-accent-hover: #1d4ed8; --pt-accent-soft: rgba(37,99,235,0.10); --pt-success: #16a34a; --pt-warning: #d97706; --pt-danger: #dc2626; --pt-shadow: 0 6px 24px -10px rgba(15,23,42,0.18); --pt-shadow-soft: 0 2px 8px -2px rgba(15,23,42,0.10); color-scheme: light; } } /* ----- Body & Typografie ----- Höhere Specificity (`html body` = 0,0,2) als die Page-Inline-Styles (`body` = 0,0,1) — damit gewinnt theme.css unabhängig von der Quelltext-Reihenfolge. */ html body { background-color: var(--pt-bg) !important; color: var(--pt-text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html h1, html h2, html h3, html h4, html h5, html h6 { font-weight: 700; letter-spacing: -0.02em; color: var(--pt-text-strong); } /* ----- Cards ----- */ html .card { background-color: var(--pt-surface) !important; border: 1px solid var(--pt-border); border-radius: var(--pt-radius); box-shadow: var(--pt-shadow-soft); } html .card-header { background-color: var(--pt-bg-soft) !important; border-bottom: 1px solid var(--pt-border); color: var(--pt-text-strong) !important; font-weight: 600; border-top-left-radius: var(--pt-radius); border-top-right-radius: var(--pt-radius); } .card-body { color: var(--pt-text); } /* ----- Form Controls ----- */ html .form-control, html .form-select, html textarea.form-control, html input.form-control { background-color: var(--pt-surface-2) !important; border: 1px solid var(--pt-border); color: var(--pt-text) !important; border-radius: var(--pt-radius-sm); transition: border-color .15s ease, box-shadow .15s ease; } html .form-control:focus, html .form-select:focus, html textarea.form-control:focus, html input.form-control:focus { background-color: var(--pt-surface-2) !important; border-color: var(--pt-accent) !important; color: var(--pt-text) !important; box-shadow: 0 0 0 3px var(--pt-accent-soft); outline: none; } .form-control::placeholder { color: var(--pt-text-mute); opacity: .8; } .form-label { color: var(--pt-text-mute); font-weight: 500; font-size: 0.9rem; } .form-check-input { background-color: var(--pt-surface-2); border-color: var(--pt-border-strong); } .form-check-input:checked { background-color: var(--pt-accent); border-color: var(--pt-accent); } .form-check-input:focus { border-color: var(--pt-accent); box-shadow: 0 0 0 3px var(--pt-accent-soft); } /* ----- Buttons ----- */ html .btn-primary { background-color: var(--pt-accent) !important; border-color: var(--pt-accent) !important; color: #fff !important; font-weight: 500; } html .btn-primary:hover, html .btn-primary:focus, html .btn-primary:active { background-color: var(--pt-accent-hover) !important; border-color: var(--pt-accent-hover) !important; } /* Idle (non-active) State der Filter-Buttons — dezent, surface-basiert. Wenn aktiv (.active oder durch JS gesetzte Filter-Klasse) bekommen sie die jeweilige Akzent-Farbe weiter unten. */ html .btn-dark { background-color: var(--pt-surface) !important; border: 1px solid var(--pt-border) !important; color: var(--pt-text) !important; font-weight: 500; } html .btn-dark:hover, html .btn-dark:focus { background-color: var(--pt-surface-2) !important; border-color: var(--pt-border-strong) !important; color: var(--pt-text-strong) !important; } /* Info-Button (z.B. "Notizen" in der Filter-Bar) — als subtle Accent- Outline, damit er sichtbar bleibt aber nicht mit echten Active-Filter- States konkurriert. */ html .btn-info { background-color: rgba(79,140,255,0.12) !important; border: 1px solid rgba(79,140,255,0.4) !important; color: var(--pt-accent) !important; font-weight: 500; } html .btn-info:hover, html .btn-info:focus { background-color: rgba(79,140,255,0.22) !important; border-color: var(--pt-accent) !important; color: #fff !important; } /* Success / Warning / Danger Buttons — bleiben thematisch farbig, aber softer als Bootstrap-Default. Volle Sättigung nur als .active ("Filter aktiv")-State. */ html .btn-success { background-color: rgba(34,197,94,0.15) !important; border: 1px solid rgba(34,197,94,0.4) !important; color: var(--pt-success) !important; font-weight: 500; } html .btn-success:hover, html .btn-success:focus { background-color: rgba(34,197,94,0.25) !important; border-color: var(--pt-success) !important; color: #fff !important; } html .btn-success.active, html button.btn-success.active { background-color: var(--pt-success) !important; border-color: var(--pt-success) !important; color: #fff !important; } html .btn-warning { background-color: rgba(245,158,11,0.15) !important; border: 1px solid rgba(245,158,11,0.4) !important; color: var(--pt-warning) !important; font-weight: 500; } html .btn-warning:hover, html .btn-warning:focus { background-color: rgba(245,158,11,0.25) !important; border-color: var(--pt-warning) !important; color: #fff !important; } html .btn-warning.active, html button.btn-warning.active { background-color: var(--pt-warning) !important; border-color: var(--pt-warning) !important; color: #1a1a1a !important; } html .btn-danger { background-color: rgba(239,68,68,0.15) !important; border: 1px solid rgba(239,68,68,0.4) !important; color: var(--pt-danger) !important; font-weight: 500; } html .btn-danger:hover, html .btn-danger:focus { background-color: rgba(239,68,68,0.25) !important; border-color: var(--pt-danger) !important; color: #fff !important; } html .btn-danger.active, html button.btn-danger.active { background-color: var(--pt-danger) !important; border-color: var(--pt-danger) !important; color: #fff !important; } /* btn-primary.active (z.B. "back"-Filter aktiv) — etwas dezenter als Default-Bootstrap, damit der Filter-Strip ruhiger wirkt. */ html .btn-primary.active, html button.btn-primary.active { background-color: var(--pt-accent) !important; border-color: var(--pt-accent) !important; color: #fff !important; box-shadow: 0 0 0 1px var(--pt-accent-soft); } html .btn-secondary { background-color: var(--pt-surface-3) !important; border-color: var(--pt-border-strong) !important; color: var(--pt-text) !important; } html .btn-secondary:hover { background-color: #353c47 !important; border-color: var(--pt-border-strong) !important; } html .btn-outline-light { border-color: var(--pt-border-strong) !important; color: var(--pt-text) !important; } html .btn-outline-light:hover { background-color: var(--pt-surface) !important; color: var(--pt-text-strong) !important; } /* ----- Modals ----- */ html .modal-content { background-color: var(--pt-surface) !important; border: 1px solid var(--pt-border); border-radius: var(--pt-radius); color: var(--pt-text); } .modal-header { border-bottom: 1px solid var(--pt-border); } .modal-footer { border-top: 1px solid var(--pt-border); } /* ----- Tables ----- */ .table { color: var(--pt-text); border-color: var(--pt-border); } .table > :not(caption) > * > * { background-color: transparent; border-bottom-color: var(--pt-border); color: var(--pt-text); } .table thead th { color: var(--pt-text-strong); font-weight: 600; border-bottom: 1px solid var(--pt-border-strong); } .table-hover > tbody > tr:hover > * { background-color: var(--pt-bg-soft); color: var(--pt-text-strong); } /* ----- Badges ----- */ .badge { font-weight: 500; } .badge.bg-secondary { background-color: var(--pt-surface-3) !important; } /* Bootstrap-Vollfarbe-Badges (z.B. die Score-Bubbles -187 / -176 auf Task-Cards) sind als knall-rot/-gelb/-grün/-info-blau viel zu laut für eine dichte Card-View. Softer mit transparentem Background + gefärbtem Text — bleibt semantisch erkennbar, schreit aber nicht. */ html .badge.bg-danger { background-color: rgba(239,68,68,0.18) !important; color: #fca5a5 !important; border: 1px solid rgba(239,68,68,0.3); } html .badge.bg-warning { background-color: rgba(245,158,11,0.18) !important; color: #fcd34d !important; border: 1px solid rgba(245,158,11,0.3); } html .badge.bg-success { background-color: rgba(34,197,94,0.18) !important; color: #86efac !important; border: 1px solid rgba(34,197,94,0.3); } html .badge.bg-info { background-color: rgba(79,140,255,0.18) !important; color: #93c5fd !important; border: 1px solid rgba(79,140,255,0.3); } /* Rounded-Pill Variante kompakter padden, damit die Dezimal-Score-Bubble nicht so plakativ wirkt. */ html .badge.rounded-pill { padding: 0.3em 0.65em; font-size: 0.78em; } /* ----- Alerts ----- */ .alert-info { background-color: var(--pt-accent-soft); border-color: rgba(79,140,255,0.25); color: var(--pt-text); } .alert-success { background-color: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.25); color: var(--pt-text); } .alert-warning { background-color: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.25); color: var(--pt-text); } .alert-danger { background-color: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.25); color: var(--pt-text); } /* ----- Navbar ----- */ html .navbar, html .navbar.bg-dark { background-color: var(--pt-bg-soft) !important; border-bottom: 1px solid var(--pt-border); } .navbar-brand { color: var(--pt-text-strong) !important; font-weight: 600; letter-spacing: -0.01em; } .navbar-nav .nav-link { color: var(--pt-text-mute) !important; transition: color .15s ease; } .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--pt-text-strong) !important; } /* ----- Dropdown ----- */ .dropdown-menu { background-color: var(--pt-surface) !important; border: 1px solid var(--pt-border); border-radius: var(--pt-radius-sm); box-shadow: var(--pt-shadow); } .dropdown-item { color: var(--pt-text) !important; } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--pt-surface-2) !important; color: var(--pt-text-strong) !important; } .dropdown-divider { border-top-color: var(--pt-border); } /* ----- Pagination ----- */ .pagination .page-link { background-color: var(--pt-surface); color: var(--pt-text); border: 1px solid var(--pt-border); } .pagination .page-link:hover { background-color: var(--pt-surface-2); color: var(--pt-text-strong); border-color: var(--pt-border-strong); } .page-item.active .page-link { background-color: var(--pt-accent); border-color: var(--pt-accent); color: #fff; } /* ----- List Group ----- */ .list-group-item { background-color: var(--pt-surface); border-color: var(--pt-border); color: var(--pt-text); } .list-group-item-action:hover, .list-group-item-action:focus { background-color: var(--pt-surface-2); color: var(--pt-text-strong); } /* ----- Tabs ----- */ .nav-tabs { border-bottom: 1px solid var(--pt-border); } .nav-tabs .nav-link { color: var(--pt-text-mute); border: 1px solid transparent; border-radius: var(--pt-radius-sm) var(--pt-radius-sm) 0 0; } .nav-tabs .nav-link:hover { color: var(--pt-text); border-color: transparent; } .nav-tabs .nav-link.active { background-color: var(--pt-surface); color: var(--pt-text-strong); border-color: var(--pt-border) var(--pt-border) var(--pt-surface); } /* ----- Links ----- */ a { color: var(--pt-accent); } a:hover { color: var(--pt-accent-hover); } /* ----- WCAG-Korrekturen ----- */ .text-muted, .text-secondary { color: var(--pt-text-mute) !important; } /* ----- Scrollbar (Webkit, dezent) ----- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--pt-bg); } ::-webkit-scrollbar-thumb { background: var(--pt-surface-3); border-radius: 999px; border: 2px solid var(--pt-bg); } ::-webkit-scrollbar-thumb:hover { background: #404754; } /* ----- Selection ----- */ ::selection { background: var(--pt-accent-soft); color: var(--pt-text-strong); } /* ----- bg-dark Overrides (alte Klassennutzung in vielen Pages) ----- */ .bg-dark { background-color: var(--pt-surface) !important; } .text-light { color: var(--pt-text) !important; } /* ============================================================ LIGHT-MODE-Overrides ============================================================ Komponenten, die im Dark mit hellen Alpha-Tokens (z.B. helles Rot auf transparentem Background) für Score-Badges arbeiten, brauchen im Light dunkleren Text auf weicher Pastell-Surface — sonst sind sie unleserlich. Die Selektoren matchen sowohl explizites data-theme="light" als auch data-theme="system" + (prefers-color-scheme: light). */ [data-theme="light"] .badge.bg-danger, [data-theme="light"] html .badge.bg-danger { background-color: rgba(220,38,38,0.10) !important; color: #b91c1c !important; border-color: rgba(220,38,38,0.30); } [data-theme="light"] .badge.bg-warning, [data-theme="light"] html .badge.bg-warning { background-color: rgba(217,119,6,0.10) !important; color: #b45309 !important; border-color: rgba(217,119,6,0.30); } [data-theme="light"] .badge.bg-success, [data-theme="light"] html .badge.bg-success { background-color: rgba(22,163,74,0.10) !important; color: #15803d !important; border-color: rgba(22,163,74,0.30); } [data-theme="light"] .badge.bg-info, [data-theme="light"] html .badge.bg-info { background-color: rgba(37,99,235,0.10) !important; color: #1d4ed8 !important; border-color: rgba(37,99,235,0.30); } @media (prefers-color-scheme: light) { [data-theme="system"] .badge.bg-danger, [data-theme="system"] html .badge.bg-danger { background-color: rgba(220,38,38,0.10) !important; color: #b91c1c !important; border-color: rgba(220,38,38,0.30); } [data-theme="system"] .badge.bg-warning, [data-theme="system"] html .badge.bg-warning { background-color: rgba(217,119,6,0.10) !important; color: #b45309 !important; border-color: rgba(217,119,6,0.30); } [data-theme="system"] .badge.bg-success, [data-theme="system"] html .badge.bg-success { background-color: rgba(22,163,74,0.10) !important; color: #15803d !important; border-color: rgba(22,163,74,0.30); } [data-theme="system"] .badge.bg-info, [data-theme="system"] html .badge.bg-info { background-color: rgba(37,99,235,0.10) !important; color: #1d4ed8 !important; border-color: rgba(37,99,235,0.30); } } /* btn-dark (Filter-Idle, Bootstrap-Default) — im Light surface-weiß mit weicher Border statt schwarz-Buchstabe */ [data-theme="light"] html .btn-dark { background-color: var(--pt-surface) !important; color: var(--pt-text) !important; border: 1px solid var(--pt-border-strong) !important; } [data-theme="light"] html .btn-dark:hover { background-color: var(--pt-surface-2) !important; color: var(--pt-text-strong) !important; } @media (prefers-color-scheme: light) { [data-theme="system"] html .btn-dark { background-color: var(--pt-surface) !important; color: var(--pt-text) !important; border: 1px solid var(--pt-border-strong) !important; } [data-theme="system"] html .btn-dark:hover { background-color: var(--pt-surface-2) !important; color: var(--pt-text-strong) !important; } } /* Scrollbar im Light-Mode */ [data-theme="light"] ::-webkit-scrollbar-track { background: var(--pt-bg); } [data-theme="light"] ::-webkit-scrollbar-thumb { background: #c8cfd9; border: 2px solid var(--pt-bg); } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #aab4c0; } @media (prefers-color-scheme: light) { [data-theme="system"] ::-webkit-scrollbar-track { background: var(--pt-bg); } [data-theme="system"] ::-webkit-scrollbar-thumb { background: #c8cfd9; border: 2px solid var(--pt-bg); } [data-theme="system"] ::-webkit-scrollbar-thumb:hover { background: #aab4c0; } } /* Navbar im Light: heller statt --pt-bg-soft, mit klarer Border */ [data-theme="light"] html .navbar, [data-theme="light"] html .navbar.bg-dark { background-color: #ffffff !important; border-bottom: 1px solid var(--pt-border); } [data-theme="light"] html .navbar-brand, [data-theme="light"] html .navbar-nav .nav-link { color: var(--pt-text) !important; } [data-theme="light"] html .navbar-toggler { border-color: var(--pt-border-strong); } [data-theme="light"] html .navbar-toggler-icon { filter: invert(1); } @media (prefers-color-scheme: light) { [data-theme="system"] html .navbar, [data-theme="system"] html .navbar.bg-dark { background-color: #ffffff !important; border-bottom: 1px solid var(--pt-border); } [data-theme="system"] html .navbar-brand, [data-theme="system"] html .navbar-nav .nav-link { color: var(--pt-text) !important; } [data-theme="system"] html .navbar-toggler-icon { filter: invert(1); } } /* Bottom-Nav im Light: hellere Background, dezent */ [data-theme="light"] .pt-bottom-nav { background: #ffffff; border-top: 1px solid var(--pt-border); box-shadow: 0 -2px 12px -2px rgba(15,23,42,0.08); } @media (prefers-color-scheme: light) { [data-theme="system"] .pt-bottom-nav { background: #ffffff; border-top: 1px solid var(--pt-border); box-shadow: 0 -2px 12px -2px rgba(15,23,42,0.08); } }