/* WRSM3 — style aplikacji.
*
* Tokeny są WIĄŻĄCE i pochodzą z design/README.md. Artboard, który wpisuje
* własny odcień, rozjeżdża płótno; tak samo arkusz stylów, który wpisuje
* odcień zamiast tokenu.
*
* CSP jest bez `unsafe-inline` (patrz internal/web/serwer.go), więc każdy
* styl musi być TUTAJ — żaden szablon nie może mieć atrybutu style="".
* To jest powód, dla którego ten plik istnieje od pierwszego wydania,
* a nie „kiedy będzie co stylować".
*/
:root {
--tlo: #FBF8F3;
--powierzchnia: #FFFFFF;
--obwodka: #E7DFD3;
--tekst: #241F2B;
--tekst-slaby: #6B6478;
--glowny: #3F51A8;
--glowny-ciemny: #2C3A7D;
--glowny-jasny: #E8ECFA;
--uwaga: #9A3412;
--uwaga-jasny: #FDEBDD;
--zgoda: #1B6E4B;
--zgoda-jasny: #E4F1EA;
--skala-tekstu: 1;
}
/*
STOPIEŃ PISMA — po jednej regule na krok drabiny (REQ-014, do 200%).
Reguł jest sześć, a nie jedna z wartością z bazy, bo polityka bezpieczeństwa
nie dopuszcza `unsafe-inline`: skala nie może przyjść atrybutem `style`.
Arkusz statyczny z sześcioma regułami przeglądarka trzyma w pamięci
podręcznej; arkusz generowany dla każdego konta osobno — nie.
Skala mnoży `font-size` na ELEMENCIE GŁÓWNYM, a stamtąd wszystko liczone
w `rem` i `em` idzie za nią samo. To dlatego w arkuszu nie ma rozmiarów
w pikselach poza tym jednym miejscem i poza celami dotykowymi, które mają
zostać wielkości palca niezależnie od stopnia pisma.
NA `html`, A NIE NA `body` — i to jest cała usterka #107. Do wydania 0.29.0
mnożenie stało na `body`, a komentarz obiecywał dokładnie to, co jest wyżej.
`rem` liczy się jednak od elementu GŁÓWNEGO, nie od `body`, więc ``
zostawało przy 16 px na każdym stopniu drabiny i za skalą szło wyłącznie to,
co rozmiar dziedziczy albo liczy w `em`. Czterdzieści rozmiarów zapisanych
w `rem` było głuchych na drabinę.
Widać to było na pieśni: wariant „z akordami" rozmiaru nie ustawia, więc
dziedziczył i rósł, a wariant „sam tekst" ma własne `1.05rem` i stał
w miejscu. Jeden guzik, dwa różne skutki, zależnie od zakładki.
Oba testy stopnia pisma były przy tym ZIELONE, bo pytały o atrybut
`data-skala` na `` — a atrybut dochodził poprawnie. Atrybut ustawiony
nie znaczy tekst większy; mierzy to teraz `TestStopienPismaPowiekszaTekstPiesni`.
*/
:root[data-skala="115"] { --skala-tekstu: 1.15; }
:root[data-skala="130"] { --skala-tekstu: 1.3; }
:root[data-skala="150"] { --skala-tekstu: 1.5; }
:root[data-skala="175"] { --skala-tekstu: 1.75; }
:root[data-skala="200"] { --skala-tekstu: 2; }
/*
TRYB CIEMNY — atrybut ma trzy położenia, przełącznik w pasku dwa (REQ-004).
BRAK ATRYBUTU ZNACZY „AUTO", czyli „za ustawieniem systemu, NA ŻYWO"
(rozstrzygnięcie właściciela produktu z 7 września 2026, issue #120). Tak
wygląda dokument, gdy tryb domyślny konta to „auto" i nikt nie kliknął
guzika w pasku — i to jest jedyny powód, dla którego „auto" nie potrzebuje
ani jednego nasłuchu w skrypcie: przejście o zmierzchu robi ta reguła sama.
Wyliczenie „auto" w skrypcie albo na serwerze zamroziłoby je na moment
żądania, a właściciel produktu odrzucił i to, i liczenie pory dnia własnym
kodem.
`light` i `dark` to WYBÓR: tryb domyślny „dzień"/„noc" z `/ustawienia`
(atrybut stawia serwer w `baza.tmpl`) albo doraźne przełączenie ikoną
(atrybut stawia `wyglad.js` z `sessionStorage`). Sam guzik przełącza od
issue #118 wyłącznie dzień ↔ noc, a wybór trybu domyślnego mieszka
w „Ustawieniach" (issue #120).
Domyślnie idzie za ustawieniem systemu. Wybór użytkownika stawia
`data-theme` na `` — tym samym atrybutem, którym steruje się Bulmą i MUSI wygrać w obie strony: kto na ciemnym
systemie wybrał dzień, ma dostać jasny motyw, a nie ciemny. Dlatego
regułą jest osobny selektor, a nie tylko `@media`.
Wartości są wypisane dwa razy i to jest cena tej reguły w czystym CSS:
bez preprocesora nie da się użyć jednej listy w dwóch selektorach. Lista
ciemna jest jedna — poniżej `--ciemny-*` — a oba selektory tylko ją
przepisują, więc przy zmianie barwy poprawia się jedno miejsce.
*/
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--tlo: #17141C;
--powierzchnia: #211D29;
--obwodka: #3A3345;
--tekst: #F2EFE9;
--tekst-slaby: #B3ACC0;
--glowny: #9FB0F0;
--glowny-ciemny: #C6D0F7;
--glowny-jasny: #2A2C4A;
/* Stanowe pary barw MAJĄ WŁASNE WARTOŚCI CIEMNE (issue #118). Bez nich
ciemna zieleń #1B6E4B stała na ciemnym tle wszędzie tam, gdzie niesie
sam tekst: `.stan-zaakceptowana` na powierzchni karty dawało 2,0 : 1,
a `.powod` w czerwieni #9A3412 na tle strony 2,5 : 1. Wskaźnik sieci
jest tu drugim powodem, ważniejszym od wydania 0.36: to jego para
(kreska ikony plus tło plakietki) niesie stan zamiast napisu, więc
nadpisanie w motywie ciemnym JEDNEGO jej ramienia — tak jak w usterce
#110 — zdjęłoby kontrast do 2,1 : 1. Pilnują tego dwa testy naraz:
`TestKontrastParBarwWObuMotywach` i
`TestKontrastWskaznikaSieciWeWszystkichStanach`. */
--uwaga: #F2A88C;
--uwaga-jasny: #3A1F14;
--zgoda: #6FD3A2;
--zgoda-jasny: #14361F;
}
}
:root[data-theme="dark"] {
--tlo: #17141C;
--powierzchnia: #211D29;
--obwodka: #3A3345;
--tekst: #F2EFE9;
--tekst-slaby: #B3ACC0;
--glowny: #9FB0F0;
--glowny-ciemny: #C6D0F7;
--glowny-jasny: #2A2C4A;
--uwaga: #F2A88C;
--uwaga-jasny: #3A1F14;
--zgoda: #6FD3A2;
--zgoda-jasny: #14361F;
}
/* >>> SCHEMATY KOLORÓW — POCZĄTEK
* Sekcja WYgenerowana programowo z `store.CSSSchematow()`
* (internal/store/schematy_kolorow.go). Ręczne poprawki znikną
* przy najbliższym wygenerowaniu: zmiany wpisujesz w tabeli
* `SchematyKolorow`, a potem `go run scripts/schematy-css.go`.
*/
/* Schemat: Domyślny (Domyślny) */
:root[data-schemat=""] {
--tlo: #FBF8F3;
--powierzchnia: #FFFFFF;
--obwodka: #E7DFD3;
--tekst: #241F2B;
--tekst-slaby: #6B6478;
--glowny: #3F51A8;
--glowny-ciemny: #2C3A7D;
--glowny-jasny: #E8ECFA;
--uwaga: #9A3412;
--uwaga-jasny: #FDEBDD;
--zgoda: #1B6E4B;
--zgoda-jasny: #E4F1EA;
}
:root[data-schemat=""][data-theme="dark"] {
--tlo: #17141C;
--powierzchnia: #211D29;
--obwodka: #3A3345;
--tekst: #F2EFE9;
--tekst-slaby: #B3ACC0;
--glowny: #9FB0F0;
--glowny-ciemny: #C6D0F7;
--glowny-jasny: #2A2C4A;
--uwaga: #F2A88C;
--uwaga-jasny: #3A1F14;
--zgoda: #6FD3A2;
--zgoda-jasny: #14361F;
}
@media (prefers-color-scheme: dark) {
:root[data-schemat=""]:not([data-theme="light"]) {
--tlo: #17141C;
--powierzchnia: #211D29;
--obwodka: #3A3345;
--tekst: #F2EFE9;
--tekst-slaby: #B3ACC0;
--glowny: #9FB0F0;
--glowny-ciemny: #C6D0F7;
--glowny-jasny: #2A2C4A;
--uwaga: #F2A88C;
--uwaga-jasny: #3A1F14;
--zgoda: #6FD3A2;
--zgoda-jasny: #14361F;
}
}
[data-klucz-schematu=""] .plamka-tlo { background-color: #FBF8F3; }
[data-klucz-schematu=""] .plamka-powierzchnia { background-color: #FFFFFF; }
[data-klucz-schematu=""] .plamka-obwodka { background-color: #E7DFD3; }
[data-klucz-schematu=""] .plamka-glowny { background-color: #3F51A8; }
[data-klucz-schematu=""] .plamka-glowny-jasny { background-color: #E8ECFA; }
[data-klucz-schematu=""] .plamka-tekst { background-color: #241F2B; }
/* Schemat: Leśny (lesny) */
:root[data-schemat="lesny"] {
--tlo: #F2F6F1;
--powierzchnia: #FFFFFF;
--obwodka: #D9E2D6;
--tekst: #1F2B23;
--tekst-slaby: #55625A;
--glowny: #2E6B4F;
--glowny-ciemny: #1F5340;
--glowny-jasny: #DCEBE2;
--uwaga: #9A3412;
--uwaga-jasny: #FDEBDD;
--zgoda: #1B6E4B;
--zgoda-jasny: #E4F1EA;
}
:root[data-schemat="lesny"][data-theme="dark"] {
--tlo: #121816;
--powierzchnia: #1C251F;
--obwodka: #33413A;
--tekst: #EFF5F0;
--tekst-slaby: #A9B8AE;
--glowny: #74CDA0;
--glowny-ciemny: #97E0BB;
--glowny-jasny: #1D392C;
--uwaga: #F2A88C;
--uwaga-jasny: #3A1F14;
--zgoda: #6FD3A2;
--zgoda-jasny: #14361F;
}
@media (prefers-color-scheme: dark) {
:root[data-schemat="lesny"]:not([data-theme="light"]) {
--tlo: #121816;
--powierzchnia: #1C251F;
--obwodka: #33413A;
--tekst: #EFF5F0;
--tekst-slaby: #A9B8AE;
--glowny: #74CDA0;
--glowny-ciemny: #97E0BB;
--glowny-jasny: #1D392C;
--uwaga: #F2A88C;
--uwaga-jasny: #3A1F14;
--zgoda: #6FD3A2;
--zgoda-jasny: #14361F;
}
}
[data-klucz-schematu="lesny"] .plamka-tlo { background-color: #F2F6F1; }
[data-klucz-schematu="lesny"] .plamka-powierzchnia { background-color: #FFFFFF; }
[data-klucz-schematu="lesny"] .plamka-obwodka { background-color: #D9E2D6; }
[data-klucz-schematu="lesny"] .plamka-glowny { background-color: #2E6B4F; }
[data-klucz-schematu="lesny"] .plamka-glowny-jasny { background-color: #DCEBE2; }
[data-klucz-schematu="lesny"] .plamka-tekst { background-color: #1F2B23; }
/* Schemat: Morski (morski) */
:root[data-schemat="morski"] {
--tlo: #F0F5F8;
--powierzchnia: #FFFFFF;
--obwodka: #D3E0E8;
--tekst: #1B2633;
--tekst-slaby: #4E5F70;
--glowny: #1F6FB2;
--glowny-ciemny: #13558C;
--glowny-jasny: #DBEAF4;
--uwaga: #9A3412;
--uwaga-jasny: #FDEBDD;
--zgoda: #1B6E4B;
--zgoda-jasny: #E4F1EA;
}
:root[data-schemat="morski"][data-theme="dark"] {
--tlo: #10161C;
--powierzchnia: #1A222B;
--obwodka: #2E3D4C;
--tekst: #EDF3F8;
--tekst-slaby: #A9B8C7;
--glowny: #6FBFFF;
--glowny-ciemny: #9ED4FF;
--glowny-jasny: #1B3A54;
--uwaga: #F2A88C;
--uwaga-jasny: #3A1F14;
--zgoda: #6FD3A2;
--zgoda-jasny: #14361F;
}
@media (prefers-color-scheme: dark) {
:root[data-schemat="morski"]:not([data-theme="light"]) {
--tlo: #10161C;
--powierzchnia: #1A222B;
--obwodka: #2E3D4C;
--tekst: #EDF3F8;
--tekst-slaby: #A9B8C7;
--glowny: #6FBFFF;
--glowny-ciemny: #9ED4FF;
--glowny-jasny: #1B3A54;
--uwaga: #F2A88C;
--uwaga-jasny: #3A1F14;
--zgoda: #6FD3A2;
--zgoda-jasny: #14361F;
}
}
[data-klucz-schematu="morski"] .plamka-tlo { background-color: #F0F5F8; }
[data-klucz-schematu="morski"] .plamka-powierzchnia { background-color: #FFFFFF; }
[data-klucz-schematu="morski"] .plamka-obwodka { background-color: #D3E0E8; }
[data-klucz-schematu="morski"] .plamka-glowny { background-color: #1F6FB2; }
[data-klucz-schematu="morski"] .plamka-glowny-jasny { background-color: #DBEAF4; }
[data-klucz-schematu="morski"] .plamka-tekst { background-color: #1B2633; }
/* Schemat: Słoneczny (sloneczny) */
:root[data-schemat="sloneczny"] {
--tlo: #FAF4E6;
--powierzchnia: #FFFFFF;
--obwodka: #E5D8BC;
--tekst: #2D2516;
--tekst-slaby: #6B5E42;
--glowny: #8A5B00;
--glowny-ciemny: #6B4600;
--glowny-jasny: #F3E7CF;
--uwaga: #9A3412;
--uwaga-jasny: #FDEBDD;
--zgoda: #1B6E4B;
--zgoda-jasny: #E4F1EA;
}
:root[data-schemat="sloneczny"][data-theme="dark"] {
--tlo: #1B160E;
--powierzchnia: #262015;
--obwodka: #3D3628;
--tekst: #F8F2E4;
--tekst-slaby: #C2B89E;
--glowny: #FFC14D;
--glowny-ciemny: #FFD988;
--glowny-jasny: #3A2F1A;
--uwaga: #F2A88C;
--uwaga-jasny: #3A1F14;
--zgoda: #6FD3A2;
--zgoda-jasny: #14361F;
}
@media (prefers-color-scheme: dark) {
:root[data-schemat="sloneczny"]:not([data-theme="light"]) {
--tlo: #1B160E;
--powierzchnia: #262015;
--obwodka: #3D3628;
--tekst: #F8F2E4;
--tekst-slaby: #C2B89E;
--glowny: #FFC14D;
--glowny-ciemny: #FFD988;
--glowny-jasny: #3A2F1A;
--uwaga: #F2A88C;
--uwaga-jasny: #3A1F14;
--zgoda: #6FD3A2;
--zgoda-jasny: #14361F;
}
}
[data-klucz-schematu="sloneczny"] .plamka-tlo { background-color: #FAF4E6; }
[data-klucz-schematu="sloneczny"] .plamka-powierzchnia { background-color: #FFFFFF; }
[data-klucz-schematu="sloneczny"] .plamka-obwodka { background-color: #E5D8BC; }
[data-klucz-schematu="sloneczny"] .plamka-glowny { background-color: #8A5B00; }
[data-klucz-schematu="sloneczny"] .plamka-glowny-jasny { background-color: #F3E7CF; }
[data-klucz-schematu="sloneczny"] .plamka-tekst { background-color: #2D2516; }
/* Schemat: Różany (rozany) */
:root[data-schemat="rozany"] {
--tlo: #FAF1F2;
--powierzchnia: #FFFFFF;
--obwodka: #E4D0D4;
--tekst: #301F24;
--tekst-slaby: #6D5A61;
--glowny: #A63A5C;
--glowny-ciemny: #852A49;
--glowny-jasny: #F3DFE5;
--uwaga: #9A3412;
--uwaga-jasny: #FDEBDD;
--zgoda: #1B6E4B;
--zgoda-jasny: #E4F1EA;
}
:root[data-schemat="rozany"][data-theme="dark"] {
--tlo: #191214;
--powierzchnia: #241C1F;
--obwodka: #3A2C31;
--tekst: #F6EFF1;
--tekst-slaby: #C0AEB5;
--glowny: #F08FAD;
--glowny-ciemny: #F7A9C1;
--glowny-jasny: #3A2230;
--uwaga: #F2A88C;
--uwaga-jasny: #3A1F14;
--zgoda: #6FD3A2;
--zgoda-jasny: #14361F;
}
@media (prefers-color-scheme: dark) {
:root[data-schemat="rozany"]:not([data-theme="light"]) {
--tlo: #191214;
--powierzchnia: #241C1F;
--obwodka: #3A2C31;
--tekst: #F6EFF1;
--tekst-slaby: #C0AEB5;
--glowny: #F08FAD;
--glowny-ciemny: #F7A9C1;
--glowny-jasny: #3A2230;
--uwaga: #F2A88C;
--uwaga-jasny: #3A1F14;
--zgoda: #6FD3A2;
--zgoda-jasny: #14361F;
}
}
[data-klucz-schematu="rozany"] .plamka-tlo { background-color: #FAF1F2; }
[data-klucz-schematu="rozany"] .plamka-powierzchnia { background-color: #FFFFFF; }
[data-klucz-schematu="rozany"] .plamka-obwodka { background-color: #E4D0D4; }
[data-klucz-schematu="rozany"] .plamka-glowny { background-color: #A63A5C; }
[data-klucz-schematu="rozany"] .plamka-glowny-jasny { background-color: #F3DFE5; }
[data-klucz-schematu="rozany"] .plamka-tekst { background-color: #301F24; }
/* Schemat: Lawendowy (lawendowy) */
:root[data-schemat="lawendowy"] {
--tlo: #F5F1FA;
--powierzchnia: #FFFFFF;
--obwodka: #DFD6EC;
--tekst: #272030;
--tekst-slaby: #5F5570;
--glowny: #5B3F9E;
--glowny-ciemny: #452C7D;
--glowny-jasny: #EAE2F8;
--uwaga: #9A3412;
--uwaga-jasny: #FDEBDD;
--zgoda: #1B6E4B;
--zgoda-jasny: #E4F1EA;
}
:root[data-schemat="lawendowy"][data-theme="dark"] {
--tlo: #16121C;
--powierzchnia: #201A2A;
--obwodka: #352D45;
--tekst: #F1EDF7;
--tekst-slaby: #B3A8C6;
--glowny: #A98BF4;
--glowny-ciemny: #C0A9FA;
--glowny-jasny: #2E1F44;
--uwaga: #F2A88C;
--uwaga-jasny: #3A1F14;
--zgoda: #6FD3A2;
--zgoda-jasny: #14361F;
}
@media (prefers-color-scheme: dark) {
:root[data-schemat="lawendowy"]:not([data-theme="light"]) {
--tlo: #16121C;
--powierzchnia: #201A2A;
--obwodka: #352D45;
--tekst: #F1EDF7;
--tekst-slaby: #B3A8C6;
--glowny: #A98BF4;
--glowny-ciemny: #C0A9FA;
--glowny-jasny: #2E1F44;
--uwaga: #F2A88C;
--uwaga-jasny: #3A1F14;
--zgoda: #6FD3A2;
--zgoda-jasny: #14361F;
}
}
[data-klucz-schematu="lawendowy"] .plamka-tlo { background-color: #F5F1FA; }
[data-klucz-schematu="lawendowy"] .plamka-powierzchnia { background-color: #FFFFFF; }
[data-klucz-schematu="lawendowy"] .plamka-obwodka { background-color: #DFD6EC; }
[data-klucz-schematu="lawendowy"] .plamka-glowny { background-color: #5B3F9E; }
[data-klucz-schematu="lawendowy"] .plamka-glowny-jasny { background-color: #EAE2F8; }
[data-klucz-schematu="lawendowy"] .plamka-tekst { background-color: #272030; }
/* Schemat: Grafitowy (grafitowy) */
:root[data-schemat="grafitowy"] {
--tlo: #F2F2F4;
--powierzchnia: #FFFFFF;
--obwodka: #D9D9DF;
--tekst: #23232A;
--tekst-slaby: #5E5E6A;
--glowny: #3A3A46;
--glowny-ciemny: #26262F;
--glowny-jasny: #E4E4EA;
--uwaga: #9A3412;
--uwaga-jasny: #FDEBDD;
--zgoda: #1B6E4B;
--zgoda-jasny: #E4F1EA;
}
:root[data-schemat="grafitowy"][data-theme="dark"] {
--tlo: #131316;
--powierzchnia: #1D1D23;
--obwodka: #33333B;
--tekst: #F0F0F3;
--tekst-slaby: #ADADB8;
--glowny: #B9B9C8;
--glowny-ciemny: #D2D2DD;
--glowny-jasny: #2A2A33;
--uwaga: #F2A88C;
--uwaga-jasny: #3A1F14;
--zgoda: #6FD3A2;
--zgoda-jasny: #14361F;
}
@media (prefers-color-scheme: dark) {
:root[data-schemat="grafitowy"]:not([data-theme="light"]) {
--tlo: #131316;
--powierzchnia: #1D1D23;
--obwodka: #33333B;
--tekst: #F0F0F3;
--tekst-slaby: #ADADB8;
--glowny: #B9B9C8;
--glowny-ciemny: #D2D2DD;
--glowny-jasny: #2A2A33;
--uwaga: #F2A88C;
--uwaga-jasny: #3A1F14;
--zgoda: #6FD3A2;
--zgoda-jasny: #14361F;
}
}
[data-klucz-schematu="grafitowy"] .plamka-tlo { background-color: #F2F2F4; }
[data-klucz-schematu="grafitowy"] .plamka-powierzchnia { background-color: #FFFFFF; }
[data-klucz-schematu="grafitowy"] .plamka-obwodka { background-color: #D9D9DF; }
[data-klucz-schematu="grafitowy"] .plamka-glowny { background-color: #3A3A46; }
[data-klucz-schematu="grafitowy"] .plamka-glowny-jasny { background-color: #E4E4EA; }
[data-klucz-schematu="grafitowy"] .plamka-tekst { background-color: #23232A; }
SCHEMATY KOLORÓW — KONIEC */
/* GALERIA SCHEMATÓW (REQ-005) — statyczna szata; same barwy plamek stawiają
reguły `[data-klucz-schematu="…"] .plamka-*` z sekcji wyżej, WYgenerowane
z tej samej tabeli, z której stawiane są tokeny. */
.galeria-schematow {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
gap: 0.75rem;
}
.kafel-schemat {
position: relative;
display: block;
padding: 0.5rem;
cursor: pointer;
border: 1px solid var(--obwodka);
border-radius: 0.5rem;
background: var(--powierzchnia);
}
.kafel-schemat:hover {
border-color: var(--glowny);
}
.kafel-schemat:focus-within {
outline: 2px solid var(--glowny);
outline-offset: 2px;
}
.kafel-schemat.wybrany {
border-color: var(--glowny);
box-shadow: 0 0 0 2px var(--glowny-jasny);
}
/* Radio jest niewidoczne wzrokowo, ale stoi w drzewie i reaguje z klawiatury
(strzałki przełączają kafle, `change` jedzie do `wyglad.js`). */
.wybor-schematu {
position: absolute;
opacity: 0;
pointer-events: none;
}
.podglad-schematu {
display: flex;
gap: 2px;
}
.podglad-schematu .plamka {
flex: 1 1 0;
height: 1.4rem;
border-radius: 0.25rem;
}
.nazwa-schematu {
display: block;
margin-top: 0.4rem;
text-align: center;
font-size: 0.85rem;
color: var(--tekst);
}
.opis-schematow {
font-size: 0.9rem;
color: var(--tekst-slaby);
}
* { box-sizing: border-box; }
/* Podstawa drabiny stopnia pisma — patrz komentarz przy `--skala-tekstu`.
Musi stać na `html`, bo `rem` liczy się od elementu głównego (#107). */
html { font-size: calc(16px * var(--skala-tekstu)); }
body {
margin: 0;
background: var(--tlo);
color: var(--tekst);
font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
font-family: 'Bitter', 'Inter', ui-serif, serif;
letter-spacing: -0.01em;
margin: 0 0 12px;
}
a { color: var(--glowny); }
/* ---- pasek aplikacji ---------------------------------------------------- */
.pasek {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: var(--powierzchnia);
border-bottom: 1px solid var(--obwodka);
}
.znak {
display: flex;
align-items: center;
gap: 8px;
min-height: 44px;
text-decoration: none;
/* Bulma daje `.navbar-item` 8 px pionowego odstępu — dla znaku, którego
wysokość wyznacza sam rysunek (issue #148), ten odstęp podwajałby
wiersz. Poziomy odstęp pozostaje z Bulmy i powiększa obszar kliknięcia. */
padding-top: 0;
padding-bottom: 0;
}
/*
`max-height` znosi limit Bulmy `.navbar-item img` (1.75rem = 28 px przy
skali 1). Znak wspólnoty jest znakiem, a nie ikoną pozycji menu, więc jego
rozmiar deklarują atrybuty `width`/`height` w pasku (REQ-052, issue #148).
Selektor jest dwa razy dłuższy niż Bulmy, bo tamten ma większą specyficzność
(.navbar-item + img) i bez tego przegrałby.
*/
.pasek .znak-ikona { max-height: none; }
/*
Znak wspólnoty (`znak.svg`) NIE DZIEDZICZY koloru: ma własne barwy —
granat, złoto i kremowe pole (REQ-052). Stała tu wcześniej reguła
`color: var(--glowny)`, która niczego nie robiła, bo rysunek nie używa
`currentColor`. Znak jest JEDEN dla obu motywów — decyzja w REQ-052.
*/
/*
OZNACZENIE TESTOWE ŚRODOWISKA STAGE (REQ-079, issue #354).
Tło znaku na czerwono odróżnia środowisko testowe od produkcji widocznie
i natychmiast — zanim ktokolwiek przeczyta pierwszy napis na stronie.
Selektor idzie OD `` przez `data-stage`, a nie od klasy, żeby
ani jedna strona renderowana bez tego pola nie dostała czerwonych pleców
przypadkiem.
*/
[data-stage] .znak {
background-color: #cc0000;
border-radius: 4px;
}
/*
KONTROLKI PASKA STOJĄ PRZY PRAWEJ KRAWĘDZI — na każdej szerokości
(zgłoszenie właściciela produktu, 2026-09-05).
Bulma odsuwa `navbar-end` do prawej dopiero powyżej 1024 px, bo na wąskim
ekranie zakłada, że `navbar-menu` jest osobnym, rozwijanym blokiem pod
paskiem. U nas `navbar-end` jest bezpośrednim dzieckiem paska i ma zostać
rzędem także na telefonie — więc odsunięcie deklarujemy sami.
Bez tego przełącznik motywu kończył się na 180 px z 390 px szerokości
ekranu, czyli w połowie paska.
Awatar jest OSTATNI, a przełącznik motywu przed nim: awatar prowadzi na
własny profil (i dalej do wylogowania), więc to on jest kontrolką „moje
konto" — a taka stoi na końcu paska w każdej aplikacji, którą wspólnota zna
skądinąd.
*/
.pasek .navbar-end {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
/*
`rozpychacz` zniknął razem z własnym paskiem — `navbar-end` Bulmy odsuwa
kontrolki do prawej krawędzi samym układem.
*/
/* Cele dotykowe od 44 px, akcje główne 56–64 px (reguła 1 z design/README.md,
* REQ-016). Ten próg dotyczy TAKŻE przycisków ikonowych — ikona rysowana na
* 20 px nie zwalnia z rozmiaru celu. */
.kontrolka {
width: 44px;
height: 44px;
/* `padding: 0` jest tu potrzebne, a nie ozdobne: `.button` Bulmy daje
* `padding: … 1em`, czyli 32 px w poziomie z 44 px szerokości — znak
* zostałby ściśnięty do dwunastu. */
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--obwodka);
border-radius: 12px;
background: var(--powierzchnia);
color: var(--tekst);
cursor: pointer;
}
/*
PRZEŁĄCZNIK MOTYWU — dwa tryby, dwa rysunki (REQ-004, issue #118).
Wybór idzie atrybutem `data-motyw` na elemencie głównym — stawia go serwer
(`baza.tmpl`, tryb domyślny „dzień"/„noc") albo `wyglad.js` (zawieszenie
z `sessionStorage`), zawsze w tej samej chwili co `data-theme`, czyli PRZED
PIERWSZYM RYSOWANIEM.
W TRYBIE „AUTO" ATRYBUTU NIE MA i wtedy rysunek idzie za
`prefers-color-scheme` dokładnie tak, jak reszta motywu: samym arkuszem, na
żywo, bez ani jednego nasłuchu w skrypcie. Skrypt nasłuchuje wyłącznie po
to, żeby przepisać ETYKIETĘ SŁOWNĄ (`aria-label`) — arkusz stylów nie ma
jak zmienić tekstu, a stan nie może być niesiony samym kolorem
(reguła 2 `design/README.md`).
*/
.ikona-motywu { display: none; }
:root[data-motyw="dzien"] .ikona-motywu[data-motyw="dzien"],
:root[data-motyw="noc"] .ikona-motywu[data-motyw="noc"] { display: block; }
:root:not([data-motyw]) .ikona-motywu[data-motyw="dzien"] { display: block; }
@media (prefers-color-scheme: dark) {
:root:not([data-motyw]):not([data-theme="light"]) .ikona-motywu[data-motyw="dzien"] { display: none; }
:root:not([data-motyw]):not([data-theme="light"]) .ikona-motywu[data-motyw="noc"] { display: block; }
}
/*
SELEKTOR `.pasek a.awatar`, A NIE `.awatar` — i to nie jest ozdoba
specyficzności. Bulma daje `a.navbar-item { background-color: hsla(…, 0) }`,
czyli tło PRZEZROCZYSTE, a selektor klasa+typ bije jednoczłonową `.awatar`.
Reguła `background: var(--glowny-jasny)` stała tu od pierwszego wydania
i nie robiła NIC: kółko awatara nie miało wypełnienia w ogóle, a wyglądało
na działające, bo pasek pod nim jest jasny. Znalezione przy zgłoszeniu #148,
gdy obwódka też nie chciała wejść z tego samego powodu.
*/
.pasek a.awatar,
.awatar {
width: 46px;
height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: var(--glowny-jasny);
border: 2px solid var(--glowny);
color: var(--glowny-ciemny);
font-weight: 700;
font-size: 0.85rem;
text-decoration: none;
overflow: hidden;
}
/* Zdjęcie w awatarze (REQ-065) wypełnia kółko i nie wystaje poza obwódkę. */
.pasek a.awatar img.awatar-zdjecie {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 999px;
display: block;
}
.wyloguj { margin: 0; display: inline-flex; }
/* ---- treść -------------------------------------------------------------- */
main { padding: 20px 16px 32px; }
/*
`.pomocniczy` NIE NIESIE JUŻ WYGLĄDU — dają go klasy Bulmy
`is-size-7 has-text-grey`, dopisane obok w szablonach. Nazwa zostaje, bo
mówi, CZYM ten tekst jest (informacja drugorzędna), a nie jak wygląda;
po niej szukają go też kontrole spójności i reguły wydruku.
*/
.pomocniczy { }
/* ---- wskaźnik stanu sieci ----------------------------------------------- */
/*
Stan NIGDY nie jest samym kolorem (reguła 2) — ale od 6 września 2026 nie
jest też niesiony napisem w pasku: właściciel produktu zdjął go stamtąd we
wszystkich stanach (issue #118, REQ-002). Nośniki są odtąd dwa i działają
RAZEM, nie zamiennie:
- KSZTAŁT — cztery różne rysunki w `wskaznik-sieci.tmpl`, wybierane niżej
po `data-stan`; zostaje czytelny w odcieniach szarości, w trybie
wysokiego kontrastu i na wydruku, gdzie tło potrafi zniknąć;
- BARWA — para „kreska ikony + tło plakietki", osobna dla każdego stanu;
tło widać kątem oka z dalej niż cienką linię.
Każda z tych par ma kontrast co najmniej 4,5 : 1 w OBU motywach. Stan,
w którym wskaźnik akurat stoi, mierzy `TestKontrastParBarwWObuMotywach`
na kilkunastu ekranach; WSZYSTKIE cztery stany —
`TestKontrastWskaznikaSieciWeWszystkichStanach`. Wartości ciemne tokenów
`uwaga` i `zgoda` (oraz ich odpowiedników jasnych) są na górze tego pliku.
Napis zostaje w dokumencie i w `title`; w pasku jest ukryty regułą niżej.
*/
.wskaznik-sieci {
position: relative;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid var(--obwodka);
background: var(--powierzchnia);
font-size: 0.8rem;
color: var(--tekst-slaby);
}
/* Rysunek stanu — jeden z czterech. Reszta czeka w dokumencie. */
.wskaznik-ikona { display: none; }
.wskaznik-sieci[data-stan="sprawdzam"] .wskaznik-ikona[data-stan="sprawdzam"],
.wskaznik-sieci[data-stan="online"] .wskaznik-ikona[data-stan="online"],
.wskaznik-sieci[data-stan="synchronizacja"] .wskaznik-ikona[data-stan="synchronizacja"],
.wskaznik-sieci[data-stan="offline"] .wskaznik-ikona[data-stan="offline"] { display: block; }
.wskaznik-sieci[data-stan="online"] {
color: var(--zgoda);
background: var(--zgoda-jasny);
border-color: var(--zgoda);
}
.wskaznik-sieci[data-stan="offline"] {
color: var(--uwaga);
background: var(--uwaga-jasny);
border-color: var(--uwaga);
}
.wskaznik-sieci[data-stan="synchronizacja"] {
color: var(--glowny-ciemny);
background: var(--glowny-jasny);
border-color: var(--glowny);
}
/* Stan przejściowy tuż po wczytaniu strony — cichy i BEZ własnego tła, bo za
chwilę rozstrzygnie się w „połączono" albo „brak sieci" (issue 1333).
Brak barwnego tła jest tu tak samo rozpoznawalny jak tło u sąsiadów. */
.wskaznik-sieci[data-stan="sprawdzam"] {
color: var(--tekst-slaby);
background: var(--powierzchnia);
border-color: var(--obwodka);
}
/*
NAPIS ZNIKA WYŁĄCZNIE W PASKU (REQ-002, issue #118). Zajmował 62 px ze 215
px całego `navbar-end` — ponad połowę miejsca, które w pasku mają kontrolki
konta. W TREŚCI ekranu logowania ten sam napis zostaje widoczny: tam nie
konkuruje o miejsce, a jest jedyną rzeczą odróżniającą brak łączności od
złego hasła (rozbieżność 25).
UKRYCIE, A NIE USUNIĘCIE: `display: none` zabrałby ten tekst także
czytnikowi ekranu i `aria-live` nie miałoby czego ogłosić.
*/
.pasek .wskaznik-sieci { gap: 0; padding: 6px; }
.pasek .wskaznik-sieci .wskaznik-tekst {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/*
WYBÓR PLIKU ZDJĘCIA (REQ-065): pole `` jest UKRYTE
PRZED OKIEM (ten sam wzorzec `clip-path`, co tekst wskaźnika sieci), ale
ZOSTAJE W STRUKTURZE — etykieta `label` z klasą-guzikiem otacza pole, więc
klawiatura dociera do niego, a czytnik czyta nazwę z `label`. Formularz
wgrywa po zmniejszeniu do wersji ekranowej (`kwadrat.js`); pole bez
`productive` przeglądarki obsługuje `capture` dla aparatu (migawka prosto
z telefonu).
*/
.wybor-zdjecia input[type="file"] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/*
LICZNIK AKCJI OCZEKUJĄCYCH (REQ-003, FEAT-002 scenariusz 5, issue #139).
Stoi tuż przy plakietce sieci i nosi TĘ SAMĄ PARĘ BARW co stan „brak
sieci" (`--uwaga` na `--uwaga-jasny`) — nie z oszczędności, tylko dlatego,
że mówi o tej samej sprawie: coś jeszcze nie dotarło do wspólnoty. Para
jest już zmierzona w obu motywach, a jej kontrast pilnuje
`TestKontrastLicznikaOczekujacych`.
TREŚCIĄ JEST LICZBA, więc znaczenie nie wisi na kolorze (reguła 2 makiet):
kto nie rozróżnia barw, czyta cyfrę, a czytnik ekranu dostaje pełne zdanie
w `aria-label` (`oczekujace.js`).
`min-width` z `text-align`, bo licznik zmienia się przy każdej wysłanej
akcji: bez tego pasek drgałby o kilka pikseli przy przejściu z 10 na 9.
Element nie ma stanu „zero" — przy pustej kolejce `oczekujace.js` stawia na
nim `hidden`, czyli zdejmuje go także czytnikowi ekranu.
*/
.licznik-oczekujacych {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.6rem;
margin-left: 4px;
padding: 2px 6px;
border-radius: 999px;
border: 1px solid var(--uwaga);
background: var(--uwaga-jasny);
color: var(--uwaga);
font-size: 0.78rem;
font-weight: 600;
line-height: 1.2;
}
.licznik-oczekujacych[hidden] { display: none; }
/*
PLAKIETKA NOWEJ WERSJI (REQ-053, FEAT-048, issue #149).
Rozstrzygnięcie właściciela produktu z 7 września 2026: sam badge z numerem
nowej wersji, ewentualnie z ikonką aktualizacji — żadnych zdań.
ZNACZENIA NIE NOSI KOLOR (reguła 2 makiet). Poza parą barw plakietka niesie
IKONĘ strzałki odświeżania oraz `aria-label` i `title` ze zdaniem
„Zaktualizuj aplikację do wersji X" (wpisuje je `wersja.js`) — bo sam numer
nie mówi czytnikowi ekranu, że to aktualizacja. Kontrast pary mierzy test
przeglądarkowy w OBU motywach.
PARA `--glowny` NA `--glowny-jasny`, a nie `--uwaga` jak licznik
oczekujących. Rozróżnienie jest treścią, nie ozdobą: licznik i wskaźnik
sieci mówią „coś nie doszło", a nowa wersja jest OFERTĄ, nie kłopotem.
Barwa uwagi obok nich dawałaby w pasku trzy pomarańczowe plakietki, z których
żadna nie mówiłaby, która z nich wymaga reakcji. Kontrast tej pary: 6,03 : 1
w motywie jasnym, 6,38 : 1 w ciemnym.
CEL DOTYKOWY 44 px (REQ-014) daje `min-height`, a nie sam `padding`: numer
wersji bywa krótki („1.3.0") i przy samym marginesie wewnętrznym plakietka
wychodziła na telefonie niższa niż palec.
*/
.plakietka-wersji {
display: inline-flex;
align-items: center;
gap: 5px;
min-height: 44px;
margin-left: 6px;
padding: 2px 10px;
border-radius: 999px;
border: 1px solid var(--glowny);
background: var(--glowny-jasny);
color: var(--glowny);
font-size: 0.82rem;
font-weight: 700;
line-height: 1.2;
cursor: pointer;
}
.plakietka-wersji[hidden] { display: none; }
/*
GUZIK ZABLOKOWANY NA CZAS AKTUALIZACJI. Kursor „nie wolno" i przygaszenie
razem, bo samo przygaszenie na plakietce tej wielkości bywa nierozpoznawalne,
a kursor widzi tylko ten, kto ma mysz.
*/
.plakietka-wersji[disabled] {
cursor: progress;
opacity: 0.65;
}
.plakietka-wersji .ikona-aktualizacji { flex: none; }
/*
OZNACZENIE „czeka na synchronizację" PRZY ELEMENCIE (REQ-003).
Stoi POD formularzem, którego dotyczy, i jest zdaniem, a nie ikoną: mówi
wprost, że efekt nie dotarł jeszcze do pozostałych. Barwa jest tą samą
barwą uwagi co licznik; sam napis wystarczy bez niej.
*/
.znacznik-oczekuje {
display: block;
margin: 6px 0 0;
padding: 6px 10px;
border-left: 3px solid var(--uwaga);
background: var(--uwaga-jasny);
color: var(--uwaga);
font-size: 0.85rem;
}
/* ---- ekran logowania ---------------------------------------------------- */
.ekran-logowania {
max-width: 380px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 16px;
}
.formularz-logowania {
display: flex;
flex-direction: column;
gap: 8px;
}
.formularz-logowania label {
font-size: 0.85rem;
color: var(--tekst-slaby);
}
/*
Pola logowania mają klasę `input` Bulmy (skill `bulma`), więc obwódka, tło,
ognisko i zachowanie w trybie ciemnym pochodzą stamtąd. Zostaje WYŁĄCZNIE
to, czego Bulma nie ustala, a czego wymaga REQ-016: cel dotykowy akcji
głównej. Powtarzanie tu obwódki i tła dawało dwa źródła prawdy o wyglądzie
pola — a rozjazd widać dopiero w trybie ciemnym.
*/
.formularz-logowania .input { min-height: 48px; }
.akcja-glowna {
min-height: 56px;
margin-top: 8px;
border: 0;
border-radius: 16px;
background: var(--glowny);
color: #FFFFFF;
font: inherit;
font-weight: 600;
cursor: pointer;
}
/* Komunikat błędu logowania. Kolor `uwaga` jest tu na miejscu — coś się nie
* udało. To odróżnia go od wakatu, który jest zaproszeniem i dlatego NIGDY
* nie dostaje czerwieni (reguła 3). */
.komunikat-bledu {
margin: 0;
padding: 12px 14px;
border: 1px solid var(--uwaga);
border-radius: 14px;
background: var(--uwaga-jasny);
color: var(--uwaga);
font-size: 0.9rem;
}
.stopka-wersji {
margin: 8px 0 0;
color: var(--tekst-slaby);
font-size: 0.75rem;
}
/* ---- pulpit ------------------------------------------------------------- */
.kafle {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
margin: 16px 0;
}
.kafel {
display: flex;
flex-direction: column;
gap: 4px;
min-height: 92px;
padding: 14px;
border: 1px solid var(--obwodka);
border-radius: 16px;
background: var(--powierzchnia);
}
.kafel-etykieta { font-size: 0.8rem; color: var(--tekst-slaby); }
.kafel-wartosc {
font-family: 'Bitter', 'Inter', ui-serif, serif;
font-size: 1.6rem;
font-weight: 700;
}
.kafel-podpis { font-size: 0.78rem; color: var(--tekst-slaby); }
.os-dnia {
list-style: none;
margin: 16px 0;
padding: 0 0 0 18px;
border-left: 2px solid var(--obwodka);
}
.os-dnia li {
display: flex;
gap: 12px;
padding: 10px 0;
}
.os-godzina {
min-width: 64px;
color: var(--tekst-slaby);
font-size: 0.8rem;
}
.os-teraz .os-godzina { color: var(--glowny-ciemny); font-weight: 700; }
/* ---- ekran błędu -------------------------------------------------------- */
.ekran-bledu { max-width: 480px; margin: 0 auto; }
/* ---- nawigacja ---------------------------------------------------------- */
/*
NAWIGACJA STOI NA KOMPONENCIE `navbar` BULMY (skill `bulma`) — cały układ,
chowanie na wąskim ekranie i burger dostajemy gotowe. Zostaje tu WYŁĄCZNIE
to, czego Bulma nie ma albo co u nas znaczy co innego.
Poprzednia wersja miała tu siedemdziesiąt linii własnego paska: przewijaną
listę z `overflow-x`, własne rozwijane menu na `` i własny stan
aktywnej pozycji. Menu było obcinane przez `overflow` rodzica i na telefonie
wyglądało jak „hamburger nie działa" (usterka wydania 0.7.0). Komponent
z biblioteki ma ten przypadek rozwiązany, bo pozycje nie przewijają się
w poziomie, tylko układają w pionie.
*/
/*
WOREK IKON NIE ZAJMUJE MIEJSCA W UKŁADZIE (REQ-001, #157).
`