/** * Moje premie — style strony zbiorczej. * * KOLORY PRZEZ TOKENY `--mz-*` z Monazo SOT (`assets/tokens.css`), każdy * z wartością zapasową zapisaną WPROST. Wartość zapasowa nie może zależeć od * tego, czego właśnie brakuje, więc nie ma tu zagnieżdżonych `var()`. * * Dzięki tokenom tryb ciemny działa bez ani jednej reguły `[data-scheme]` * w tym pliku: przełącza je SOT na ``, a strona po prostu ich używa. * Gdyby SOT był starszy albo nieaktywny, strona wygląda poprawnie w barwach * trybu jasnego zamiast dziedziczyć nieistniejące zmienne i zniknąć. */ /* ── Kontener zapytań ───────────────────────────────────────────────────── Moduł bywa osadzony w wąskim panelu nakładki (336 px) przy DESKTOPOWYM viewporcie, więc `@media` nigdy się tam nie odpali — mierzy okno, nie pojemnik. Wszystkie reguły zależne od szerokości MODUŁU muszą więc być `@container`. Kontener jest NAZWANY celowo: bezimienne zapytanie wiąże się z najbliższym przodkiem-kontenerem, więc gdyby host kiedyś zrobił kontenerem swój panel, reguły zaczęłyby pytać o jego szerokość — cicho i w złą stronę. `container-type: inline-size` implikuje `contain: layout style inline-size`, czyli robi z korzenia blok zawierający dla potomków pozycjonowanych absolutnie. Sprawdzone: jedyny taki element to plakietka wiersza, a wiersz ma własne `position: relative`, więc nic nie ucieka. `position: fixed` w module nie występuje. Progi: 420 px dla układu dwukolumnowego (panel na telefonie bywa szerszy niż 336 px, a i tak potrzebuje jednej kolumny), 559 px dla reguł, które dotąd wisiały na `@media` — te przenosimy 1:1, bo od początku opisywały szerokość MODUŁU, a nie urządzenie. */ .mzpf-bonuses { container: mzpf-bonuses / inline-size; } .mzpf-bonuses { margin: 1.6em 0; color: var( --mz-ink, #111111 ); line-height: 1.55; } .mzpf-bonuses__heading { margin: 0 0 18px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; } /* ── Trzy sumy ───────────────────────────────────────────────────────────── Kompaktowe od początku: ta sekcja trafia do popupu o szerokości ~500 px, gdzie opisy pod kwotami zjadały pół ekranu. Opis zostaje w `title`, żeby wyjaśnienie było dostępne, ale nie zajmowało miejsca. */ .mzpf-sums { display: grid; grid-template-columns: repeat( 2, 1fr ); gap: 1px; background: var( --mz-line, #ececee ); border: 1px solid var( --mz-line, #ececee ); border-radius: 10px; overflow: hidden; margin-bottom: 12px; } .mzpf-sums__item { background: var( --mz-paper, #fff ); padding: 20px 12px; min-width: 0; } .mzpf-sums__label { display: block; margin: 0; font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var( --mz-muted, #6e6e6e ); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mzpf-sums__value { display: block; margin: 3px 0 0; font-size: 18px; font-weight: 700; letter-spacing: .02rem; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; } /* KOLOR KWOT — trzy zabezpieczenia naraz, bo dwa poprzednie podejścia przegrały z motywem: [1] element to `span`, nie `p` — `.entry-content p` w niego nie trafia, [2] selektor z prefiksem i atrybutem ma (0,3,1), więc bije praktycznie każdy realny selektor motywu, [3] `!important` na wypadek, gdyby motyw też go użył. Pierwsze z nich wystarcza samo; pozostałe są zapasem. */ .mzpf-bonuses span.mzpf-sums__value[data-mzpf-sum] { color: var( --mz-green, #4cbb17 ) !important; } /* Suma „Razem” jest sumą pozostałych, więc nie konkuruje z nimi kolorem. */ /* Objaśnienie pod kwotą. Widoczne, bo `title` na telefonie jest nieosiągalny — nie ma czym najechać, a sama etykieta nie mówi, skąd bierze się liczba. */ .mzpf-sums__desc { display: block; margin: 3px 0 0; font-size: 11.5px; line-height: 1.3; color: var( --mz-faint, #9a9a9a ); } /* ── Wąski pojemnik (panel nakładki) ─────────────────────────────────────── Sumy zostają w DWÓCH KOLUMNACH także tutaj — miejsca starczy, a ustawienie ich jedna pod drugą robi z dwóch liczb dwa ekrany i wygląda na awarię układu. Zmieniamy tylko to, co przy ~167 px na kolumnę faktycznie nie mieści się w projekcie: oddech kafelków i skracanie etykiety. */ @container mzpf-bonuses ( max-width: 420px ) { /* Kafelki są teraz jeden pod drugim, więc pionowy oddech 20 px robi z dwóch liczb dwa ekrany. */ .mzpf-sums__item { padding: 14px 12px; } /* Skracanie miało sens obok drugiej kolumny. W jednej kolumnie etykieta ma całą szerokość i nie ma czego skracać — a wielokropek na „DO ZDOBYCIA” wyglądał jak usterka. */ /* ZAWIJANIE, NIE WIELOKROPEK. W wąskiej kolumnie skracanie zamieniało „DO ZDOBYCIA” w „DO ZDOBY…”, co wygląda na usterkę. Druga linia jest brzydsza od jednej, ale zawsze czytelna — a przy realnych etykietach i tak się nie pojawia. */ .mzpf-sums__label { white-space: normal; overflow: visible; text-overflow: clip; } /* Trzy filtry po ~110 px nie mieszczą się w jednym rzędzie i łamią się 2 + 1, zostawiając sierotę. Równy podział trzyma je w jednej linii. */ .mzpf-filters__btn { flex: 1 1 0; min-width: 0; justify-content: center; text-align: center; } } /* ── Filtry ────────────────────────────────────────────────────────────── */ .mzpf-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .mzpf-filters__btn { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var( --mz-line-2, #dbdbdb ); border-radius: 10px; background: transparent; color: var( --mz-muted, #6e6e6e ); font: inherit; font-size: 13.5px; transition: border-color .18s, color .18s; } .mzpf-filters__btn:hover { color: var( --mz-ink, #111111 ); } /* Wybrany filtr: kontur w akcencie, bez wypełnienia — tak samo jak plakietki kwot w krokach, żeby ta sama rola miała ten sam ciężar wizualny. */ .mzpf-filters__btn[aria-pressed="true"] { border-color: var( --mz-green, #4cbb17 ); color: var( --mz-green, #4cbb17 ); font-weight: 600; } .mzpf-filters__btn:focus-visible { outline: 2px solid var( --mz-green, #4cbb17 ); outline-offset: 2px; } .mzpf-filters__count { font-size: 12px; font-variant-numeric: tabular-nums; opacity: .7; } .mzpf-filters__count:empty { display: none; } /* ── Lista ofert ─────────────────────────────────────────────────────────── WIERSZE, NIE KARTY. Układ poziomy: logo | treść | akcja. Jedna kolumna przy każdej szerokości — w popupie 500 px siatka dwukolumnowa łamała tytuły ofert na cztery linie. */ .mzpf-cards { display: flex; flex-direction: column; gap: 13px; } .mzpf-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var( --mz-line, #ececee ); border-radius: 10px; background: var( --mz-paper, #fff ); min-width: 0; } /* UKOŃCZONA OFERTA NIE ZMIENIA RAMKI. Zielony kontur wokół całego wiersza ciągnął wzrok do pozycji JUŻ ZAMKNIĘTEJ, a lista ma prowadzić do tych w toku. Sygnał „ukończone” niosą: zapełniony pasek, „Odebrano X z X” i przycisk „Cofnij wszystkie” zamiast „Odhacz wszystkie”. Ta sama decyzja co przy odhaczonym kroku w Monazo SOT. Lista ulubionych takiej reguły nigdy nie miała — sprawdzone. */ /* Zakończona edycja: BEZ zmiany tła — wiersz zostaje na kolorze karty, żeby lista miała jednolitą powierzchnię. Wygaszamy wyłącznie treść i pasek. */ .mzpf-row[data-ended="true"] .mzpf-row__title, .mzpf-row[data-ended="true"] .mzpf-row__stat, .mzpf-row[data-ended="true"] .mzpf-row__steps { color: var( --mz-faint, #9a9a9a ); } .mzpf-row[data-ended="true"] .mzpf-row__stat strong { color: var( --mz-muted, #6e6e6e ); } /* Logo banku razem z resztą. Tekst gaśnie zmianą koloru na `--mz-faint`, ale grafika koloru nie dziedziczy — zostawała w pełnej barwie marki i przyciągała wzrok do wiersza, który właśnie mówi „to już nieaktualne”. Dwa zabiegi, bo każdy odpowiada za co innego: `grayscale(1)` zdejmuje barwę marki — to jest samo „wyszarzenie”, `opacity(.6)` zrównuje kontrast z wygaszonym tekstem; sama skala szarości zostawia znak równie ciemny jak przedtem. W jednej deklaracji `filter`, nie osobną własnością `opacity`: wynik jest ten sam, a `filter` i tak tworzy kontekst nakładania, więc drugi byłby nadmiarowy. Obejmuje też kafelek zastępczy przy braku grafiki (`[data-empty="true"]`), żeby wiersz bez logo wygaszał się tak samo. Bez przejścia: `data-ended` nie zmienia się w locie — wiersz z tym stanem powstaje od razu przy przebudowie listy. */ .mzpf-row[data-ended="true"] .mzpf-row__logo { filter: grayscale( 1 ) opacity( .6 ); } /* ── Logo banku, kwadrat 1:1 ── Białe tło w OBU motywach: znaki banków są projektowane na jasne podłoże i na ciemnym po prostu znikają. */ .mzpf-row__logo { flex: none; width: 44px; height: 44px; /* Kafelek to SAMA GRAFIKA: bez tła, bez obramowania, bez wyściółki. Zaokrąglenie siedzi na `img`, nie na kontenerze — inaczej biały prostokąt tła wystawał zza logo i wyglądał jak ramka. UWAGA: logo z przezroczystym tłem będzie się teraz zlewać z ciemnym motywem. Znaki banków są zwykle wgrywane z własnym tłem, ale to warto sprawdzić po wgraniu. */ overflow: hidden; display: grid; place-items: center; } .mzpf-row__logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; display: block; } /* Brak grafiki: kafelek zostaje, żeby lista nie straciła pionu. */ .mzpf-row__logo[data-empty="true"] { background: var( --mz-inset, #f4f4f3 ); border-radius: 10px; /* Tu ramka zostaje: bez niej nie byłoby widać, że grafiki brakuje. */ border: 1px dashed var( --mz-line-2, #dbdbdb ); } .mzpf-row__body { flex: 1; min-width: 0; } .mzpf-row__head { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .mzpf-row__title { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; color: var( --mz-ink, #111111 ); text-decoration: none; } a.mzpf-row__title:hover { color: var( --mz-green, #4cbb17 ); } /* Stała pozycja niezależna od długości tytułu — w nagłówku plakietka skakała między wierszami. */ .mzpf-row__badge { /* W LINII Z TYTUŁEM, nie absolutnie w rogu. Pozycjonowanie absolutne wymuszało stałą rezerwację `padding-right` w nagłówku — także w wierszach bez plakietki — a w wąskim panelu plakietka siadała na łamiącym się tytule. Jako `inline-block` z `nowrap` płynie jak kolejne słowo. `vertical-align: middle` zamiast linii bazowej: plakietka ma własną ramkę i padding, więc na linii bazowej wystawałaby pod tekst. */ display: inline-block; vertical-align: middle; margin-left: 6px; font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var( --mz-muted, #6e6e6e ); background: var( --mz-paper, #fff ); border: 1px solid var( --mz-line-2, #dbdbdb ); border-radius: 8px; padding: 2px 7px; white-space: nowrap; /* Tytuł bywa odnośnikiem — plakietka nie ma dziedziczyć podkreślenia. */ text-decoration: none; } /* * Tor paska postępu. * * `--mz-line-2`, NIE `--mz-inset`. Ten drugi to token „zagłębienia” i pasuje * tam, gdzie element jest wpuszczony w kartę — a pasek leży NA karcie, czyli * na `--mz-paper`. Różnica wychodziła w obu motywach, w ciemnym drastycznie: * * jasny: tor #f4f4f3 na karcie #fff → trzy odcienie bieli, ledwo widać * ciemny: tor #1c1c1c na karcie #232323 → tor CIEMNIEJSZY niż tło, znika * * `--mz-line-2` (#dbdbdb / #454545) jest przeznaczony do obramowań elementów * i czyta się na obu tłach bez ani jednej reguły `[data-scheme]`. * * Wysokość 5px zamiast 3px: pasek niesie informację (ile z kwoty odebrane), * więc ma być widoczny bez wpatrywania się. Więcej zmieniłoby charakter * wiersza z „subtelny wskaźnik” na „element główny”. */ .mzpf-row__track { height: 5px; border-radius: 99px; background: var( --mz-line-2, #dbdbdb ); overflow: hidden; margin-top: 7px; } .mzpf-row__fill { display: block; height: 100%; border-radius: 99px; background: var( --mz-green, #4cbb17 ); /* Przejście napędza `paint()`, ustawiając najpierw wartość poprzednią. */ transition: width .45s cubic-bezier( .16, 1, .3, 1 ); } .mzpf-row[data-ended="true"] .mzpf-row__fill { background: var( --mz-faint, #9a9a9a ); } .mzpf-row__foot { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; min-width: 0; } .mzpf-row__stat { display: inline-block; margin: 0; font-size: 12.5px; color: var( --mz-muted, #6e6e6e ); font-variant-numeric: tabular-nums; white-space: nowrap; } .mzpf-row__stat strong { color: var( --mz-green, #4cbb17 ); font-weight: 700; } .mzpf-row__steps { display: inline-block; margin: 0; font-size: 12.5px; color: var( --mz-faint, #9a9a9a ); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Gdy „Odebrano X z Y” już niesie postęp, licznik kroków obok byłby powtórzeniem — chowamy go na wąskim ekranie. */ /* ── Stopka na wąskim ekranie ── Przy 390 px viewportu na treść wiersza zostaje ~270 px, a kwota, separator i przycisk potrzebują ~310 px — przycisk wychodził poza kontener i dawał się kliknąć tylko w połowie. Rozkładamy stopkę na dwa wiersze: kwota ← cała szerokość licznik kroków akcja ← rozdzielone Licznik kroków WRACA (był ukryty, bo i tak się nie mieścił) — w drugim wierszu jest na niego miejsce z zapasem. */ /* Pasmo 421–559 px: pojemnik jest wąski, ale tekst wciąż PEŁNY („Odebrano 4300 zł z 5300 zł · 2/4 kroków" ≈ 230 px), więc kwota bierze własny wiersz, a separator traci sens. Dolna granica jest tu KLUCZOWA. Do 0.14.1 blok zaczynał się od zera i łapał też panel nakładki (~336 px) — a tam od 0.14.0 chowamy „Odebrano" i „kroków", przez co tekst kurczy się do ~135 px i spokojnie mieści się w jednej linii. Stopka rozjeżdżała się więc na dwa wiersze mimo wolnego miejsca, a zielona kropka znikała bez powodu. */ /* ── Stopka wiersza w wąskim pojemniku ──────────────────────────────────── Kwota bierze całą pierwszą linię, a licznik kroków schodzi do DRUGIEJ i staje w jednym rzędzie z przyciskiem akcji. Do 0.15.0 to pasmo zaczynało się od 421 px, a poniżej przycisk dostawał własną, pełną linię — bo słowa „Odebrano” i „kroków” są tam ukryte i kwota z licznikiem mieściły się razem. Wychodziło z tego „Cofnij wszystkie” samotnie na dole, oderwane od czegokolwiek, i to właśnie czytało się źle. Licznik kroków obok przycisku daje drugiej linii treść i kotwiczy go po prawej. Separator gaśnie, bo ma sens WYŁĄCZNIE wtedy, gdy obie liczby stoją obok siebie — a tu stoją w różnych liniach. */ @container mzpf-bonuses ( max-width: 559px ) { .mzpf-row__foot { flex-wrap: wrap; align-items: center; row-gap: 4px; } .mzpf-row__stat { flex: 1 1 100%; } /* Separator ma sens tylko wtedy, gdy obie liczby stoją w jednej linii. */ .mzpf-row__dot { display: none; } .mzpf-row__steps { display: inline-block; } .mzpf-row__all { margin-left: auto; } } .mzpf-row__all { appearance: none; cursor: pointer; margin-left: auto; border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; /* `!important` na kolorze: motyw maluje `button:hover` selektorem o wyższej specyficzności i przycisk stawał się biały, czyli niewidoczny na jasnym tle wiersza. */ color: var( --mz-green, #4cbb17 ) !important; transition: opacity .16s; } .mzpf-row__all:hover, .mzpf-row__all:focus { opacity: .75; } .mzpf-row__all:focus-visible { outline: 2px solid var( --mz-green, #4cbb17 ); outline-offset: 3px; border-radius: 6px; } /* Stan potwierdzenia — cofnięcie usuwa ofertę z listy, więc wygląda inaczej niż zwykła akcja. */ .mzpf-row__all[data-confirm] { color: var( --mz-red-ink, #a8442a ) !important; white-space: normal; text-align: right; } /* ── „Pokaż więcej” ────────────────────────────────────────────────────── */ .mzpf-more { appearance: none; cursor: pointer; width: 100%; padding: 10px; border: 1px dashed var( --mz-line-2, #dbdbdb ); border-radius: 10px; background: none; color: var( --mz-muted, #6e6e6e ); font: inherit; font-size: 13.5px; transition: border-color .18s, color .18s; } .mzpf-more:hover { border-color: var( --mz-green, #4cbb17 ); color: var( --mz-green, #4cbb17 ); } /* ── Stany strony ──────────────────────────────────────────────────────── */ /* ZAWĘŻONE DO WŁASNEGO MODUŁU. Bez prefiksu te trzy reguły wchodziły na listę ulubionych wszędzie, gdzie oba arkusze są na stronie — i wracała tam przerywana ramka, mimo że w `favorites.css` została zdjęta. Ta sama wada co przy bursztynowym tle stanu gościa, naprawionym w 0.13.3. */ .mzpf-bonuses .mzpf-state { padding: 28px 20px; text-align: center; border: 1px dashed var( --mz-line-2, #dbdbdb ); border-radius: var( --mz-radius-sm, 14px ); } .mzpf-bonuses .mzpf-state__title { display: block; margin: 0; font-size: 16px; font-weight: 600; color: var( --mz-ink, #111111 ); } .mzpf-bonuses .mzpf-state__desc { display: block; margin: 6px 0 0; font-size: 14px; color: var( --mz-muted, #6e6e6e ); } /* Zachęta do logowania — te same barwy co komunikat przy krokach, bo to ta sama treść w innym miejscu. */ /* Stan gościa BEZ tła ostrzegawczego. Bursztyn mówił „coś poszło nie tak", a to jest zwykła pustka: nie masz jeszcze nic zapisanego. Reguła była też ZA SZEROKA — celowała w `.mzpf-state`, nie w `.mzpf-bonuses .mzpf-state`, więc wchodziła na listę ulubionych wszędzie, gdzie oba arkusze są na stronie. Po zdjęciu bursztynu z ulubionych tło i tak wracało stąd, bo ten selektor wygrywał specyficznością. */ .mzpf-bonuses .mzpf-state[data-mzpf-state-box="error"] { border-style: solid; border-color: var( --mz-red-line, #e2b4a6 ); } .mzpf-bonuses .mzpf-state[data-mzpf-state-box="error"] .mzpf-state__title { color: var( --mz-red-ink, #a8442a ); } /* ── Ruch ──────────────────────────────────────────────────────────────── */ @media ( prefers-reduced-motion: reduce ) { .mzpf-row__fill { transition: none; } } /* ── Potwierdzenie cofnięcia ─────────────────────────────────────────────── Pytanie i dwie odpowiedzi. Klikalne są WYŁĄCZNIE „Tak” i „Nie” — samo pytanie jest tekstem, żeby nie dało się potwierdzić przez przypadek. */ .mzpf-row__confirm { display: inline-flex; align-items: baseline; gap: 8px; margin-left: auto; font-size: 12.5px; flex-wrap: wrap; justify-content: flex-end; } .mzpf-row__ask { color: var( --mz-red-ink, #a8442a ); } .mzpf-row__yes, .mzpf-row__no { appearance: none; cursor: pointer; border: 1px solid var( --mz-line-2, #dbdbdb ); background: none; padding: 2px 10px; border-radius: 8px; font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; transition: border-color .16s, color .16s; } .mzpf-row__yes { color: var( --mz-red-ink, #a8442a ) !important; border-color: var( --mz-red-line, #e2b4a6 ); } .mzpf-row__no { color: var( --mz-muted, #6e6e6e ) !important; } .mzpf-row__yes:hover, .mzpf-row__no:hover { border-color: currentColor; } .mzpf-row__yes:focus-visible, .mzpf-row__no:focus-visible { outline: 2px solid var( --mz-green, #4cbb17 ); outline-offset: 2px; } /* ── Separator w stopce wiersza ──────────────────────────────────────────── Dwie liczby („Odebrano X z Y” i „2/4 kroków”) zlewały się w jeden ciąg. */ .mzpf-row__dot { flex: none; align-self: center; width: 4px; height: 4px; border-radius: 50%; background: var( --mz-green, #4cbb17 ); } /* ── Wygaszanie wiersza, który znika z listy ─────────────────────────────── Czas musi zgadzać się z `LEAVE_MS` w skrypcie. Zwijamy wysokość razem z przezroczystością, żeby wiersze pod spodem podjechały płynnie zamiast przeskoczyć po usunięciu węzła. */ .mzpf-row { transition: opacity .26s ease, height .26s ease, margin .26s ease, padding .26s ease, border-color .18s; overflow: hidden; } .mzpf-row[data-leaving] { opacity: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; pointer-events: none; } @media ( prefers-reduced-motion: reduce ) { .mzpf-row { transition: none; } } /* ── Potwierdzenie na wąskim ekranie ─────────────────────────────────────── Pytanie, kwota, licznik kroków i dwa przyciski nie mieszczą się w jednym rzędzie w popupie ani na telefonie — rozjeżdżały się na trzy linie z osieroconą kropką pośrodku. Gdy pytanie jest aktywne, stopka oddaje mu całą szerokość i chowa to, czego w tej chwili nie trzeba czytać. */ .mzpf-row__foot:has( .mzpf-row__confirm ) .mzpf-row__stat, .mzpf-row__foot:has( .mzpf-row__confirm ) .mzpf-row__steps, .mzpf-row__foot:has( .mzpf-row__confirm ) .mzpf-row__dot { display: none; } .mzpf-row__foot:has( .mzpf-row__confirm ) { flex-wrap: wrap; } .mzpf-row__confirm { flex: 1 1 100%; margin-left: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .mzpf-row__ask { flex: 1 1 auto; text-align: left; line-height: 1.35; } /* Zapas dla przeglądarek bez `:has()` — wtedy stopka nie chowa statystyki, ale pytanie i tak dostaje własny wiersz i nic się nie nachodzi. */ @supports not selector( :has( * ) ) { .mzpf-row__foot { flex-wrap: wrap; } } /* ── Potwierdzenie na wąskim ekranie ── `space-between` rozrzucało „Tak” i „Nie” na przeciwne krańce wiersza — wyglądały jak dwa niepowiązane elementy, a nie para odpowiedzi na jedno pytanie. Trzymamy je RAZEM przy prawej krawędzi. „Nie” przed „Tak”, zgodnie z konwencją iOS i Materiala: akcja potwierdzająca stoi po prawej. Świadomie NIE dajemy przycisków na pełną szerokość 50/50 — „Tak” jest tu akcją niszczącą i duży, wygodny cel zachęcałby do kliknięcia bez namysłu. */ @container mzpf-bonuses ( max-width: 559px ) { .mzpf-row__confirm { flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .mzpf-row__ask { flex: 1 1 100%; margin-bottom: 2px; } /* Wygodny cel dla kciuka; przy krótkich etykietach („Tak”) sama treść dawała przycisk szerokości palca u dziecka. */ .mzpf-row__yes, .mzpf-row__no { min-width: 64px; padding: 7px 12px; text-align: center; } } /* ── Stopka wiersza w wąskim pojemniku ──────────────────────────────────── „Odebrano 500 zł z 5000 zł · 2/4 kroków" ma ~230 px, a kolumna tekstu w panelu nakładki tyle właśnie liczy — kwota i licznik kroków nie mieszczą się w jednej linii. CSS nie zmienia treści, więc chowamy to, co i tak wynika z kontekstu: czasownik „Odebrano" i jednostkę „kroków". Zostaje „500 zł z 5000 zł · 2/4", czyli ~120 px mniej. Markup niesie pełne brzmienie, więc na stronie dedykowanej i dla czytnika ekranu nic nie ubywa. Przycisk akcji zostaje w osobnej linii CELOWO: jest jedynym elementem stopki, który się klika, a wciśnięty między dwie liczby daje cel dotykowy wklejony w tekst. */ /* Skracania opisu w wąskim pojemniku JUŻ NIE MA — i to jest decyzja, nie przeoczenie. Ukrywanie „Odebrano” i „kroków” istniało po to, żeby kwota i licznik zmieściły się w JEDNEJ linii. Odkąd kwota bierze całą pierwszą linię, a licznik schodzi do drugiej, miejsca starcza z zapasem: „Odebrano 5300 zł z 5300 zł” to ~180 px w pojemniku 336 px. Odbieranie słów bez powodu byłoby stratą informacji za nic. */ /* ── Wjazd potwierdzenia ────────────────────────────────────────────────── Pytanie „Cofnąć wszystkie?" i przyciski Tak/Nie wskakiwały dotąd w jednej klatce — stąd wrażenie szarpnięcia. Animujemy WYŁĄCZNIE przezroczystość i drobne przesunięcie, NIGDY wysokość. Wysokość wiersza i tak zmienia się w tym momencie, a jej animowanie powodowałoby w nakładce dokładnie ten sam konflikt co przy zwijaniu wiersza: scena przelicza rozmiar przy każdej klatce, więc jej własne przejście `height .42s` startuje od nowa i nigdy nie dobiega końca. Tak zmiana wysokości jest jedna, a treść wjeżdża w nią miękko. */ @keyframes mzpf-confirm-in { from { opacity: 0; transform: translateY( -3px ); } to { opacity: 1; transform: none; } } @media ( prefers-reduced-motion: no-preference ) { .mzpf-row__confirm { animation: mzpf-confirm-in .18s ease-out both; } /* Przyciski wchodzą tuż po pytaniu — najpierw wiadomo, o co pytamy, potem czym odpowiedzieć. Opóźnienie jest na granicy dostrzegalności i ma jedynie uporządkować kolejność czytania. */ .mzpf-row__yes, .mzpf-row__no { animation: mzpf-confirm-in .18s ease-out .04s both; } }