/* ============================================================================ REJESTRACJA = LOGOWANIE + JEDEN OBRAZ TLA ============================================================================ Ten plik KIEDYS był wiersz po wierszu kopia login.css (771 linii, różniła się jednym adresem obrazu). To przepis na ciche rozjazdy: każda poprawka w login.css musiała trafić tu drugi raz, a przy pierwszym przeoczeniu strona rejestracji wyglądała inaczej niż logowanie. Teraz jest odwrotnie - login.css jest jedynym źródłem stylu dla obu stron (tutaj i dla wyboru roli), a ten plik mówi tylko tyle, czego nie da się wyrazić zmienną: że tłem jest inny obrazek. Dzięki temu motyw ciemny, obwódki fokusu i przełącznik dodane w login.css automatycznie działają też tutaj. Jedyny warunek, o którym trzeba pamiętać przy dopisywaniu: reguły NIE MOGĄ stać przed @import. Przeglądarka odrzuciłaby wtedy cały arkusz jako niepoprawny składniowo, zamiast zignorować samą regułę. */ @import url('/assets/css/login.css'); /* Obraz tla. W login.css jest "/assets/img/login/bg2.png", tu ten sam układ z katalogu rejestracji. */ .login-visual { background-image: url("/assets/img/rejestracja/bg2.png"); } /* ============================================================================ AKCEPTACJA REGULAMINU ============================================================================ Checkbox "Akceptuje regulamin" w formularzu rejestracji. Style sa tutaj, a nie w login.css, bo ten element istnieje tylko na /rejestracja. Wyboru roli juz tu nie ma - od 2026-09-28 rolę wybiera sie na osobnej stronie /wybierz-role. DLACZEGO TAK DUZO STYLI: regu�a ".login-form input" z login.css daje kazdemu inputowi w formularzu wysokosc 42-44 px, kolor tla i obwódke. Dla checkboxa to zupelnie nieodpowiednie - dostalby kwadrat 44 x 44 px z obwódka jak pole tekstowe. Stad ponizej kazda wlasciwosc jest nadpisana. Layout: "display: flex" z "align-items: flex-start" i "gap". Bez tego klikanie w tekst "Akceptuje regulamin" nie zaznaczałoby checkboxa - a etykieta jest w calosci klikalna, wiec wyglada to jak zwykly tekst, ktorego nie da sie nacisnac. Dlatego "cursor: pointer" na calej etykiecie. ============================================================================ */ .login-form .checkbox-label { display: flex; align-items: flex-start; gap: 10px; /* Nadpisuje ".login-form label" z login.css. Tam etykiety sa krotkie i jednolinijkowe, a ta ma dwa elementy obok siebie i moze sie zawinac na waskim ekranie - potrzebuje luznego odstepu miedzy wierszami. */ line-height: 1.45; font-weight: 400; /* Nadpisuje kolor etykiet formularza ("var(--ink)", czyli czarny, mocny). Dla tekstu towarzyszacego checkboxowi czytelniejszy jest kolor drugorzędny - pole glowne ma zostac pole glowne. */ color: var(--muted); cursor: pointer; margin: clamp(6px, 1.2vh, 10px) 0 0; /* Nadpisuje ".login-form input" - checkbox NIE MOZE dostac min-height 42 px ani padding 0 14 px. Bez tego ponizszych wlasciwosci w ogole by nie zadzialaly, bo reguła login.css jest bardziej specyficzna niz samo "input" (selektor ".login-form input" ma dwa elementy, a "input" jeden). */ min-height: 0; padding: 0; border: none; background: none; box-shadow: none; text-align: left; } .login-form .checkbox-label input[type="checkbox"] { /* 20 px to najmniejszy rozmiar, ktory wygodnie trafia sie palcem na telefonie, a jednocześnie nie przyciąga wiecej uwagi niz sam tekst. */ flex: 0 0 auto; width: 20px; height: 20px; /* "min-height: 0" MUSI byc tutaj, a nie tylko na etykiecie. Reguła ".login-form input" z login.css ustawia "min-height: clamp(42px, 5vh, 44px)" dla kazdego pola, a "min-height" ZAWSZE wygrywa z "height" - niezaleznie od tego, ktora reguła jest bardziej specyficzna. Bez tego nadpisania checkbox dostawal wysokość pola tekstowego (zmierzone w przegladarce: 38 px zamiast 20 px), czyli kwadrat prawie dwa razy za wysoki. */ min-height: 0; margin: 1px 0 0; padding: 0; border: none; background: none; /* Odstęp 3 px od tekstu daje go gap powyżej - nie dublujemy. */ box-shadow: none; cursor: pointer; /* Wyglad przeglądarki (niebieskie w Firefox) zamieniamy na kolory serwisu, bo inaczej ten jeden checkbox wygląda jak element z innej strony. "appearance: none" kasuje domyślny kwadracik i rysujemy własny poniżej. */ appearance: none; -webkit-appearance: none; border: 1.5px solid var(--border); border-radius: 5px; background: var(--paper); transition: background-color 0.15s ease, border-color 0.15s ease; } /* Odhaczony. ZNAK CHECK DANY JAKO MINIATURA SVG, A NIE JAKO GRADIENT. Poprzednio "ptaszek" byl skladany z dwoch "linear-gradient" o rozmiarze "100% 100%" i przesunietych przez "background-position" o kilka pikseli. Przy kwadracie 20 x 20 px gradient ma 20 px wysokosci, wiec przesuniecie w dol o cokolwiek wieksze od zera wypychalo go poza pole - widoczna zostawala tylko gora, a ukosna kreska byla obcieta i zamiast pytatka wychodzila nieokreslona plamka. Poza tym dwie prostopadle kreski daly sie zlepac w inny ksztalt przy innej rozdzielczosci. SVG ma wlasny uklad wspolrzednych (viewBox), wiec skaluje sie do dowolnego rozmiaru pola i zawsze lezy dokladnie w srodku. */ .login-form .checkbox-label input[type="checkbox"]:checked { background-color: var(--purple); border-color: var(--purple); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.6l3.4 3.4 7.6-8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } /* Pierwszeństwo nad ":checked" powyżej - focus ma być widoczny także na zaznaczonym polu. Bez ":not(:checked)" przeglądarka pokaże oba style naraz i obwódka zniknie. */ .login-form .checkbox-label input[type="checkbox"]:focus { outline: 0; box-shadow: 0 0 0 4px var(--ring); } .login-form .checkbox-label input[type="checkbox"]:not(:checked):hover { border-color: var(--purple); } .login-form .checkbox-label span { font-size: 0.86rem; } .login-form .checkbox-label a { color: var(--purple); text-decoration: none; font-weight: 600; } .login-form .checkbox-label a:hover { text-decoration: underline; }