/* =================================================================== TRYB WYSOKIEGO KONTRASTU (dostępność) — WCAG. Aktywny tylko gdy na / jest atrybut data-contrast="high" (ustawia go partial theme-contrast.php). Bez atrybutu ten plik nic nie robi, więc można go ładować zawsze. Działa na obu motywach: dobiera maksymalny kontrast (czysta biel/czerń), wzmacnia obramowania, podkreśla linki i pogrubia obrys fokusa (nawigacja klawiaturą). =================================================================== */ /* Zmienne kontrastu per motyw (atrybuty są na tym samym elemencie co data-bs-theme). */ [data-bs-theme="dark"][data-contrast="high"], [data-contrast="high"][data-bs-theme="dark"] { --hc-text: #ffffff; --hc-bg: #000000; --hc-border: #ffffff; --hc-focus: #ffd400; --hc-link: #7cc7ff; } [data-bs-theme="light"][data-contrast="high"], [data-contrast="high"]:not([data-bs-theme="dark"]) { --hc-text: #000000; --hc-bg: #ffffff; --hc-border: #000000; --hc-focus: #0000ee; --hc-link: #0000ee; } /* Przemapowanie tokenów aplikacji i Bootstrapa na warstwę kontrastu. */ [data-contrast="high"] { --bs-body-color: var(--hc-text); --bs-body-bg: var(--hc-bg); --bs-emphasis-color: var(--hc-text); --bs-secondary-color: var(--hc-text); --bs-tertiary-color: var(--hc-text); --bs-border-color: var(--hc-border); --bs-secondary-bg: var(--hc-bg); --bs-tertiary-bg: var(--hc-bg); --app-text: var(--hc-text); --app-text-muted: var(--hc-text); --app-heading: var(--hc-text); --app-border: var(--hc-border); --app-bg: var(--hc-bg); --app-surface: var(--hc-bg); --app-surface-2: var(--hc-bg); } /* Tekst przygaszony (największy problem kontrastu) — do pełnego koloru. */ [data-contrast="high"] .text-muted, [data-contrast="high"] .text-body-secondary, [data-contrast="high"] .text-body-tertiary, [data-contrast="high"] .small, [data-contrast="high"] small { color: var(--hc-text) !important; opacity: 1 !important; } /* Powierzchnie: jednolite tło, mocne obramowanie zamiast subtelnych cieni. */ [data-contrast="high"] body, [data-contrast="high"] .card, [data-contrast="high"] .dropdown-menu, [data-contrast="high"] .modal-content, [data-contrast="high"] .offcanvas, [data-contrast="high"] .list-group-item, [data-contrast="high"] .navbar, [data-contrast="high"] .toast { background-color: var(--hc-bg) !important; color: var(--hc-text) !important; } [data-contrast="high"] .card, [data-contrast="high"] .dropdown-menu, [data-contrast="high"] .modal-content, [data-contrast="high"] .list-group-item, [data-contrast="high"] .table > :not(caption) > * > * { border: 2px solid var(--hc-border) !important; } [data-contrast="high"] .shadow, [data-contrast="high"] .shadow-sm, [data-contrast="high"] .shadow-lg { box-shadow: none !important; } /* Pola formularzy — czytelne obrysy. */ [data-contrast="high"] .form-control, [data-contrast="high"] .form-select, [data-contrast="high"] .form-check-input, [data-contrast="high"] .input-group-text { background-color: var(--hc-bg) !important; color: var(--hc-text) !important; border: 2px solid var(--hc-border) !important; } [data-contrast="high"] .form-control::placeholder { color: var(--hc-text) !important; opacity: .7; } /* Linki treściowe — podkreślenie (nie tylko kolor). */ [data-contrast="high"] a:not(.btn):not(.nav-link):not(.navbar-brand):not(.page-link) { color: var(--hc-link) !important; text-decoration: underline !important; text-underline-offset: 2px; } /* Przyciski — zawsze widoczny obrys. */ [data-contrast="high"] .btn { border-width: 2px !important; } [data-contrast="high"] .btn-outline-secondary, [data-contrast="high"] .btn-outline-primary, [data-contrast="high"] .btn-light, [data-contrast="high"] .btn-outline-light { color: var(--hc-text) !important; border-color: var(--hc-border) !important; } [data-contrast="high"] .btn-link { color: var(--hc-link) !important; text-decoration: underline !important; } /* Odznaki/badge z jasnym tłem — wymuś kontrast konturu. */ [data-contrast="high"] .badge { border: 1px solid var(--hc-border); } /* Wyraźny fokus dla klawiatury — kluczowy dla dostępności. */ [data-contrast="high"] a:focus-visible, [data-contrast="high"] button:focus-visible, [data-contrast="high"] .btn:focus-visible, [data-contrast="high"] .form-control:focus-visible, [data-contrast="high"] .form-select:focus-visible, [data-contrast="high"] .form-check-input:focus-visible, [data-contrast="high"] [tabindex]:focus-visible { outline: 3px solid var(--hc-focus) !important; outline-offset: 2px !important; box-shadow: none !important; } /* Aktywny stan przełącznika kontrastu w pasku. */ [data-contrast-icon].is-on { color: var(--hc-focus, #ffd400); }