/* ===================================================================== ZGODNOŚĆ Z BLOKAMI POPRZEDNIEGO MOTYWU PO CO TEN PLIK ISTNIEJE Treść podstron zbudowanych wcześniej składa się z bloków, które sięgają po zmienne CSS o nazwach `--global-*`. Zmienne te wypisywał poprzedni motyw. Po jego zmianie znikają, a bloki tracą kolory, szerokość treści i krój pisma - zostają czarne napisy na białym tle, bez odstępów. Same bloki działają dalej, bo dostarcza je wtyczka, a nie motyw. Brakuje im wyłącznie wartości. Ten plik podstawia je z tokenów marki. Nie jest to obejście na chwilę: dopóki na stronie stoi choć jedna podstrona zbudowana blokami, ma zostać. Usunąć go wolno dopiero wtedy, gdy wszystkie podstrony przejdą na sekcje motywu. Kolejność jest istotna: plik wczytuje się PO `style.css`, bo korzysta z tokenów tam zdefiniowanych. ===================================================================== */ :root { /* Paleta. Numeracja jest cudza i celowo nie jest porządkowana - zmiana numeru oznaczałaby przepisanie tysiąca bloków. */ --global-palette1: var(--bp-akcent); --global-palette2: var(--bp-akcent-ciemny); --global-palette3: var(--bp-czern); --global-palette4: var(--bp-tekst); --global-palette5: var(--bp-tekst-2); --global-palette6: var(--bp-ramka); --global-palette7: var(--bp-ramka-lekka); --global-palette8: var(--bp-tlo-jasne); --global-palette9: var(--bp-biel); /* Te same kolory pod drugą nazwą - część bloków używa wariantu z przyrostkiem, zamiast numeru. */ --global-palette-btn-bg: var(--bp-akcent); --global-palette-btn: var(--bp-biel); --global-palette-btn-bg-hover: var(--bp-akcent-ciemny); --global-palette-btn-hover: var(--bp-biel); /* Krój i szerokość treści. */ --global-body-font-family: var(--bp-pismo); --global-heading-font-family: var(--bp-pismo); --global-content-width: var(--bp-tresc); --global-content-edge-padding: var(--bp-oddech); --global-content-narrow-width: var(--bp-tresc-waska); /* Odstęp między blokami. Wartość z poprzedniego motywu, przeliczona na `rem` przy podstawie 10 px. */ --global-vw: 2rem; --wp--style--block-gap: 2.4rem; } /* --------------------------------------------------------------------- Szerokość treści dla bloków wyrównanych. Strona, której treść to wyłącznie sekcje z własnym układem, wyłącza tę ramę klasą `bp-bez-ramy-blokow` na (od 1.23.1). Bez tego reguła niżej - przy równej wadze i późniejszym wczytaniu - zwężała takie sekcje do szerokości treści i dokładała im boczną wyściółkę. `:where()` z warunkiem nie zmienia wagi reguły: na każdej innej stronie działa dokładnie jak wcześniej. Bloki „na szerokość treści” liczą swoją szerokość z reguły motywu, a nie z własnego stylu. Bez tego każdy rozciąga się na całą stronę. --------------------------------------------------------------------- */ :where(body:not(.bp-bez-ramy-blokow)) .entry-content > *, :where(body:not(.bp-bez-ramy-blokow)) .wp-block-post-content > * { max-width: min(var(--bp-tresc), 100%); margin-inline: auto; padding-inline: var(--bp-oddech); } /* Blok „pełna szerokość” ma wyjść poza tę ramę - to jego jedyne zadanie. */ :where(body:not(.bp-bez-ramy-blokow)) .entry-content > .alignfull, :where(body:not(.bp-bez-ramy-blokow)) .wp-block-post-content > .alignfull { max-width: none; padding-inline: 0; } :where(body:not(.bp-bez-ramy-blokow)) .entry-content > .alignwide, :where(body:not(.bp-bez-ramy-blokow)) .wp-block-post-content > .alignwide { max-width: min(var(--bp-tresc), 100%); } /* --------------------------------------------------------------------- Przyciski bloków. Poprzedni motyw stylował je własną regułą globalną, której już nie ma. Podstawiamy wygląd przycisku marki, żeby nie zostały gołe napisy z ramką przeglądarki. --------------------------------------------------------------------- */ .wp-block-button__link, .kb-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem; padding: var(--bp-btn-wysciolka); border-radius: var(--bp-btn-promien); /* Wygląd przycisku motywu - ten sam co `.bp-btn` (M4). */ background: var(--bp-btn-tlo); background-image: var(--bp-btn-gradient); color: var(--bp-btn-napis); font-family: var(--bp-btn-pismo); font-size: var(--bp-btn-rozmiar, 1.7rem); font-weight: var(--bp-btn-grubosc, 600); letter-spacing: var(--bp-btn-odstep-liter, normal); line-height: 1.15; text-transform: var(--bp-btn-litery, none); text-decoration: none; } .wp-block-button__link:hover, .wp-block-button__link:focus, .kb-button:hover, .kb-button:focus { background: var(--bp-btn-tlo-hover); color: var(--bp-btn-napis-hover); } /* Wariant konturowy bloków. Stoi PO regule podstawowej celowo: przy równej wadze wygrywa reguła późniejsza. */ .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; border: 1px solid var(--bp-btn-kontur-kreska); color: var(--bp-btn-kontur-napis); } .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--bp-btn-kontur-tlo-hover); color: var(--bp-btn-kontur-napis-hover); } /* --------------------------------------------------------------------- Rodzaje przycisku jako style bloku „Przyciski" (od 1.22.0) - te same kolory co `.bp-btn--drugi`, `--pomocniczy`, `--jasny`, `--tekstowy`. --------------------------------------------------------------------- */ .wp-block-button.is-style-bp-drugi .wp-block-button__link { background: var(--bp-btn-drugi-tlo); background-image: var(--bp-btn-drugi-gradient); color: var(--bp-btn-drugi-napis); } .wp-block-button.is-style-bp-drugi .wp-block-button__link:hover { background: var(--bp-btn-drugi-tlo-hover); color: var(--bp-btn-drugi-napis-hover); } .wp-block-button.is-style-bp-pomocniczy .wp-block-button__link { background: var(--bp-btn-pomoc-tlo); color: var(--bp-btn-pomoc-napis); } .wp-block-button.is-style-bp-pomocniczy .wp-block-button__link:hover { background: var(--bp-btn-pomoc-tlo-hover); color: var(--bp-btn-pomoc-napis-hover); } .wp-block-button.is-style-bp-jasny .wp-block-button__link { background: var(--bp-btn-jasny-tlo); color: var(--bp-btn-jasny-napis); } .wp-block-button.is-style-bp-jasny .wp-block-button__link:hover { background: var(--bp-btn-jasny-tlo-hover); color: var(--bp-btn-jasny-napis-hover); } .wp-block-button.is-style-bp-tekstowy .wp-block-button__link, .wp-block-button.is-style-bp-tekstowy .wp-block-button__link:hover { padding: 0; background: none; } .wp-block-button.is-style-bp-tekstowy .wp-block-button__link { color: var(--bp-btn-tekst-napis); } .wp-block-button.is-style-bp-tekstowy .wp-block-button__link:hover { color: var(--bp-btn-tekst-napis-hover); } .wp-block-button.is-style-bp-tekstowy .wp-block-button__link::after { content: "\2192"; }