/** * Moduł Logowanie — style frontendu. * * Kolory akcentu wstrzykiwane są inline przez PB_Logowanie::zbuduj_zmienne_css(). * Pozostała paleta jest zdefiniowana poniżej i nadpisywana w trybie ciemnym. * * @package PB_Toolkit */ .pb-logowanie { --pb-log-tlo: #f6f6f7; --pb-log-tlo-karta: #ffffff; --pb-log-tlo-kafelka: #ffffff; --pb-log-tekst: #16161a; --pb-log-tekst-slaby: #4a4a55; --pb-log-obramowanie: #e2e2e8; --pb-log-obramowanie-pola: #d5d5de; --pb-log-cien: 0 1px 3px rgba(16, 16, 26, 0.06); --pb-log-blad: #c0341d; --pb-log-sukces: #1c7c4a; --pb-log-promien: 12px; --pb-log-promien-duzy: 16px; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); /* * Panel z formularzem rozciąga się na oba wiersze. Bez jawnych wysokości * przeglądarka rozdziela jego wysokość po równo między wiersze, przez co * między opisem a kafelkami powstawała pusta przestrzeń. Pierwszy wiersz * dostaje więc rozmiar treści (auto), a cała nadwyżka trafia do drugiego (1fr). */ grid-template-rows: auto 1fr; grid-template-areas: "naglowek panel" "korzysci panel"; align-items: start; gap: 32px 56px; max-width: 1180px; margin: 0 auto; padding: 48px; background: var(--pb-log-tlo); border-radius: var(--pb-log-promien-duzy); color: var(--pb-log-tekst); line-height: 1.6; } /* * Motyw Newspaper ładuje Font Awesome 4, którego reguły potrafią przejąć * elementy . Wymuszamy rodzinę i grubość właściwą dla FA 6, żeby ikony * modułu renderowały się niezależnie od kolejności arkuszy. */ .pb-logowanie i.fa-solid, .pb-logowanie i.fa-regular { font-family: "Font Awesome 6 Free" !important; font-style: normal; -webkit-font-smoothing: antialiased; } .pb-logowanie i.fa-solid { font-weight: 900 !important; } .pb-logowanie i.fa-regular { font-weight: 400 !important; } .pb-logowanie i.fa-brands { font-family: "Font Awesome 6 Brands" !important; font-weight: 400 !important; font-style: normal; } .pb-logowanie *, .pb-logowanie *::before, .pb-logowanie *::after { box-sizing: border-box; } /* --------------------------------------------------------------------------- Tryb ciemny — systemowy oraz sterowany atrybutem/klasą na . Docelowy globalny przełącznik portalu wystarczy, że ustawi jedną z wartości: albo . --------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { html:not([data-motyw="jasny"]):not(.pb-motyw-jasny) .pb-logowanie { --pb-log-tlo: #16161a; --pb-log-tlo-karta: #1e1e24; --pb-log-tlo-kafelka: #23232b; --pb-log-tekst: #f2f2f5; --pb-log-tekst-slaby: #b4b4c0; --pb-log-obramowanie: #32323c; --pb-log-obramowanie-pola: #3d3d49; --pb-log-cien: 0 1px 3px rgba(0, 0, 0, 0.4); } } html[data-motyw="ciemny"] .pb-logowanie, html.pb-motyw-ciemny .pb-logowanie { --pb-log-tlo: #16161a; --pb-log-tlo-karta: #1e1e24; --pb-log-tlo-kafelka: #23232b; --pb-log-tekst: #f2f2f5; --pb-log-tekst-slaby: #b4b4c0; --pb-log-obramowanie: #32323c; --pb-log-obramowanie-pola: #3d3d49; --pb-log-cien: 0 1px 3px rgba(0, 0, 0, 0.4); } /* --------------------------------------------------------------------------- Kolumna treści. --------------------------------------------------------------------------- */ .pb-logowanie__naglowek { grid-area: naglowek; } /* Motyw Newspaper narzuca własne rozmiary nagłówkom i akapitom w treści wpisu — stąd wzmocnione selektory i !important przy typografii modułu. */ .pb-logowanie h1.pb-logowanie__tytul { margin: 0 0 16px; font-size: 30px !important; line-height: 1.25 !important; font-weight: 700; letter-spacing: -0.01em; color: var(--pb-log-tekst); } .pb-logowanie p.pb-logowanie__opis { margin: 0 !important; max-width: 34em; font-size: 15px !important; line-height: 1.7 !important; color: var(--pb-log-tekst-slaby); } /* --------------------------------------------------------------------------- Kafelki korzyści. --------------------------------------------------------------------------- */ .pb-logowanie__korzysci { grid-area: korzysci; } .pb-logowanie h2.pb-logowanie__korzysci-naglowek { margin: 0 0 14px; font-size: 17px !important; line-height: 1.4 !important; font-weight: 600; color: var(--pb-log-tekst); } /* Motyw dokłada listom w treści wpisu wcięcie (padding-left) i punktory — zerujemy je, żeby kafelki trzymały równą lewą krawędź z tytułem i opisem. */ .pb-logowanie ul.pb-logowanie__kafelki { display: grid; gap: 12px; margin: 0 !important; padding: 0 !important; list-style: none !important; } .pb-logowanie ul.pb-logowanie__kafelki > li.pb-logowanie__kafelek { margin: 0 !important; padding: 16px 18px; list-style: none !important; text-indent: 0; } .pb-logowanie ul.pb-logowanie__kafelki > li.pb-logowanie__kafelek::before, .pb-logowanie ul.pb-logowanie__kafelki > li.pb-logowanie__kafelek::marker { content: none; } .pb-logowanie__kafelek { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; background: var(--pb-log-tlo-kafelka); border: 1px solid var(--pb-log-obramowanie); border-radius: var(--pb-log-promien); box-shadow: var(--pb-log-cien); } .pb-logowanie__kafelek-tresc { min-width: 0; } .pb-logowanie__kafelek-ikona { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 20px; /* Wysokość równa wysokości linii tytułu — dzięki temu ikona siedzi dokładnie na jego osi, a nie przy górnej krawędzi kafelka. */ height: 1.45em; margin: 0; font-size: 15px; line-height: 1; color: var(--pb-log-akcent); } /* Motyw Newspaper stylizuje nagłówki h2/h3 własnym kolorem o wysokiej specyficzności — stąd wzmocniony selektor i !important. */ .pb-logowanie .pb-logowanie__kafelek .pb-logowanie__kafelek-tytul, .pb-logowanie h3.pb-logowanie__kafelek-tytul { margin: 0 0 3px !important; padding: 0; font-size: 15px !important; line-height: 1.45 !important; font-weight: 700; color: var(--pb-log-akcent) !important; } .pb-logowanie .pb-logowanie__kafelek-ikona i { color: inherit; } /* Akapit w treści wpisu ma w motywie własny margin-bottom — to on tworzył nadmiarową przestrzeń pod opisem kafelka. */ .pb-logowanie .pb-logowanie__kafelek-opis, .pb-logowanie p.pb-logowanie__kafelek-opis { margin: 0 !important; padding: 0; font-size: 13.5px !important; line-height: 1.5 !important; color: var(--pb-log-tekst-slaby); } /* --------------------------------------------------------------------------- Panel z formularzami. --------------------------------------------------------------------------- */ .pb-logowanie__panel { grid-area: panel; padding: 32px; background: var(--pb-log-tlo-karta); border: 1px solid var(--pb-log-obramowanie); border-radius: var(--pb-log-promien); box-shadow: var(--pb-log-cien); } .pb-logowanie__zakladki { display: flex; justify-content: center; gap: 36px; margin-bottom: 28px; } .pb-logowanie__zakladka { position: relative; padding: 0 0 10px; background: none; border: 0; border-bottom: 2px solid transparent; font-family: inherit; font-size: 17px; font-weight: 500; color: var(--pb-log-tekst-slaby); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .pb-logowanie__zakladka:hover { color: var(--pb-log-tekst); } .pb-logowanie__zakladka.is-aktywna { color: var(--pb-log-tekst); border-bottom-color: var(--pb-log-akcent); font-weight: 600; } .pb-logowanie__ikona-stanu { margin: 8px 0 20px; font-size: 44px; line-height: 1; text-align: center; color: var(--pb-log-tekst); } .pb-logowanie__podtytul { margin: 0 0 10px; font-size: 24px; font-weight: 600; text-align: center; color: var(--pb-log-tekst); } .pb-logowanie__podopis { margin: 0 auto 24px; max-width: 26em; font-size: 16px; text-align: center; color: var(--pb-log-tekst-slaby); } /* --------------------------------------------------------------------------- Logowanie społecznościowe (Nextend Social Login). --------------------------------------------------------------------------- */ /* Blok przycisków społecznościowych siedzi teraz wewnątrz formularza, pod checkboxami zgód i pod separatorem „lub". */ .pb-logowanie__social { display: grid; gap: 12px; margin: 0 0 20px; } /* * Nextend Social Login renderuje strukturę: * .nsl-container > .nsl-container-buttons > a[data-provider] > .nsl-button * Wygląd niesie wewnętrzny
, z inline'owym * background-color, dlatego nadpisania muszą celować właśnie w niego * i korzystać z !important (inline style wygrywa z arkuszem). */ .pb-logowanie__social .nsl-container, .pb-logowanie__social .nsl-container-block, .pb-logowanie__social .nsl-container-buttons { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; text-align: left !important; } .pb-logowanie__social .nsl-container-buttons > a, .pb-logowanie__social a[data-provider] { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; text-decoration: none !important; } .pb-logowanie__social .nsl-button { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; width: 100% !important; max-width: none !important; min-height: 56px !important; height: auto !important; margin: 0 !important; padding: 0 20px !important; background: var(--pb-log-tlo-karta) !important; background-color: var(--pb-log-tlo-karta) !important; border: 1px solid var(--pb-log-obramowanie-pola) !important; border-radius: 8px !important; box-shadow: none !important; color: var(--pb-log-tekst) !important; font-family: inherit !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.4 !important; transition: border-color 0.15s ease; } .pb-logowanie__social a[data-provider]:hover .nsl-button { border-color: var(--pb-log-akcent) !important; } /* Kwadratowy kafelek z logotypem — usuwamy tło i pionową kreskę oddzielającą. */ .pb-logowanie__social .nsl-button-svg-container { display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 24px !important; height: 24px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; } .pb-logowanie__social .nsl-button-svg-container svg { width: 22px !important; height: 22px !important; margin: 0 !important; } .pb-logowanie__social .nsl-button-label-container { flex: 1 1 auto !important; margin: 0 !important; padding: 0 !important; background: none !important; color: inherit !important; font-family: inherit !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.4 !important; text-align: left !important; text-transform: none !important; letter-spacing: normal !important; } .pb-logowanie__social .nsl-button-label-container b, .pb-logowanie__social .nsl-button-label-container strong { font-weight: 600 !important; } /* Warianty marek — NSL nadaje im własne tła; wygaszamy je na rzecz spójnej karty. */ .pb-logowanie__social .nsl-button-facebook, .pb-logowanie__social .nsl-button-google, .pb-logowanie__social .nsl-button-apple, .pb-logowanie__social .nsl-button-default { background: var(--pb-log-tlo-karta) !important; background-color: var(--pb-log-tlo-karta) !important; color: var(--pb-log-tekst) !important; } /* * Facebook w domyślnej skórce NSL to biały logotyp na niebieskim przycisku. * Skoro tło przycisku zrównaliśmy z kartą, biała ikona stawała się niewidoczna * — przemalowujemy ją więc na firmowy niebieski. Reguła obejmuje zarówno * atrybut `fill` w SVG, jak i warstwę `path`, bo NSL bywa niekonsekwentne. */ .pb-logowanie__social .nsl-button-facebook .nsl-button-svg-container svg, .pb-logowanie__social .nsl-button-facebook .nsl-button-svg-container svg path, .pb-logowanie__social a[data-provider="facebook"] svg, .pb-logowanie__social a[data-provider="facebook"] svg path { fill: #1877F2 !important; color: #1877F2 !important; } /* Zabezpieczenie na wypadek logotypów rysowanych obrysem, a nie wypełnieniem. */ .pb-logowanie__social .nsl-button-facebook .nsl-button-svg-container svg [stroke]:not([stroke="none"]) { stroke: #1877F2 !important; } .pb-logowanie__separator { display: flex; align-items: center; gap: 14px; margin: 20px 0; color: var(--pb-log-tekst-slaby); font-size: 15px; } .pb-logowanie__separator::before, .pb-logowanie__separator::after { content: ""; flex: 1; height: 1px; background: var(--pb-log-obramowanie); } /* --------------------------------------------------------------------------- Formularze. --------------------------------------------------------------------------- */ .pb-logowanie__widok[hidden] { display: none; } .pb-logowanie__pole { margin-bottom: 18px; } .pb-logowanie__etykieta { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 600; color: var(--pb-log-tekst); } .pb-logowanie__etykieta--wymagane::after { content: " *"; color: var(--pb-log-blad); font-weight: 700; } .pb-logowanie__gwiazdka { color: var(--pb-log-blad); font-weight: 700; } /* * Oznaczenie pola rekomendowanego. Zawsze indeks górny w kolorze przewodnim — * ten sam wygląd przy treści zgody i w legendzie pod formularzem. * Wyniesienie realizuje `top`, a nie `vertical-align: super`, dzięki czemu * znak nie rozpycha interlinii wiersza. */ .pb-logowanie__plus, sup.pb-logowanie__plus { position: relative; top: -0.4em; display: inline-block; margin-left: 2px; color: var(--pb-log-akcent); font-size: 0.85em; font-weight: 700; line-height: 0; vertical-align: baseline; } /* W legendzie znak otwiera wiersz, więc lewy margines jest zbędny. */ .pb-logowanie__legenda .pb-logowanie__plus { margin-left: 0; margin-right: 2px; } .pb-logowanie__legenda { margin: 0 0 16px; font-size: 13px; line-height: 1.7; color: var(--pb-log-tekst-slaby); } .pb-logowanie .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* * Ramka i tło należą do kontenera, a nie do samego pola. Dzięki temu ikona * i przycisk podglądu hasła są zwykłymi elementami flex, które centruje * `align-items: center` — bez pozycjonowania absolutnego i bez zależności * od metryki glifu Font Awesome, która wcześniej znosiła ikonę w dół. */ .pb-logowanie__input-wrap { position: relative; display: flex; align-items: center; min-height: 56px; /* Żaden element wewnątrz nie może rozepchnąć pola w pionie. */ max-height: 56px; background: var(--pb-log-tlo-karta); border: 1px solid var(--pb-log-obramowanie-pola); border-radius: 8px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .pb-logowanie__input-wrap:focus-within { border-color: var(--pb-log-akcent); box-shadow: 0 0 0 3px var(--pb-log-akcent-cien); } /* * `line-height: normal` jest tu istotne. Przy jawnej wartości (np. 1.4) * przeglądarka układa wiersz pola według metryki bieżącego kroju, a znaki * maskujące hasło (•) pochodzą zwykle z innego kroju niż zwykły tekst — * przez co linia kropek wypadała wyżej niż odsłonięty tekst. Przy wartości * `normal` pionowe wyśrodkowanie zawartości pola bierze na siebie * przeglądarka i oba tryby wyglądają tak samo. * * Typ pola wymieniamy jawnie, bo motyw stylizuje `input[type="password"]` * osobno od pozostałych. */ .pb-logowanie__input, .pb-logowanie input.pb-logowanie__input[type="text"], .pb-logowanie input.pb-logowanie__input[type="email"], .pb-logowanie input.pb-logowanie__input[type="password"] { flex: 1 1 auto; width: 100%; min-width: 0; height: 54px !important; min-height: 54px; max-height: 54px; margin: 0 !important; padding: 0 16px !important; background: transparent !important; border: 0 !important; border-radius: 8px; box-shadow: none !important; color: var(--pb-log-tekst); font-family: inherit !important; font-size: 16px !important; line-height: normal !important; letter-spacing: normal; vertical-align: middle; } .pb-logowanie__input-ikona ~ .pb-logowanie__input { padding-left: 4px; } .pb-logowanie__input:focus { outline: none; border: 0 !important; box-shadow: none !important; } .pb-logowanie__input::placeholder { color: var(--pb-log-tekst-slaby); opacity: 0.75; } .pb-logowanie__input-ikona { position: static; flex: 0 0 auto; align-self: center; display: flex; align-items: center; justify-content: center; width: 42px; height: 24px; font-size: 14px; line-height: 1; color: var(--pb-log-tekst-slaby); pointer-events: none; } .pb-logowanie__input-ikona i { display: block; line-height: 1; } /* * Przycisk ma jawną, niską wysokość i `align-self: center`. Przy `stretch` * jego wysokość zastępcza (padding i line-height dziedziczone po motywie) * wyznaczała wysokość całej linii flex, przez co pole hasła robiło się * wyższe od pozostałych. Motyw stylizuje elementy