/* * Stickerly Tools — TABELE W TREŚCI. Jeden wygląd dla całej witryny. * --------------------------------------------------------------------------- * Zamyka kartę S4 z dziennika 07.09: do dziś tabele miały TRZY niezależne * definicje w trzech arkuszach, a redakcja wstawia wszędzie ten sam zwykły * znacznik `` z edytora. * * ZGŁOSZENIE DAWIDA: *„Zmienialiśmy wygląd tabel, a na niektórych produktach * albo opisach kategorii nadal są stare tabele. Wejdę sobie w projektory BMW * i tu jest jeszcze stara tabela, jest pogubiona. W sensie ten mocny kolor"*. * * ⚠️ TO NIE BYŁY „STARE TABELE" — TO BYŁY TRZY RÓWNOLEGLE UTRZYMYWANE STYLE. * Zmierzone na żywej witrynie przed zmianą: * * miejsce tło nagłówka tekst nagłówka promień * --------------------------------------------------------------------------- * wpis bloga .st-wpis-tresc #f2f5fd (jasne) #606775 10 px * produkt .st-zakladka #344a90 (granat) #ffffff 12 px * kategoria .st-kat-opis #344a90 (granat) #ffffff 12 px * hub/strony .st-hub-tabela #344a90 (granat) #ffffff 14 px * * Czyli „mocny kolor" to nie zaszłość, tylko styl, który po prostu nigdy nie * został zaktualizowany razem z blogiem 11.09. Wzorcem jest wersja z bloga — * jasny nagłówek wersalikami plus granatowa kreska u góry: ten sam znak, * którym zaczyna się TL;DR i boks produktowy. * * SKALA: 150 tabel w treści — 98 produktów, 20 opisów kategorii, * 10 wpisów bloga, 1 strona informacyjna (zmierzone zapytaniem do bazy). * * --------------------------------------------------------------------------- * ⚠️ NAJWAŻNIEJSZE USTALENIE TEJ TURY: NASZE ARKUSZE ŁADUJĄ SIĘ **PRZED** * FLATSOME, A NIE PO NIM. * * LiteSpeed skleja wszystkie arkusze w jeden plik. Zmierzone indeksy reguł * w tym pliku na żywej stronie: * * 353 .st-hub-tabela th ← nasza wtyczka * 1322 table ← Flatsome * 1323 td, th ← Flatsome * 1325 td:first-child, th:first-child ← Flatsome * * Konsekwencja jest odwrotna do intuicji: **przy równej specyficzności wygrywa * Flatsome, nie my.** To dlatego `.st-hub-tabela th { padding: .75rem .9rem }` * (0,1,1) przegrywało z `th:first-child { padding-left: 0 }` (0,1,1) i pierwsza * kolumna tabeli na stronie instrukcji dotykała krawędzi ramki — zmierzone * `padding: 12px 14.4px 12px 0px`. Dokładnie to wygląda jak „pogubiona tabela". * * ⚠️ DLATEGO W TYM ARKUSZU NIE MA ANI JEDNEGO `!important`, A MIMO TO DZIAŁA. * Zamiast wymuszania — policzona specyficzność. Reguły Flatsome do pokonania * i to, czym je pokonujemy: * * Flatsome waga nasza odpowiedź waga * --------------------------------------------------------------------------- * table (0,0,1) ZAKRES table (0,1,1) * td, th (font-size .9em, padding .5em) (0,0,1) ZAKRES table th (0,1,2) * td (color #666) (0,0,1) ZAKRES table td (0,1,2) * th (text-transform: uppercase) (0,0,1) ZAKRES table th (0,1,2) * td:first-child { padding-left: 0 } (0,1,1) …td:first-child (0,2,2) * td:last-child { padding-right: 0 } (0,1,1) …td:last-child (0,2,2) * * ⚠️ `!important` byłby tu gorszy, nie lepszy: zostawia pułapkę następnej * osobie, która będzie chciała cokolwiek nadpisać (mina z 13.09 (8), gdzie * własne `padding: 0` z identyfikatorem zbiło przyciski do wysokości napisu). * * ⚠️ WARUNEK KONIECZNY: stare bloki reguł MUSZĄ zniknąć z `blog.css`, * `stickerly-tools.css` i `hub-firmowy.css`. Mają tę samą wagę co tutejsze, * więc przy pozostawieniu obu zestawów rozstrzygałaby kolejność wczytania — * czyli dokładnie ten rodzaj zależności, przez który powstał ten bałagan. * Lista do usunięcia jest w raporcie integracyjnym. * --------------------------------------------------------------------------- */ :root { /* ⚠️ WŁASNE ZMIENNE, NIE `--granat` Z blog.css. Tamte siedzą w `:root` arkusza bloga i huba, a ten arkusz ładuje się także na karcie produktu i w opisie kategorii, gdzie tamtych plików nie ma. Arkusz ma być samowystarczalny — inaczej tabela na produkcie straciłaby kolory. */ --stt-granat: #344a90; --stt-grafit: #181b22; --stt-szary: #606775; --stt-obwodka: #dce1ea; --stt-biel: #ffffff; /* Tło nagłówka i wiersza parzystego to odcienie błękitu jasnego #E8ECF8 rozjaśnione do poziomu, na którym nie konkurują z treścią. */ --stt-naglowek-tlo: #f2f5fd; --stt-parzysty: #fafbff; /* ⚠️ Promień o stopień niżej niż karta (Dawid 10.09: „te rogi zaokrąglone chyba za bardzo są w tej tabeli"). Siatka danych kłóci się z mocnym narożnikiem, bo same komórki są prostokątne. */ --stt-promien: 10px; /* ⚠️ STOPNIE PISMA PODANE WPROST, CHOĆ WYNIK JEST TAKI SAM JAK DZIŚ. Dotąd komórki miały 12,67 px nie dlatego, że ktoś tak zdecydował, tylko dlatego, że Flatsome mnoży `td, th` przez `font-size: 0.9em`. Wartość wzięta z przypadku jest nie do utrzymania — przy najbliższej zmianie arkusza motywu zmieniłaby się sama. Tu jest zapisana i zmienia się w jednym miejscu. `rem`, nie `em`: kontekst jest inny na produkcie (15 px) i we wpisie (16 px), a tabela ma wyglądać tak samo. */ --stt-pismo-tabeli: 0.88rem; /* 14,08 px — kontekst, nie sam tekst */ --stt-pismo-komorki: 0.79rem; /* 12,64 px — dziś renderowane 12,67 px */ --stt-pismo-naglowka: 0.72rem; /* 11,52 px — wersaliki */ --stt-pad-y: 0.78rem; --stt-pad-x: 1.1rem; --stt-pad-skraj: 1.35rem; /* pierwsza i ostatnia kolumna — oddech od ramki */ } /* =========================================================================== 1. RAMKA TABELI =========================================================================== */ /* * ⚠️ `:is()` ZAMIAST WYPISYWANIA CZTERECH SELEKTORÓW W KAŻDEJ REGULE. * Wszystkie argumenty to pojedyncze klasy, więc `:is()` ma wagę (0,1,0) — * identyczną jak rozpisanie listy przecinkami. Zysk jest wyłącznie * w czytelności, nie w specyficzności. * * GDZIE SIĘGA TEN ARKUSZ (sprawdzone odczytem klas na żywej stronie, * nie zgadnięte): * .st-zakladka opis produktu w zakładkach ORAZ opis kategorii * (`class-st-category-desc.php:113` renderuje * `
`) * .st-kat-wstep wstęp kategorii nad listą produktów * .st-wpis-tresc treść wpisu bloga * .st-hub-sekcja sekcja treści huba i stron informacyjnych * .st-hub-tabela opakowanie tabeli wpisane w treść stron huba * .st-dok-tresc regulamin, polityka prywatności i inne dokumenty * * ⚠️ `.st-hub-sekcja` zamiast samego `.st-hub-tabela`: klasa opakowania jest * WPISANA W TREŚĆ STRONY (generator z 06.09), więc redaktor, który wstawi * tabelę z edytora, nie będzie o niej wiedział. Tabela bez opakowania ma * wyglądać tak samo jak z opakowaniem. */ :is( .st-zakladka, .st-kat-wstep, .st-wpis-tresc, .st-hub-sekcja, .st-hub-tabela, .st-dok-tresc ) table:not([class*="st2-"]) { width: 100%; /* ⚠️ `separate`, NIE `collapse` — i to jest decyzja, nie przepisanie. Przy `border-collapse: collapse` promień na tabeli nie przycina tła komórek narożnych: nagłówek wychodzi poza łuk i rogi robią się kanciaste mimo poprawnej wartości `border-radius`. Z `separate` + `border-spacing: 0` + `overflow: hidden` przycięcie działa, a linie między wierszami rysują same komórki (niżej). */ border-collapse: separate; border-spacing: 0; overflow: hidden; margin: 1.6rem 0 2rem; border: 1px solid var(--stt-obwodka); /* Granatowa kreska u góry — akcent marki bez zalewania wiersza kolorem. Pełny granat na całą szerokość konkurował z nagłówkami sekcji. */ border-top: 3px solid var(--stt-granat); border-radius: var(--stt-promien); background: var(--stt-biel); font-size: var(--stt-pismo-tabeli); } /* * Tabela w opakowaniu nie dokłada własnego marginesu do marginesu opakowania. * ⚠️ Pełna lista zakresów, nie skrót do dwóch — `.st-hub-tabela` jest klasą * WPISANĄ W TREŚĆ STRONY, więc może trafić także do dokumentu * (`[st_dokument]`) albo do opisu kategorii, gdy ktoś skopiuje tam sekcję * z huba. Zawężenie do dwóch zakresów zostawiłoby ją tam bez marginesu. */ :is( .st-zakladka, .st-kat-wstep, .st-wpis-tresc, .st-hub-sekcja, .st-dok-tresc ) :is(.wp-block-table, .st-hub-tabela) { margin: 1.6rem 0 2rem; } :is(.wp-block-table, .st-hub-tabela) > table:not([class*="st2-"]) { margin: 0; } /* =========================================================================== 2. KOMÓRKI =========================================================================== */ :is( .st-zakladka, .st-kat-wstep, .st-wpis-tresc, .st-hub-sekcja, .st-hub-tabela, .st-dok-tresc ) table:not([class*="st2-"]) :is(th, td) { padding: var(--stt-pad-y) var(--stt-pad-x); border: 0; border-bottom: 1px solid var(--stt-obwodka); font-size: var(--stt-pismo-komorki); line-height: 1.45; text-align: left; vertical-align: middle; /* ⚠️ ZABEZPIECZENIE WYNIKAJĄCE WPROST Z `overflow: hidden` NA TABELI. Promień wymaga przycinania, a przycinanie znaczy, że cokolwiek nie zmieści się w szerokości, zostanie UCIĘTE, nie przewinięte. Zwykły tekst się zawija, ale długi adres albo symbol bez spacji (np. pełny SKU wariantu) nie ma gdzie się złamać i wypchnąłby ostatnią kolumnę poza krawędź. Kosztuje nic, a zdejmuje cały ten scenariusz. */ overflow-wrap: break-word; } /* ⚠️ (0,2,2) — to jest miejsce, w którym pokonujemy `td:first-child { padding-left: 0 }` z Flatsome (0,1,1). Bez tej pary reguł tekst pierwszej kolumny dotyka ramki, a ostatniej — wychodzi na nią. */ :is( .st-zakladka, .st-kat-wstep, .st-wpis-tresc, .st-hub-sekcja, .st-hub-tabela, .st-dok-tresc ) table:not([class*="st2-"]) :is(th, td):first-child { padding-left: var(--stt-pad-skraj); } :is( .st-zakladka, .st-kat-wstep, .st-wpis-tresc, .st-hub-sekcja, .st-hub-tabela, .st-dok-tresc ) table:not([class*="st2-"]) :is(th, td):last-child { padding-right: var(--stt-pad-skraj); } /* Ostatni wiersz bez kreski — kreska na styku z ramką daje podwójną linię. */ :is( .st-zakladka, .st-kat-wstep, .st-wpis-tresc, .st-hub-sekcja, .st-hub-tabela, .st-dok-tresc ) table:not([class*="st2-"]) tbody tr:last-child > :is(th, td) { border-bottom: 0; } /* =========================================================================== 3. NAGŁÓWEK KOLUMN =========================================================================== */ /* * ⚠️ NAGŁÓWEK ŁAPIEMY TEŻ TAM, GDZIE NIE MA `
`. * Zmierzone w bazie: **19 ze 150 tabel nie ma ``** (17 produktów, * 2 kategorie) — wiersz nagłówka stoi jako pierwszy `` z komórkami ``. Przeglądarka dorabia ``, ale `` już NIE, * więc sam selektor `thead th` pomijał je wszystkie i te tabele renderowały * się z nagłówkiem wyglądającym jak zwykły wiersz. * * ⚠️ WARUNEK `tbody:first-child` JEST TU KONIECZNY, NIE OZDOBNY. Gdy tabela MA * ``, jej `` nie jest pierwszym dzieckiem — więc reguła nie ma * prawa złapać ``, * ale z nagłówkami wierszy. */ :is( .st-zakladka, .st-kat-wstep, .st-wpis-tresc, .st-hub-sekcja, .st-hub-tabela, .st-dok-tresc ) table:not([class*="st2-"]) :is( thead th, tbody:first-child > tr:first-child > th:not([scope="row"]) ) { background: var(--stt-naglowek-tlo); color: var(--stt-szary); font-size: var(--stt-pismo-naglowka); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; /* ⚠️ ŚWIADOMIE BEZ `white-space: nowrap`, CHOĆ WERSJA BLOGOWA GO MIAŁA. Blog ma tabele 3–4-kolumnowe w kolumnie 920 px i tam nowrap niczego nie psuł. Opisy kategorii mają **18 z 20 tabel po PIĘĆ kolumn** — i to tam nowrap jest groźny. Zmierzone na kategorii „Projektory samochodowe" przy oknie 785 px: bez nowrap treść tabeli ma **753 px** i mieści się w swoim pojemniku, z nowrap **912 px**, czyli o **159 px za dużo**. A ponieważ tabela ma `overflow: hidden` (potrzebne do przycięcia rogów), nadmiar nie zacząłby się przewijać — zostałby **po cichu ucięty** razem z ostatnią kolumną. ⚠️ Przy oknie 1440 px różnicy nie widać ani jednego piksela, więc sama ocena „na szerokim monitorze" niczego by tu nie wykryła. */ white-space: normal; } /* =========================================================================== 4. TREŚĆ WIERSZY =========================================================================== */ :is( .st-zakladka, .st-kat-wstep, .st-wpis-tresc, .st-hub-sekcja, .st-hub-tabela, .st-dok-tresc ) table:not([class*="st2-"]) tbody td { color: var(--stt-szary); } /* Pierwsza kolumna to nazwa wiersza — ma nieść wzrok, więc jest mocniejsza. */ :is( .st-zakladka, .st-kat-wstep, .st-wpis-tresc, .st-hub-sekcja, .st-hub-tabela, .st-dok-tresc ) table:not([class*="st2-"]) tbody tr > :is(th, td):first-child { color: var(--stt-grafit); font-weight: 700; } /* * ⚠️ PASEK PARZYSTY NA KOMÓRCE, NIE NA WIERSZU. Przy `border-collapse: * separate` tło nadane `` leży POD tłem komórek, więc dowolne tło komórki * (np. nagłówka bez ``) skasowałoby je wizualnie. Tło na komórce jest * jednoznaczne. */ :is( .st-zakladka, .st-kat-wstep, .st-wpis-tresc, .st-hub-sekcja, .st-hub-tabela, .st-dok-tresc ) table:not([class*="st2-"]) tbody tr:nth-child(even) > :is(th, td) { background: var(--stt-parzysty); } /* * ⚠️ SZEROKOŚĆ PIERWSZEJ KOLUMNY TYLKO PRZY DWÓCH KOLUMNACH. * `:first-child:nth-last-child(2)` trafia w pierwszą komórkę wyłącznie wtedy, * gdy jest przedostatnia — czyli gdy wiersz ma dokładnie dwie komórki. * To jest tabela parametr/wartość, a takich jest **98 ze 150** (wszystkie * produktowe). Bez tego długa wartość ściska nazwę parametru do dwóch * wierszy. Przy trzech i więcej kolumnach szerokość zostaje automatyczna, * bo tam nie ma kolumny wyróżnionej. * * ⚠️ TYLKO POWYŻEJ PROGU — I TO NIE JEST OSTROŻNOŚĆ, TYLKO POPRAWKA BŁĘDU. * Zmierzone na karcie produktu przy 375 px: bez tego ograniczenia nazwa * parametru dostawała w układzie kartowym **94 px**, bo `32%` obowiązywało * dalej, mimo że kolumn już nie ma. Dłuższa nazwa łamałaby się na trzy * wiersze obok pustego miejsca. Przeniesienie reguły nad próg jest uczciwsze * niż zerowanie jej drugą regułą w `@media` — podpowiedź o szerokości kolumny * dotyczy tabeli, a w trybie kart tabeli nie ma. */ @media (min-width: 761px) { :is( .st-zakladka, .st-kat-wstep, .st-wpis-tresc, .st-hub-sekcja, .st-hub-tabela, .st-dok-tresc ) table:not([class*="st2-"]) tbody tr > :is(th, td):first-child:nth-last-child(2) { width: 32%; } } /* Akapit wewnątrz komórki nie dokłada marginesu — Flatsome daje `td p { margin: .5em 0 }`, przez co komórka z jednym akapitem rośnie o 16 px. */ :is( .st-zakladka, .st-kat-wstep, .st-wpis-tresc, .st-hub-sekcja, .st-hub-tabela, .st-dok-tresc ) table:not([class*="st2-"]) :is(th, td) > p:only-child { margin: 0; } /* =========================================================================== 5. TELEFON — WIERSZ STAJE SIĘ KARTĄ =========================================================================== */ /* * ⚠️ TABELA NIE PRZEWIJA SIĘ W POZIOMIE — ZAMIENIA SIĘ W KARTY. * Poziome przewijanie w środku treści gubi się pod kciukiem między * przewijaniem strony, a przy pięciu kolumnach i tak nie da się porównać * wierszy. * * ⚠️ PRÓG 760 px — JEDEN NA CAŁĄ WITRYNĘ. Dotąd były trzy różne: blog 760, * hub 720, produkt 549. Przez to ta sama tabela wklejona w opis produktu * i we wpis przełączała się w innym miejscu i przy 600 px wyglądała * na dwa różne komponenty. Bierzemy najszerszy — tabela wcześniej * przechodzi w tryb czytelny, a nic na tym nie traci. * * ⚠️ PRZEŁĄCZANIE PRZEZ ZMIENNE, NIE PRZEZ POWTÓRZONY SELEKTOR WARUNKOWY. * Warunek „czy ta tabela nadaje się na karty" jest długi (dwa `:has()`), * a musiałby stać przed każdą z ośmiu reguł układu. Zamiast tego warunek * pada RAZ i przestawia trzy zmienne, a reszta reguł czyta `display: * var(--stt-…)`. Czytelność ma tu wartość praktyczną: następna osoba ma * zobaczyć, co decyduje, a nie odcyfrowywać ośmiokrotnie ten sam warunek. */ @media (max-width: 760px) { :is( .st-zakladka, .st-kat-wstep, .st-wpis-tresc, .st-hub-sekcja, .st-hub-tabela, .st-dok-tresc ) table:not([class*="st2-"]) { /* Domyślnie: karty. */ --stt-thead: none; --stt-tr: block; --stt-komorka: flex; display: block; overflow-x: auto; } /* * ⚠️ AWARYJNIE: TABELA 3+ KOLUMN BEZ `data-etykieta` ZOSTAJE TABELĄ. * * W układzie kartowym podpis kolumny wraca przy wartości z atrybutu * `data-etykieta`. Dokłada go PHP — ale **tylko we wpisach bloga** * (`ST_Blog::tabele()`); opisy produktów i kategorii idą bez niego. * Zmierzone: **20 z 20 opisów kategorii nie ma etykiet, a 18 z nich ma * PIĘĆ kolumn**. Rozłożone w kolumnę dałyby pięć wartości pod sobą bez * informacji, czego dotyczą — to jest gorsze niż przewijanie. * * Wiersz DWUKOMÓRKOWY jest wyjątkiem i dlatego drugi warunek: tam * pierwsza komórka sama mówi, czego dotyczy druga, więc etykieta jest * zbędna i karty działają bez żadnej poprawki w PHP. * * ⚠️ TO JEST PODPÓRKA NA CZAS, NIE DOCELOWY UKŁAD. Docelowo `data-etykieta` * ma dokładać PHP także na produkcie i w kategorii — wtedy ten warunek * przestanie łapać cokolwiek i wygaśnie sam, bez zmiany w CSS. * Opis zmiany jest w raporcie integracyjnym. * * ⚠️ Gdy przeglądarka nie zna `:has()`, cały selektor jest nieprawidłowy * i reguła po prostu nie działa — tabela dostaje karty bez etykiet. * To degradacja, nie awaria. */ :is( .st-zakladka, .st-kat-wstep, .st-wpis-tresc, .st-hub-sekcja, .st-hub-tabela, .st-dok-tresc ) table:not([class*="st2-"]):not(:has([data-etykieta])):not( :has(tbody tr > :first-child:nth-last-child(2)) ) { --stt-thead: table-header-group; --stt-tr: table-row; --stt-komorka: table-cell; } :is( .st-zakladka, .st-kat-wstep, .st-wpis-tresc, .st-hub-sekcja, .st-hub-tabela, .st-dok-tresc ) table:not([class*="st2-"]) thead { display: var(--stt-thead); } :is( .st-zakladka, .st-kat-wstep, .st-wpis-tresc, .st-hub-sekcja, .st-hub-tabela, .st-dok-tresc ) table:not([class*="st2-"]) tbody { display: var(--stt-tr); } :is( .st-zakladka, .st-kat-wstep, .st-wpis-tresc, .st-hub-sekcja, .st-hub-tabela, .st-dok-tresc ) table:not([class*="st2-"]) tr { display: var(--stt-tr); } :is( .st-zakladka, .st-kat-wstep, .st-wpis-tresc, .st-hub-sekcja, .st-hub-tabela, .st-dok-tresc ) table:not([class*="st2-"]) :is(th, td) { display: var(--stt-komorka); gap: 0.15rem 0.8rem; justify-content: flex-start; align-items: baseline; padding: 0.42rem var(--stt-pad-skraj); border-bottom: 0; /* * ⚠️ WARTOŚĆ DO LEWEJ, NIE DO PRAWEJ — TO BYŁA CAŁA „ROZJECHANA * TABELA" ZE ZGŁOSZENIA DAWIDA (14.09). * * Przy `text-align: right` wartość dłuższa niż jedna linia łamała się * tak, że ogon zdania lądował samotnie przy prawej krawędzi * („Prefiksy nadawane od lat" / „80."). Krótkie wartości wyglądały * przy tym dobrze, długie jak błąd składu — i to jest najgorszy * możliwy układ, bo wygląda na przypadkowy. * * Wyrównanie do lewej daje wspólną oś: wszystkie wartości zaczynają * się w tym samym punkcie, niezależnie od długości. */ text-align: left; } /* * ⚠️ PONIŻEJ 520 px PODPIS IDZIE NAD WARTOŚĆ, NIE OBOK. * Podpis zajmuje stałe 42 % szerokości karty; przy 390 px zostaje na * wartość ~170 px, czyli mniej więcej trzy słowa w linii. Zdanie * „Prefiksy nadawane od lat 80." łamie się wtedy na trzy wiersze * i karta znowu wygląda na rozjechaną — tym razem z powodu szerokości, * nie wyrównania. */ @media (max-width: 520px) { :is( .st-zakladka, .st-kat-wstep, .st-wpis-tresc, .st-hub-sekcja, .st-hub-tabela, .st-dok-tresc ) table:not([class*="st2-"]) tbody :is(th, td)[data-etykieta] { flex-direction: column; align-items: flex-start; } :is( .st-zakladka, .st-kat-wstep, .st-wpis-tresc, .st-hub-sekcja, .st-hub-tabela, .st-dok-tresc ) table:not([class*="st2-"]) tbody :is(th, td)[data-etykieta]::before { flex: 0 0 auto; } } /* * ⚠️ WIERSZ NAGŁÓWKA Z TABELI BEZ `` TEŻ TRZEBA SCHOWAĆ. * `thead { display: none }` go nie obejmuje, bo on siedzi w ``. * Bez tej reguły karty zaczynałyby się od karty „Parametr / Wartość", * czyli od samych nazw kolumn bez żadnej treści. */ :is( .st-zakladka, .st-kat-wstep, .st-wpis-tresc, .st-hub-sekcja, .st-hub-tabela, .st-dok-tresc ) table:not([class*="st2-"]) tbody:first-child > tr:first-child:has(> th:not([scope="row"])) { display: none; } /* Kreska między kartami idzie na wiersz, nie na komórkę — wewnątrz karty linie robiłyby z niej z powrotem tabelę. */ :is( .st-zakladka, .st-kat-wstep, .st-wpis-tresc, .st-hub-sekcja, .st-hub-tabela, .st-dok-tresc ) table:not([class*="st2-"]) tbody tr { padding: 0.35rem 0; border-bottom: 1px solid var(--stt-obwodka); } :is( .st-zakladka, .st-kat-wstep, .st-wpis-tresc, .st-hub-sekcja, .st-hub-tabela, .st-dok-tresc ) table:not([class*="st2-"]) tbody tr:last-child { border-bottom: 0; } /* Pasek parzysty znika — w układzie kartowym rozdziela je kreska, a naprzemienne tło czyta się jak dwa różne rodzaje kart. */ :is( .st-zakladka, .st-kat-wstep, .st-wpis-tresc, .st-hub-sekcja, .st-hub-tabela, .st-dok-tresc ) table:not([class*="st2-"]) tbody tr:nth-child(even) > :is(th, td) { background: transparent; } /* Podpis kolumny wraca przy wartości. Tylko tam, gdzie atrybut istnieje — `attr()` przy braku atrybutu daje pusty napis, a pusty `::before` i tak zająłby 42 % szerokości komórki. */ :is( .st-zakladka, .st-kat-wstep, .st-wpis-tresc, .st-hub-sekcja, .st-hub-tabela, .st-dok-tresc ) table:not([class*="st2-"]) tbody :is(th, td)[data-etykieta]::before { content: attr(data-etykieta); flex: 0 0 42%; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--stt-szary); text-align: left; } /* Pierwsza komórka wiersza to jego tytuł — cała szerokość, bez podpisu. */ :is( .st-zakladka, .st-kat-wstep, .st-wpis-tresc, .st-hub-sekcja, .st-hub-tabela, .st-dok-tresc ) table:not([class*="st2-"]) tbody tr > :is(th, td):first-child { justify-content: flex-start; align-items: flex-start; width: auto; padding-top: 0.7rem; font-size: 0.9rem; text-align: left; } :is( .st-zakladka, .st-kat-wstep, .st-wpis-tresc, .st-hub-sekcja, .st-hub-tabela, .st-dok-tresc ) table:not([class*="st2-"]) tbody tr > :is(th, td):first-child::before { content: none; } /* * ⚠️ WIERSZ O DWÓCH KOMÓRKACH NIE POKAZUJE PODPISU PRZY WARTOŚCI. * Przy tabeli parametr/wartość karta wyglądałaby tak: * „Rozmiar" / WARTOŚĆ: 48 × 45 cm * — czyli nazwa kolumny „Wartość" powtarzana przy każdej pozycji, bez * żadnej informacji. Selektor trafia w drugą komórkę wyłącznie wtedy, gdy * pierwsza jest przedostatnia, czyli gdy wiersz ma dokładnie dwie komórki. */ :is( .st-zakladka, .st-kat-wstep, .st-wpis-tresc, .st-hub-sekcja, .st-hub-tabela, .st-dok-tresc ) table:not([class*="st2-"]) tbody tr > :first-child:nth-last-child(2) ~ :is(th, td)::before { content: none; } :is( .st-zakladka, .st-kat-wstep, .st-wpis-tresc, .st-hub-sekcja, .st-hub-tabela, .st-dok-tresc ) table:not([class*="st2-"]) tbody tr > :first-child:nth-last-child(2) ~ :is(th, td) { justify-content: flex-start; text-align: left; } }
` * wprost w `
` użytego jako nagłówek WIERSZA. Sprawdzone w danych: * dziś takich tabel nie ma ani jednej (0 ze 150, zero atrybutów `scope`), * ale komponent `b-tabela-v2` używa `scope="row"`, więc wzorzec istnieje * w projekcie i wróci przy pierwszej tabeli pisanej ręcznie. * `:not([scope="row"])` domyka to na wypadek tabeli bez `