/* ========================================================================= Sekcja „Statystyki" na karcie meczu. Wchodzi PO `komponenty.css` (kolejkowanie w `functions.php`), więc może nadpisywać jego reguły dotyczące box score'u bez wchodzenia w tamten plik. Trzy rzeczy: zwijana legenda skrótów, dymki z rozwinięciami przy nagłówkach kolumn i analiza porównawcza drużyn. ========================================================================= */ /* Kreska tej sekcji. `komponenty.css:3010` definiuje `--wba-mecz-kreska: #8B94A4`, ALE NA SELEKTORZE `.wba-mecz__bs`, czyli na samej tabeli — więc rodzeństwo tabeli tego tokenu NIE DZIEDZICZY. Zmierzone dwoma odczytami: w kodzie (`komponenty.css:3009-3011`) i w przeglądarce (`getComputedStyle(dl).getPropertyValue('--wba-mecz-kreska')` → pusty napis, `borderTop` → `0px none`). Skutek uboczny w cudzym pliku jest opisany w raporcie i NIE jest tu naprawiany; ja definiuję własny token na karcie, żeby moje elementy miały tę samą, zmierzoną kreskę 3,06:1 na bieli. */ .wba-mecz__k { --wba-staty-kreska: #8B94A4; } /* ---- Zwijana legenda skrótów -------------------------------------------- Blok istnieje PO TO, ŻEBY PRZYCISK MIAŁ GDZIE STANĄĆ. Bez niego skrypt wstawiałby przycisk wprost do karty, między tabelę a legendę, i odstęp nad przyciskiem trzeba by liczyć osobno dla stanu zwiniętego i rozwiniętego. Tu odstęp jest jeden i należy do bloku. */ .wba-mecz__lg-blok { margin-top: var(--wp--preset--spacing--s-5); } /* Kreska i oddech TYLKO W STANIE ROZWINIĘTYM, i to jest decyzja o wysokości strony, nie o urodzie. Kreska dzieli przycisk od treści legendy — kiedy treści nie ma, nie ma czego dzielić, a 17 px (16 padding + 1 kreska) razy nic nie wnosi. Zmierzone: sekcja statystyk 1 085 px → 921 px przy 1440 px szerokości, czyli o 164 px mniej. Wypełnienie legenda ma już z `komponenty.css:3060`; tu dochodzi sama kreska, bo tamtejsza jest martwa (patrz komentarz o tokenie wyżej). */ .wba-mecz__lg-blok.is-rozwiniete .wba-mecz__lg { margin-top: var(--wp--preset--spacing--s-4); border-top: 1px solid var(--wba-staty-kreska); } /* WYGLĄD PRZYCISKU JEST PRZEPISANY Z `.wba-zap__film-tryb` (`mecz-zapis.css:256`) ŚWIADOMIE, A NIE PRZEZ NIEDOPATRZENIE. Współdzielona klasa byłaby ładniejsza, ale mieszkałaby w `komponenty.css` albo w `mecz-zapis.css` — w obu wypadkach w cudzym terenie, a przeniesienie tamtej reguły to zmiana, której nikt nie zamawiał. Wartości są przepisane co do jednej, więc oba przyciski na karcie wyglądają identycznie; gdy kiedyś powstanie wspólna klasa pigułki, te dwa miejsca schodzą się w jedno. */ .wba-mecz__lg-tryb { align-items: center; background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--hairline); border-radius: 999px; color: var(--wp--preset--color--ink); cursor: pointer; display: inline-flex; font-family: inherit; font-size: .8125rem; font-weight: 600; gap: var(--wp--preset--spacing--s-2); line-height: 1.2; padding: var(--wp--preset--spacing--s-2) var(--wp--preset--spacing--s-3); } .wba-mecz__lg-tryb:hover { border-color: var(--wp--preset--color--slate); } .wba-mecz__lg-tryb:focus-visible { outline: 2px solid var(--wp--preset--color--red-700); outline-offset: 2px; } .wba-mecz__lg-stan { color: var(--wp--preset--color--muted); font-weight: 400; } /* BEZ TEJ REGUŁY ZWIJANIE NIE DZIAŁA WCALE. `.wba-mecz__lg` ma `display: grid` z `komponenty.css:3060`, a własność `display` w regule klasowej bije rdzeniowe `[hidden] { display: none }` (ta sama specyficzność, późniejsza reguła wygrywa). Skrypt ustawia `dl.hidden = true`, legenda znika z drzewa dostępności — i nadal zajmuje 198 px na ekranie. Dokładnie ta pułapka jest opisana w `mecz-zapis.css:271` przy `.wba-zap__film-tryb`; tu trafia po raz drugi. */ .wba-mecz__lg[hidden] { display: none; } /* Wpis z pełnym zdaniem (dziś tylko EFF) bierze całą szerokość siatki. Bez tego jeden długi opis rozpycha swój rząd do wysokości czterech linii, a trzej krótcy sąsiedzi zostawiają pod sobą dziurę. */ .wba-mecz__lg-p.is-dlugi { grid-column: 1 / -1; } /* ---- Główka tabeli: nazwa drużyny i znak zapytania ----------------------- */ /* Gniazdo istnieje wyłącznie jako blok zawierający dla dymka. Powód, dla którego dymek NIE MOŻE wisieć w `.wba-mecz__bs-obudowa`, stoi w docblocku `wba_mecz_tabela_boxscore()`: obudowa ma `overflow-x: auto`, a przy jawnym `overflow` w jednej osi druga liczy się jako `auto`, nie `visible`, więc dymek pod nagłówkiem byłby przycięty w pionie. */ .wba-mecz__bs-gniazdo { position: relative; } .wba-mecz__bs-glowka { display: flex; align-items: baseline; justify-content: space-between; gap: var(--wp--preset--spacing--s-3); } /* Znak zapytania JEDEN na tabelę, nie 25 w wierszu nagłówka — decyzja Piotra. Nagłówki mają 11 px; 25 dodatkowych znaków to szum, a każdy z nich byłby celem dotyku poniżej wszelkiej używalnej wielkości. Ten jeden ma 28 px w kwadracie i stoi w miejscu, w którym oko i tak zatrzymuje się na nazwie drużyny. */ .wba-mecz__bs-pyt { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; /* Obwódka z `--wba-staty-kreska`, a NIE z `hairline` jak w pigułce legendy — i to jest różnica zmierzona, nie kaprys. `hairline` (#E1E4E9) na bieli daje 1,27:1, a WCAG 1.4.11 wymaga 3:1 od granic elementów sterujących; #8B94A4 daje 3,06:1. Pigułka legendy zostaje przy `hairline`, bo tam obwódka jest dopełnieniem napisu, który sam niesie 12,5:1 — tu obwódka jest jedyną rzeczą, która mówi, że ten „?” jest przyciskiem. */ border: 1px solid var(--wba-staty-kreska); border-radius: 999px; background: var(--wp--preset--color--paper); color: var(--wp--preset--color--muted); font-size: .875rem; font-weight: 700; line-height: 1; text-decoration: none; } .wba-mecz__bs-pyt:hover, .wba-mecz__bs-pyt:focus-visible { border-color: var(--wp--preset--color--slate); color: var(--wp--preset--color--ink); } .wba-mecz__bs-pyt:focus-visible { outline: 2px solid var(--wp--preset--color--red-700); outline-offset: 2px; } /* ---- Klikalny skrót w nagłówku ------------------------------------------ */ /* TA KLASA OBSŁUGUJE DWA MIEJSCA: skrót w nagłówku kolumny i liczbę `EFF` w komórce. Nazwa została z pierwszego zastosowania, ale przycisk jest jeden i taki ma być — obie rzeczy odpowiadają na to samo pytanie („skąd to się bierze") i mają odpowiadać tak samo. Wszystko, co poniżej, dotyczy obu. Przycisk PRZEJMUJE CAŁĄ KOMÓRKĘ, a nie obejmuje sam napis: ujemne marginesy zdejmują wypełnienie `` (8px 7px z `komponenty.css:3015`) i oddają je przyciskowi, więc celem kliknięcia jest cała komórka, a nie trzy litery. Zmierzone: cel rośnie z 24 × 13 px do 46 × 30 px. To nadal mniej niż zalecane 44 × 44, ale przy 25 kolumnach w kontenerze przewijania jest to maksimum, jakie ta tabela w ogóle daje — i jest to jedyna droga do rozwinięcia dostępna dotykiem, bo `title` na dotyku nie istnieje. */ .wba-mecz__bs-skrot { appearance: none; display: block; width: calc(100% + 14px); margin: -8px -7px; padding: 8px 7px; border: 0; border-radius: 3px; background: none; color: inherit; cursor: pointer; font: inherit; /* `font: inherit` resetuje `font-variant-numeric` do wartości początkowej, a komórki liczbowe mają `tabular-nums` (`komponenty.css`). Bez tej linii liczby w kolumnie `EFF` przestałyby być równej szerokości i kolumna drgałaby przy przewijaniu. Dziedziczenie wymuszone wprost. */ font-variant-numeric: inherit; letter-spacing: inherit; text-align: inherit; text-transform: inherit; } .wba-mecz__bs-skrot:hover { background: var(--wp--preset--color--card-2); color: var(--wp--preset--color--ink); } /* --- kolumna sortowana -------------------------------------------------- Box score jest sortowalny po kliknięciu w nagłówek, ale JEGO przycisk nie dostaje klasy `.wba-wykaz__sortuj` z wykazów — tamta zeruje margines i narzuca `width: 100%`, więc skasowałaby ujemne marginesy powiększające cel dotykowy (patrz wyżej). Wskaźnik rysujemy tutaj, z tego samego `aria-sort`, który niesie stan dla czytnika ekranu. Trójkąt z krawędzi, a nie znak „▼”: nie wchodzi do drzewa dostępności ani do zaznaczenia tekstu. Strzałka stoi tylko przy kolumnie aktualnie sortowanej — dwadzieścia pięć stałych znaczków nie niosłoby informacji. */ .wba-mecz__bs th[aria-sort] { color: var(--wp--preset--color--red); } .wba-mecz__bs th[aria-sort] .wba-mecz__bs-skrot::after { content: ""; display: inline-block; width: 0; height: 0; margin-left: 4px; vertical-align: middle; border-left: 4px solid transparent; border-right: 4px solid transparent; } .wba-mecz__bs th[aria-sort="descending"] .wba-mecz__bs-skrot::after { border-top: 5px solid currentColor; } .wba-mecz__bs th[aria-sort="ascending"] .wba-mecz__bs-skrot::after { border-bottom: 5px solid currentColor; } /* `outline-offset` UJEMNY, i to nie jest kwestia gustu: obrys rysowany na zewnątrz przycisku wychodziłby poza komórkę, a komórka skrajna leży przy krawędzi kontenera z `overflow-x: auto` — obrys zostałby tam przycięty albo dorobiłby kontenerowi przewijanie. Do środka mieści się zawsze. */ .wba-mecz__bs-skrot:focus-visible { outline: 2px solid var(--wp--preset--color--red-700); outline-offset: -2px; } /* Kolumna z otwartym dymkiem: SAMA TYPOGRAFIA, BEZ WYPEŁNIENIA TŁA. Pierwsza wersja dawała tu `background: slate` z bielą — 12,5:1, ładnie widoczne i odrzucone przez Piotra, i słusznie: ciemny kafelek wyrywał jeden nagłówek z rytmu całego wiersza (sąsiedzi `PFD` i `+/-` jasne, środek ciemny) i przykrywał komórkę, zamiast ją wskazywać. Odrzucona jest KATEGORIA, nie odcień — żadnego tła w innym kolorze tu nie ma i nie ma być. Stan otwarty niosą teraz trzy rzeczy naraz, z których żadna nie jest samym kolorem: grubość pisma, atramentowa barwa napisu zamiast szarej oraz podkreślenie, które z kropkowanego robi się ciągłe. Czwartym sygnałem jest grot dymka celujący w tę kolumnę, a dla czytnika ekranu `aria-expanded`. PRZESKOKU SZEROKOŚCI NIE MA I TO JEST ZMIERZONE, NIE ZAŁOŻONE. Tabela ma `table-layout: fixed` i `` (`komponenty.css:2947`), więc szerokości kolumn biorą się z ``, a treść na nie nie wpływa. Sprawdzone przy 375 px, przed kliknięciem i po: kolumna `EFF` 50 px → 50 px, `scrollWidth` tabeli 1 329 px → 1 329 px, wszystkie 26 szerokości co do dziesiątej części piksela identyczne. Gdyby tabela miała `auto`, trzeba by tu rezerwować miejsce pseudoelementem — przy `fixed` to zbędna komplikacja. */ .wba-mecz__bs-skrot[aria-expanded="true"] { color: var(--wp--preset--color--ink); font-weight: 800; } .wba-mecz__bs-skrot[aria-expanded="true"] abbr { text-decoration-color: var(--wp--preset--color--ink); text-decoration-style: solid; } /* ---- Dymek z rozwinięciem ----------------------------------------------- */ .wba-mecz__bs-dymek { position: absolute; z-index: 3; width: max-content; /* Dwa ograniczenia naraz. `100%` (czyli szerokość gniazda) sprawia, że dymek nie może wystawać poza kartę NAWET gdyby skrypt policzył pozycję źle — a `48ch` trzyma długie zdanie (dziś EFF) w mierze, którą da się przeczytać, zamiast rozciągać je na 1 100 px w jednej linii. */ max-width: min(48ch, 100%); margin-top: 6px; padding: var(--wp--preset--spacing--s-2) var(--wp--preset--spacing--s-3); border-radius: 6px; background: var(--wp--preset--color--slate); box-shadow: 0 6px 18px rgba(20, 24, 33, .22); color: var(--wp--preset--color--paper); font-size: .8125rem; font-weight: 400; letter-spacing: normal; line-height: 1.45; text-align: left; text-transform: none; white-space: normal; } /* Ta sama pułapka co przy legendzie: `display` w regule klasowej bije rdzeniowe `[hidden] { display: none }`. Tu `display` przychodzi z `position` i `width: max-content`, ale reguła i tak musi paść wprost — bez niej dymek zniknąłby z drzewa dostępności i został na ekranie. */ .wba-mecz__bs-dymek[hidden] { display: none; } /* Grot. `--wba-grot` ustawia skrypt na środek kolumny, przycięty do wnętrza dymka — przy skrajnych kolumnach dymek jest dosunięty do krawędzi gniazda i bez tego grot wskazywałby sąsiednią kolumnę. */ .wba-mecz__bs-dymek::before { content: ""; position: absolute; top: -4px; left: var(--wba-grot, 16px); width: 10px; height: 10px; margin-left: -5px; border-radius: 2px; background: inherit; transform: rotate(45deg); } .wba-mecz__bs-dymek-s { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } /* Półpauza przed rozwinięciem robi CSS, a nie PHP: to znak rozdzielający dwa pola, nie część żadnego z nich, więc nie ma go po co przepuszczać przez tłumaczenie ani wstawiać do treści skryptem. */ .wba-mecz__bs-dymek-s::after { content: " — "; font-weight: 400; letter-spacing: normal; } /* ---- Analiza porównawcza: paski rozbieżne od wspólnej osi ---------------- Bez SVG i bez JavaScriptu, bo sekcja ma się drukować, działać przy wyłączonych skryptach i dać się przeczytać czytnikiem ekranu. To jest ``, a nie grafika — paski są warstwą wizualną doklejoną do danych, a nie danymi samymi. */ .wba-mecz__por { margin-top: var(--wp--preset--spacing--s-6); padding-top: var(--wp--preset--spacing--s-5); border-top: 1px solid var(--wba-staty-kreska); } .wba-mecz__por-tyt { margin: 0 0 var(--wp--preset--spacing--s-4); font-size: .875rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } /* `fixed` z `` z tego samego powodu, co w box scorze: bez tego przeglądarka wymierzyłaby kolumnę nazw pod najdłuższą etykietą („Skuteczność rzutów za trzy") i obie osie pasków wyszłyby niesymetryczne, czyli wspólna oś przestałaby być wspólna. */ .wba-mecz__por-t { width: 100%; border-collapse: collapse; table-layout: fixed; } .wba-mecz__por-c { width: 35%; } .wba-mecz__por-c.is-nazwa { width: 30%; } .wba-mecz__por-t thead th { padding: 0 0 var(--wp--preset--spacing--s-2); border-bottom: 1px solid var(--wba-staty-kreska); color: var(--wp--preset--color--muted); font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } /* Nazwy drużyn ciążą ku swoim stronom osi: gospodarz w lewo, gość w prawo — ta sama strona, w którą rośnie jego pasek. Nagłówek „Statystyka" jest tylko dla czytnika ekranu wart czytania, więc wizualnie zostaje cichy. */ .wba-mecz__por-t thead th:first-child { text-align: right; font-weight: 400; } /* WSPÓLNA OŚ NARYSOWANA, A NIE DOMYŚLNA. Bez kreski oś istnieje tylko tam, gdzie styka się slate z czerwienią — czyli znika w wierszu, w którym jedna z drużyn ma zero. Kreska na prawej krawędzi lewej kolumny biegnie przez całą wysokość wykresu i to ona robi z siedmiu par pasków jeden wykres rozbieżny. Rysuje się między paskami, bo obramowanie leży poza pudełkiem treści, w którym kończy się pasek gospodarza. */ .wba-mecz__por-kg, .wba-mecz__por-l { border-right: 1px solid var(--wba-staty-kreska); } /* Nazwy drużyn WYŚRODKOWANE NAD SWOJĄ POŁOWĄ, nie dosunięte do krawędzi. Do lewej „FASOLKI" zderzało się z prawą krawędzią nagłówka „STATYSTYKA" (zmierzone: napisy stykały się w jeden ciąg „STATYSTYKAFASOLKI"), a nazwa ma opisywać całą połowę wykresu, nie jej brzeg. Barwa każdej jest tą samą, którą mają jej paski, więc przypisanie strony do drużyny nie zależy od pamięci czytelnika. */ .wba-mecz__por-kg { text-align: center; color: var(--wp--preset--color--slate); } .wba-mecz__por-ko { text-align: center; color: var(--wp--preset--color--red-700); } .wba-mecz__por-t tbody th, .wba-mecz__por-t tbody td { padding: var(--wp--preset--spacing--s-2) 0; vertical-align: middle; } /* Nazwa wiersza DO PRAWEJ, przy swojej liczbie — tak jak w szkicu Piotra. Do lewej zostawiała 250 px pustki między „Punkty" a „78" przy 1440 px (zmierzone: etykieta kończy się na x=205, liczba zaczyna na x=496), a nazwa i liczba są jedną informacją i mają się czytać jako jedna. */ .wba-mecz__por-nm { padding-right: var(--wp--preset--spacing--s-3) !important; color: var(--wp--preset--color--body-text); font-size: .8125rem; font-weight: 400; text-align: right; } /* Znacznik reguły wiersza. TEKSTEM, nie ikoną i nie kolorem — czytelnik ma się dowiedzieć, czym mierzy się „lepszy" w tym wierszu, a nie domyślić się tego z odcienia. Stoi przy nazwie wiersza, a nie w legendzie pod wykresem, bo w legendzie trzeba by go szukać. Dwa napisy, jedna gramatyka: „mniej = lepiej" przy stratach i „wyższy % = lepiej" w wierszach punktowych. Oba odpowiadają na to samo pytanie — czym mierzona jest przewaga — i oba stoją dokładnie tam, gdzie pogrubienie przestaje iść za długością paska. Czytelnik uczy się jednej konstrukcji „ = lepiej" i czyta obie tak samo. */ .wba-mecz__por-zn { display: inline-block; margin-left: var(--wp--preset--spacing--s-1); padding: 1px 6px; border-radius: 999px; background: var(--wp--preset--color--card-2); color: var(--wp--preset--color--muted); font-size: .625rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; } /* Komórki wartości: liczba na zewnętrznej krawędzi, pasek przy osi. Gospodarz rośnie w lewo, gość w prawo, a oś to wspólna granica obu komórek. ZGINANY JEST `` W KOMÓRCE, A NIE SAMA KOMÓRKA. `display: flex` na `` przestają obowiązywać i obie wartości ustawiają się jedna pod drugą. Zmierzone na własnej pomyłce: 645 px wysokości zamiast 253 px i oba paski rosnące w tę samą stronę. */ .wba-mecz__por-in { display: flex; align-items: center; gap: var(--wp--preset--spacing--s-2); } .wba-mecz__por-tor { flex: 1 1 auto; display: flex; min-width: 0; } .wba-mecz__por-l .wba-mecz__por-tor { justify-content: flex-end; } .wba-mecz__por-p .wba-mecz__por-tor { justify-content: flex-start; } /* Długość paska przychodzi z HTML-a jako `--u` (0-100), bo to DANA, a nie decyzja o wyglądzie — reguła zostaje tutaj. Ten sam podział jest już w `inc/mecz-mapa-rzutow.php:594` przy pozycji rzutu. Bez tego trzeba by wypisać 101 klas użytkowych albo sięgnąć po SVG, którego ta sekcja ma nie mieć. */ .wba-mecz__por-pas { width: calc(var(--u, 0) * 1%); height: 14px; border-radius: 2px; } .wba-mecz__por-pas.is-g { background: var(--wp--preset--color--slate); } .wba-mecz__por-pas.is-o { background: var(--wp--preset--color--red-700); } /* Blok wartości ma W KAŻDYM WIERSZU TĘ SAMĄ SZEROKOŚĆ, choć w trzech niesie trzy liczby, a w pięciu jedną. Powód jest taki, że szerokość bloku wyznacza szerokość toru, a długość paska to procent toru — gdyby tory różniły się między wierszami, pasek „100 %" byłby w każdym wierszu innej długości i osiem par przestałoby się czytać jako jeden wykres. `min(12em, 56%)`, a nie sama liczba w `em`: przy 1440 px 12em (156 px) mieści liczbę i ułamek w jednej linii, a przy 375 px komórka ma 171 px i 56 % (96 px) zostawia ułamkowi („18/40 · 45,0%", zmierzone 79 px) własną linię z zapasem, zamiast wypchnąć go poza komórkę — a przelew poza komórkę to przewijanie poziome całej strony. */ .wba-mecz__por-w { flex: 0 0 min(12em, 56%); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .35em; color: var(--wp--preset--color--muted); font-size: .8125rem; font-variant-numeric: tabular-nums; } /* Liczby stoją na ZEWNĘTRZNYCH krawędziach wykresu, a paski spotykają się w środku — tak jak w szkicu Piotra. Dzięki temu obie kolumny liczb są wyrównane w pionie i da się je czytać w dół jak kolumnę tabeli, a oś pozostaje jedyną rzeczą w środku. */ .wba-mecz__por-l .wba-mecz__por-w { justify-content: flex-end; text-align: right; } .wba-mecz__por-p .wba-mecz__por-w { justify-content: flex-start; text-align: left; } /* Ułamek ze skutecznością mniejszym stopniem: to przypis do liczby punktów, a nie druga liczba tej samej rangi. NIEŁAMLIWE SĄ KAWAŁKI, A NIE CAŁOŚĆ — i powód jest inny, niż wygląda. Sprawdziłem hipotezę „nowrap da przewijanie poziome strony" i JEST ONA FAŁSZYWA: przy 375 px z najdłuższym możliwym napisem („50/100 · 100,0%") `scrollWidth − clientWidth` strony zostaje 0. Blok wartości ma `flex: 0 0 min(12em, 56%)`, ale `min-width` elementu zginanego wynosi domyślnie `auto`, więc treść PRZEPYCHA go ponad bazę zamiast wyjść poza komórkę — zmierzone: blok 81 → 94 px, a tor paska 56 → 43 px. I to jest prawdziwy koszt: tor przestaje być równy między wierszami (43 px w wierszach punktowych wobec 56 px w liczbowych), więc pasek „100 %" ma w każdym wierszu inną długość i osiem par przestaje się czytać jako jeden wykres. Dlatego napis wolno złamać MIĘDZY ułamkiem a procentem (wtedy blok i tor zostają 81/56 px, rośnie tylko wysokość: 887 → 940 px), a wewnątrz obu kawałków nie wolno — „18/" nad „40 · 45,0%" czytałoby się jak inna liczba. */ .wba-mecz__por-ul { font-size: .6875rem; } .wba-mecz__por-uf, .wba-mecz__por-pr { white-space: nowrap; } /* LEPSZY WYNIK ZNACZY POGRUBIENIE, A NIE KOLOR — i to jest cała odpowiedź na pytanie, jak nie skłamać w wierszu „straty". Przy stratach lepsza jest strona z KRÓTSZYM paskiem, więc reguła „grubsze = lepsze" musi być niezależna od długości; gdyby nośnikiem była długość albo odcień, wiersz z odwróconym kierunkiem czytałby się dokładnie na odwrót. Kontrast atramentu na karcie zmierzony: 16,1:1, a `muted` 6,25:1 — różnica jest widoczna także po wydruku na czarno-biało. POGRUBIENIE SIEDZI NA TYM, CO PORÓWNYWANE, a nie zawsze na liczbie głównej: w wierszu punktowym gruby jest SAM PROCENT, a punkty zostają cienkie. To druga połowa odpowiedzi na „dlaczego gruba liczba stoi przy krótszym pasku" — znacznik przy nazwie wiersza mówi regułę, a miejsce pogrubienia pokazuje palcem, czego ta reguła dotyczy. */ .wba-mecz__por-gl.is-lepszy, .wba-mecz__por-pr.is-lepszy { color: var(--wp--preset--color--ink); font-weight: 800; } .wba-mecz__por-nota { margin: var(--wp--preset--spacing--s-3) 0 0; color: var(--wp--preset--color--muted); } /* Wydruk: bez tego przeglądarka wycina tła i z wykresu zostaje siedem par liczb bez ani jednego paska. Liczby niosą wszystko same, więc wydruk nie byłby BŁĘDNY — ale wykres, który znika na papierze, nie jest wykresem, który „ma się drukować”. */ @media print { .wba-mecz__por-pas { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* Telefon: etykiety typu „Skuteczność rzutów za trzy" nie mieszczą się obok dwóch torów w 375 px, więc nazwa wiersza przechodzi NAD paski i bierze całą szerokość. Oś zostaje na środku, bo to ona jest techniką odczytu. */ @media (max-width: 600px) { .wba-mecz__por-t, .wba-mecz__por-t thead, .wba-mecz__por-t tbody, .wba-mecz__por-t tr { display: block; } .wba-mecz__por-t thead tr { display: flex; justify-content: space-between; } .wba-mecz__por-t thead th:first-child { display: none; } .wba-mecz__por-t tbody tr { display: grid; grid-template-columns: 1fr 1fr; padding-top: var(--wp--preset--spacing--s-3); } /* Nazwa wiersza bierze całą szerokość, więc do prawej wisiałaby nad samym gościem, jakby dotyczyła tylko jego. Na środku stoi nad osią, czyli nad tym, co opisuje. Na biurku zostaje do prawej — tam nazwa sąsiaduje ze swoją liczbą i to ona jest punktem odniesienia. */ .wba-mecz__por-nm { grid-column: 1 / -1; padding: 0 0 var(--wp--preset--spacing--s-1) !important; text-align: center; } /* LICZBA GŁÓWNA ZAWSZE WE WŁASNEJ LINII. Bez tego krótka („8") mieści się obok ułamka, a dłuższa („36") już nie — i trzy wiersze punktowe mają liczbę raz nad ułamkiem, raz w jednej linii z nim, czyli ten sam wiersz wygląda za każdym razem inaczej. Kosztuje jedną linię w jednym wierszu z trzech, a daje im wszystkim ten sam kształt. */ .wba-mecz__por-gl { flex: 0 0 100%; } /* Nagłówek przestał być wierszem tabeli, więc pionowa kreska osi zostaje przy nim wisieć jako ogonek pod nazwą drużyny — zmierzone na zrzucie: 9 px kreski pod „FASOLKI" bez niczego pod spodem. Oś rysują same komórki wartości. */ .wba-mecz__por-kg { border-right: 0; } } /* ---- Rozbicie wzoru EFF w dymku ----------------------------------------- */ /* Trzy linie: co dodaje, co odejmuje, wynik. Osobny blok, bo w dymku nagłówka go nie ma — `hidden` przełącza skrypt. Ta sama pułapka co przy legendzie: `display: grid` w regule klasowej bije rdzeniowe `[hidden]`. */ .wba-mecz__bs-rach { display: grid; gap: 2px; margin-top: var(--wp--preset--spacing--s-2); padding-top: var(--wp--preset--spacing--s-2); border-top: 1px solid rgba(255, 255, 255, .28); font-variant-numeric: tabular-nums; } .wba-mecz__bs-rach[hidden] { display: none; } .wba-mecz__bs-rach-l { color: #D7DBE3; } /* Wynik odbity od prawej i pogrubiony — to jest liczba, którą czytelnik ma przyłożyć do komórki, w którą przed chwilą kliknął. #D7DBE3 na `slate` ma zmierzone 8,6:1, biel 12,5:1, więc wiersz wyniku jest najjaśniejszy z trzech i hierarchia czyta się także w skali szarości. */ .wba-mecz__bs-rach-w { justify-self: end; margin-top: 2px; color: var(--wp--preset--color--paper); font-weight: 800; } /* PÓŁPAUZA ZNIKA, GDY NIE MA OPISU — bo to ona oddziela czoło od opisu. W dymku z rozbiciem czoło niesie nazwisko zawodnika (albo „Razem"), a opisu nie ma wcale, więc półpauza nie ma czego oddzielać. Warunkiem jest PUSTY OPIS, a nie obecność rozbicia. Poprzednia wersja gasiła półpauzę klasą `is-rachunek`, czyli o krok za daleko: przy rozbiciu opisu faktycznie nie ma, ale nie każdy brak opisu bierze się z rozbicia — i dymek ścieżki awaryjnej wychodził jako „NAZWISKO —" i nic dalej. Klasę wstawia skrypt; `:has()` dałoby to samo bez klasy, ale reszta arkusza nigdzie nie sięga selektorem wstecz i nie ma powodu zaczynać tutaj. */ .wba-mecz__bs-dymek.is-bezopisu .wba-mecz__bs-dymek-s::after { content: none; } .wba-mecz__bs-dymek-t:empty { display: none; }
` odbiera mu `display: table-cell` — przestaje być komórką, dostaje anonimowe pudełko, szerokości z `