/* ============================================================ tokens.css — POKRĘTŁA WYGLĄDU (64.5) ============================================================ Po co ten plik. Do 64.4a rozmiary tekstu były wpisane na sztywno w 621 miejscach w 13 plikach CSS, w 27 różnych wartościach. Skutki były trzy: 1. zmiana „za duża czcionka w skrzynce" wymagała znalezienia i ruszenia kilkudziesięciu wartości, 2. suwak rozmiaru czcionki w Ustawieniach (--font-scale, 28.4) był atrapą, bo twarde piksele go nie widziały — dlatego ukryto go w 60.8, 3. rozmiary rozjeżdżały się same z siebie (12px, 12.5px, 13px, 13.5px obok siebie w jednym widoku). Teraz każdy rozmiar to token, a token stoi w jednym miejscu — tutaj. ZASADA PIERWSZEGO PRZEBIEGU: wartości poniżej są DOKŁADNIE te, które były wpisane na sztywno. Wprowadzenie tokenów NIE zmienia wyglądu ani o piksel. Dopiero ruszenie pokrętła cokolwiek robi. Kolejność ładowania: ten plik idzie PIERWSZY, przed main.css — wszystkie pozostałe arkusze tylko czytają zmienne, żaden ich nie definiuje. Ładowany przez: index.html, login.html, lobby.html, report.html, panel admina. ============================================================ */ :root { /* ---------------------------------------------------------- GLOBALNE POKRĘTŁA — to nimi rusza panel Studio. Mnożą całą skalę naraz; pojedyncze kroki niżej zostają na dostrajanie. ---------------------------------------------------------- */ --ui-text-scale: 1; /* cały tekst w grze */ --ui-space-scale: 1; /* odstępy i wewnętrzne marginesy */ --ui-line-scale: 1; /* wysokość wiersza — „teksty się zlewają" */ /* ---------------------------------------------------------- ROZMIARY TEKSTU Nazwa mówi, ile pikseli daje krok przy pokrętłach na 1 — dzięki temu zamiana jest odwracalna i sprawdzalna wzrokiem w diffie. --font-scale to ustawienie DOSTĘPNOŚCI z panelu gracza (0.9/1.0/1.1). Od 64.5 wreszcie działa: wchodzi w każdy token, a nie tylko w . ---------------------------------------------------------- */ /* (69.2, user-request) TELEFON MA TEKST MNIEJSZY O 1 px. Odejmowane od KAZDEGO tokenu ponizej, przed mnoznikami — patrz reguly na koncu pliku. Swiadomie plaskie odjecie, nie mnoznik: telefon ma byc „o piksel drobniejszy" niezaleznie od tego, gdzie stoi pokretlo dostepnosci. Skutek jest PROPORCJONALNIE mocniejszy dla malego tekstu (--fs-10-5 traci 9,5%, --fs-56 tylko 1,8%) — to swiadoma decyzja usera, bez podlogi. Pokretlo dostepnosci (0.9 / 1.0 / 1.1) zostaje WSPOLNE dla obu urzadzen. */ --fs-sub: 0px; --fs-mul: calc(var(--ui-text-scale, 1) * var(--font-scale, 1)); --fs-9: calc((9px - var(--fs-sub)) * var(--fs-mul)); --fs-10: calc((10px - var(--fs-sub)) * var(--fs-mul)); --fs-10-5: calc((10.5px - var(--fs-sub)) * var(--fs-mul)); --fs-11: calc((11px - var(--fs-sub)) * var(--fs-mul)); --fs-11-5: calc((11.5px - var(--fs-sub)) * var(--fs-mul)); --fs-12: calc((12px - var(--fs-sub)) * var(--fs-mul)); --fs-12-5: calc((12.5px - var(--fs-sub)) * var(--fs-mul)); --fs-13: calc((13px - var(--fs-sub)) * var(--fs-mul)); --fs-13-5: calc((13.5px - var(--fs-sub)) * var(--fs-mul)); --fs-14: calc((14px - var(--fs-sub)) * var(--fs-mul)); --fs-14-5: calc((14.5px - var(--fs-sub)) * var(--fs-mul)); --fs-15: calc((15px - var(--fs-sub)) * var(--fs-mul)); --fs-16: calc((16px - var(--fs-sub)) * var(--fs-mul)); --fs-17: calc((17px - var(--fs-sub)) * var(--fs-mul)); --fs-18: calc((18px - var(--fs-sub)) * var(--fs-mul)); --fs-19: calc((19px - var(--fs-sub)) * var(--fs-mul)); --fs-20: calc((20px - var(--fs-sub)) * var(--fs-mul)); --fs-21: calc((21px - var(--fs-sub)) * var(--fs-mul)); --fs-22: calc((22px - var(--fs-sub)) * var(--fs-mul)); --fs-24: calc((24px - var(--fs-sub)) * var(--fs-mul)); --fs-25: calc((25px - var(--fs-sub)) * var(--fs-mul)); --fs-26: calc((26px - var(--fs-sub)) * var(--fs-mul)); --fs-28: calc((28px - var(--fs-sub)) * var(--fs-mul)); --fs-30: calc((30px - var(--fs-sub)) * var(--fs-mul)); --fs-32: calc((32px - var(--fs-sub)) * var(--fs-mul)); --fs-34: calc((34px - var(--fs-sub)) * var(--fs-mul)); --fs-36: calc((36px - var(--fs-sub)) * var(--fs-mul)); --fs-40: calc((40px - var(--fs-sub)) * var(--fs-mul)); --fs-42: calc((42px - var(--fs-sub)) * var(--fs-mul)); --fs-48: calc((48px - var(--fs-sub)) * var(--fs-mul)); --fs-56: calc((56px - var(--fs-sub)) * var(--fs-mul)); } :root { /* ---------------------------------------------------------- ODSTĘPY — gap, padding, margin. ~660 deklaracji w 13 plikach, wszystkie z tej samej garstki wartości. To jest główne pokrętło GĘSTOŚCI ekranu: ruszenie --ui-space-scale rozsuwa albo ściska cały interfejs naraz, bez dotykania układu. ---------------------------------------------------------- */ --sp-mul: var(--ui-space-scale, 1); --sp-1: calc(1px * var(--sp-mul)); --sp-2: calc(2px * var(--sp-mul)); --sp-3: calc(3px * var(--sp-mul)); --sp-4: calc(4px * var(--sp-mul)); --sp-5: calc(5px * var(--sp-mul)); --sp-6: calc(6px * var(--sp-mul)); --sp-7: calc(7px * var(--sp-mul)); --sp-8: calc(8px * var(--sp-mul)); --sp-9: calc(9px * var(--sp-mul)); --sp-10: calc(10px * var(--sp-mul)); --sp-11: calc(11px * var(--sp-mul)); --sp-12: calc(12px * var(--sp-mul)); --sp-13: calc(13px * var(--sp-mul)); --sp-14: calc(14px * var(--sp-mul)); --sp-15: calc(15px * var(--sp-mul)); --sp-16: calc(16px * var(--sp-mul)); --sp-18: calc(18px * var(--sp-mul)); --sp-20: calc(20px * var(--sp-mul)); --sp-22: calc(22px * var(--sp-mul)); --sp-24: calc(24px * var(--sp-mul)); --sp-26: calc(26px * var(--sp-mul)); --sp-28: calc(28px * var(--sp-mul)); --sp-30: calc(30px * var(--sp-mul)); --sp-32: calc(32px * var(--sp-mul)); --sp-35: calc(35px * var(--sp-mul)); --sp-40: calc(40px * var(--sp-mul)); --sp-48: calc(48px * var(--sp-mul)); --sp-56: calc(56px * var(--sp-mul)); --sp-60: calc(60px * var(--sp-mul)); --sp-80: calc(80px * var(--sp-mul)); /* ---------------------------------------------------------- WYSOKOŚĆ WIERSZA Osobne pokrętło, bo „teksty się zlewają" to najczęściej ciasny wiersz, a nie za duże litery — i leczy się to niezależnie od rozmiaru. UWAGA: domyślną wartością jest `normal`, czyli to, co przeglądarka liczyła do tej pory. Dzięki temu wprowadzenie tego pokrętła jest dokładnie zerowe wizualnie, mimo że w grze prawie nigdzie nie było jawnego line-height (45 deklaracji na cały projekt). ---------------------------------------------------------- */ --lh-1: calc(1 * var(--ui-line-scale, 1)); --lh-1-1: calc(1.1 * var(--ui-line-scale, 1)); --lh-1-15: calc(1.15 * var(--ui-line-scale, 1)); --lh-1-2: calc(1.2 * var(--ui-line-scale, 1)); --lh-1-25: calc(1.25 * var(--ui-line-scale, 1)); --lh-1-3: calc(1.3 * var(--ui-line-scale, 1)); --lh-1-35: calc(1.35 * var(--ui-line-scale, 1)); --lh-1-4: calc(1.4 * var(--ui-line-scale, 1)); --lh-1-45: calc(1.45 * var(--ui-line-scale, 1)); --lh-1-5: calc(1.5 * var(--ui-line-scale, 1)); --lh-1-55: calc(1.55 * var(--ui-line-scale, 1)); --lh-1-6: calc(1.6 * var(--ui-line-scale, 1)); --lh-1-7: calc(1.7 * var(--ui-line-scale, 1)); --lh-1-9: calc(1.9 * var(--ui-line-scale, 1)); } /* Globalna wysokość wiersza dla całej gry. Bez ustawionego --ui-line zachowuje się jak dotąd (`normal`); Studio podstawia tu liczbę. */ body { line-height: var(--ui-line, normal); } /* ============================================================ (69.2) TELEFON — tekst o 1 px mniejszy. Dwa mirrory zgodnie z konwencja projektu: media query z wykluczeniem wymuszonego desktopu (`html:not(.ui-desktop)`) + klasa `html.ui-mobile` dla trybu mobilnego wymuszonego na szerokim ekranie. Prog 768 px = ten sam co MOBILE_BREAKPOINT w js/ui/ui-mode.js. Zmienna, nie nadpisanie `--font-scale`: tamta jest ustawiana INLINE na przez JS, wiec arkusz i tak by jej nie ruszyl. ============================================================ */ @media (max-width: 768px) { html:not(.ui-desktop) { --fs-sub: 1px; } } html.ui-mobile { --fs-sub: 1px; }