/**
* Styl uniwersalny (pilotaz) - user 2026-08-06: "Robimy styl uniwersalny dla
* wszystkich for [...] Wywalamy te naglowki i tabele trzymajace forum -
* calosc przechodzi w skalowalny CSS [...] Baza jest styl zero jasny -
* dorob rowniez wersje ciemna [...] Szerokosc bazowa 1200px."
*
* Zastepuje tabelkowy uklad styl_forum0-9.css semantycznym HTML + CSS
* (flex/grid). Kolory jasnego motywu wziete 1:1 ze styl_forum0.css (baza
* per zadanie). Uzywane WYLACZNIE przez layouts/forum-v2.php + pages/v2/*
* (patrz Forum::biezace()/View::render() - pilotaz, na razie tylko
* sp7pki.iq24.pl). Stare style_forumN.css zostaja bez zmian.
*
* Motyw: :root = jasny (domyslny). Ciemny wlacza sie automatycznie wg
* prefers-color-scheme PRZED zapisaniem jakiegokolwiek ciasteczka, a po
* wyborze w przelaczniku - jawnym atrybutem data-motyw="ciemny"/"jasny" na
* (ustawianym server-side z ciasteczka iq24_motyw w forum-v2.php,
* zeby nie bylo mrugniecia przy ladowaniu). data-motyw="jasny" wygrywa nad
* prefers-color-scheme, gdyby ktos mial ciemny system a wybral jasny recznie.
*
* Skala czcionki: przelacznik A-/A+ (public/js/preferencje.js) zmienia
* --skala inline na (krok -2..+2, patrz forum-v2.php); cala reszta
* pliku jest w rem, wiec skaluje sie proporcjonalnie.
*/
/* ===================================================== RESET / PODSTAWY */
*, *::before, *::after { box-sizing: border-box; }
html {
/* 100% = domyslny rozmiar przegladarki (zwykle 16px); --skala mnozy go,
NIE mnozy wlasnego font-size (uniknieta cyrkularnosc rem-do-rem). */
font-size: calc(100% * var(--skala, 1));
}
body {
margin: 0;
font-family: var(--font);
font-size: 0.875rem;
line-height: 1.5;
color: var(--tekst);
background: var(--tlo);
}
a { color: var(--link); text-decoration: none; }
a:hover, a:focus-visible { color: var(--link-hover-tekst); background: var(--link-hover-tlo); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
outline: 2px solid var(--link-hover-tlo);
outline-offset: 1px;
}
h1 { font-size: 1.5rem; font-weight: bold; text-wrap: balance; margin: 0.6em 0; }
h2 { font-size: 1.125rem; font-weight: bold; margin: 0.6em 0; }
/* tlo/kolor jawnie, nie tylko font - w layouts/forum-v2.php (potrzebne, zeby np. suwaki/scrollbar tez
podazaly za motywem) ma efekt uboczny: przegladarka sama nakleja WLASNE,
natywne ciemne tlo na kazdy input/textarea/select bez jawnego tla, gdy
system/przegladarka odwiedzajacego jest w trybie ciemnym - NIEZALEZNIE od
wybranego na stronie data-motyw="jasny" (zgloszenie usera: pola logowania,
Szukaj, ShoutBox wygladaly na ciemno mimo jasnego motywu strony). */
textarea, input, select {
font-family: var(--font);
font-size: 0.875rem;
background: var(--tlo-karty);
color: var(--tekst-mocny);
}
button {
font-family: var(--font);
font-size: 0.875rem;
}
img { max-width: 100%; height: auto; }
table { border-collapse: collapse; } /* tresc wlasciciela forow czesto ma wlasne tabele */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
/* ===================================================== TOKENY: JASNY */
:root {
--font: verdana, tahoma, helvetica, arial, sans-serif;
--tlo: #FFFFFF;
--tlo-karty: #f7f7fb;
--tlo-karty-alt: #ececf5;
--tekst: #535353;
--tekst-mocny: #272727;
--tekst-przygaszony: #6b6b6b;
--link: #3300CC;
--link-hover-tekst: #000000;
--link-hover-tlo: #ff9a00;
--akcent-tekst: #000099;
--akcent-tlo: #C9CDEF;
--naglowek-tekst: #ffffff;
--naglowek-tlo: #5353C4;
--tytul-watku: #330099;
--tytul-watku-alt: #B74F35;
--komunikat-neutralny-tlo: #C9CDEF;
--komunikat-neutralny-ramka: #000099;
--komunikat-pozytywny-tlo: #C8E2C5;
--komunikat-pozytywny-ramka: #41893D;
--komunikat-negatywny-tlo: #FAD0C9;
--komunikat-negatywny-ramka: #FF0000;
--przycisk-tlo: #6c7bff;
--przycisk-tekst: #ffffff;
--przycisk-tlo-cichy: #e4e4e4;
--przycisk-tekst-cichy: #3a3a3a;
--linia: #d8d8e6;
--ramka-obwodka: #000099;
/* "Wyspa" tresci wlasciciela forum (naglowek/stopka, gotowy_naglowek) -
ZAWSZE jasna niezaleznie od motywu strony. 1415/3199 forow wstawia
tu wlasny, recznie pisany HTML/obrazki zakladajace jasne tlo -
wymuszenie ciemnego motywu na tej tresci robiloby ja nieczytelna,
a nie mamy kontroli nad jej kolorami. Patrz forum-v2.php. */
--wyspa-tlo: #ffffff;
--wyspa-tekst: #333333;
--wyspa-ramka: #c8c8c8;
}
/* ===================================================== TOKENY: CIEMNY */
@media (prefers-color-scheme: dark) {
:root:not([data-motyw="jasny"]) {
--tlo: #1a1c25;
--tlo-karty: #242631;
--tlo-karty-alt: #2b2e3a;
--tekst: #d8d9e2;
--tekst-mocny: #eef0f8;
--tekst-przygaszony: #a9abb8;
--link: #8c96ff;
--link-hover-tekst: #1a1c25;
--link-hover-tlo: #ff9a00;
--akcent-tekst: #c7ccff;
--akcent-tlo: #2b2e6b;
--naglowek-tekst: #e4e6ff;
--naglowek-tlo: #3d3f8f;
--tytul-watku: #a6b0ff;
--tytul-watku-alt: #e08a6f;
--komunikat-neutralny-tlo: #2b2e6b;
--komunikat-neutralny-ramka: #8c96ff;
--komunikat-pozytywny-tlo: #1f3d24;
--komunikat-pozytywny-ramka: #5fbf68;
--komunikat-negatywny-tlo: #3d1f1f;
--komunikat-negatywny-ramka: #ff6b6b;
--przycisk-tlo-cichy: #333648;
--przycisk-tekst-cichy: #d8d9e2;
--linia: #383b4a;
--ramka-obwodka: #4d51a8;
}
}
:root[data-motyw="ciemny"] {
--tlo: #1a1c25;
--tlo-karty: #242631;
--tlo-karty-alt: #2b2e3a;
--tekst: #d8d9e2;
--tekst-mocny: #eef0f8;
--tekst-przygaszony: #a9abb8;
--link: #8c96ff;
--link-hover-tekst: #1a1c25;
--link-hover-tlo: #ff9a00;
--akcent-tekst: #c7ccff;
--akcent-tlo: #2b2e6b;
--naglowek-tekst: #e4e6ff;
--naglowek-tlo: #3d3f8f;
--tytul-watku: #a6b0ff;
--tytul-watku-alt: #e08a6f;
--komunikat-neutralny-tlo: #2b2e6b;
--komunikat-neutralny-ramka: #8c96ff;
--komunikat-pozytywny-tlo: #1f3d24;
--komunikat-pozytywny-ramka: #5fbf68;
--komunikat-negatywny-tlo: #3d1f1f;
--komunikat-negatywny-ramka: #ff6b6b;
--przycisk-tlo-cichy: #333648;
--przycisk-tekst-cichy: #d8d9e2;
--linia: #383b4a;
--ramka-obwodka: #4d51a8;
}
/* ===================================================== UKLAD STRONY */
.ramka {
max-width: 1200px;
margin: 0 auto;
padding: 0 10px;
}
/* Tresc wlasciciela forum (naglowek/stopka) - patrz token --wyspa-*.
Uzyta jako maly, niezalezny "wysepkowy" wrapper WOKOL kazdego z dwoch
miejsc wstrzykniecia (nie jednego, ciagnacego sie przez cala strone) -
dzieki temu reszta strony (belka, tresc, stopka aplikacji) normalnie
podaza za motywem jasny/ciemny, a tylko cudzy HTML jest wymuszony jasny. */
.wlasciciel-tresc {
background: var(--wyspa-tlo);
color: var(--wyspa-tekst);
border: 1px solid var(--wyspa-ramka);
border-radius: 4px;
padding: 8px 10px;
margin: 8px 0;
overflow-x: auto;
}
.wlasciciel-tresc a { color: #3300CC; }
.wlasciciel-tresc a:hover { color: #000; background: #ff9a00; }
/* ===================================================== PASEK MOTYWU */
/* Przelacznik motywu + A-/A+ (public/js/preferencje.js) - jeden pasek nad
belka-gorna, wyrownany do prawej. .preferencje grupuje tylko A-/A+
(odstep miedzy nimi wlasny), przycisk motywu jest bezposrednim dzieckiem
.pasek-motywu - styl przycisku wspolny dla obu przez selektor ponizej. */
.pasek-motywu { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: 8px 0 0; }
.preferencje { display: flex; gap: 4px; align-items: center; }
.pasek-motywu button {
background: var(--przycisk-tlo-cichy);
color: var(--przycisk-tekst-cichy);
border: 1px solid var(--linia);
border-radius: 3px;
padding: 2px 8px;
cursor: pointer;
font-size: 0.8125rem;
line-height: 1.4;
}
.pasek-motywu button:hover { background: var(--link-hover-tlo); color: #000; }
/* ===================================================== BELKA GORNA */
.belka-gorna {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 20px;
background: var(--akcent-tlo);
color: var(--akcent-tekst);
border: 2px solid var(--ramka-obwodka);
border-radius: 4px;
padding: 8px 12px;
margin: 8px 0;
font-size: 0.8125rem;
}
.belka-gorna a { color: var(--akcent-tekst); text-decoration: underline; }
.belka-gorna a:hover { color: var(--link-hover-tekst); background: var(--link-hover-tlo); }
.belka-gorna__nav { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.belka-gorna__login { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin: 0; }
.belka-gorna__login label { white-space: nowrap; }
.belka-gorna__login input {
width: 8rem;
max-width: 30vw;
padding: 2px 4px;
border: 1px solid var(--linia);
border-radius: 3px;
}
@media (max-width: 700px) {
.belka-gorna { justify-content: center; text-align: center; }
.belka-gorna__login input { width: 6rem; }
}
/* ===================================================== OKRUSZKI */
.okruszki {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin: 8px 0;
font-size: 0.8125rem;
}
.okruszki a { text-decoration: underline; }
/* ===================================================== KOMUNIKATY */
.komunikat {
border: 1px solid;
border-radius: 4px;
padding: 10px;
margin: 8px 0;
text-align: center;
}
.komunikat--neutralny { background: var(--komunikat-neutralny-tlo); border-color: var(--komunikat-neutralny-ramka); color: var(--akcent-tekst); }
.komunikat--pozytywny { background: var(--komunikat-pozytywny-tlo); border-color: var(--komunikat-pozytywny-ramka); color: #1f3d24; }
.komunikat--negatywny { background: var(--komunikat-negatywny-tlo); border-color: var(--komunikat-negatywny-ramka); color: #5a1a1a; }
:root[data-motyw="ciemny"] .komunikat--pozytywny { color: var(--tekst-mocny); }
:root[data-motyw="ciemny"] .komunikat--negatywny { color: var(--tekst-mocny); }
@media (prefers-color-scheme: dark) {
:root:not([data-motyw="jasny"]) .komunikat--pozytywny { color: var(--tekst-mocny); }
:root:not([data-motyw="jasny"]) .komunikat--negatywny { color: var(--tekst-mocny); }
}
/* ===================================================== LISTY (dzialy/tematy) */
.lista { display: flex; flex-direction: column; gap: 2px; margin: 8px 0; border-radius: 4px; overflow: hidden; }
.lista__kategoria {
background: var(--akcent-tlo);
color: var(--akcent-tekst);
padding: 8px 10px;
margin: 8px 0 2px;
border-radius: 4px;
font-size: 0.8125rem;
}
.lista__kategoria-nazwa { font-size: 1.0625rem; font-weight: bold; margin-right: 8px; }
.lista__naglowek {
display: grid;
gap: 8px;
background: var(--naglowek-tlo);
color: var(--naglowek-tekst);
font-size: 0.6875rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.02em;
padding: 8px 10px;
}
.lista__wiersz {
display: grid;
gap: 8px;
align-items: center;
background: var(--tlo-karty);
padding: 8px 10px;
}
.lista__wiersz:nth-child(even) { background: var(--tlo-karty-alt); }
.lista__tytul { display: block; font-size: 1rem; font-weight: bold; }
.lista__tytul a { color: var(--tytul-watku); text-decoration: underline; }
.lista__opis { display: block; font-size: 0.8125rem; color: var(--tekst-przygaszony); margin-top: 2px; }
.lista__licznik { text-align: center; font-size: 0.875rem; white-space: nowrap; }
.lista__ostatni { font-size: 0.75rem; color: var(--tekst-przygaszony); }
@media (max-width: 768px) {
.lista__naglowek { display: none; }
.lista__wiersz { grid-template-columns: 1fr !important; gap: 2px; }
.lista__licznik { text-align: left; }
.lista__licznik::before { content: attr(data-etykieta) ": "; font-weight: bold; }
}
/* ===================================================== POSTY (watek.php) */
.post { display: flex; gap: 12px; background: var(--tlo-karty); border-radius: 4px; padding: 10px; margin: 8px 0; }
.post__autor { flex: 0 0 160px; font-size: 0.75rem; color: var(--tekst-przygaszony); text-align: center; overflow-wrap: anywhere; }
.post__autor strong { display: block; font-size: 0.9375rem; color: var(--tekst-mocny); }
.post__autor img { border-radius: 4px; }
.post__tresc { flex: 1 1 auto; min-width: 0; }
.post__tresc-glowna { overflow-wrap: break-word; }
.post__stopka { margin-top: 8px; font-size: 0.75rem; color: var(--tekst-przygaszony); display: flex; flex-wrap: wrap; gap: 8px; }
/* Core\Bbcode::render() opakowuje kazdy [quote] w (patrz
Bbcode.php ~168-174) - klasa ta byla stylowana w kazdym starym
styl_forumN.css, ale zabraklo jej w nowym arkuszu, wiec cytaty w tresci
wpisu nie odrozznialy sie wizualnie od reszty (zgloszenie usera). */
.cytuj { background: var(--tlo-karty-alt); border: 1px solid var(--linia); border-radius: 4px; padding: 8px 10px; margin: 6px 0; overflow-wrap: break-word; }
@media (max-width: 600px) {
.post { flex-direction: column; }
/* .post__autor tresc to zwykly ciag inline/
(nick, data, gwiazdki,
avatar, grupa, QTH...), NIE osobne flex-dzieci - display:flex tutaj
(wczesniejsza wersja) sciskal ten tekst do wasko-auto-liczonej kolumny,
a overflow-wrap:anywhere (potrzebne na sztywnej 160px kolumnie desktop)
lamalo go pojedynczymi znakami w pionie. Zwykly blok pelnej szerokosci. */
.post__autor { flex: none; width: 100%; text-align: left; }
.post__autor img { margin-top: 4px; }
}
/* ===================================================== FORMULARZE */
.formularz { display: flex; flex-direction: column; gap: 12px; max-width: 480px; margin: 12px 0; }
/* width:100% (nie tylko max-width) - potrzebne gdy .formularz jest dzieckiem
flex-rowa (np. .belka-gorna przy odpowiedzi w watku/nowym temacie): bez
niego formularz kurczyl sie do szerokosci tresci zamiast wypelniac ramke
(zgloszenie usera - pasek BBCode i pole tekstowe zajmowaly pol szerokosci). */
.formularz--szeroki { max-width: 100%; width: 100%; }
.pole { display: flex; flex-direction: column; gap: 4px; }
.pole label { font-weight: bold; font-size: 0.8125rem; }
.pole input, .pole select, .pole textarea {
padding: 6px 8px;
border: 1px solid var(--linia);
border-radius: 3px;
background: var(--tlo-karty);
color: var(--tekst-mocny);
width: 100%;
}
.pole textarea { resize: vertical; min-height: 6rem; }
.pole .podpowiedz { font-size: 0.75rem; color: var(--tekst-przygaszony); }
.formularz .dalej_btn, .formularz button[type="submit"] {
align-self: flex-start;
background: var(--przycisk-tlo);
color: var(--przycisk-tekst);
border: 0;
border-radius: 4px;
padding: 8px 20px;
font-weight: bold;
font-size: 1rem;
cursor: pointer;
}
/* ===================================================== EDYTOR / BBCODE */
.bbc-pasek { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 6px; }
.bbc-pasek button, .bbc-pasek a.bbc {
background: var(--przycisk-tlo);
color: var(--przycisk-tekst);
border: 0;
border-radius: 3px;
padding: 4px 8px;
font-size: 0.75rem;
font-weight: bold;
cursor: pointer;
}
.bbc-pasek button:hover, .bbc-pasek a.bbc:hover { filter: brightness(1.1); }
/* edytor.js chowa/pokazuje przez atrybut [hidden], nie klase - nie dawac tu
bezwarunkowego display na klasie, bo wygralby z UA-owym [hidden]. */
.paleta-emotikon { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px 0; }
.paleta-emotikon[hidden] { display: none; }
.paleta-emotikon button { background: none; border: 0; padding: 1px; cursor: pointer; }
/* ===================================================== STRONICOWANIE */
.stronicowanie { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; font-size: 0.8125rem; }
.stronicowanie a { text-decoration: underline; }
.stronicowanie__biezaca { color: var(--tytul-watku); font-weight: bold; text-decoration: none; }
/* ===================================================== SHOUTBOX */
.shoutbox { background: var(--tlo-karty); border-radius: 4px; padding: 10px; margin: 8px 0; }
.shoutbox__naglowek { margin-bottom: 6px; }
.shoutbox__wiadomosci { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; font-size: 0.8125rem; margin-bottom: 8px; }
.shoutbox__wiadomosc strong { color: var(--tytul-watku); }
.shoutbox__formularz { display: flex; gap: 6px; }
.shoutbox__formularz input[type="text"] { flex: 1 1 auto; padding: 4px 6px; border: 1px solid var(--linia); border-radius: 3px; }
/* ===================================================== NARZEDZIA */
.tekst-przygaszony { color: var(--tekst-przygaszony); }
.tylko-desktop { display: initial; }
.tylko-mobile { display: none; }
@media (max-width: 700px) {
.tylko-desktop { display: none; }
.tylko-mobile { display: initial; }
}