/* ============================================================================ CIASTKA - BANER ZGODY ============================================================================ Wspolny styl baneru ciasteczek. Wczesniej blok baneru byl wklejany recznie do kazdego pliku HTML, przez co: - byl tylko na / i /panel, a na /login, /rejestracja i /wybierz-role go nie bylo w ogole, - na kazdej stronie wygladal troche inaczej (inline "style" w index.html kontra klasa CSS w panel.html). Teraz jest jeden plik. Zmiana wygladu = zmiana tutaj, nie szukanie duplikatu w siedmiu HTML-ach. KOLORY SĄ LITERALNE, a nie z "var(--...)" z login.css / panel.css, bo te strony maja rozne zestawy zmiennych. Gdyby baner uzywal np. "var(--karta)", to na /regulamin (gdzie takich zmiennych nie ma) kolor bylby transparentny - baner zniklby. Dlatego dwa warianty wyrazne [data-theme="dark"] ponizej. MOTYW: skrypt motyw.js ustawia "data-theme" na jeszcze przed wczytaniem tego arkusza, wiec baner od razu startuje w wlasciwym kolorze - bez bialego mrugniecia. ============================================================================ */ #cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10000; /* Odcień fioletu zamiast czarnego: ten sam kolor co "--purple" w login.css. Baner jest jedynym elementem UI, ktory lezy NA tresci strony, wiec musi byc od niej odrozniony - czysta czarny zlewalby sie z ciemnym motywem strony. */ background: #241D4A; color: #EFEDFB; padding: 14px 20px; box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.28); /* "env(safe-area-inset-bottom)" na telefonach z notchem - bez tego baner chowa przycisk pod gestem systemowym. Tam, gdzie zmienna nie istnieje, dopis 0px jest bezpieczne. */ padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); } [data-theme="dark"] #cookie-banner { /* W ciemnym motywie baner musi byc CIEMNIEJSZY od strony, inaczej swieci jak plakat na kolorowym tle. */ background: #0A0A1C; color: #EFEDFB; box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.5); } .cookie-banner-inner { max-width: 800px; margin: 0 auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .cookie-banner-inner p { flex: 1; min-width: 220px; margin: 0; font-size: 0.9rem; line-height: 1.5; } /* Link do regulaminu musi byc widoczny na ciemnym tle. */ .cookie-banner-inner a { color: #B9AEFF; text-decoration: underline; font-weight: 600; } .cookie-banner-inner a:hover { color: #D3CCFF; } #cookie-accept { flex-shrink: 0; min-height: 40px; padding: 0 20px; border: none; border-radius: 8px; background: #8F80F7; color: #14112B; font: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: background-color 0.15s ease, transform 0.15s ease; } #cookie-accept:hover { background: #A698FF; } #cookie-accept:active { transform: translateY(1px); } /* Na waskim ekranie przycisk schodzi pod tekst - wtedy powinien byc pelnej szerokosci, inaczej bylby wciaz mniejszy niz kciuk. */ @media (max-width: 420px) { #cookie-accept { width: 100%; } } @media (prefers-reduced-motion: reduce) { #cookie-accept { transition: none; } }