h1:focus { outline: none; } /* Wartości motywu jasnego są domyślne w :root. Motyw ciemny stosujemy dwiema drogami: 1) automatycznie, gdy system prosi o ciemny (prefers-color-scheme) — ale tylko jeśli użytkownik nie wymusił jasnego przez data-theme="light"; 2) jawnie, gdy użytkownik wybrał ciemny przełącznikiem (data-theme="dark"). Skrypt w ustawia data-theme z localStorage jeszcze przed pierwszym malowaniem, więc wybór nie miga. Bez zapisanego wyboru decyduje system. */ :root { color-scheme: light dark; --color-bg: #ffffff; --color-text: #111827; --color-hint: #6b7280; --color-error: #b91c1c; --color-primary-bg: #2563eb; --color-primary-text: #ffffff; --color-secondary-bg: #e5e7eb; --color-secondary-text: #111827; --color-tile-bg: #f3f4f6; --color-border: #d1d5db; /* Nieco głębsze niż tło strony (#fff), żeby karta/dropzone odcinały się także bez polegania wyłącznie na obramowaniu. */ --color-card-bg: #eef1f5; --color-shadow: rgba(0, 0, 0, 0.08); /* Solidna czerwień dla akcji destrukcyjnych (biały tekst/ikona); czytelna w obu motywach. */ --color-danger-bg: #dc2626; --color-danger-text: #ffffff; /* Bursztyn ostrzegawczy dla licznika w ostatnich minutach (biały tekst, ≥5:1 kontrastu). */ --color-warn-bg: #b45309; --color-warn-text: #ffffff; /* Zieleń „kontynuuj/wróć" — odróżnia wznowienie sesji od niebieskich akcji create/join. */ --color-resume-bg: #15803d; --color-resume-text: #ffffff; } /* Wspólny zestaw wartości motywu ciemnego, używany zarówno dla wyboru systemowego, jak i jawnego (data-theme="dark"). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #111827; --color-text: #f3f4f6; --color-hint: #9ca3af; --color-error: #f87171; /* Jaśniejszy od wariantu jasnego dla żywości na ciemnym tle, ale wciąż na tyle nasycony, by biały tekst spełniał WCAG AA (≥4.5:1) — #3b82f6 dawał tylko ~3.7:1. */ --color-primary-bg: #2f6fe4; --color-primary-text: #ffffff; --color-secondary-bg: #374151; --color-secondary-text: #f3f4f6; --color-tile-bg: #1f2937; --color-border: #4b5563; --color-card-bg: #1b2534; --color-shadow: rgba(0, 0, 0, 0.4); } } :root[data-theme="dark"] { --color-bg: #111827; --color-text: #f3f4f6; --color-hint: #9ca3af; --color-error: #f87171; --color-primary-bg: #2f6fe4; --color-primary-text: #ffffff; --color-secondary-bg: #374151; --color-secondary-text: #f3f4f6; --color-tile-bg: #1f2937; --color-border: #4b5563; --color-card-bg: #1b2534; --color-shadow: rgba(0, 0, 0, 0.4); } body { font-family: system-ui, -apple-system, sans-serif; background: var(--color-bg); color: var(--color-text); margin: 0; line-height: 1.5; -webkit-text-size-adjust: 100%; } /* Mobile first: pełna szerokość z marginesami, bezpieczne strefy dla telefonów z wcięciem. */ .page { max-width: 520px; margin: 0 auto; padding: 1rem max(1rem, env(safe-area-inset-left)) calc(1.5rem + env(safe-area-inset-bottom)); text-align: center; } .btn-primary, .btn-resume { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 3rem; padding: 0.75rem 1rem; font-size: 1rem; font-weight: 600; border-radius: 0.75rem; border: none; cursor: pointer; text-decoration: none; box-sizing: border-box; transition: filter 0.15s ease; } .btn-primary:active, .btn-resume:active { filter: brightness(0.92); } .btn-lg { min-height: 3.5rem; font-size: 1.1rem; } .btn-primary { background: var(--color-primary-bg); color: var(--color-primary-text); } .btn-resume { background: var(--color-resume-bg); color: var(--color-resume-text); } .error { color: var(--color-error); } .hint { color: var(--color-hint); font-size: 0.9rem; } .loading { color: var(--color-hint); margin-top: 3rem; } .empty-state { margin-top: 3rem; display: flex; flex-direction: column; gap: 1rem; align-items: stretch; } /* Karta — wspólny kontener dla zaproszenia i formularza dołączania. */ .card { background: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: 1rem; padding: 1.25rem; box-shadow: 0 1px 3px var(--color-shadow); } .session-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; /* Na wąskim telefonie (320 px) tytuł i komplet sterowania nie mieszczą się w jednym rzędzie: potrzebują razem ~365 px przy ~288 px dostępnych. Bez zawijania nadmiar wychodził poza ekran i pastylka licznika była ucięta wraz z przyciskiem kończenia sesji — leżał całkowicie poza widocznym obszarem, więc nie dało się go dotknąć. */ flex-wrap: wrap; } .session-header h1 { font-size: 1.5rem; margin: 0; /* Domyślne min-width:auto nie pozwala elementowi flex zejść poniżej szerokości treści, przez co tytuł rozpychał nagłówek zamiast oddać miejsce sterowaniu. */ min-width: 0; } /* Zintegrowana pastylka: segment licznika (neutralny) + segment zakończenia (czerwony) w jednym module. */ .ttl-pill { flex: none; display: inline-flex; align-items: stretch; border-radius: 999px; overflow: hidden; } .ttl-time { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0.7rem; font-size: 0.95rem; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--color-secondary-bg); color: var(--color-secondary-text); transition: background 0.3s ease, color 0.3s ease; } /* Ostatnie minuty sesji: bursztyn (<5 min), potem czerwień (<1 min) — funkcjonalny sygnał pilności. */ .ttl-time--warn { background: var(--color-warn-bg); color: var(--color-warn-text); } .ttl-time--danger { background: var(--color-danger-bg); color: var(--color-danger-text); } /* Przycisk zakończenia — czerwony stale (bez polegania na hover, bo aplikacja jest dotykowa). */ .ttl-end { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; padding: 0 0.7rem; border: 0; /* Cienki jasny separator utrzymuje czytelną granicę między licznikiem a przyciskiem końca, nawet gdy licznik zrobi się czerwony w ostatniej minucie. */ border-left: 1px solid rgba(255, 255, 255, 0.22); background: var(--color-danger-bg); color: var(--color-danger-text); cursor: pointer; } .ttl-end:active { filter: brightness(0.92); } .ttl-end-icon { width: 1rem; height: 1rem; } /* Na typowych szerokościach telefonów (375–414 px) do zmieszczenia nagłówka w jednym rzędzie brakuje ledwie ~20 px, a drugi rząd zabiera galerii pion. Nieco mniejszy tytuł i ciaśniejszy odstęp wystarczą, żeby komplet sterowania został obok niego. Poniżej tej szerokości (np. 320 px) miejsca brakuje już naprawdę i nagłówek zawija się — flex-wrap wyżej zostaje jako zabezpieczenie także dla powiększonej czcionki systemowej. */ @media (max-width: 26.5rem) { .session-header { gap: 0.5rem; } .session-header h1 { font-size: 1.25rem; } } /* Prawa strona nagłówka: przełącznik języka + pastylka licznika w jednym rzędzie. */ .header-right { display: flex; align-items: center; gap: 0.5rem; /* Zapas na wypadek, gdyby samo sterowanie nie zmieściło się w rzędzie (dłuższy licznik, większa czcionka systemowa) — wtedy zawija się wewnętrznie zamiast wyjść poza ekran. */ flex-wrap: wrap; justify-content: flex-end; /* Po zawinięciu sterowanie jest jedynym elementem w swoim rzędzie i justify-content nagłówka przestaje mieć na nie wpływ — automatyczny margines trzyma je przy prawej krawędzi. */ margin-left: auto; } .lang-form { display: inline-flex; } /* Globus + kod języka. Padding/font jak w .ttl-time, więc wysokość zgadza się z pastylką licznika. */ .lang-globe { display: inline-flex; align-items: center; gap: 0.3rem; /* Wysokość policzona tak samo jak dla .ttl-time (font 0.95rem × line-height 1.5 + 2×0.4rem paddingu), box-sizing border-box wlicza obramowanie — dzięki temu globus i pastylka licznika mają identyczną wysokość. */ height: calc(0.95rem * 1.5 + 0.8rem); box-sizing: border-box; padding: 0 0.7rem; border: 1px solid var(--color-border); border-radius: 999px; background: transparent; color: var(--color-text); font-size: 0.95rem; font-weight: 600; cursor: pointer; } .lang-globe:active { filter: brightness(0.92); } .lang-globe-icon { flex: none; width: 1.05rem; height: 1.05rem; color: var(--color-hint); } /* Przełącznik motywu jasny/ciemny — okrągły przycisk o tej samej wysokości co pastylka języka. */ .theme-toggle { padding: 0 0.6rem; } .theme-toggle-icon { flex: none; width: 1.2rem; height: 1.2rem; color: var(--color-hint); } /* Który wariant ikony i etykiety przełącznika pokazać, rozstrzygamy tą samą kaskadą co kolory motywu na górze pliku: domyślnie jasny, ciemny gdy prosi o to system (o ile użytkownik nie wymusił jasnego) albo gdy wybrał go jawnie. Dzięki temu właściwa ikona jest na miejscu już przy pierwszym malowaniu — komponent nie musi jej korygować po starcie interaktywności, co wcześniej dawało widoczny przeskok po każdym pełnym przeładowaniu strony. */ .theme-when-dark { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-when-dark { display: inline-flex; } :root:not([data-theme="light"]) .theme-when-light { display: none; } } :root[data-theme="dark"] .theme-when-dark { display: inline-flex; } :root[data-theme="dark"] .theme-when-light { display: none; } /* Strona główna wypełnia wysokość ekranu, a blok akcji jest wyśrodkowany w pionie w przestrzeni pod nagłówkiem — bez dużej pustej przerwy na dole wysokich telefonów. Gdy treść przerośnie ekran, marginesy auto zerują się i strona normalnie się przewija. */ .home-page { min-height: 100dvh; box-sizing: border-box; display: flex; flex-direction: column; } .home-page > .how, .home-page > .resume-card { margin-top: auto; } .home-page > .home-join { margin-bottom: auto; } /* Strona główna: obrazkowy pasek „jak to działa". */ .how { display: flex; align-items: flex-start; justify-content: center; gap: 0.4rem; margin: 1.75rem 0; } .how-step { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; width: 5rem; } .how-ic { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 0.9rem; background: color-mix(in srgb, var(--color-primary-bg) 14%, transparent); color: var(--color-primary-bg); } .how-ic svg { width: 1.5rem; height: 1.5rem; } .how-lbl { color: var(--color-hint); font-size: 0.75rem; line-height: 1.3; } .how-arrow { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.9rem; color: var(--color-border); } /* Rozdzielacz „albo dołącz" z kreskami po bokach. */ .home-or { display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0 1rem; color: var(--color-hint); font-size: 0.85rem; } .home-or::before, .home-or::after { content: ""; height: 1px; background: var(--color-border); flex: 1; } /* Pole kodu + przycisk Dołącz w jednym rzędzie. */ .home-join-row { display: flex; gap: 0.5rem; align-items: stretch; } .home-join-row input { flex: 1; min-width: 0; margin-bottom: 0; } .home-join-row button { width: auto; flex: none; padding-left: 1.25rem; padding-right: 1.25rem; } /* Karta wznowienia dla wracającego użytkownika. */ .resume-card { display: flex; flex-direction: column; gap: 1rem; text-align: center; /* Odstęp od nagłówka i od przycisków poniżej (odpowiednik marginesu paska „jak to działa"). */ margin: 1.75rem 0; } .resume-head { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 600; } .resume-icon { flex: none; width: 1.4rem; height: 1.4rem; color: var(--color-primary-bg); } /* Ramka QR zawsze na białym tle, żeby kod skanował się również w trybie ciemnym. */ .qr-frame { background: #ffffff; border-radius: 0.75rem; padding: 0.5rem; display: inline-block; line-height: 0; } .qr { display: block; width: 100%; max-width: 180px; height: auto; aspect-ratio: 1; /* QR to piksel-art; bez tego skalowanie w górę rozmywa moduły i utrudnia odczyt. */ image-rendering: pixelated; } .invite-text { margin: 0.9rem 0 0; font-size: 1rem; line-height: 1.5; } .invite-code { color: var(--color-text); font-weight: 600; letter-spacing: 0.15rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .session-actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--color-border); } form input { width: 100%; min-height: 3rem; padding: 0.5rem; font-size: 1.5rem; letter-spacing: 0.35rem; text-align: center; box-sizing: border-box; margin-bottom: 1rem; background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 0.5rem; font-variant-numeric: tabular-nums; } .invite { margin: 0 0 1.25rem; } /* Zwinięte zaproszenie to już tylko pasek z przyciskiem — pełne wypełnienie karty zostawiłoby pustą ramkę wokół jednej linii tekstu, czyli oddałoby ledwie część odzyskanego miejsca. */ .invite--collapsed { padding: 0.35rem 0.75rem; } .invite-toggle { display: flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; /* Pełna wysokość celu dotykowego mimo wąskiego paska. */ min-height: 2.75rem; padding: 0.5rem; border: 0; border-radius: 0.5rem; background: transparent; color: var(--color-hint); font-size: 0.9rem; font-weight: 600; font-family: inherit; cursor: pointer; } /* Rozwinięte zaproszenie: przycisk zamykający oddzielony od treści, żeby nie kleił się do kodu. */ .invite-toggle[aria-expanded="true"] { margin-top: 0.75rem; border-top: 1px solid var(--color-border); border-radius: 0; } .invite-chevron { width: 1rem; height: 1rem; transition: transform 0.2s ease; } .invite-toggle[aria-expanded="true"] .invite-chevron { transform: rotate(180deg); } .upload { margin: 1.25rem 0; } .dropzone { position: relative; display: flex; align-items: center; justify-content: center; min-height: 6rem; padding: 1rem; border: 2px dashed var(--color-border); border-radius: 1rem; background: var(--color-card-bg); text-align: center; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } /* Podpowiedź na desktopie; na dotyku liczy się głównie kliknięcie. */ .dropzone:hover { border-color: var(--color-primary-bg); } /* Podświetlenie w trakcie przeciągania pliku nad strefą. */ .dropzone--active { border-style: solid; border-color: var(--color-primary-bg); background: color-mix(in srgb, var(--color-primary-bg) 12%, var(--color-card-bg)); } /* Przezroczysty input pokrywa całą strefę i przechwytuje zarówno kliknięcie, jak i upuszczenie. */ .dropzone-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } /* Treść wyłącznie informacyjna — nie przechwytuje zdarzeń, żeby klik/drop trafiał w input. */ .dropzone-content { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; pointer-events: none; } .dropzone-icon { width: 1.75rem; height: 1.75rem; margin-bottom: 0.15rem; color: var(--color-primary-bg); } .dropzone-title { font-weight: 600; font-size: 1.05rem; color: var(--color-text); } .dropzone-hint { font-size: 0.9rem; color: var(--color-hint); } .gallery { margin: 1.5rem 0; } /* auto-fill: 3 kafelki na wąskim telefonie, więcej gdy ekran szerszy — bez media queries. */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.5rem; } .tile { position: relative; aspect-ratio: 1; background: var(--color-tile-bg); border-radius: 0.5rem; overflow: hidden; display: flex; align-items: center; justify-content: center; } .tile img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; } .tile .placeholder { color: var(--color-hint); font-size: 0.8rem; text-align: center; padding: 0.5rem; } /* Kafelek wysyłki w toku / błędu: pionowy układ z podpisem nazwy pliku. */ .tile--pending, .tile--failed { flex-direction: column; gap: 0.35rem; padding: 0.5rem; } /* Nazwa pliku pod loaderem/ikoną — przycięta do jednej linii, żeby nie rozpychała kafelka. */ .upload-name { max-width: 100%; font-size: 0.7rem; color: var(--color-hint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Cienki pasek postępu przyklejony do dolnej krawędzi kafelka. */ .upload-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--color-border); } .upload-progress-bar { height: 100%; background: var(--color-primary-bg); transition: width 0.2s ease; } .tile--failed { color: var(--color-error); } .upload-fail-icon { width: 1.6rem; height: 1.6rem; color: var(--color-error); } /* Okrągły przycisk „odrzuć" nieudany kafelek. */ .upload-dismiss { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border: none; border-radius: 999px; background: var(--color-secondary-bg); color: var(--color-secondary-text); font-size: 0.9rem; line-height: 1; cursor: pointer; } .upload-dismiss:active { filter: brightness(0.92); } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .darker-border-checkbox.form-check-input { border-color: #929292; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; }