html {
font-size: 14px;
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
html {
position: relative;
min-height: 100%;
/* Bootstrap, otwierając modal, chwilowo chowa pasek przewijania strony
(overflow: hidden na body) i dokleja padding-right o szerokości tego
paska, żeby treść nie "skoczyła" w prawo. To właśnie ten skok/drganie
po prawej stronie przy otwieraniu okna "Daty" - miejsce na pasek jest
tu na stałe zarezerwowane, więc jego pojawienie/zniknięcie nic już nie
przesuwa. */
scrollbar-gutter: stable;
}
body {
margin-bottom: 1rem;
}
/* =====================================================================
TRYB CIEMNY (droga A — własny styl, Bootstrap 5.1 bez natywnego dark).
Aktywny tylko gdy . Tryb jasny = domyślny, bez zmian.
===================================================================== */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body {
background-color: #121417;
color: #e6e6e6;
}
/* Pasek nawigacji */
html[data-theme="dark"] .navbar.bg-white {
background-color: #1b1f24 !important;
border-bottom-color: #2b3138 !important;
}
html[data-theme="dark"] .navbar .navbar-brand,
html[data-theme="dark"] .navbar .nav-link,
html[data-theme="dark"] .navbar .nav-link.text-dark,
html[data-theme="dark"] .navbar .btn-link {
color: #e6e6e6 !important;
}
html[data-theme="dark"] .navbar-toggler { border-color: #2b3138; }
html[data-theme="dark"] .navbar-toggler-icon {
filter: invert(1) grayscale(100%) brightness(200%);
}
/* Menu rozwijane */
html[data-theme="dark"] .dropdown-menu {
background-color: #1b1f24;
border-color: #2b3138;
}
html[data-theme="dark"] .dropdown-item { color: #e6e6e6; }
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
background-color: #2b3138;
color: #fff;
}
html[data-theme="dark"] .dropdown-divider { border-top-color: #2b3138; }
/* Karty i tabele */
html[data-theme="dark"] .card {
background-color: #1b1f24;
border-color: #2b3138;
}
html[data-theme="dark"] .table {
color: #e6e6e6;
border-color: #2b3138;
}
html[data-theme="dark"] .table > :not(caption) > * > * {
background-color: transparent;
border-bottom-color: #2b3138;
}
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
background-color: #171b20;
color: #e6e6e6;
}
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table a { color: #e6e6e6; }
/* Formularze */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
background-color: #1b1f24;
border-color: #2b3138;
color: #e6e6e6;
}
html[data-theme="dark"] .form-control::placeholder { color: #9aa4af; }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
background-color: #1b1f24;
color: #e6e6e6;
border-color: #258cfb;
}
/* Przyciski outline (np. "Wyczyść") */
html[data-theme="dark"] .btn-outline-secondary {
color: #cdd3da;
border-color: #4b545e;
}
html[data-theme="dark"] .btn-outline-secondary:hover {
background-color: #4b545e;
color: #fff;
}
/* Modal "Daty wystąpienia" */
html[data-theme="dark"] .modal-content {
background-color: #1b1f24;
color: #e6e6e6;
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer { border-color: #2b3138; }
html[data-theme="dark"] .btn-close {
filter: invert(1) grayscale(100%) brightness(200%);
}
/* Stopka, teksty pomocnicze, obramowania, linki */
html[data-theme="dark"] .footer,
html[data-theme="dark"] .text-muted { color: #9aa4af !important; }
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom { border-color: #2b3138 !important; }
html[data-theme="dark"] a { color: #6ea8fe; }
/* Baner-notka (alert-secondary) — w trybie ciemnym przygaszony szary,
mniej kontrastujący z ciemnym tłem. */
html[data-theme="dark"] .alert-secondary {
background-color: #23272d;
border-color: #2b3138;
color: #cdd3da;
}
/* Paginacja — tło jak baner-notka (zamiast białego). */
html[data-theme="dark"] .page-link {
background-color: #23272d;
border-color: #2b3138;
color: #cdd3da;
}
html[data-theme="dark"] .page-link:hover {
background-color: #2b3138;
color: #fff;
}
html[data-theme="dark"] .page-item.disabled .page-link {
background-color: #1b1f24;
border-color: #2b3138;
color: #6c757d;
}
html[data-theme="dark"] .page-item.active .page-link {
background-color: #2b3138;
border-color: #3a424b;
color: #fff;
}
/* Lista dat w oknie „Daty wystąpienia". */
html[data-theme="dark"] .list-group-item {
background-color: #23272d;
border-color: #2b3138;
color: #e6e6e6;
}
/* Pozostałe jasne tła Bootstrapa (np. badge statusu w historii aktualizacji). */
html[data-theme="dark"] .bg-light {
background-color: #23272d !important;
color: #cdd3da !important;
}
html[data-theme="dark"] .badge.text-dark {
color: #e6e6e6 !important;
}
/* Pozostałe warianty alertów — przygaszone, ciemne odcienie zamiast jasnych. */
html[data-theme="dark"] .alert-info {
background-color: #12333a;
border-color: #1b4a54;
color: #a8d5de;
}
html[data-theme="dark"] .alert-success {
background-color: #14321f;
border-color: #1c4a2e;
color: #a7d7b6;
}
html[data-theme="dark"] .alert-warning {
background-color: #3a3312;
border-color: #54491b;
color: #e3d3a0;
}
html[data-theme="dark"] .alert-danger {
background-color: #3a1a1d;
border-color: #542329;
color: #e3a8ae;
}
/* Nakładka ładowania w trybie ciemnym */
html[data-theme="dark"] #loadingOverlay { background: rgba(0,0,0,.55); }
html[data-theme="dark"] #loadingOverlay .lo-box {
background: #1b1f24;
border-color: #2b3138;
}
html[data-theme="dark"] #loadingOverlay .lo-text { color: #9aa4af; }