/* ------------------------------------------------------------------------- * Zapis zdarzeń meczu — zakładka „Zapis zdarzeń” na karcie /mecz//. * * Arkusz wchodzi PO `komponenty.css` i tylko na karcie meczu, więc reguły * stąd mają pierwszeństwo przy tej samej specyficzności. Podstawowy wygląd * zapisu nadal stoi w `komponenty.css` (blok „przebieg meczu”) — tutaj idą * zmiany i to, co dojdzie nowego. * * Kolory bierz z zmiennych `theme.json` (`--wp--preset--color--*`), nigdy * wprost — reszta motywu tak robi i motyw ma jedną paletę. * * --------------------------------------------------------------------------- * UKŁAD OSIOWY (#485) * * Zdarzenia stoją po dwóch stronach pionowej osi: gospodarz z lewej, gość * z prawej, zegar i wynik na samej osi. Wiersz ma w kodzie strony DWIE części * — `__os` i `__blok` — a o tym, gdzie usiądą, rozstrzyga siatka tutaj. * * NOWA PRZESTRZEŃ NAZW `wba-zap__*`, a nie nadpisywanie `wba-zdarzenia__z`. * Stary wiersz ma w `komponenty.css` cztery kolumny siatki i własne zapytanie * medialne na 600 px; tamten plik jest cudzy, więc nowy układ musiałby wygrywać * z nim regułą po regule w dwóch zapytaniach naraz. Grep po motywie pokazał, * że starych klas nie używa nikt poza `inc/mecz-zapis.php`, więc taniej jest * zacząć od czystego kartonu. Klasy `wba-zdarzenia__kw`, `__kwarta` i `__lista` * ZOSTAJĄ ze starymi stylami — podział na kwarty się nie zmienia. * * PRZYNALEŻNOŚĆ DO DRUŻYNY NIESIE CZWÓRKA, NIE SAM KOLOR: strona osi, pasek * w barwie strony, skrót drużyny jako tekst (z pełną nazwą dla czytnika ekranu) * i nagłówek kwarty z nazwami po obu stronach. Przy jednej kolumnie znika tylko * nagłówek; trzy pozostałe sygnały są na miejscu. * * TELEFON: dwie kolumny przy 375 px to po ~150 px na zdarzenie, czyli cztery * słowa na linię — układ składa się więc do JEDNEJ kolumny z zegarem w szynie * po lewej. Oś nie znika, tylko przesuwa się na lewą krawędź treści, a strony * odróżnia to, w którą stronę „ciąży” blok: gospodarz do lewej z paskiem * z lewej, gość do prawej z paskiem z prawej. * ---------------------------------------------------------------------- */ /* Barwa strony — jedno źródło dla paska, ikony i skrótu drużyny. `slate` i `red-700` to te same barwy, co w starym wierszu; kontrast bieli na nich zmierzony: 12,5:1 i 6,2:1. */ .wba-zap__z--gospodarz { --wba-zap-strona: var(--wp--preset--color--slate); } .wba-zap__z--gosc { --wba-zap-strona: var(--wp--preset--color--red-700); } /* Zdarzenie bez drużyny — dziś w bazie nie występuje ani jedno (wszystkie wiersze `strona = 0` są bezosobowe i odpada je `wba_mecz_zdarzenie_pomijane()`), ale ścieżka musi działać, gdy źródło dosypie takie zdarzenie. */ .wba-zap__z--mecz { --wba-zap-strona: var(--wp--preset--color--muted); } /* ---- Oś ---------------------------------------------------------------- */ /* Kreska osi jako tło listy, nie jako element: 383 pseudoelementów po to, żeby narysować jedną pionową linię, to 383 pudełka do ułożenia przy każdym przewinięciu. Tło rysuje ją raz. `--wba-zap-os` przesuwa ją między środkiem (dwie kolumny) a szyną zegara (jedna kolumna). */ /* Oś siedzi na KWARCIE, a nie na samej liście, bo czytają ją dwie rzeczy: kreska w tle listy i dwukropek wyniku w pasku. Gdyby każda miała własną wartość, rozjechałyby się przy pierwszej zmianie układu — a mają stać dokładnie jedna nad drugą. Pasek i lista mają to samo pudełko (zmierzone: oba x = 41, szerokość 293 przy 375 px), więc ta sama wartość znaczy w obu to samo miejsce. */ .wba-zdarzenia__kw { --wba-zap-os: 50%; /* HERB 28 → 44 px (+57 %) — decyzja Piotra z 12.09.2026 („przy fixed możesz powiększyć logotypy drużyn”). 44 px, a nie więcej: przy tej wartości herb przestaje być ozdobnikiem przy napisie i staje się czytelny sam z siebie. TA LICZBA WYZNACZA WYSOKOŚĆ CAŁEGO PASA: belka ma 44 + 2 × 8 px wcięcia + 1 px kreski = 61 px, a pas ze znakami musi mieć tyle samo (`--wba-pas-h` = 60 px). Zmiana herbu bez zmiany tamtej liczby rozjedzie pas na dwa o różnej wysokości. */ --wba-zap-herb: 44px; } /* WSPÓŁRZĘDNE PRZYKLEJONEGO ODTWARZACZA. Stoją tutaj, a nie w `komponenty.css`, bo z tych samych trzech liczb korzystają dwa miejsca: ramka transmisji (przyklejenie) i sekcja przebiegu (przesunięcie w prawo). Jedno źródło, więc nie da się przesunąć jednego bez drugiego. Arkusz karty meczu wchodzi po `komponenty.css` i tylko na karcie meczu — a przyklejenie dotyczy wyłącznie karty meczu. ROZMIAR FILMU LICZY SIĘ Z TEGO, CO ZOSTAJE PRZEBIEGOWI, a nie z procentu okna: film bierze wszystko poza odstępem przy prawej krawędzi, przerwą i minimalną szerokością przebiegu. Dzięki temu granica „żaden opis zdarzenia nie chowa się pod filmem” jest wpisana w rachunek, a nie pilnowana osobno. 800 px dla przebiegu to nie jest okrągła liczba z sufitu: przy 759 px wiersz przechodzi na układ jednokolumnowy (próg niżej w tym pliku), więc 800 zostawia 41 px zapasu nad tym progiem. Dolne 320 px filmu to najmniejszy odtwarzacz, w którym YouTube mieści własne kontrolki; górne 720 px to granica, powyżej której film zaczyna dominować nad tym, po co się tu przyszło. `--wba-film-gora` NIE JEST JUŻ OSOBNYM PASEM NA ZNAKI. Od makiety Piotra z 12.09.2026 znaki i belka kwarty stoją w JEDNYM pasie tuż pod paskiem górnym strony, a film zaczyna się pod tym pasem. Stąd rachunek jest teraz jawny: wysokość paska górnego + wysokość pasa + jego kreska. Historia liczby, żeby nikt nie wracał do poprzednich wartości: 143 px (77 + 66) pochodziło z układu, w którym pasek górny NIE był przyklejony na karcie meczu, a belka stała na `top: 0`; 160 px z 12.09.2026 było pasem na dwa rzędy znaków nad kadrem. Oba układy zastąpiła makieta. */ :root { --wba-film-luz: 24px; --wba-film-przerwa: 32px; --wba-film-min-przebieg: 800px; /* WYSOKOŚĆ TREŚCI PASA ZE ZNAKAMI I BELKĄ, bez dolnej kreski. MUSI być równa wysokości belki kwarty minus jej kreska, inaczej „jeden pas” rozjedzie się na dwa o różnej wysokości. Belka ma 61,0 px zmierzone przy 1440 px: herb 44 px (`--wba-zap-herb`) + 2 × 8 px wcięcia (`s-2`) + 1 px kreski. Zmiana `--wba-zap-herb` musi iść w parze ze zmianą tej liczby. */ --wba-pas-h: 60px; /* WYSOKOŚĆ ZNAKU SPONSORA W PASIE. Znak partnera liczy się z niej proporcją 21/30, czyli stosunkiem wysokości własnych obu plików SVG — dzięki temu oba maleją razem i nie rozjeżdżają się optycznie. 26 px to wariant bez etykiet (1200–1419 px), 20 px wariant z etykietami (od 1420 px); rachunek przy obu progach niżej, przy regułach pasa. */ --wba-znak-h: 26px; --wba-film-gora: calc(var(--wba-pasek-gorny, 77px) + var(--wba-pas-h) + 1px); /* Wewnętrzny margines karty przebiegu — zmierzony, ta sama wartość przy 1200, 1440 i 1920 (sekcja 616 → lista 637). Potrzebny, bo od krawędzi LISTY, a nie sekcji, liczy się lewa kolumna. */ --wba-film-wciecie: 21px; /* SUFIT nachodzenia: najwyżej tyle lewej kolumny film zakrywa. Decyzja Piotra z 11.09.2026. Sufit, a nie wartość — obowiązuje dopiero tam, gdzie nachodzenie nie kosztuje ani jednej litery (od okna ≈ 2018 px). */ --wba-film-nachodzi: 0.3; /* ILE LEWEJ KOLUMNY MUSI ZOSTAĆ WOLNE NA TEKST. Zmierzone przy oknie 2400 px, gdzie nic się nie zawija (0 wierszy dwuliniowych na 194): najdłuższy opis gospodarza 319,5 px („Vladyslav Chernysh Zmiana — wejście na parkiet”), następne 316,1 i 315,3; od prawej krawędzi tekstu do środka osi stałe 77,0 px (ikona, odstępy, połowa osi). 319,5 + 77 = 396,5, reszta to oddech na cień filmu i na nazwiska dłuższe niż w tym meczu (≈ 4 znaki zapasu). */ --wba-film-rezerwa: 420px; /* Lewa kolumna przebiegu: od lewej krawędzi listy do ŚRODKA osi zegarów — tam stoi dwukropek, o który oparty jest cały układ. */ --wba-film-kolumna: calc( (100vw - var(--wba-film-sz) - var(--wba-film-przerwa) - var(--wba-film-luz) - 2 * var(--wba-film-wciecie)) * 0.5 ); /* KOLUMNA ZAREZERWOWANA DLA FILMU. To ona odsuwa przebieg w prawo — i tylko ona. Poszerzenie filmu o nachodzenie NIE może wchodzić do tego rachunku, bo wtedy przebieg uciekałby przed filmem i nachodzenie nigdy by nie nastąpiło (równanie bez punktu stałego). */ --wba-film-sz: clamp( 320px, calc(100vw - var(--wba-film-luz) - var(--wba-film-przerwa) - var(--wba-film-min-przebieg)), 720px ); /* O ILE FILM WYCHODZI POZA KOLUMNĘ ZAREZERWOWANĄ. Środkowy człon to warunek właściwy: „nachodź tyle, ile zostaje pustego marginesu przed pierwszą literą”. Nie ma tu progu w `@media`, bo warunek jest o literach, a nie o szerokości okna — a te dwie rzeczy się rozjeżdżają: do 1576 px lewa kolumna w ogóle nie rośnie (stoi na 379 px), bo rośnie kolumna pod film. Dolne 0 znaczy „film kończy się na swojej kolumnie”, czyli zachowanie sprzed nachodzenia; górny człon to sufit 30 % z decyzji Piotra. */ --wba-film-nadwyzka: clamp( 0px, calc(var(--wba-film-przerwa) + var(--wba-film-wciecie) + var(--wba-film-kolumna) - var(--wba-film-rezerwa)), calc(var(--wba-film-przerwa) + var(--wba-film-wciecie) + var(--wba-film-kolumna) * var(--wba-film-nachodzi)) ); /* RZECZYWISTA SZEROKOŚĆ FILMU. Osobna od kolumny zarezerwowanej, bo tylko kolumna odsuwa przebieg — nadwyżka leży na nim i nie może wejść do rachunku marginesu (równanie bez punktu stałego). */ --wba-film-szer: calc(var(--wba-film-sz) + var(--wba-film-nadwyzka)); } /* STEROWANIE JEDZIE POD PRZYPIĘTYM FILMEM. Kto czyta czwartą kwartę, ma je w oknie — a nie dwa tysiące pikseli wyżej, na początku panelu. ROBI TO SAM ARKUSZ, BEZ PRZEKŁADANIA ELEMENTU SKRYPTEM. To jest wybór, nie wygoda: przeniesienie w drzewie zmieniłoby kolejność tabulacji i miejsce, w którym czytnik ekranu napotyka przełącznik. Tak blok zostaje tam, gdzie był w kodzie strony (na początku panelu zapisu, tuż za paskiem zakładek), a zmienia się wyłącznie to, gdzie jest rysowany. Klasa jest ta sama, którą skrypt odtwarzacza zakłada karcie przy przypięciu, więc sterowanie pojawia się i znika razem z filmem. Gdy film NIE jest przypięty — góra strony, okno poniżej 1200 px, brak nagrania — blok stoi normalnie w panelu i działa tak jak wcześniej. Przełącznik jest zawsze JEDEN, bo to ten sam element; niczego nie dublujemy. `--wba-film-sz * 0,5625` to wysokość filmu: proporcja 16:9 z jego szerokości. Pudełko sterowania ma tę samą szerokość co film, więc jego prawa krawędź nigdy nie wchodzi na lewą kolumnę przebiegu — ta zaczyna się o przerwę dalej. */ @media (min-width: 1200px) { /* ZNAKI SIADAJĄ W PAS RAZEM Z BELKĄ KWARTY — makieta Piotra z 12.09.2026. Jeden biały pas na pełną szerokość okna, tuż pod paskiem górnym: po lewej znaki (kolumna filmu), po prawej belka kwarty. Wspólne tło, wspólna dolna kreska, wspólna wysokość. Film zaczyna się POD pasem. DLACZEGO PEŁNA SZEROKOŚĆ, SKORO ZNAKI ZAJMUJĄ TYLKO LEWĄ CZĘŚĆ: bo to tło pasa, a nie tło znaków. Belka kwarty jest przyklejona osobno, w każdym `
` z osobna, i MIĘDZY kwartami na chwilę znika (nowa jeszcze nie doszła, stara już odjechała). Bez tła na pełną szerokość w tym momencie przez prawą połowę pasa przejeżdżałby zapis — dokładnie to, czego kryterium zabrania. `left: 0; right: 0`, a NIE `width: 100vw`: przy `fixed` blokiem zawierającym jest okno bez paska przewijania, więc para left/right nie zapala przewijania w poziomie tam, gdzie system rysuje pasek w układzie (Windows, Linux — 15–17 px). `100vw` by zapalało. WARSTWA 6, NIŻSZA NIŻ BELKA (7). Odwrotnie niż w układzie sprzed makiety, gdzie znaki miały 8 razem z filmem. Teraz pas jest TŁEM dla belki i musi iść pod nią, inaczej zakryłby nazwy drużyn na całej szerokości. Film ma nadal 8 i nadal jest na wierzchu — ale nie ma z czym kolidować, bo zaczyna się dopiero pod pasem. */ /* Rezerwy wysokości NIE MA JUŻ W ARKUSZU. Do 12.09.2026 stało tu `min-height: 30px` — liczba z pomiaru z jednej chwili, która przestała się zgadzać, gdy rząd znaków urósł do 33 px (podkładka partnera: obraz 21 px + 2 × 6 px wcięcia). Zostawało 3,0 px skoku przy przypięciu. Miejsce trzyma teraz skrypt, wpisując zmierzoną wysokość tuż przed założeniem klasy — jest dokładne z definicji i nie zdezaktualizuje się przy zmianie znaku, etykiety ani szerokości okna. */ .wba-mecz-karta--film .wba-zap__znaki { align-items: center; background: var(--wp--preset--color--paper); border-bottom: 1px solid var(--wp--preset--color--hairline); box-sizing: content-box; /* Rząd, nie kolumna — makieta żąda jednej poziomej linii. */ flex-direction: row; /* `nowrap` JEST TU OBOWIĄZKOWE, nie porządkowe: reguła podstawowa ma `wrap`, bo w karcie etykieta i znak mają się złamać przy 320 px. W pasie o stałej wysokości złamanie znaczy „wyjdź poza pas”. */ flex-wrap: nowrap; gap: 0; height: var(--wba-pas-h); justify-content: flex-start; left: 0; margin: 0; padding: 0 var(--wp--preset--spacing--s-3); position: fixed; right: 0; top: var(--wba-pasek-gorny, 77px); width: auto; z-index: 6; } /* Para „etykieta + znak” w jednej linii; odstęp między parami większy niż wewnątrz pary, żeby było widać, co do czego należy. */ .wba-mecz-karta--film .wba-zap__znaki-w { flex-wrap: nowrap; gap: var(--wp--preset--spacing--s-2); } .wba-mecz-karta--film .wba-zap__znaki-w + .wba-zap__znaki-w { margin-left: var(--wp--preset--spacing--s-5); } /* ETYKIET W PASIE NIE MA DO 1419 PX — i to jest pomiar, nie gust. Miejsce na znaki kończy się tam, gdzie zaczyna się belka kwarty: `--wba-film-sz` + przerwa 32 + wcięcie karty 21. Zmierzone: 397,0 px przy oknie 1200 px i 637,0 px przy 1440 px (lewa krawędź belki, `getBoundingClientRect`). Sama para etykiet w 10 px ma 304,9 px (147,9 + 157,0), a cały rząd z etykietami kończy się na 594,3 px. Przy 1200 px nie ma więc sposobu, żeby etykiety i znaki stanęły w jednej linii i zostały czytelne — próbowałem zejść ze znakiem do 12 px wysokości i nadal brakowało ponad stu pikseli, a znak byłby nieczytelny. Wybór: do 1419 px zostają SAME ZNAKI, za to większe (26 px zamiast 20 px). Rola znaku nie ginie — niesie ją `alt` obrazka („sponsor tytularny…”), który czyta czytnik ekranu, a widzący rozpoznaje znak. Alternatywę „wyrzuć znaki z pasa poniżej progu” odrzuciłem: znaki wracałyby wtedy do karty i odjeżdżały razem z nią, czyli sponsor znikałby z ekranu — a to jest dokładnie to, po co ten pas powstał. */ .wba-mecz-karta--film .wba-zap__znaki-lbl { display: none; } /* Znak sponsora nadaje skalę, znak partnera idzie proporcją własnych wysokości plików (21/30) — inaczej jeden z nich rósłby względem drugiego przy każdej zmianie progu. */ .wba-mecz-karta--film .wba-zap__znaki-img { height: var(--wba-znak-h); width: auto; } /* Hak jest nazwany rolą znaku (`--partner`), a nie jego wyglądem. Poprzedni nazywał się `--ciemny` i opisywał podkładkę, która zniknęła 13.09.2026 — selektor przestał wtedy trafiać w cokolwiek, a znak partnera po cichu urósł do wysokości znaku sponsora. */ .wba-mecz-karta--film .wba-zap__znaki-a--partner .wba-zap__znaki-img { height: calc(var(--wba-znak-h) * 21 / 30); } /* PAS SIADA NA DOLNEJ KRAWĘDZI KADRU I STAJE SIĘ JEGO CHROMEM. `top` to dokładnie dół kadru: `--wba-film-gora` + wysokość filmu z proporcji 16:9 jego rzeczywistej szerokości. Zero odstępu jest tu warunkiem — pas ma wyglądać na przedłużenie odtwarzacza, a nie na rzecz pod nim. SZEROKOŚĆ RÓWNA SZEROKOŚCI KADRU (`--wba-film-szer`), nie szerokości kolumny zarezerwowanej (`--wba-film-sz`). Do 13.09.2026 stało tu `--wba-film-sz` z uzasadnieniem „pod filmem wiersze już są i przycisk nie ma powodu na nie wchodzić”. Było to słuszne dla PUDEŁKA stojącego luzem pod kadrem; dla pasa przyspawanego do kadru jest fałszywe: zmierzone przy 1440 px, kadr ma 596,0 px, kolumna 584,0 px, więc pas byłby o 12,0 px węższy od tego, do czego przylega — a uskok na styku dwóch przylegających krawędzi czyta się jako usterka. Na wiersze przebiegu pas przez to nie wchodzi ani o piksel więcej niż sam kadr, bo ma teraz dokładnie jego obrys. */ .wba-mecz-karta--film .wba-zap__film { left: 0; margin: 0; position: fixed; top: calc(var(--wba-film-gora) + var(--wba-film-szer) * 0.5625); width: var(--wba-film-szer); /* Ta sama warstwa co film (8): sterowanie jest jego częścią i ma jechać razem z nim nad belką kwarty, a nie zostać pod spodem. */ z-index: 8; } /* ZAOKRĄGLENIE PRZECHODZI Z KADRU NA PAS. Kadr traci dolne (reguła `.wba-mecz__tv--przyklejony` w `komponenty.css` zaokrągla mu oba rogi od strony treści, więc gasimy dolny tutaj — w pliku, który za ten styk odpowiada), a pas przejmuje dolny prawy. Lewa krawędź dotyka krawędzi okna, więc po lewej zaokrąglenia nie ma po żadnej stronie styku. Kreska u góry to jedyna ramka, jaką pas ma: szew między ciemnym kadrem a jasnym pasem. */ .wba-mecz-karta--film .wba-zap__film-pasek { border-radius: 0 0 var(--wp--custom--radius--md) 0; border-top: 1px solid var(--wp--preset--color--hairline); } /* Bez przodka `.wba-mecz-karta--film` w selektorze: klasa `--przyklejony` istnieje WYŁĄCZNIE w tym stanie, a kadr niekoniecznie leży w tym samym poddrzewie co panel zapisu. */ .wba-mecz__tv--przyklejony { border-bottom-right-radius: 0; } /* Nota jedzie razem z pasem i dostaje jego wcięcie, żeby jej pierwsza litera stała w jednej osi z pierwszą literą pierwszej pozycji pasa. Echo kalibracji stoi w tej samej osi co nota, więc dostaje to samo. */ .wba-mecz-karta--film .wba-zap__film-nota, .wba-mecz-karta--film .wba-zap__kal-echo { padding: 0 14px; } } /* PRÓG ETYKIET W PASIE. 1420 px, nie 1440 — i to nie jest ostrożność na zapas. Okno 1440 px pod Windowsem i Linuksem ma pasek przewijania rysowany w układzie (15–17 px), więc `100vw` wynosi tam 1423–1425 px. Próg 1440 gasiłby etykiety na najczęstszym pulpicie 1440 px. Zmierzone (`getBoundingClientRect`, karta z przypiętym filmem): rząd z etykietami kończy się na 594,3 px niezależnie od szerokości okna (same wartości stałe), a lewa krawędź belki kwarty stoi na `--wba-film-sz` + 32 + 21. Przy 1420 px to 617,0 px, czyli przerwa 22,7 px; przy 1440 px — 637,0 px i przerwa 42,7 px. Etykiety w 10 px mają 147,9 i 157,0 px. */ @media (min-width: 1420px) { .wba-mecz-karta--film .wba-zap__znaki { /* Etykiety zabierają miejsce znakom — znaki schodzą z 26 na 20 px. */ --wba-znak-h: 20px; } .wba-mecz-karta--film .wba-zap__znaki-lbl { display: block; /* 10 px zamiast presetu `micro` (11 px). Jeden piksel mniej to 30 px krótsza para etykiet — dokładnie tyle, ile brakowało, żeby rząd zmieścił się przy 1440 px razem ze znakiem sponsora wysokim na 20 px. Preset `micro` zostaje w karcie, gdzie miejsca jest dość. */ font-size: 0.625rem; } } /* PRZEBIEG MECZU PRZESUWA SIĘ W PRAWO, gdy film jest przyklejony: przestaje stać na środku kolumny treści i zajmuje wszystko na prawo od filmu. Ujemne marginesy liczone z `50% − 50vw` wyprowadzają sekcję z kolumny treści (procent liczy się od jej szerokości, `vw` od okna). PRAWY ODSTĘP 24 PX NIE JEST OZDOBĄ: `100vw` obejmuje też pasek przewijania tam, gdzie system rysuje go w układzie (Windows, Linux — 15–17 px). Odstęp większy od paska sprawia, że prawa krawędź zostaje w środku widocznego obszaru, zamiast wystawać poza niego i zapalać przewijanie w poziomie. */ @media (min-width: 1200px) { .wba-mecz-karta--film .wba-zdarzenia { margin-left: calc(50% - 50vw + var(--wba-film-sz) + var(--wba-film-przerwa)); margin-right: calc(50% - 50vw + var(--wba-film-luz)); } } /* ZNAKI SPONSORA I PARTNERA NAD ODTWARZACZEM. Stoją w karcie transmisji, nad kadrem — tam, gdzie kazał je postawić Piotr 12.09.2026. To jest układ ZWYKŁY: do 1199 px, na górze strony i wszędzie, gdzie film nie jest przypięty. Rząd może się złamać na dwie linie i etykiety są w rozmiarze presetu `micro`. Przy przypiętym filmie znaki wskakują we WSPÓLNY PAS z belką kwarty — reguły wyżej, w bloku `@media (min-width: 1200px)`; tam rząd jest jednoliniowy, a wysokości są zadane. `flex-wrap`, a nie stały rząd: przy 320 px etykieta „Sponsor tytularny ligi” i znak 160 px nie mieszczą się w jednej linii, a mają się wtedy złamać, a nie wypchnąć karty w poziomie. */ .wba-zap__znaki-m { margin-bottom: var(--wp--preset--spacing--s-3); } .wba-zap__znaki { align-items: center; display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--s-2) var(--wp--preset--spacing--s-5); margin: 0; } /* ZNAKI NA ŚRODKU KARTY, ALE TYLKO TAM, GDZIE MIESZCZĄ SIĘ W JEDNEJ LINII. Rząd ma 1 118 px do dyspozycji i zajmuje z tego 594,3 px, więc dosunięty do lewej zostawiał po prawej 523 px pustki i czytał się jak wyrównanie przypadkowe, a nie jak podpis pod sekcją „Transmisja”. Próg 760 px, bo to ta sama linia, na której karta meczu schodzi do układu jednokolumnowego (`max-width: 759px` niżej w tym pliku). Poniżej niej rząd się łamie i wtedy środkowanie rozjeżdża etykietę ze znakiem — dwie linijki o różnej długości, każda wyśrodkowana osobno, czytają się gorzej niż dwie dosunięte do wspólnej krawędzi. Reguła NIE DOTYCZY przypiętego pasa: tam `.wba-mecz-karta--film .wba-zap__znaki` ma własne `justify-content: flex-start` i wyższą swoistość, bo w pasie znaki dzielą szerokość z belką wyniku i muszą trzymać się lewej krawędzi okna. */ @media (min-width: 760px) { .wba-zap__znaki { justify-content: center; } } .wba-zap__znaki-w { align-items: center; display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--s-3); margin: 0; min-width: 0; } /* Etykieta przygaszona i w wersalikach — ta sama rola co w `wba/pasek-sponsora` i `wba/stopka-dol`: ma nazwać rodzaj związku, a nie konkurować ze znakiem. */ .wba-zap__znaki-lbl { color: var(--wp--preset--color--muted); /* ROZMIAR Z ARKUSZA, NIE Z KLASY PRESETU. Do 12.09.2026 etykieta nosiła `has-micro-font-size`; rdzeń wypisuje te klasy z `!important`, więc w pasie nie dało się zejść do 10 px żadną regułą o normalnej wadze. Wartość jest ta sama, co preset `micro` (0,6875 rem = 11 px) — to nie jest zmiana wyglądu w karcie, tylko przeniesienie sterowania tam, gdzie da się je nadpisać. */ font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.06em; text-transform: uppercase; } /* `line-height: 0` na odsyłaczu, bo inaczej wiersz tekstu dokłada pod obrazkiem kilka pikseli, których nie widać, a które rozjeżdżają wyrównanie obu rzędów. */ .wba-zap__znaki-a { display: block; line-height: 0; } .wba-zap__znaki-a:focus-visible { outline: 2px solid var(--wp--preset--color--ink); outline-offset: 3px; } /* ZNAK PARTNERA NIE MA JUŻ PODKŁADKI. Do 13.09.2026 leżał tu czarny prostokąt pod białą wersją znaku — obejście z czasów, gdy motyw miał tylko tę jedną wersję. Dziś w pasie stoi `partner-movecloser-jasny.svg`, narysowany na papier (granat #0A0D29 i firmowy niebieski #1A2BE6), więc podkładka byłaby naklejką na białym pasie. Biała wersja zostaje w stopce, która ma tło `ink`. */ /* Wysokość z atrybutów, szerokość ograniczona pudełkiem — przy przypiętym filmie kolumna schodzi do 320 px i znak 172 px ma się w niej zmieścić razem z wcięciem karty. */ .wba-zap__znaki-img { display: block; height: auto; max-width: 100%; } /* ---- PASEK STEROWANIA: CHROM ODTWARZACZA, NIE PANEL POD NIM ------------- Przebudowa 13.09.2026, wariant B z makiety Piotra (`context/2026-09-13-sterowanie-odtwarzacza/makieta.html`). Poprzedni kształt — pudełko z własnym tłem, ramką i wcięciem, w środku obwiedziona grupa przycisków, pod nią legenda — czytał się jak formularz doklejony pod filmem. Teraz jest to JEDEN pas wysoki na 44 px w barwach strony, przyspawany do dolnej krawędzi kadru; zaokrąglenie przechodzi z kadru na pas. DWIE WARTOŚCI TŁA NA CAŁYM ODCINKU, nie cztery: biel strony i `card-2` pasa. Przyciski i odsyłacz są PRZEZROCZYSTE i nie zmieniają tła nawet pod kursorem — najechanie zmienia sam kolor napisu. Wciśnięty przycisk też nie ma tła: stan niosą wypełniona ikona i kreska pod pozycją. Zmierzone przed zmianą: `rgb(255,255,255)` strony, `rgb(244,245,247)` pudełka, `rgb(255,255,255)` grupy, `rgb(43,52,68)` wciśniętego przycisku. */ /* OPAKOWANIE TRZYMAJĄCE MIEJSCE PO PASKU. `flow-root`, a nie zwykły blok — i to nie jest ozdoba. Pas ma własny `margin-bottom`; w zwykłym bloku ten margines PRZECHODZI przez opakowanie (scala się z jego marginesem), więc zmierzona wysokość opakowania nie obejmowałaby go i po przypięciu strona traciłaby te 12 px. `flow-root` zakłada nowy kontekst formatowania i margines zostaje w środku. Wysokość wpisuje skrypt przyklejania (`zamroz()` w `strona-meczu.php`), mierząc TO opakowanie tuż przed założeniem klasy — dlatego zmiana wysokości pasa nie wymaga niczego w skrypcie, a liczby w arkuszu nie ma i być nie może (zależy od zawinięcia noty, czyli od szerokości karty i od języka). */ .wba-zap__film-m { display: flow-root; } /* ODSTĘP DO PIERWSZEJ KWARTY: 8 px, nie 12. Zmierzone — rezerwa pod kadrem z dwunastką wychodziła 83,2 px (44 pas + 8 nad notą + 19,2 nota + 12), czyli 3,2 px ponad umówione 80. Ośmiu brakuje dopiero wtedy, gdy pas ma własną ramkę; ten jej nie ma, więc krawędź pasa i krawędź listy nie konkurują ze sobą o oddech. */ .wba-zap__film { display: flex; flex-direction: column; margin-bottom: var(--wp--preset--spacing--s-2); } /* Rdzeniowe `[hidden]` przegrywa z `display: flex` z reguły wyżej — dokładnie ta sama pułapka, co przy `.wba-zap__film-tryb` niżej. Skrypt przyklejania ustawia `hidden` WŁAŚNIE NA TYM elemencie (`menu.hidden = ! widac`, gdy na stronie nie ma przełącznika podążania), więc bez tej reguły blok zostawałby widoczny i pokazywał pusty pas. */ .wba-zap__film[hidden] { display: none; } /* SAM PAS. Wysokość bierze się z celu dotykowego przycisków (44 px), a nie z własnego `height` — dzięki temu dołożenie kreski w układzie przypiętym nie zjada przycisku od środka. `align-items: stretch`, więc każda pozycja jest wysoka na cały pas i klikalna na całej wysokości. W UKŁADZIE ZWYKŁYM PAS NIE UDAJE CHROMU: ma własne zaokrąglenie ze wszystkich stron i NIE MA kreski u góry. Kreska u góry mówi „nad tym czymś jestem przyspawany”, a w tym układzie nad nim nic nie ma — kadr stoi 1 771,6 px wyżej, w sekcji „Transmisja” (zmierzone przy 1440 px). Chrom odtwarzacza robi z tego dopiero reguła przypięcia. */ /* PAS ŁAMIE SIĘ W DÓŁ, a nie ściska pozycje. Dopóki był `nowrap`, całą ciasnotę brał na siebie segment kwart — jako jedyna pozycja z `flex-wrap` w środku — i łamał się NA KAWAŁKI: „początek kwarty:” zostawało samo w wierszu, a cyfry schodziły pod nie. Zmierzone 18.09.2026 przy 1440 px: pas 596 px, pozycje 97 + 98 + 301 + 101 = 597, segment ściśnięty do 301 przy 483 px potrzebnych, wysokość pasa 124 px w trzech wierszach. */ .wba-zap__film-pasek { align-items: stretch; background: var(--wp--preset--color--card-2); border-radius: var(--wp--custom--radius--sm); display: flex; flex-wrap: wrap; } /* KALIBRACJA — segment czterech kwart widzi KAŻDY CZYTELNIK (decyzja #654); redaktorowi dochodzi w środku osobny blok `.wba-zap__kal-red`. Przyciski dziedziczą wygląd pozycji pasa z reguł niżej (`.wba-zap__kal-b` dopisane do tamtych selektorów, a nie skopiowane): w pasie są tym samym, czyli miejscem do kliknięcia, i mają tak wyglądać. Blok NIE odsuwa się do prawej. Prawa krawędź należy do odsyłacza YouTube'a (`margin-left: auto`), a kalibracja jest narzędziem roboczym i ma stać przy przełącznikach, z którymi się jej używa. */ .wba-zap__kal { align-items: center; display: inline-flex; /* ZOSTAJE ŚCIŚLIWY (`1` w środku), ale dopiero po zejściu do własnego wiersza — o to dba `flex-wrap: wrap` na pasie. Zabranie ściśliwości (`0 0 auto`) wyprowadzało segment poza prawą krawędź pasa: zmierzone przy oknie 500 px — pas 418 px, segment 521 px, wyjazd o 103 px. */ flex: 0 1 auto; /* Wolno złamać na węższej karcie — pas ma wtedy urosnąć w dół, a nie wypchnąć odsyłacz poza krawędź. Dotyczy to dziś pary przycisków redakcyjnych; napis stanu wyprowadziliśmy 18.09.2026 pod pas (`.wba-zap__kal-echo`), bo to on rozsadzał segment. */ flex-wrap: wrap; gap: var(--wp--preset--spacing--s-2); } /* Zablokowany na czas zapisu — sam kursor nie wystarczy, bo nie ma go na dotyku. Stąd też wyciszenie. */ .wba-zap__kal-b:disabled, .wba-zap__kal-kw:disabled { cursor: default; opacity: 0.5; } /* ECHO KALIBRACJI — wiersz POD paskiem. Powód, dla którego nie jest pozycją pasa, stoi przy `wba_mecz_kalibracja_echo()` w PHP: komunikat serwera ma 409 px i rozsadzał segment (309 → 898 px), a z nim cały pas (44 → 159 px przy oknie 640 px). AKAPIT NIE MA WYSOKOŚCI, DOPÓKI NIE MA CO POWIEDZIEĆ. Pusty `` nie tworzy pudełka wierszowego, schowany przycisk ma `display: none`, więc kontener giętki wychodzi na zero — bez `hidden`, które zabiłoby ogłoszenie `role="status"`. Odstęp od pasa niesie `margin-top` DZIECI, a nie akapitu: marginesu akapitu nie da się cofnąć, gdy jest pusty. */ .wba-zap__kal-echo { align-items: baseline; column-gap: var(--wp--preset--spacing--s-2); display: flex; flex-wrap: wrap; margin: 0; } .wba-zap__kal-stan { color: var(--wp--preset--color--muted); } .wba-zap__kal-stan:not(:empty), .wba-zap__kal-cofnij { margin-top: var(--wp--preset--spacing--s-2); } /* Cofnięcie głosu jest CZYNNOŚCIĄ W ZDANIU, a nie pozycją pasa — stąd wygląd odsyłacza, a nie kafla. W pasie dokładało 193 px do rzędu przycisków, który poza tym nigdy nie zmienia szerokości. */ .wba-zap__kal-cofnij { background: none; border: 0; color: var(--wp--preset--color--text); cursor: pointer; font: inherit; padding: 0; position: relative; text-decoration: underline; text-underline-offset: 3px; } /* CEL DOTYKOWY POWIĘKSZONY WARSTWĄ, NIE WCIĘCIEM. Sam napis ma 19 px wysokości, czyli poniżej progu 24 px (WCAG 2.5.8). Wcięcie podniosłoby wiersz echa o 16 px i wróciłby ten sam skok wysokości, który ta zmiana likwiduje; warstwa daje 35 px celu przy zerowym koszcie w układzie. */ .wba-zap__kal-cofnij::after { content: ''; inset: -8px -6px; position: absolute; } /* `display: flex` przycisków w tym pliku bije domyślne `[hidden]` przeglądarki, więc schowanie trzeba powtórzyć — ta sama pułapka, co przy `.wba-galeria__podglad[hidden]`. Tu klasa `wba-zap__kal-b` już nie obowiązuje, ale reguła zostaje jako zabezpieczenie przed kolejną. */ .wba-zap__kal-cofnij[hidden] { display: none; } .wba-zap__kal-cofnij:disabled { cursor: default; opacity: 0.5; } .wba-zap__kal-cofnij:hover:not(:disabled) { text-decoration-thickness: 2px; } /* FOKUS NA ZEWNĄTRZ, inaczej niż w pasie. Pozycje pasa mają `outline-offset: -2px`, bo dotykają jego zaokrąglonego rogu; tutaj przycisk stoi w zdaniu, więc obrys ma go OTOCZYĆ, a nie wejść w napis. Bez tej reguły przycisk zostałby po wyprowadzeniu spod klasy `wba-zap__kal-b` całkiem bez widocznego fokusa. */ .wba-zap__kal-cofnij:focus-visible { border-radius: 2px; outline: 2px solid var(--wp--preset--color--red-700); outline-offset: 2px; } /* SEGMENT CZTERECH KWART. Etykieta i grupa przycisków są jednym kawałkiem i mają się łamać RAZEM — stąd `white-space: nowrap` na etykiecie i własny `inline-flex` na grupie. Przy 390 px segment schodzi do drugiego wiersza pasa w całości, zamiast zostawiać samotne „początek kwarty:” nad numerami. */ .wba-zap__kal-etyk { align-self: center; color: var(--wp--preset--color--muted); padding-left: 14px; white-space: nowrap; } .wba-zap__kal-kwarty, .wba-zap__kal-red { display: inline-flex; } /* WĘŻSZE WCIĘCIE NIŻ POZOSTAŁE POZYCJE PASA, bo napisem jest tu jedna cyfra, a nie słowo. `min-width: 44px` pilnuje celu dotykowego, którego samo wcięcie by nie dało: 8 + 8 + szerokość cyfry to ok. 24 px, czyli poniżej progu. */ .wba-zap__kal-kw { gap: 4px; justify-content: center; min-width: 44px; padding: 0 8px; } /* KROPKA „TA KWARTA MA JUŻ KOTWICĘ” rysowana KRAWĘDZIĄ, nie tłem — ta sama zasada, co przy kresce stanu przełączników: w `forced-colors: active` system zamienia tło na barwę podłoża i kropka z `background` zniknęłaby, a obramowanie zostaje (system podmienia mu barwę na barwę tekstu). Promień 50 % robi z obramowania kółko; puste pole 4 px w środku daje OBWÓDKĘ, a nie krążek. `box-sizing: content-box` NIE JEST TU OZDOBNIKIEM. Motyw ustawia globalnie `border-box`, a przy nim `width: 4px` z krawędzią 2 px daje kółko o średnicy 4 px BEZ DZIURY — czyli krążek, tylko mniejszy. Zmierzone 18.09.2026: obwódka i wypełnienie wychodziły jako dwa krążki 4 px i 8 px, więc jedynym znakiem stawała się WIELKOŚĆ, a ta przy okazji przesuwała cyfrę obok. */ .wba-zap__kal-kropka { border: 2px solid currentColor; border-radius: 50%; box-sizing: content-box; flex: 0 0 auto; height: 4px; width: 4px; } /* WŁASNY GŁOS — dwa znaki, nie jeden: kolor napisu (ginie przy widzeniu monochromatycznym i w druku) oraz WYPEŁNIONA kropka zamiast obwódki. DLACZEGO NIE KRESKA POD POZYCJĄ, którą ten segment miał wcześniej: pas pod filmem już jej używa i znaczy tam „ten tryb jest włączony” (`.wba-zap__film-tryb[aria-pressed="true"]::after`). Dwa różne stany pod jednym znakiem w jednym pasie o szerokości 300 px czytało się jako włączony przełącznik „1”. Zmierzone 18.09.2026: obie kreski to 2 px `red-700` przy dolnej krawędzi, dzieliło je 6 px wcięcia. Wypełnienie robimy grubością krawędzi, a nie tłem — z tego samego powodu, dla którego krążek w ogóle jest krawędzią. Pole zewnętrzne zostaje 8 px, więc przełączenie stanu NIE PRZESUWA sąsiadów. */ .wba-zap__kal-kw--moj { color: var(--wp--preset--color--ink); } .wba-zap__kal-kw--moj .wba-zap__kal-kropka { border-width: 4px; height: 0; width: 0; } /* POZYCJA PASA — przycisk i odsyłacz wyglądają tak samo, bo w pasie są tym samym: jednym miejscem do kliknięcia. Różnią się rolą, a ta jest w znaczniku, nie w wyglądzie. `min-height: 44px` to nie zaokrąglenie w górę, tylko wymaganie celu dotykowego — ono ustala wysokość całego pasa. */ .wba-zap__film-tryb, .wba-zap__film-yt, .wba-zap__kal-b, .wba-zap__kal-kw { align-items: center; background: none; border: 0; color: var(--wp--preset--color--muted); cursor: pointer; display: inline-flex; flex: 0 0 auto; font-family: inherit; /* 13 px. Napis jest tu treścią główną, ikona wzmocnieniem — stąd ona zeszła z 20 px na 16 px, a nie odwrotnie. */ font-size: 0.8125rem; /* JEDNA GRUBOŚĆ W OBU STANACH, choć makieta miała 500 i 700. To jest pomiar, nie gust: pogrubienie zmienia szerokość napisu, więc przy każdym przełączeniu sąsiednie pozycje przeskakiwałyby w bok. Stan i tak niosą trzy rzeczy — kolor, kreska i wypełnienie ikony. */ font-weight: 600; gap: var(--wp--preset--spacing--s-2); line-height: 1.2; min-height: 44px; padding: 0 14px; /* Dla kreski stanu na `::after`. */ position: relative; text-decoration: none; white-space: nowrap; } /* Rdzeniowe `[hidden]` przegrywa z `display: inline-flex` z reguły wyżej — ta sama pułapka co przy `.wba-lupa` w `komponenty.css`. Mówimy wprost. Zmierzone przed poprawką: przycisk przypięcia z `hidden` przy oknie 1100 px nadal zajmował miejsce w układzie (wysokość 40 px). */ .wba-zap__film-tryb[hidden], .wba-zap__kal-b[hidden], .wba-zap__kal-kw[hidden] { display: none; } /* NAJECHANIE ZMIENIA NAPIS, NIE TŁO. Tło pod kursorem byłoby trzecią wartością na odcinku, a cała ta przebudowa polegała na zejściu z czterech do dwóch. */ .wba-zap__film-tryb:hover, .wba-zap__film-yt:hover, .wba-zap__kal-b:hover:not(:disabled), .wba-zap__kal-kw:hover:not(:disabled) { color: var(--wp--preset--color--ink); } /* Fokus w środku (`outline-offset: -2px`), bo pozycja dotyka krawędzi pasa i obrys na zewnątrz wychodziłby poza jego zaokrąglony róg. */ .wba-zap__film-tryb:focus-visible, .wba-zap__film-yt:focus-visible, .wba-zap__kal-b:focus-visible, .wba-zap__kal-kw:focus-visible { outline: 2px solid var(--wp--preset--color--red-700); outline-offset: -2px; } /* STAN WŁĄCZONY — PIERWSZY ZNAK: kolor. Sam w sobie nośnikiem nie jest (ginie przy monochromatycznym widzeniu i w druku), dlatego są jeszcze dwa niżej. */ .wba-zap__film-tryb[aria-pressed="true"] { color: var(--wp--preset--color--ink); } /* DRUGI ZNAK: kreska pod pozycją, rysowana KRAWĘDZIĄ, a nie tłem — i to jest warunek, nie szczegół. W `forced-colors: active` system zamienia każde tło na barwę podłoża, więc kreska z `background` zniknęłaby dokładnie tam, gdzie jest najbardziej potrzebna; `border-color` system podmienia na barwę tekstu i kreska zostaje. W druku czarno-białym tak samo: tła się nie drukują, krawędzie tak. Ta sama zasada trzymała poprzedni nośnik (ptaszka w kratce), który tu zniknął. Wcięcie 14 px z obu stron równa się wcięciu pozycji, więc kreska ma szerokość NAPISU RAZEM Z IKONĄ, a nie całego pola klikalnego. */ .wba-zap__film-tryb[aria-pressed="true"]::after { border-bottom: 2px solid var(--wp--preset--color--red-700); bottom: 0; content: ""; left: 14px; position: absolute; right: 14px; } /* TRZECI ZNAK: wypełnienie ikony. Przycisk niesie oba rysunki naraz i arkusz pokazuje ten, który pasuje do `aria-pressed`. Dlaczego dwa rysunki, a nie jeden z `fill` z arkusza — rachunek stoi przy `podazanie-w` w `wba_mecz_rysunki_ikon()`. */ .wba-zap__film-ik { flex: 0 0 auto; } .wba-zap__film-ik--w { display: none; } .wba-zap__film-tryb[aria-pressed="true"] .wba-zap__film-ik--o { display: none; } .wba-zap__film-tryb[aria-pressed="true"] .wba-zap__film-ik--w { display: inline-block; } /* ODSYŁACZ DO YOUTUBE'A SAM ODSUWA SIĘ DO PRAWEJ KRAWĘDZI. `margin-left: auto` na ostatnim dziecku, a nie rozpórka między pozycjami: przy meczu bez wiązania przycisk podążania nie wychodzi wcale i rozpórka o stałej szerokości zostawiłaby wtedy dziurę w środku pasa. */ .wba-zap__film-yt { margin-left: auto; } /* Dostępna nazwa pozycji: jest w drzewie, nie ma jej na ekranie. Ta sama technika, co przy `.wba-zakladki--wlaczone .wba-zakladki__h` w `komponenty.css` — `display: none` wyrzuciłoby ją też z drzewa dostępności, czyli przycisk zostałby bez nazwy. SŁOWO STANU JEST TU Z TEGO SAMEGO POWODU: `aria-pressed` mówi o stanie czytnikowi, ale zgłoszenie wymagało słowa w treści. Do 12.09.2026 stało na przycisku zamiast nazwy — widać było „włączone”, a nie było widać, czego dotyczy. */ .wba-zap__film-nazwa, .wba-zap__film-stan { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } /* KRÓTKA NAZWA — to, co widać w pasie. */ .wba-zap__film-krotka { white-space: nowrap; } /* NOTA POD PASEM: jedna cicha linijka, bez panelu, bez ramki, bez tła. Poprzednio stała tu legenda, która powtarzała nazwy przycisków słowo w słowo („podąża” + „nagranie podąża za przewijaniem”), a zdanie o klikaniu zdarzeń było doklejone do niej jako trzeci wiersz. Legenda zniknęła razem z funkcją, która ją budowała. */ .wba-zap__film-nota { color: var(--wp--preset--color--muted); margin: var(--wp--preset--spacing--s-2) 0 0; } .wba-zdarzenia__lista { background-image: linear-gradient( var(--wp--preset--color--hairline), var(--wp--preset--color--hairline) ); background-position: var(--wba-zap-os) 0; background-repeat: no-repeat; background-size: 1px 100%; } /* ---- Nagłówek kwarty: która strona jest czyja ---------------------------- */ /* PASEK STRON JEDZIE Z PRZEWIJANIEM. * * `position: sticky`, nie `fixed` i nie skrypt. `fixed` wyrwałby pasek z panelu * i zostawił go na ekranie także wtedy, gdy czytelnik przełączy zakładkę na mapę * rzutów albo przewinie poza przebieg; `sticky` trzyma go wyłącznie w obrębie * bloku zawierającego, czyli tego `
` — a to dokładnie „przez całą * długość kwarty”. Skryptu nie ma, bo przebieg musi być sprawny bez niego. * * `top: var(--wba-pasek-gorny, 77px)`, CZYLI 77 PX — i to jest DRUGA zmiana tej * wartości tego samego dnia. Warto znać obie, bo inaczej łatwo wrócić do złej. * * Rano 12.09.2026 stało tu `top: 0`, bo pasek górny strony NIE BYŁ przyklejony * na karcie meczu: reguła przyklejająca w `komponenty.css` celuje w opakowanie * `
`, które generuje BLOK * `wp:template-part` w szablonach HTML, a karta meczu idzie przez * `inc/szablon-druzyny.php` i renderowała nagłówek FUNKCJĄ * `block_template_part( 'header' )` — bez opakowania. Zmierzone przy * `scrollY` 800: `rect.top` paska −800 px na karcie meczu, drużyny, zawodnika * i terminarza, a 0 na stronie głównej. * * Po południu opakowanie zostało dołożone ręcznie w `szablon-druzyny.php` * i pasek przykleja się na wszystkich pięciu typach stron (zmierzone: 0 na * każdym). Belka MUSI więc zejść pod niego — `z-index: 7` jest niższy niż 30 * paska właśnie po to, żeby belka schowała się pod paskiem, a nie go przykryła; * gdyby została na `top: 0`, wjechałaby pod pasek i zniknęła. * * Kryterium („zero wierszy zapisu nad dolną krawędzią pasa”) trzyma się na * dwóch rzeczach naraz: pasek górny zasłania 0–77 px, belka 77–138 px. * Przy przypiętym filmie dochodzi trzecia: biały pas znaków na pełną szerokość * (`.wba-zap__znaki` w układzie `--film`), który kryje prawą połowę pasa * w tych chwilach, gdy stara belka już odjechała, a nowa jeszcze nie doszła. * * Kurtynę jako `::before` na belce odrzuciłem bez pisania kodu: jechałaby * z elementem także wtedy, gdy belka NIE jest przyklejona, a wtedy stoi * w układzie tuż pod `` kwarty i zakrywałaby nagłówek kwarty. CSS nie * umie odróżnić „przyklejona” od „w układzie” bez skryptu, a przebieg ma być * sprawny bez skryptu. * * Tła nie da się pominąć — bez niego zdarzenia przejeżdżałyby pod napisami. */ .wba-zap__strony { align-items: center; background: var(--wp--preset--color--paper); border-bottom: 1px solid var(--wp--preset--color--hairline); display: grid; gap: var(--wp--preset--spacing--s-2); grid-template-columns: 1fr 8rem 1fr; letter-spacing: 0.06em; margin: 0 0 var(--wp--preset--spacing--s-2); padding: var(--wp--preset--spacing--s-2) 0; position: sticky; text-transform: uppercase; top: var(--wba-pasek-gorny, 77px); /* NAD PASEM ZE ZNAKAMI (ten ma 6), POD PRZYPIĘTYM FILMEM (ten ma 8). Kolejność względem pasa jest obowiązkowa: pas jest TŁEM wspólnego paska i biegnie przez całą szerokość okna, więc z wyższą warstwą zakryłby nazwy drużyn. Kolejność względem filmu to decyzja Piotra z 12.09.2026 („na wierzchu ma być film”); pierwsza wersja stawiała belkę nad filmem i biała belka wcinała się w kadr — zmierzone przy 1920 px, 131 px prawej krawędzi nagrania. Po przebudowie na jeden pas belka i film w ogóle się nie spotykają: belka kończy się na 138 px, film od 138 px się zaczyna. Powyżej `.wba-zdarzenia__lista`, bo tło z kreską osi musi zostać pod nią. */ z-index: 7; } .wba-zap__strony-n { align-items: center; display: flex; font-weight: 700; gap: var(--wp--preset--spacing--s-2); line-height: 1.2; min-width: 0; } /* Nazwa drużyny w barwie jej strony — to ona wiąże kolor paska zdarzenia z nazwą. Bez tego kolor byłby umową, o której nikt nigdzie nie mówi. Herb i nazwa gospodarza idą do LEWEJ krawędzi przebiegu, gościa do PRAWEJ, i tam zostają przy obu szerokościach. */ .wba-zap__strony-n--gosp { color: var(--wp--preset--color--slate); justify-content: flex-start; } .wba-zap__strony-n--gosc { color: var(--wp--preset--color--red-700); justify-content: flex-end; text-align: right; } .wba-zap__strony-t { min-width: 0; /* Najdłuższa nazwa w bazie ma 33 znaki („DREAM TEAM PARTNERS INTERNATIONAL”), średnia 12,9 przy 112 drużynach. Przy 375 px taka nazwa nie zmieści się w jednej linii i MA się złamać, a nie rozepchnąć paska. */ overflow-wrap: anywhere; } /* Środkowa komórka niesie TRZY wartości w dwóch wierszach: nazwę kwarty i zegar u góry, wynik pod spodem. Nazwa kwarty jest stała (pasek stoi wewnątrz swojego `
`), zegar i wynik jadą za przewijaniem. */ .wba-zap__strony-o { align-items: center; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; text-align: center; } /* Jeden wiersz środkowej komórki. ODSTĘP ROBI PRAWDZIWA SPACJA W TREŚCI, powiększona `word-spacing`, a nie `gap` na kontenerze flex — i to jest decyzja, nie przypadek. Wersję z `gap` miałem napisaną i odrzuciłem: wyglądała identycznie, ale `textContent` dawał nadal „WYNIK:0:0”, bo odstęp istniał wyłącznie w układzie. Tu odstęp jest w tekście, więc widzi go tak samo oko, jak odczyt z kodu strony i kopiowanie zaznaczenia. (Sklejone „CZAS28:31” z poprzedniej wersji wzięło się dokładnie stąd: między `` a `` nie było ani spacji, ani odstępu.) Układ liniowy daje przy okazji wspólną linię pisma dla etykiety 11 px i liczby 14 px za darmo. `nowrap` pilnuje, żeby wiersz albo mieścił się w jednej linii, albo dał się wykryć jako za szeroki (`scrollWidth > clientWidth`) — zamiast po cichu zawinąć. */ .wba-zap__strony-w { white-space: nowrap; word-spacing: 0.3em; } /* `word-spacing` z wiersza rozjeżdżało też spację WEWNĄTRZ nazwy („1. KWARTA”), bo ta spacja należy do tego napisu, a nie do odstępu między napisami. Widoczne na zrzucie belki przy 375 px, stąd wyjątek. */ .wba-zap__strony-k { color: var(--wp--preset--color--ink); word-spacing: normal; } /* Zegar w pasku. Bez etykiety „minuta:” — po pierwsze zegar liczy W DÓŁ, więc „minuta” nazywałaby go nieprawdziwie (to czas pozostały, co mówi nota pod listą); po drugie etykieta kosztuje przy 375 px ok. 40 px w wierszu, który ma ich do dyspozycji 293 na całą belkę. Że to zegar, wiadomo z sąsiedztwa nazwy kwarty i z tego, że wygląda dokładnie jak zegary wierszy: przygaszony, `tabular-nums`. Wynik obok jest ciemny, pogrubiony i większy — i to jest różnica, która ma je odróżniać. `tabular-nums` i wyzerowany odstęp liter są obowiązkowe: liczba zmienia się przy przewijaniu i bez nich pasek drgałby na szerokość przy każdej zmianie cyfry. Żadnego `transition`. */ .wba-zap__zegar { color: var(--wp--preset--color--muted); font-variant-numeric: tabular-nums; letter-spacing: 0; } /* BIEŻĄCY WYNIK: dwukropek stoi na osi przebiegu, liczby dosuwają się do niego z obu stron. Jako jeden środkowany napis dwukropek wędrował — przy „5:2” stał gdzie indziej niż przy „12:10” — a to jest ta sama oś, na której niżej biegnie kreska między stronami, więc drganie było widoczne. `1fr auto 1fr` sadza kolumnę dwukropka dokładnie w środku pudełka, a `width: calc(2 * var(--wba-zap-os))` sadza środek pudełka na osi: przy dwóch kolumnach oś to 50 %, czyli pudełko ma 100 % i środek wypada pośrodku; przy jednej oś jest długością od lewej krawędzi, więc pudełko jest dwa razy tak szerokie i dosunięte do lewej. Jedna reguła na obie szerokości. `tabular-nums` i wyzerowany odstęp liter są obowiązkowe, nie kosmetyczne: liczba zmienia się przy przewijaniu i bez nich pasek drgałby na szerokość przy każdej zmianie cyfry. */ .wba-zap__biezacy { align-self: flex-start; color: var(--wp--preset--color--ink); display: grid; font-variant-numeric: tabular-nums; font-weight: 800; grid-template-columns: 1fr auto 1fr; letter-spacing: 0; line-height: 1.1; width: calc(2 * var(--wba-zap-os)); } .wba-zap__wg { justify-self: end; } .wba-zap__wc { justify-self: start; } /* PRZEBŁYSK PRZY ZMIANIE WYNIKU. * * Stan „świeży” (czerwień i powiększenie) wchodzi BEZ przejścia, a powrót do * czerni i zwykłego rozmiaru trwa 200 ms — dlatego `transition` siedzi na * stanie spoczynku, a `transition: none` na stanie świeżym. * * Skalowanie idzie `transform`em na wspólnym pudełku, nie `font-size` na * liczbach: `font-size` przeliczałby układ i pchał sąsiadów, a osobne * powiększanie liczb rozjechałoby je na boki i przesunęło dwukropek. Środkiem * pudełka JEST dwukropek (patrz siatka wyżej), więc przy skalowaniu stoi * w miejscu — a to on ma stać. */ .wba-zap__biezacy { transition: transform 200ms ease-out; } .wba-zap__wg, .wba-zap__wd, .wba-zap__wc { transition: color 200ms ease-out; } .wba-zap__biezacy--zmiana { transform: scale(1.18); transition: none; } .wba-zap__biezacy--zmiana .wba-zap__wg, .wba-zap__biezacy--zmiana .wba-zap__wd, .wba-zap__biezacy--zmiana .wba-zap__wc { color: var(--wp--preset--color--red-700); transition: none; } /* Przy wyłączonych animacjach ZOSTAJE SAM KOLOR, znika ruch — i to jest rozstrzygnięcie, nie przeoczenie. Powiększenie jest ruchem i to ono bywa męczące; przebłysk barwy niesie informację „ta liczba właśnie się zmieniła”, której nie ma gdzie indziej, więc jego usunięcie odebrałoby treść, a nie ozdobę. Kolor wraca do czerni tak samo, przez 200 ms. */ @media (prefers-reduced-motion: reduce) { .wba-zap__biezacy, .wba-zap__biezacy--zmiana { transform: none; transition: none; } } /* HERB W BELCE. Rozmiar idzie ze zmiennej, bo przy jednej kolumnie (≤ 759 px) każdy dołożony piksel herbu zabiera piksel nazwie drużyny — wartość dla tego progu stoi przy nim, niżej w tym pliku. */ .wba-zap__herb { align-items: center; display: flex; flex: 0 0 auto; height: var(--wba-zap-herb, 28px); justify-content: center; width: var(--wba-zap-herb, 28px); } /* Sam obrazek musi iść za pudełkiem, bo rozmiar dostaje z atrybutów `width` i `height` (44 px z `wba_mecz_zapis_herb()`), a te nie znają progu 760 px. Bez tego przy jednej kolumnie pudełko miałoby 36 px, a herb w środku 44 — zmierzone: pudełko 44 × 44, obrazek 28 × 28, gdy wartości się rozjeżdżały. */ .wba-zap__herb .wba-crest { height: 100%; width: 100%; } /* Zastępstwo z inicjałów, gdy drużyna nie ma herbu. Na dzisiejszych danych nieosiągalne (112 ze 112 drużyn ma plik), ale pasek został przyklejony po to, żeby coś pokazywać — pusty kwadrat przeczyłby całemu pomysłowi. */ .wba-zap__herb--z { background: var(--wp--preset--color--card-2); border-radius: 4px; color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--tiny); letter-spacing: 0; } /* KONIEC KWARTY: napis plus bieg wybiegowy dla przyklejonego paska. Duży odstęp od dołu NIE jest tu upodobaniem — to jedyne, co trzyma pasek przyklejony po ostatnim wierszu. `position: sticky` działa wyłącznie w obrębie bloku zawierającego, czyli tego `
`, więc bez tego odcinka pasek odkleja się dokładnie na ostatnim wierszu i wyjeżdża z ekranu razem z nim. Zmierzone: wynik zamykający stał przedtem na przyklejonym pasku przez 50 px (kwarta 3.) do 250 px (kwarta 1.), bo tyle wypadło wierszy niepunktowych po ostatnim trafieniu. Odstęp siedzi w `padding`, nie w `margin`: margines ostatniego dziecka umie uciec poza `
` przez sklejenie marginesów i wtedy nie przedłużyłby bloku zawierającego, czyli nie zrobiłby dokładnie tego jednego, po co jest. Napis jest wewnątrz `
`, więc przy zwiniętej kwarcie znika razem z listą — inaczej pod każdym zwiniętym nagłówkiem zostałaby dziura. */ .wba-zap__koniec { color: var(--wp--preset--color--muted); letter-spacing: 0.06em; margin: 0; padding-block: var(--wp--preset--spacing--s-4) 150px; text-align: center; text-transform: uppercase; } /* ---- Wiersz zdarzenia --------------------------------------------------- */ .wba-zap__z { align-items: start; border-bottom: 1px solid var(--wp--preset--color--hairline); display: grid; /* Środkowa kolumna stała, nie `auto`: każdy wiersz jest osobną siatką, więc `auto` dałoby tyle różnych szerokości osi, ile długości zegara. */ grid-template-columns: 1fr 4.5rem 1fr; padding: var(--wp--preset--spacing--s-2) 0; } .wba-zap__z:last-child { border-bottom: 0; } .wba-zap__os { align-items: center; /* Tło strony przesłania kreskę osi pod zegarem, więc oś jest przerywana zdarzeniami, a nie przekreśla liczb. `fit-content` zamiast pełnej szerokości kolumny: przy pełnej maska zjadała oś na całej wysokości wiersza i z kreski zostawały same kropki w odstępach. */ background: var(--wp--preset--color--paper); display: flex; flex-direction: column; grid-column: 2; grid-row: 1; margin-inline: auto; padding: 1px var(--wp--preset--spacing--s-2) 2px; width: fit-content; } /* Zegar i wynik stały przedtem w podobnej skali (12 px zwykły i 11 px gruby), więc wynik — rzecz, po którą czytelnik tu przychodzi — był z nich mniejszy. Teraz zegar to 11 px zwykły `muted`, a wynik 14 px o grubości 800 w `ink`: 1,27× rozmiaru, dwa stopnie grubości i pełny kontrast zamiast przygaszonego. Rozmiary z klas presetów w PHP (`has-micro-...`, `has-small-...`). */ .wba-zap__czas { color: var(--wp--preset--color--muted); font-variant-numeric: tabular-nums; line-height: 1.3; } /* ZEGAR JAKO ZNACZNIK NAGRANIA. Przycisk zdejmuje z siebie całą domyślną oprawę pola formularza, bo ma wyglądać dokładnie jak zegar obok — kolumna zegarów jest zmierzona (prawa krawędź 93,0 px przy 375 px) i przycisk nie ma prawa jej ruszyć. `font-size` zostaje przy klasie presetu (`has-micro-...`), która w WordPressie jest `!important`, więc `inherit` jej nie przykryje. */ .wba-zap__skok { appearance: none; background: none; border: 0; border-radius: 3px; cursor: pointer; font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; margin: 0; padding: 0; text-align: inherit; } .wba-zap__skok:hover, .wba-zap__z[data-film]:hover .wba-zap__skok { color: var(--wp--preset--color--red-700); } .wba-zap__skok:focus-visible { outline: 2px solid var(--wp--preset--color--red-700); outline-offset: 2px; } /* Cały wiersz jest celem kliknięcia (obsługa idzie delegacją na liście), więc cały wiersz musi to pokazywać — inaczej znacznikiem byłby wyłącznie zegar, a kliknięcie w treść wyglądałoby na przypadkowe działanie. */ .wba-zap__z[data-film] { cursor: pointer; } .wba-zap__z[data-film]:hover { background: var(--wp--preset--color--surface); } /* Maska osi musi iść za tłem wiersza, inaczej pod zegarem zostaje biała łata w podświetlonym wierszu. */ .wba-zap__z[data-film]:hover .wba-zap__os { background: var(--wp--preset--color--surface); } /* WIERSZ, DO KTÓREGO PRZEWINĘLIŚMY NAGRANIE. Bez tego kliknięcie nie ma żadnego potwierdzenia na stronie: film jest wyżej, często poza ekranem, a lista wygląda tak samo jak przed kliknięciem. Zaznaczenie robi lewa krawędź, nie tło — tło jest już zajęte przez najechanie kursorem. */ .wba-zap__z--cel { box-shadow: inset 3px 0 0 0 var(--wp--preset--color--red-700); } .wba-zap__z--cel .wba-zap__czas { color: var(--wp--preset--color--red-700); } .wba-zap__wynik { color: var(--wp--preset--color--ink); font-variant-numeric: tabular-nums; font-weight: 800; line-height: 1.25; } .wba-zap__blok { display: flex; gap: var(--wp--preset--spacing--s-2); /* Bez tego długie nazwisko rozpycha kolumnę siatki zamiast się złamać. */ min-width: 0; } /* Pasek od strony OSI, a nie po zewnętrznej krawędzi kolumny. Pierwsza wersja miała paski na zewnętrznych krawędziach, żeby zrobiły dwie ciągłe szyny obejmujące listę. Zrzut przy 1440 px pokazał, dlaczego to nie działa: kolumna ma tam 523 px, a treść trzyma się osi, więc pasek stał ~400 px od napisu, który miał opisywać, i czytał się jak ozdoba na marginesie. Przy osi pasek dotyka treści przy każdej szerokości. Kreska osi go nie gubi, bo między paskami leży cała kolumna zegara (4,5 rem). */ .wba-zap__z--gospodarz .wba-zap__blok { border-right: 3px solid var(--wba-zap-strona); /* Ikona ląduje przy osi, treść wyrównana do osi — odbicie lustrzane prawej strony. */ flex-direction: row-reverse; grid-column: 1; padding-right: var(--wp--preset--spacing--s-3); text-align: right; } .wba-zap__z--gosc .wba-zap__blok { border-left: 3px solid var(--wba-zap-strona); grid-column: 3; padding-left: var(--wp--preset--spacing--s-3); } /* Zdarzenie meczowe siada NA osi, pod zegarem, wyśrodkowane — to jedyne miejsce, które nie należy do żadnej ze stron. */ .wba-zap__z--mecz .wba-zap__blok { grid-column: 1 / -1; grid-row: 2; justify-content: center; padding-top: var(--wp--preset--spacing--s-1); } .wba-zap__z--mecz .wba-zap__tresc { text-align: center; } .wba-zap__ikona { color: var(--wba-zap-strona); display: flex; flex: 0 0 auto; /* Ikona siada na pierwszej linii tekstu, nie na środku bloku. */ padding-top: 1px; } /* 18 px, nie 16: rysunki są konturowe i przy 16 px kubek kosza oraz grot strzałki schodziły poniżej dwóch pikseli. Więcej niż 18 px nie wchodzi — linia tekstu ma 14 × 1,35 = 18,9 px, więc ikona równa linii jeszcze nie rozpycha wiersza, a 20 px już by go rozpychało. */ .wba-zap__svg { display: block; height: 18px; width: 18px; } .wba-zap__tresc { font-size: var(--wp--preset--font-size--small); line-height: 1.35; min-width: 0; } .wba-zap__kto { color: var(--wp--preset--color--body-text); font-weight: 600; } /* Wiersz drużynowy (zbiórka drużyny, przerwa na żądanie, strata drużyny) — zamiast pustego miejsca po nazwisku stoi słowo, ale bez wagi nazwiska, bo to nie jest osoba. */ .wba-zap__kto--druzyna { color: var(--wp--preset--color--muted); font-style: italic; font-weight: 400; } .wba-zap__co { color: var(--wp--preset--color--muted); } /* Dwuliterowego skrótu drużyny przy każdym wierszu już nie ma — zastąpił go herb w przyklejonym pasku stron. Klasa `wba-zap__dr` zniknęła razem z nim; jeśli ją gdzieś widzisz, to znaczy, że coś wróciło z martwych. */ /* ---- Jedna kolumna ------------------------------------------------------ * * Próg 760 px, nie 600 px z `komponenty.css`: przy 600 px kolumna zdarzenia ma * niecałe 250 px i tekst łamie się po dwóch słowach. Zmierzone na tabelach tej * karty — 760 px to pierwsza szerokość, przy której obie kolumny mieszczą * nazwisko i nazwę zdarzenia w dwóch liniach. * -------------------------------------------------------------------- */ @media (max-width: 759px) { /* Oś siada dokładnie na lewej krawędzi bloku, czyli TAM, GDZIE STOI PASEK gospodarza. Wersja ze środkiem odstępu (`3.25rem + 6px`) była zmierzona i odpadła: kreska lądowała 6 px od trzypikselowego paska i wiersze gospodarza miały dwie pionowe linie obok siebie. Tak pasek przykrywa oś, gdy zdarzenie jest gospodarza, a przy gościu zostaje sama szara kreska i wyznacza początek kolumny treści. */ .wba-zdarzenia__kw { --wba-zap-os: calc(3.25rem + var(--wp--preset--spacing--s-3)); /* HERB 36 px, NIE 44 JAK PRZY DWÓCH KOLUMNACH — granica jest zmierzona, nie ostrożnościowa. Przy 375 px wysokość wiersza z nazwą wyznacza SAMA NAZWA: „HONEY BADGERS BIALOLEKA” łamie się na trzy wiersze o łącznej wysokości 39,6 px. Dopóki herb jest niższy od 39,6 px, nie kosztuje ani jednego piksela belki — przy 36 px belka ma 105,1 px, dokładnie tyle, ile miała z herbem 28 px. Przy 44 px zaczyna być wyższy od nazwy i belka rośnie do 109,5 px. Szerszy herb nazwie nic nie daje: przy 44 px zostaje jej 90,5 px, przy 36 px 98,5 px, i w obu przypadkach wychodzą trzy wiersze. Czyli 8 px herbu kupowałoby 4,4 px wysokości belki za nic. */ --wba-zap-herb: 36px; } /* PASEK STRON ZOSTAJE, I TO JEST TU NAJWAŻNIEJSZA DECYZJA. * * Przedtem znikał przy jednej kolumnie, bo nazwę drużyny niósł skrót przy * każdym wierszu. Skrótu już nie ma, więc gdyby zniknął i pasek, przy 375 px * zostałyby dwa sygnały: po której stronie stoi pasek zdarzenia i jakiego * jest koloru. Położenie owszem, działa bez rozróżniania barw — ale sama * para „lewo/prawo” nie mówi, KTÓRA drużyna jest która. Ten pasek jest tym * napisem, i dlatego przy jednej kolumnie jest potrzebniejszy niż przy dwóch. * * ŚRODKOWA KOMÓRKA SCHODZI DO WŁASNEGO WIERSZA, zamiast stać między * nazwami. To jest wynik pomiaru, nie upodobanie. Pasek ma przy 375 px * 293 px szerokości. Środkowa komórka potrzebuje w najgorszym przypadku * 119 px („DODATKOWA 1” 86,2 + odstęp + zegar 27,8; wiersz wyniku 91,8). * Zostaje wtedy (293 − 119 − 16) / 2 = 79 px na stronę, z czego herb * zabiera 28 + 8 px odstępu — czyli 43 px na nazwę. „BLAZERS” ma 56,6 px, * więc łamałoby się W ŚRODKU SŁOWA (`overflow-wrap: anywhere`), dając * „BLAZER / S”. Własny wiersz kosztuje wysokość, ale nazwy zostają całe, * a to one są tu jedynym tekstowym sygnałem przynależności. * * Kolejność: nazwy u góry (stała mapa stron), zmienne liczby pod nimi, * bliżej wierszy, których dotyczą. */ .wba-zap__strony { grid-template-columns: 1fr 1fr; row-gap: var(--wp--preset--spacing--s-2); } .wba-zap__strony-o { grid-column: 1 / -1; grid-row: 2; } /* Pół piksela w prawo, i to nie jest czepialstwo: kreska osi ma szerokość 1 px i rysuje się OD wartości `--wba-zap-os` w prawo, więc jej środek leży na `--wba-zap-os + 0,5 px`. Przy dwóch kolumnach oś jest procentem i środek wypada dokładnie na środku listy, więc poprawka jest niepotrzebna; tutaj oś jest długością i bez tego dwukropek stawał o pół piksela za daleko w lewo (zmierzone: 105,00 wobec 105,50). */ .wba-zap__biezacy { width: calc(2 * var(--wba-zap-os) + 1px); } /* PIERWSZY WIERSZ SIADA NA KOLUMNACH WIERSZY: zegar belki dokładnie nad szyną zegarów, nazwa kwarty tuż za nim, nad kolumną treści. Obie liczby biorą się z `--wba-zap-os`, a nie z nowej wartości. Szyna zegara kończy się o jeden odstęp `s-3` przed osią — to ten sam odstęp, którym wiersz rozdziela swoje dwie kolumny — więc pudełko zegara ma szerokość `os − s-3`, a `gap` odtwarza tę przerwę. Zmierzone przy 375 px: zegary wszystkich 60 sprawdzonych wierszy mają prawą krawędź na 93,0, a blok treści zaczyna się na 105,0. Zegar jest DOSUNIĘTY DO PRAWEJ, tak jak w wierszach (`align-items: flex-end` w szynie). To nie jest kosmetyka: „11:59” ma lewą krawędź na 61,7, a „9:55” na 68,7 — przy dosunięciu do lewej zegar belki drgałby względem kolumny pod spodem przy każdej zmianie z dwucyfrowej minuty na jednocyfrową. Kolejność zamienia `order`, a nie przestawienie znaczników: kod strony zostaje w kolejności „kwarta, zegar”. Czytnik ekranu i tak nie czyta tu nic (pasek ma `aria-hidden`), ale ten sam widok nie ma mieć dwóch różnych porządków treści zależnie od szerokości okna. Drugiego wiersza to nie dotyczy: wynik ma własną szerokość liczoną z osi i dwukropek stoi na niej niezależnie od tej reguły. */ .wba-zap__strony-w { display: flex; gap: var(--wp--preset--spacing--s-3); justify-content: flex-start; width: 100%; } .wba-zap__zegar { flex: 0 0 calc(var(--wba-zap-os) - var(--wp--preset--spacing--s-3)); order: 1; text-align: right; } .wba-zap__strony-k { order: 2; } .wba-zap__z { column-gap: var(--wp--preset--spacing--s-3); grid-template-columns: 3.25rem 1fr; } .wba-zap__os { align-items: flex-end; /* Oś biegnie obok szyny zegara, a nie pod nią — maska niepotrzebna. */ background: none; grid-column: 1; margin-inline: auto 0; padding-inline: 0; } /* Gospodarz ciąży do lewej, gość do prawej — to samo odbicie, co przy dwóch kolumnach, tylko wewnątrz jednej. Pasek przechodzi na tę krawędź, do której ciąży treść, więc znów go dotyka: przy jednej kolumnie to krawędź zewnętrzna, przy dwóch — krawędź od osi. */ .wba-zap__z--gospodarz .wba-zap__blok { border-left: 3px solid var(--wba-zap-strona); border-right: 0; flex-direction: row; grid-column: 2; padding: 0 0 0 var(--wp--preset--spacing--s-3); text-align: left; } .wba-zap__z--gosc .wba-zap__blok { border-left: 0; border-right: 3px solid var(--wba-zap-strona); flex-direction: row-reverse; grid-column: 2; padding: 0 var(--wp--preset--spacing--s-3) 0 0; text-align: right; } .wba-zap__z--mecz .wba-zap__blok { grid-column: 2; grid-row: 1; padding-top: 0; } }