/* ============================================================================ 9-telefon/38-skala-telefon-faza2.css — TELEFON: JEDNA SKALA W OKNACH I PASKACH (faza 2 ujednolicenia, 29.10.2026) ---------------------------------------------------------------------------- Ładowany jako OSTATNI plik telefonu. Zbiera w jednym miejscu to, co po fazie 1 (tokeny) dalej odstawało od skali: · promień kontrolek = --r-sm (8) także w oknach (przycisk, pole, lista); karty, panele i okna zostają --r / --r-lg, · nagłówek okna: JEDNA wysokość bez podtytułu (--h-naglowek-okna) i JEDNA z podtytułem (--h-naglowek-okna-2); nagłówek z wierszem narzędzi (status Designu, zakładki Planów, przyciski Zadań projektu) = wiersz tytułu + wiersz 40 px; kreska pod nagłówkiem leży WEWNĄTRZ wysokości (było +1 px w oknach kartotek, Designu, Planów i oferty), · stopka okna zawsze --h-stopka-okna (Design, Plany, oferta i Zestawienie miały 57 px z powodu własnego odstępu), · pasek „Niezatwierdzone zmiany Designu” (przyklejony nad dolnym paskiem) jest zwarty: jedno zdanie + rząd przycisków, · szukajka Lejka i zakładki Zamówień na wysokości kontrolki, awatar w pasku górnym z oddechem od krawędzi ekranu. Tylko :root[data-ui="mobile"]; liczby wyłącznie z tokenów; bez !important. ============================================================================ */ /* ============================ 1. TOKENY I PROMIEŃ KONTROLEK ================ */ :root[data-ui="mobile"] { --h-naglowek-okna-2: 64px; /* nagłówek okna z podtytułem (komputer 72, tablet i telefon 64) */ --okno-przycisk-r: var(--r-sm); /* przycisk w oknie, w stopce i w potwierdzeniu: 8 px jak poza oknem */ --okno-pole-r: var(--r-sm); } :root[data-ui="mobile"] :is(.modal, .app-confirm) { --okno-przycisk-r: var(--r-sm); --okno-pole-r: var(--r-sm); } /* .modal ustawia je sam (05-komponenty §3) */ /* ============================ 2. NAGŁÓWEK OKNA (pion) ===================== */ /* Jedna wysokość: tytuł w jednej linii, podtytuł w jednej linii, kreska włosowa w środku wysokości (box-sizing: border-box). */ :root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal:not(.project-costs-modal, .message-hub-modal) > header { --naglowek-w1: var(--h-naglowek-okna); box-sizing: border-box; align-items: center; min-height: calc(var(--naglowek-w1) + var(--bezpieczna-gora)); padding-block: var(--bezpieczna-gora) 0; padding-inline: var(--s-4) var(--s-2); border-bottom: 1px solid var(--kreska-wlos); } /* z podtytułem (Edytuj projekt, Nowe zadanie, Plany, Zestawienie, Zadania projektu…) */ :root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal:not(.project-costs-modal, .message-hub-modal, .ofk-okno, .design-editor-modal) > header:is(:has(> div > p), :has(> h2 + p), :has(> h2 + small)), :root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal.design-editor-modal:has(> .construction-bubble:not(.bez-menu)) > header:has(> div > p) { --naglowek-w1: var(--h-naglowek-okna-2); } :root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal:not(.project-costs-modal, .message-hub-modal) > header > :is(h2, h3) { display: -webkit-box; flex: 1 1 0; min-width: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } :root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal:not(.project-costs-modal, .message-hub-modal) > header > :is(div:not(.dsg-st, .pln-seg), .calc-header-tytul) { display: flex; flex: 1 1 0; flex-direction: column; justify-content: center; min-width: 0; max-width: none; } :root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal:not(.project-costs-modal, .message-hub-modal) > header > :is(div:not(.dsg-st, .pln-seg), .calc-header-tytul) > :is(h2, h3) { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } :root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal:not(.project-costs-modal, .message-hub-modal) > header :is(p, small) { display: block; overflow: hidden; margin: 2px 0 0; text-overflow: ellipsis; white-space: nowrap; -webkit-line-clamp: unset; } :root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal:is(.ofk-okno, .design-editor-modal):not(:has(> .construction-bubble:not(.bez-menu))) > header :is(p, small) { display: none; } /* podtytuł ukryty według wzoru (Design, Oferta) — nagłówek bez podtytułu */ /* Nagłówek z wierszem narzędzi: wiersz tytułu (H1) + wiersz 40 px z odstępem --s-2 pod nim. */ :root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal:not(.project-costs-modal, .message-hub-modal) > header:has(> :is(.dsg-st, .button:not(.modal-back-button))) { flex-wrap: wrap; align-content: flex-start; padding-bottom: var(--s-2); row-gap: 0; } :root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal:not(.project-costs-modal, .message-hub-modal) > header:has(> :is(.dsg-st, .button:not(.modal-back-button))) > :first-child { min-height: var(--naglowek-w1); } :root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal:not(.project-costs-modal, .message-hub-modal) > header > .dsg-st { order: 3; flex: 1 0 100%; box-sizing: border-box; height: var(--h-control); margin: 0; } :root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal:not(.project-costs-modal, .message-hub-modal) > header > .dsg-st > button { height: 100%; min-height: 0; } /* przyciski tekstowe w nagłówku (Zadania projektu) tworzą ten sam wiersz narzędzi: dwa obok siebie, równe, wysokość kontrolki */ :root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal:not(.project-costs-modal, .message-hub-modal) > header:has(> .button:not(.modal-back-button)) > .button:not(.modal-back-button) { flex: 1 1 0; min-width: 0; height: var(--h-control); min-height: var(--h-control); margin-top: 0; } :root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal:not(.project-costs-modal, .message-hub-modal) > header:has(> .button:not(.modal-back-button)) > :is(.modal-help-btn, .icon-button) { order: 1; } :root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal:not(.project-costs-modal, .message-hub-modal) > header:has(> .button:not(.modal-back-button)) > :first-child { flex: 1 1 calc(100% - 2 * var(--h-control) - 3 * var(--s-2)); } /* Kreska pod nagłówkiem także poziomo (wcześniej tylko w oknach kartotek), wewnątrz wysokości. */ :root[data-ui="mobile"][data-telefon-poziomo] #modal-root .modal:not(.project-costs-modal, .message-hub-modal) > header { box-sizing: border-box; border-bottom: 1px solid var(--kreska-wlos); } /* ============================ 3. STOPKA OKNA ============================== */ /* 56 px razem z kreską (przyciski --h-control + równy odstęp); okna z własnym odstępem 8 px dawały 57. */ :root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal:not(.project-costs-modal) > footer { box-sizing: border-box; min-height: calc(var(--h-stopka-okna) + var(--bezpieczny-dol)); padding-block: calc((var(--h-stopka-okna) - var(--h-control) - 1px) / 2) calc((var(--h-stopka-okna) - var(--h-control) - 1px) / 2 + var(--bezpieczny-dol)); } :root[data-ui="mobile"] #modal-root .modal > footer :is(.button, .pln-btn, button):not(.stopka-wiecej-przycisk, .dsg-zav) { border-radius: var(--okno-przycisk-r); } /* ============================ 4. PASEK GÓRNY: AWATAR ====================== */ /* Awatar (40 px) stał 4 px od krawędzi ekranu i wyglądał na przyciętego — jak po lewej stronie tytułu: odstęp z siatki (8 px). */ :root[data-ui="mobile"]:not([data-telefon-poziomo]) .topbar { padding-right: var(--s-2); } /* ============================ 5. PASEK „NIEZATWIERDZONE ZMIANY DESIGNU” ==== */ /* Przyklejony nad dolnym paskiem zakładek (było: opis w 3 liniach z nazwami obok przycisków = 74 px, do 25 % ekranu). Teraz: jedno zdanie (liczba zawsze widoczna, zdanie się skraca) i przyciski 40 px w TYM SAMYM rzędzie = 56 px; na bardzo wąskim ekranie (iPhone SE) dwa rzędy po 80 px. Nazwy Designów zostają na liście (small ukryte). */ :root[data-ui="mobile"]:not([data-telefon-poziomo]) .pr-zmiany { flex-wrap: wrap; gap: var(--s-1) var(--s-2); padding: var(--s-2) var(--s-3); box-shadow: none; } :root[data-ui="mobile"]:not([data-telefon-poziomo]) .pr-zmiany-opis { flex: 1 1 100%; } :root[data-ui="mobile"]:not([data-telefon-poziomo]) .pr-zmiany-opis b { display: flex; gap: var(--s-1); white-space: nowrap; } :root[data-ui="mobile"]:not([data-telefon-poziomo]) .pr-zmiany-opis b > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } :root[data-ui="mobile"]:not([data-telefon-poziomo]) .pr-zmiany-opis small { display: none; } :root[data-ui="mobile"]:not([data-telefon-poziomo]) .pr-zmiany-akcje { flex: 1 1 100%; } :root[data-ui="mobile"]:not([data-telefon-poziomo]) .pr-zmiany-akcje .button { height: var(--h-control); min-height: var(--h-control); white-space: nowrap; } @media (min-width: 400px) { :root[data-ui="mobile"]:not([data-telefon-poziomo]) .pr-zmiany { flex-wrap: nowrap; align-items: center; } :root[data-ui="mobile"]:not([data-telefon-poziomo]) .pr-zmiany-opis { flex: 1 1 0; min-width: 0; } :root[data-ui="mobile"]:not([data-telefon-poziomo]) .pr-zmiany-akcje { flex: none; width: auto; } :root[data-ui="mobile"]:not([data-telefon-poziomo]) .pr-zmiany-akcje .button { flex: none; } } /* ============================ 6. LEJEK I ZAMÓWIENIA ======================= */ :root[data-ui="mobile"] .lejek-szukaj { height: var(--h-control); border-radius: var(--pole-r); } /* było 44 px i pigułka — obok Projektów (40 px, 8 px) wyglądało jak inny program */ :root[data-ui="mobile"] .zr-bar .zr-zak { box-sizing: border-box; height: var(--h-control); align-items: stretch; } :root[data-ui="mobile"] .zr-bar .zr-zak button { height: auto; min-height: 0; } /* ============================ 7. STOPKI Z NIERÓWNYMI PRZYCISKAMI ============ */ /* Plany: „Anuluj” był wąski, „Zapisz plany” szeroki — jeden rząd, dwa równe przyciski (Anuluj po lewej, główne po prawej). */ :root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal.pln-wz > footer .pln-sp { display: none; } :root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal.pln-wz > footer > .pln-btn { flex: 1 1 0; min-width: 0; height: var(--h-control); } /* ============================ 8. OŚ CZASU W PULPICIE (SE: „+” wychodził poza kartę) ===== */ :root[data-ui="mobile"] .zo-pasek-osi { --zo-ster-h: var(--h-control); gap: var(--s-2); padding-inline: var(--s-2); } /* było 40 px wpisane liczbą */ :root[data-ui="mobile"] .zo-pasek-osi .zo-zakres-lista { flex: 1 1 0; width: auto; min-width: 0; max-width: calc(var(--s-6) * 4); } /* ============================ 9. CELE DOTYKU 44 PX (wygląd bez zmian) ====== */ /* Przyciski-linki, pigułka statusu i podpisy rozwijanych sekcji miały pole dotyku 19–26 px; niewidoczne ::before dopełnia je do --cel-dotyku. */ :where(:root[data-ui="mobile"] :is(.pcost-lnk2, .dk-lnk, .zt-wiecej, .klienci-wiecej, .production-step-status-button, .zl-p .icon-button, .mt-pom)) { position: relative; } :root[data-ui="mobile"] :is(.pcost-lnk2, .dk-lnk, .zt-wiecej, .klienci-wiecej)::before, :root[data-ui="mobile"] .production-step-status-button::after { /* pigułka statusu ma własną kropkę w ::before */ content: ""; position: absolute; top: 50%; left: 50%; width: max(100%, var(--cel-dotyku)); height: var(--cel-dotyku); transform: translate(-50%, -50%); } :root[data-ui="mobile"] details:not(.nav-catalog-group) > summary { min-height: var(--cel-dotyku); box-sizing: border-box; align-content: center; } /* Przyciski ikon w jednym rzędzie (priorytet i menu zadania) — ta sama wysokość kontrolki; pole dotyku z ::before (13-cel-dotyku). */ :root[data-ui="mobile"] .zl-p .icon-button { width: var(--h-control); height: var(--h-control); } :root[data-ui="mobile"] #content .uzy-master :is(.uzy-rozwin, input.dept-color, input.uzy-grupa-nazwa) { height: var(--h-control-sm); min-height: var(--h-control-sm); } /* wiersz działu: rozwijanie, kolor i nazwa — jedna wysokość wiersza (32 px) */ /* Ustawienia: pole klucza i przycisk obok niego — jedna wysokość. */ :root[data-ui="mobile"] .pole-klucza > .button { height: var(--h-control); min-height: var(--h-control); } /* ============================ 10. TYTUŁY: BEZ OSIEROCONYCH SŁÓW =============== */ :root[data-ui="mobile"] :is(.dash-project-name, .modal > header :is(h2, h3, p), .page-head :is(h1, h2), .panel > header :is(h2, h3), .material-panel-head :is(h2, h3)) { text-wrap: balance; } :root[data-ui="mobile"] .raporty-widok .dash-project-link { align-items: flex-start; } :root[data-ui="mobile"] .raporty-klient { margin-top: var(--s-1); line-height: var(--lh-base); } /* ============================ 11. TABLICA ZADAŃ: DATA NIE WCHODZI POD AWATAR ==== */ /* Dolny rząd karty (etap, termin, osoby, „Przenieś do…”) był jednym wierszem bez zawijania: w wąskiej kolumnie termin „Po terminie · 09.02.2025” kurczył się poniżej szerokości daty i awatar zakrywał ją (telefon poziomo, 3 kolumny). Termin ma teraz szerokość treści, a gdy brakuje miejsca, osoby i strzałka schodzą razem do drugiego rzędu. */ :root[data-ui="mobile"] .zt-karta-dol { flex-wrap: wrap; row-gap: 0; } :root[data-ui="mobile"] .zt-karta-dol > .zt-termin, :root[data-ui="mobile"] .zt-karta-dol > .zt-termin.is-late { flex: none; } /* ============================ 12. TELEFON POZIOMO: NAGŁÓWEK I STOPKA OKNA 48 PX ===== */ /* Wysokość ekranu ~380 px: nagłówek i stopka okna po 48 px (przyciski 40 + 4 px z góry i z dołu; cel dotyku 44 px z ::before) zamiast 52 / 56 — pole robocze okna rośnie z 272 do 284 px. */ :root[data-ui="mobile"][data-telefon-poziomo] { --h-naglowek-okna: 48px; --h-stopka-okna: 48px; } :root[data-ui="mobile"][data-telefon-poziomo] #modal-root .modal:not(.project-costs-modal, .message-hub-modal) > header { min-height: var(--h-naglowek-okna); padding-block: calc((var(--h-naglowek-okna) - var(--h-control) - 1px) / 2); } :root[data-ui="mobile"][data-telefon-poziomo] #modal-root .modal:not(.project-costs-modal) > footer { box-sizing: border-box; min-height: var(--h-stopka-okna); padding-block: calc((var(--h-stopka-okna) - var(--h-control) - 1px) / 2); } /* Pasek wyszukiwania Projektów nie jest przyklejony poziomo: razem z górnym paskiem zabierał 25 % ekranu. */ :root[data-ui="mobile"][data-telefon-poziomo] .pl-wiersz.pl-naglowek { position: static; } /* ============================ 13. WOLNE MIEJSCE W NAGŁÓWKU I STOPCE ========= */ /* Zestawienie: pusta rozpórka z wzoru dzieliła wolne miejsce z tytułem po połowie — tytuł w jednej linii („Zestawienie – Konstrukcja / wersja”) ucinał się po 12 znakach. */ :root[data-ui="mobile"] #modal-root .modal.calculation-modal > header::after { display: none; } /* Oferta: rozpórka między „Anuluj” a „Zapisz zmiany” rozpychała jeden przycisk kosztem drugiego — dwa równe przyciski, „Więcej ⋯” obok. */ :root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal.ofk-okno > footer > .ofd-sp { display: none; } /* ============================ 14. PROMIEŃ KONTROLEK: POZOSTAŁE WYJĄTKI ======= */ /* Kontrolka = --r-sm (8). Zostają świadomie okrągłe: znak „?” i „×” w nagłówku okna (podświetlenie), przyciski „+” na osi (.dod-plus) i chipy filtrów (pigułka = znacznik, nie pole); kontener przełącznika segmentowego ma 12 px, bo otacza przyciski 8 px z odstępem 3 px (rogi współśrodkowe). */ :root[data-ui="mobile"] :is(.pcost-wynik-przycisk, .pm-pokaz-przycisk, .zr-wyb, .zr-cb, .btn, .zh-szukaj-otworz, .zh-filtry-telefon, .icon-button.pager-arrow, .icon-button.mini, .zn-isel, .view-as-trigger, .zr-pole) { border-radius: var(--r-sm); } :root[data-ui="mobile"] #modal-root :is(.zn-isel, .pl-data-pole) { border-radius: var(--r-sm); } /* ============================ 15. RAPORTY: NAZWA PROJEKTU I KLIENT ============== */ /* Link projektu miał ujemne marginesy pod pole dotyku 32 px liczone dla JEDNEJ linii; dwuwierszowa nazwa wciągała nazwę klienta o ~6 px na siebie. Pole dotyku z ::before (jak pozostałe linki), marginesy zerowe. */ :root[data-ui="mobile"] .raporty-widok .dash-table .dash-project-link { position: relative; min-height: 0; margin-block: 0; } :root[data-ui="mobile"] .raporty-widok .dash-table .dash-project-link::before { content: ""; position: absolute; top: 50%; right: 0; left: 0; height: max(100%, var(--cel-dotyku)); transform: translateY(-50%); } /* ============================ 16. POZOSTAŁE ODSTĘPSTWA OD SKALI ================ */ /* Kalkulator (strona w ramie): nagłówek miał 49 / 50 px (padding-top zamiast wysokości) — wysokość z tokenu jak każdy nagłówek. */ :root[data-ui="mobile"] #modal-root .modal.project-costs-modal > header.project-cost-head-bar.project-cost-calculator-head { box-sizing: border-box; min-height: var(--h-naglowek-okna); padding-block: calc((var(--h-naglowek-okna) - var(--h-control) - 1px) / 2); align-items: center; } /* „Dla klienta”: przyciski okna 44 px (stopka 60 px) → zwykła kontrolka, stopka 56 px. */ :root[data-ui="mobile"] #modal-root .modal.dk-okno .button { height: var(--h-control); min-height: var(--h-control); } /* Zakładki Pulpitu (Mój pulpit / Firma / Działy / Prezentacje): przyciski 36 px w kontenerze 40 px, a każdy inny przełącznik ma 34 (odstęp 3 px). */ :root[data-ui="mobile"] .pd-zakladki { --seg-obw: 6px; padding: 3px; gap: 0; } /* ============================ 17. STOPKA: [ANULUJ] [GŁÓWNE] — DWA RÓWNE PRZYCISKI ====== */ /* Decyzja właściciela (29.10.2026): kolejność stopki zawsze „Anuluj” (biały, z ramką) po lewej, główne działanie wyróżnione na końcu; telefon: dwa przyciski równej szerokości w jednym rzędzie. Dodatki chowają się pod „Więcej ⋯” albo są samą ikoną: Design — „Dla klienta” i „Podgląd kart” w menu (kontener .stopka-wiecej--telefon: na telefonie menu, na komputerze i tablecie przezroczysty, przyciski stoją w stopce jak dotąd); kartoteki — „Pomoc” jako ikona 40 × 40 przed „Anuluj” (opis po tytule przycisku, funkcja bez zmian). */ :root[data-ui="tablet"] .stopka-wiecej--telefon { display: contents; } :root[data-ui="tablet"] .stopka-wiecej--telefon > .stopka-wiecej-przycisk { display: none; } :root[data-ui="tablet"] .stopka-wiecej--telefon > .stopka-wiecej-panel { position: static; display: contents; } :root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal.design-editor-modal > footer .inline-actions { display: flex; flex: 1 1 100%; gap: var(--s-2); } :root[data-ui="mobile"] #modal-root .modal > footer > .block-help-btn { flex: none; gap: 0; width: var(--h-control); min-width: var(--h-control); padding: 0; font-size: 0; } :root[data-ui="mobile"] #modal-root .modal > footer > .block-help-btn svg { width: 20px; height: 20px; } :root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal.design-editor-modal > footer .inline-actions > .button:not(.stopka-wiecej-przycisk) { flex: 1 1 0; min-width: 0; } :root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal.ofk-okno > footer > .button:not(.stopka-wiecej-przycisk) { flex: 1 1 0; min-width: 0; } /* Okno klienta: „Konta klientów” jako ikona 40 × 40 (opis w podpowiedzi) — stopka zostaje jednym rzędem [Anuluj] [Zapisz] (było: osobny pełny rząd, 104 px). */ :root[data-ui="mobile"] #modal-root .modal > footer > [data-konta-klienta-otworz] { flex: none; gap: 0; width: var(--h-control); min-width: var(--h-control); padding: 0; } :root[data-ui="mobile"] #modal-root .modal > footer > [data-konta-klienta-otworz] .przycisk-napis { display: none; } /* sam znak ikony (pion i poziom); nazwa w aria-label i podpowiedzi */ :root[data-ui="mobile"] #modal-root .modal > footer > [data-konta-klienta-otworz] .icon { width: 20px; height: 20px; } /* ============================ 18. USTAWIENIA I PRODUKCJA: OSTATNIE ROZNE WYSOKOSCI ======== */ /* Samodzielny przycisk w formularzu Ustawień (Wgraj, Zapisz klucz…) = zwykła kontrolka 40 px; 32 px zostaje w wierszach tabel. */ :root[data-ui="mobile"] .settings-page .button.mini:not(:is(td, th) .button.mini) { height: var(--h-control); min-height: var(--h-control); } /* Przełącznik „Zgłoszenia / Montaż / Karta pracy”: odstęp 3 px jak każdy segment (przyciski 34 px w kontenerze 40 px, było 36). */ :root[data-ui="mobile"] :is(.hala-pasek .segmented, .segmented.hala-zakladki) { --seg-obw: 6px; padding: 3px; }