* wyglądające jak zwykła, wyłączona pozycja menu. Zmiana na wyraźny pasek
* nagłówkowy: granat #29166f, biały tekst = 14.60:1.
* Nadpisujemy kolor z wcag-contrast.css (.nav .disabled > a { color: #222 }),
* który zakładał jasne tło - stąd potrzebna wyższa specyficzność. */
#sidenav1 > li.disabled:first-child > a,
#sidenav1 > li.disabled:first-child > a:hover,
#sidenav1 > li.disabled:first-child > a:focus,
#sidenav2 > li.disabled:first-child > a,
#sidenav2 > li.disabled:first-child > a:hover,
#sidenav2 > li.disabled:first-child > a:focus {
background-color: var(--spzlo-navy);
border-color: var(--spzlo-navy);
/* var(--spzlo-radius) zamiast dawnego stałego 8px - żeby ten narożnik
pasował dokładnie do promienia nowej karty #sidenav1 (patrz niżej). */
border-radius: var(--spzlo-radius) var(--spzlo-radius) 0 0;
color: #ffffff;
letter-spacing: 0.02em;
}
/* --- Menu boczne jako karta - ramka + cień na zewnątrz, jak .well ---------
* Zgłoszone: .well dostało w theme-1.0 ramkę i cień na zewnątrz, ale menu
* boczne (#sidenav1 - jednostki, #sidenav2 - RODO) zostało bez tego
* traktowania i wygląda inaczej niż reszta strony.
*
* POPRAWKA 2026-07-30 - pierwsza wersja miała błąd: "dodatkowa ramka
* z prawej". Border i box-shadow rysują się na krawędzi padding-boxa
* #sidenav1 (ma domyślnie `padding: 0 15px` z `.nav-list`, bootstrap.css:
* 3995-3999) - ale pozycje wewnątrz (kafle pierwszego poziomu) bledują
* dziś TYLKO z lewej (`.nav-stacked > li > a { margin-right: 0 }`,
* bootstrap.css:4121, nadpisuje domyślny -15px z prawej). Ich prawa
* krawędź kończyła się więc 15px PRZED nową ramką karty - stąd widoczna
* szczelina i wrażenie "dodatkowej ramki". Naprawione niżej: przywrócony
* bleed z prawej dla kafli i szuflady (`margin-right: -15px`), więc obie
* krawędzie (pozycji i karty) się teraz pokrywają. Padding #sidenav1
* zostaje domyślny - to WŁAŚNIE ten padding, znoszony przez -15px margin
* dzieci, sprawia że dzieci sięgają dokładnie do krawędzi karty. Zerowanie
* tego paddingu (odrzucone podejście) psułoby rachunek w drugą stronę -
* dzieci wystawałyby 15px POZA nową ramkę.
*
* Świadomie NIE użyto overflow:hidden do obcięcia kwadratowych narożników
* pierwszej/ostatniej pozycji do zaokrąglonego kształtu karty - overflow
* na tym elemencie obcinałby też obwódkę fokusu (outline-offset: 2px)
* pozycji stojących przy samej krawędzi #sidenav1, gdy tylko obwódka
* wystaje poza granicę pudełka. Zamiast tego promień narożników pierwszej
* i ostatniej pozycji jest PODNIESIONY do tej samej wartości co promień
* karty (niżej) - kształty się pokrywają, nic nie trzeba obcinać. */
#sidenav1,
#sidenav2 {
border: 1px solid var(--spzlo-border);
border-radius: var(--spzlo-radius);
box-shadow: var(--spzlo-shadow);
margin-bottom: 20px; /* odstęp między dwiema kartami menu */
}
/* Bootstrap domyślnie zaokrągla pierwszą/ostatnią pozycję na 4px - za mało
* przy karcie na 10px (--spzlo-radius). Nagłówek "Nasze jednostki" ma już
* własną, bardziej specyficzną regułę wyżej (kolor tła), więc jego górne
* narożniki są tam już podniesione do tej samej wartości - tu tylko dolne
* narożniki #sidenav1 i oba narożniki #sidenav2 (który nie ma nagłówka,
* pierwsza pozycja to zwykły link RODO). */
#sidenav1 > li:last-child > a,
#sidenav2 > li:last-child > a {
border-bottom-left-radius: var(--spzlo-radius);
border-bottom-right-radius: var(--spzlo-radius);
}
#sidenav2 > li:first-child > a {
border-top-left-radius: var(--spzlo-radius);
border-top-right-radius: var(--spzlo-radius);
}
/* --- Pasek menu górnego - cień od dołu -------------------------------------
* Zgłoszone: porównanie z nową kartą menu bocznego pokazało, że górny pasek
* wygląda "płasko" - Bootstrap daje mu owszem box-shadow (0 1px 4px, alfa
* 0,065), ale to wartość dobrana pod jasny, zaokrąglony, statyczny navbar -
* na pełnej szerokości, na granatowym tle, jest praktycznie niewidoczna.
*
* POPRAWKA 2026-07-30 - pierwsza wersja (alfa 0,18, rozmycie 8px) okazała
* się W PRAKTYCE równie niewidoczna ("czy mam brudny monitor"). Przyczyna
* nie była w kolizji reguł (sprawdzone - #menu-bar .navbar-inner ma wyższą
* specyficzność niż generyczna reguła Bootstrapa i poprawnie wygrywa), tylko
* w samej sile efektu: 0,18 to wciąż mało kontrastowy, rozmyty cień.
* Teraz DWIE warstwy, jak w technice "elevation" z Material Design: wyraźna,
* ciemna kreska tuż pod paskiem (mocno widoczna nawet na niekalibrowanym
* monitorze) + miękka, szersza poświata pod spodem (żeby przejście do treści
* strony nie było zbyt twarde). Cień tylko od dołu (nie dookoła jak w karcie)
* - pasek jest przyklejony do góry i do obu boków ekranu, więc cień z tamtych
* stron i tak nie miałby gdzie się pokazać. */
#menu-bar .navbar-inner {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.30), 0 6px 14px rgba(0, 0, 0, 0.18);
}
/* --- Grubość liter w pasku menu górnego ------------------------------------
* Zgłoszone: po zmianie na systemowy stos fontów (sekcja 1 wyżej) litery
* w górnym menu wyglądają "za chude", szczególnie sama nazwa placówki.
* Dwie przyczyny nakładają się na siebie:
* 1. Bootstrap ustawia marce (.navbar .brand) font-weight: 200 - to
* "extra light", najcieńszy dostępny stopień. W starym stosie
* (Helvetica Neue/Arial) renderował się nieco grubiej niż w wielu
* systemowych fontach (np. Segoe UI przy wadze 200 jest naprawdę
* nitkowaty).
* 2. theme-1.0 zdjęło text-shadow z .navbar .brand i .navbar .nav > li > a
* (sekcja 3 niżej) - w oryginale Bootstrapa ten delikatny biały cień
* pod tekstem dawał złudzenie większej grubości liter ("emboss").
* Bez tego cienia chudy krój jest chudy bez żadnej maskującej sztuczki.
* Zamiast przywracać text-shadow (który miał inne, celowe powody usunięcia -
* "efekty 2013"), podnosimy wagę czcionki wprost - to trwalsze i czytelniejsze
* rozwiązanie niż optyczna sztuczka cieniem.
*
* POPRAWKA 2026-07-30: pierwsze wartości (700/600) były za mocne - zgłoszone
* "jest za dużo". Zejście na 500 (medium) dla marki i 400 (regular) dla
* pozycji menu. Marka nadal jest o stopień grubsza od pozycji, więc zostaje
* wyróżniona, ale bez ciężkiego, "krzykliwego" bloku tekstu. Wartość 400
* dla pozycji to normalna grubość pisma - czyli w praktyce naprawa polega
* tu głównie na tym, że marka przestaje być rysowana wagą 200 (extra light),
* którą narzuca Bootstrap. */
#menu-bar .brand {
font-weight: 500;
}
#menu-bar .nav > li > a {
font-weight: 400;
}
/* Logo nad menu - oddech pod spodem, bez rozpychania na wąskich ekranach. */
#imgdiv img {
max-width: 100%;
height: auto;
margin-bottom: 16px;
}
/* === 5. TABELE ============================================================
* Naprzemienne tło wierszy - liczy się głównie przy długich wykazach
* (cennik laboratorium ma 77 wierszy). Celujemy WYŁĄCZNIE w komórki |
* presetu "tbl-list", żeby nie wchodzić w drogę wierszom .info
* (nagłówki sekcji, które są | ) ani wyśrodkowanym grafikom.
* Kontrast tekstu #333 na #f7f8fa: 11.89:1.
* ========================================================================= */
.tbl-list > tbody > tr:nth-child(even) > td {
background-color: var(--spzlo-zebra);
}
/* === 5b. LINKI W TEKŚCIE - PODKREŚLENIE ===================================
* To nie kosmetyka, a domknięcie WCAG 1.4.1 (Use of Color, poziom A).
* Kolor linku #0067a3 kontrastuje z tekstem #333333 tylko 2.09:1 - a norma
* wymaga 3:1, jeżeli kolor jest JEDYNYM wyróżnikiem. Bootstrap 2 podkreśla
* linki dopiero na hover, czyli w spoczynku link w akapicie jest odróżnialny
* wyłącznie barwą. Podkreślenie to zamyka.
*
* Celujemy tylko w linki WEWNĄTRZ tekstu ciągłego. Menu, listy nawigacyjne,
* akordeony i linki stojące samodzielnie (te, którymi zajmuje się
* markStandaloneParagraphLinks w main.js) są rozpoznawalne z kontekstu i
* pozostają bez podkreślenia - inaczej menu boczne zamieniłoby się w gąszcz.
* text-underline-offset odsuwa kreskę od ogonków (ą, ę, ł) - bez tego
* podkreślenie przecina polskie znaki diakrytyczne. */
#content_1 p > a,
#content_1 li > a,
#content_1 td > a,
#content_1 th > a,
#content_1 address > a {
text-decoration: underline;
text-underline-offset: 0.15em;
}
/* Wyjątek: link, który JEST całym akapitem (np. załącznik do pobrania),
dostaje już od main.js ikonę i opis typu pliku - podkreślenie byłoby
trzecim wyróżnikiem naraz. */
#content_1 p > a.standalone-link-target {
text-decoration: none;
}
#content_1 p > a.standalone-link-target:hover,
#content_1 p > a.standalone-link-target:focus {
text-decoration: underline;
}
/* === 5c. ALERTY - PASEK Z LEWEJ =========================================
* Bootstrap 2 rysuje alert jako blok z cienką ramką w kolorze tła - efekt
* jest bardzo miękki i w serii kart alert łatwo przeoczyć. Dokładamy pasek
* z lewej w tym samym kolorze, którego wcag-contrast.css używa już na tekst
* danego typu alertu, więc paleta się nie rozjeżdża i nie trzeba liczyć
* nowych kontrastów. */
.alert {
border-left-width: 4px;
border-left-color: #5c4400; /* ten sam kolor co tekst .alert */
}
.alert-info { border-left-color: #205064; }
.alert-success { border-left-color: #2f5c2e; }
.alert-error,
.alert-danger { border-left-color: #953b3b; }
/* === 5d. AKTYWNA POZYCJA W MENU GÓRNYM ==================================
* Bootstrap 2 zaznacza aktywną pozycję czernią (#111) z cieniem wewnętrznym -
* na granatowym pasku wygląda jak dziura. Zamiast tego: ciemniejszy granat
* i złoty pasek pod spodem (ten sam odcień #ffbf47, którego wcag-contrast.css
* używa na obwódkę fokusu, więc paleta zostaje spójna).
* Biały tekst na #1d0f4f = 17.03:1, złoty pasek na tym tle = 10.37:1.
* Stan jest przekazywany również nie-wizualnie: js/main.js ustawia na tym
* linku aria-current="page". */
.navbar-inverse .nav > .active > a,
.navbar-inverse .nav > .active > a:hover,
.navbar-inverse .nav > .active > a:focus {
background-color: #1d0f4f;
box-shadow: inset 0 -3px 0 #ffbf47;
color: #ffffff;
}
/* === 6. KOTWICE POD PRZYKLEJONYM MENU =====================================
* Pasek menu jest position:fixed i zasłania 60px u góry ekranu. Skok do
* kotwicy (np. index.php?go=aktualnosci#EFS2022 - link z bloku grantowego
* na stronie głównej) ustawiał cel DOKŁADNIE pod paskiem, czyli poza
* widokiem. scroll-margin-top rezerwuje ten pas przy każdym skoku -
* dotyczy to także przejścia fokusu klawiaturą (WCAG 2.4.11 Focus Not
* Obscured w 2.2, ale to po prostu poprawne zachowanie).
* ========================================================================= */
[id] {
scroll-margin-top: 80px;
}
html {
scroll-behavior: smooth;
}
/* === 7. OBRAZY W TREŚCI ===================================================
* Zabezpieczenie przed rozjechaniem układu, gdy redaktor wklei zdjęcie
* szersze niż kolumna treści. Bootstrap 2 (w odróżnieniu od 3+) NIE ma
* tego domyślnie. W stopce reguła już była - tu obejmuje całą treść.
* ========================================================================= */
#content img,
#content_1 img {
max-width: 100%;
height: auto;
}
/* === 8. TABELA PRZEWIJANA W POZIOMIE (dopina js/ui.js) ====================
* Bootstrap 2 nie ma odpowiednika .table-responsive z wersji 3+. Skrypt
* owija zbyt szerokie tabele w ten kontener. tabindex="0" nadawany przez
* skrypt jest tu konieczny: obszar, który się przewija, MUSI dać się
* przewinąć z klawiatury (WCAG 2.1.1 Keyboard).
* ========================================================================= */
.table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-bottom: 20px;
}
.table-scroll > .table {
margin-bottom: 0;
}
.table-scroll:focus {
outline: 3px solid var(--spzlo-link);
outline-offset: 2px;
}
/* === 9. PRZYCISK "NA GÓRĘ" (dopina js/ui.js) ==============================
* 44x44px - z zapasem ponad minimum 24x24 z WCAG 2.5.8 (Target Size, AA
* w 2.2). Chowany atrybutem hidden, a nie samym CSS-em: dzięki temu, gdy
* jest niepotrzebny, znika też z kolejności Tab i z drzewa dostępności.
* WCAG 1.4.11: przycisk jest rozpoznawalny dzięki samemu wypełnieniu -
* granat #29166f kontrastuje z białym tłem strony 14.60:1, więc ramka
* nie jest potrzebna do jego zidentyfikowania.
*
* POPRAWKA 2026-07-30: zgłoszone "strzałka za mała i słabo widoczna".
* Ikona to teraz SVG (patrz ui.js) zamiast znaku Unicode ↑ - font-size/
* line-height do centrowania glifu tekstowego już niepotrzebne, przycisk
* centruje SVG flexboxem. Sam SVG rysuje BIAŁY KRĄŻEK ze strzałką w kolorze
* granatowym - dwubarwna "plakietka" zamiast jednolitego koła, łatwiejsza
* do odróżnienia na pierwszy rzut oka (zgłoszony pomysł). Kontrast
* strzałki: #29166f na białym = 14.60:1 - identyczny jak poprzednio,
* tylko w odwróconych barwach. ========================================= */
.to-top {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 1000;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--spzlo-navy);
box-shadow: 0 2px 8px rgba(16, 24, 40, 0.25);
cursor: pointer;
transition: background-color 0.15s ease, transform 0.15s ease;
}
.to-top svg {
display: block;
}
.to-top:hover,
.to-top:focus {
background-color: #1d0f4f;
transform: translateY(-2px);
}
.to-top[hidden] {
display: none;
}
@media (max-width: 767px) {
.to-top { right: 12px; bottom: 12px; }
}
/* === 9b. NAGŁÓWEK WYDRUKU - na ekranie niewidoczny ======================
* Markup siedzi w dane/header.php. display:none usuwa go też z drzewa
* dostępności, więc czytnik ekranu nie czyta dwa razy nazwy placówki
* (jest już w ). */
.print-header {
display: none;
}
/* === 10. OGRANICZENIE RUCHU ===============================================
* WCAG 2.3.3 (Animation from Interactions, AAA) plus zwykła przyzwoitość
* wobec osób z zaburzeniami przedsionkowymi: jeżeli system prosi o mniej
* ruchu, wyłączamy płynne przewijanie i wszystkie przejścia.
* ========================================================================= */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
/* === 11. WYDRUK ===========================================================
* Realny scenariusz w przychodni: pacjent drukuje grafik przyjęć albo
* cennik badań. Do tej pory wydruk zawierał pasek menu, całe menu boczne
* i logotypy ze stopki, a treść wychodziła na 3/4 szerokości kartki.
* ========================================================================= */
@media print {
/* Kontener flex z sekcji "stopka przyklejona do dołu" (css/main.css) jest
na papierze zbędny i tylko rozciągałby pierwszą stronę na całą wysokość
kartki. Na wydruku wracamy do zwykłego przepływu bloków. */
body {
display: block !important;
min-height: 0 !important;
padding-top: 0 !important;
font-size: 12pt;
background: #ffffff;
}
#menu-bar,
.skip-link,
.to-top,
#imgdiv,
.span3[role="navigation"],
#footer {
display: none !important;
}
#content.span9,
#content {
width: 100% !important;
float: none !important;
margin-left: 0 !important;
}
#content_1 { font-size: 12pt; }
/* --- Nagłówek wydruku ------------------------------------------------
* Do 2026-07 kartka wychodziła z drukarki bez żadnej informacji o
* placówce i bez wskazania, z której podstrony pochodzi - pacjent
* dostawał sam grafik przyjęć, bez kontekstu. Teraz na górze pierwszej
* strony jest logo, dane kontaktowe, nazwa podstrony i adres źródłowy.
*
* Uwaga: nagłówek jest częścią przepływu, więc drukuje się na PIERWSZEJ
* stronie. Powtarzanie go na każdej kartce wymagałoby position:fixed,
* co w drukowaniu bywa kapryśne (nakładanie się na treść przy dłuższych
* tabelach) - świadomie nie wchodzimy w to bez potrzeby. */
.print-header {
display: block;
overflow: hidden;
margin-bottom: 16pt;
padding-bottom: 8pt;
border-bottom: 2pt solid #29166f;
color: #000000;
font-size: 9.5pt;
line-height: 1.35;
}
.print-header-logo {
float: left;
width: 58pt;
height: auto;
margin-right: 12pt;
}
.print-header-org {
overflow: hidden;
}
.print-header-name {
font-size: 12pt;
font-weight: bold;
}
.print-header-page {
clear: both;
margin: 10pt 0 2pt;
font-size: 15pt;
font-weight: bold;
line-height: 1.2;
}
.print-header-meta {
margin: 0;
color: #333333;
font-size: 8.5pt;
}
.well {
box-shadow: none;
border: 1px solid #999999;
background: #ffffff !important;
break-inside: avoid;
}
/* .well-hero na papierze: sam pasek u góry wystarczy, gradient i tak
drukarka zamieni w szarą plamę oszczędzającą toner albo i nie. */
.well.well-hero {
background: #ffffff !important;
border: 1px solid #999999;
border-top: 3pt solid #29166f;
}
/* Adres URL przy linkach zewnętrznych - na papierze sam tekst linku
jest bezużyteczny. Linki wewnętrzne (index.php?go=...) pomijamy,
bo ich adresy nic czytelnikowi nie mówią. */
#content_1 a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 90%;
word-break: break-all;
}
/* Nagłówek tabeli powtarzany na każdej stronie wydruku - działa
tylko dla tabel z prawdziwym (nowe szablony CKEditor). */
thead { display: table-header-group; }
tr, .accordion-group { break-inside: avoid; }
/* Zwinięte sekcje akordeonu drukujemy rozwinięte - inaczej wydruk
strony "Ogłoszenia" byłby pusty. */
.collapse { display: block !important; height: auto !important; }
/* Kontener przewijany (js/ui.js) na papierze musi pokazać całość. */
.table-scroll { overflow: visible !important; }
}
|