/* ============================================================================ 06-skala-ui.css — SKALA INTERFEJSU NA KOMPUTERZE (domyślnie jak zoom 75 % w przeglądarce) ---------------------------------------------------------------------------- Sterowanie: js/00b-skala-ui.js. Skrypt ustawia na atrybut data-skala (tylko na komputerze, w oknie szerszym niż 1180 px, gdy skala jest włączona) i zmienną --skala-ui (0.75). Tablet i telefon: brak atrybutu = brak zmian. Jak to działa: `zoom` na pomniejsza CAŁY interfejs (układ liczy się tak, jakby okno było 1 / 0,75 = 1,33 razy większe — dokładnie jak przy zoomie przeglądarki). Jedyna rzecz, której `zoom` nie przelicza, to JEDNOSTKI OKNA (vw / vh / dvh): 100dvh zostaje „1 okno” w pikselach układu, więc po pomniejszeniu zajmowałoby 75 % ekranu. Dlatego każde vw / vh / dvh w arkuszach komputera jest zapisane jako calc(N / var(--skala-ui)) — przy skali 100 % (--skala-ui: 1) to dokładnie to samo co dotąd. Nowe reguły z jednostkami okna piszemy tak samo. Arkusze 9-telefon/ tej zmiany nie mają: telefon i tablet nigdy nie są skalowane. Współrzędne w skryptach (getBoundingClientRect, clientX, innerWidth…) przelicza js/00b-skala-ui.js. WYŁĄCZENIE: jedna linia w js/00b-skala-ui.js (SKALA_PC_PROCENT = 100) albo wybór „Skala 100 %” w menu konta. ============================================================================ */ :root { --skala-ui: 1; } :root[data-skala] { zoom: var(--skala-ui); } /* PODŁOGA CZYTELNOŚCI przy skali: najmniejsze napisy (12 i 13 px) po pomniejszeniu miałyby 9 i 9,75 px — za mało. Przy skali dostają jedną wspólną wartość (13,5 px × 0,75 ≈ 10 px na ekranie); reszta skali pisma bez zmian. */ :root[data-skala] { --skala-pismo-min: 13.5px; --t-3xs: var(--skala-pismo-min); --t-2xs: var(--skala-pismo-min); --t-xs: var(--skala-pismo-min); --t-sm: var(--skala-pismo-min); --t-kafel: var(--skala-pismo-min); } /* SZEROKOŚĆ STRON: Pulpit, Zadania, Zamówienia i pełna karta projektu miały kolumnę 1180–1320 px (decyzja dla ekranu bez skali). Przy skali układ ma ~2195 px, więc kolumna wypełnia dostępną szerokość; dopiero od ~2100 px (szerokie monitory) zostaje wyśrodkowana, żeby wiersze tekstu nie robiły się za długie. Wartość czytają te cztery strony: var(--strona-max, ). */ :root[data-skala] { --strona-max: 2100px; } /* CELE KLIKANIA przy skali (mysz; tablet i telefon nie są skalowane): przyciski o ekranowym boku poniżej 24 px dostają 32 px układu (= 24 px na ekranie). Reszta kontrolek ma 36 px układu = 27 px na ekranie. */ :root[data-skala] :is(.lejek-karta-menu, .pager-arrow) { min-width: 32px; min-height: 32px; } /* Druk i PDF to nie interfejs programu — bez skali. */ @media print { :root[data-skala] { zoom: 1; --skala-ui: 1; } } /* Pozycja „Skala” w menu konta (obok Motyw / Język): tylko komputer. Napis pokazuje WYBÓR użytkownika (data-skala-wybor na : 75 albo 100), nie to, czy skala działa w tej chwili (w wąskim oknie jest chwilowo wyłączona). */ :root:not([data-ui="desktop"]) [data-action="toggle-skala-ui"], :root:not([data-skala-wybor]) [data-action="toggle-skala-ui"] { display: none; } [data-action="toggle-skala-ui"] [data-skala-wyl] { display: none; } :root[data-skala-wybor="100"] [data-action="toggle-skala-ui"] [data-skala-wl] { display: none; } :root[data-skala-wybor="100"] [data-action="toggle-skala-ui"] [data-skala-wyl] { display: inline; }