/* ============================================================================ 40-tablet-skala-faza2.css — TABLET (dotyk, szeroki ekran): dokończenie jednej skali interfejsu (faza 2, 29.10.2026) ---------------------------------------------------------------------------- Opis: DOKUMENTACJA/SKALA-UI-2026-10-29.md, część „Faza 2 — tablet”. Wszystkie reguły tylko dla :root[data-ui="tablet"], wymiary WYŁĄCZNIE z tokenów (00-tokens.css, blok tabletu). Plik ładowany ostatni — reguły okien i widoków (często z #modal-root i klasą okna) przebija waga selektora (:root + #modal-root + klasa okna), bez obejść `:not(#…)` i bez !important (strażnik css-hack-id). Telefon i komputer nie widzą żadnej z nich. Spis: 1 promień · 2 pole dotyku 44 px · 3 menu · 4 nagłówki okien · 5 stopki okien · 6 odstępstwa z pomiaru · 7 wygląd widoków. ============================================================================ */ /* === 1. PROMIEŃ KONTROLEK = --r-sm (8 px) w całej aplikacji, także w oknach (karty i panele --r) ======================================== */ :root[data-ui="tablet"], :root[data-ui="tablet"] .modal, :root[data-ui="tablet"] .app-confirm { --okno-przycisk-r: var(--r-sm); } /* „×” w nagłówku okna: raz kółko, raz kwadrat z rogiem 8 — jeden kształt (jak „?” obok i jak w oknach kartotek). */ :root[data-ui="tablet"] #modal-root .modal > header .icon-button[data-action="close-modal"] { border-radius: var(--r-sm); } /* === 2. POLE DOTYKU 44 px (--cel-dotyku) bez powiększania wyglądu ========================================================================= Kontrolka 32 / 34 / 40 px ma niewidoczne ::before 44 px (wzór: 13-cel-dotyku.css dla .mini i komórek tabel, .dod-plus). Wysokość pola 44 px, szerokość — większa z (kontrolka, 44). Pola tekstowe (input, select) nie mają pseudoelementów: zostają 40 px (wyjątek opisany w dokumentacji). */ :where(:root[data-ui="tablet"] :is(.button, .icon-button, .ghost-button, .danger-button, .primary-button, .upload-button, .help-button, .modal-help-btn, .orders-help-btn, .ui-ik, .kt-ikona, .kl-ikona, .klienci-wiecej, .party-more, .dziennik-link, .dash-project-link, .pm-link, .pm-wiecej, .pf-lejek-w, .cat-th.is-sortable, .ofk-pg, .rich-emoji-toggle, .rich-sketch-toggle, .rich-authors-toggle, .rich-expand-toggle, .dash-tab, .tab, .pm-filtr, .fch, .pz-numer, .user-chip-trigger, .segmented > button, .views > button, .pd-zakladka, .pln-ik, .pln-btn, .row-menu > summary, .material-expand-caret-btn, .prio-check, .zt-dzien, summary, button.status-pill, .pcost-lnk, .pcost-lnk2, .dk-lnk)) { position: relative; } :root[data-ui="tablet"] :is(.button, .icon-button, .ghost-button, .danger-button, .primary-button, .upload-button, .help-button, .modal-help-btn, .orders-help-btn, .ui-ik, .kt-ikona, .kl-ikona, .klienci-wiecej, .party-more, .dziennik-link, .dash-project-link, .pm-link, .pm-wiecej, .pf-lejek-w, .cat-th.is-sortable, .ofk-pg, .rich-emoji-toggle, .rich-sketch-toggle, .rich-authors-toggle, .rich-expand-toggle, .dash-tab, .tab, .pm-filtr, .fch, .pz-numer, .user-chip-trigger, .segmented > button, .views > button, .pd-zakladka, .pln-ik, .pln-btn, .row-menu > summary, .material-expand-caret-btn, .prio-check, .zt-dzien, summary, button.status-pill, .pcost-lnk, .pcost-lnk2, .dk-lnk)::before { content: ""; position: absolute; top: 50%; left: 50%; width: max(100%, var(--cel-dotyku)); height: max(100%, var(--cel-dotyku)); transform: translate(-50%, -50%); } /* Przełączniki: pole dotyku nie wychodzi poziomo poza przycisk (sąsiednie pozycje stoją obok siebie bez przerwy). */ :root[data-ui="tablet"] :is(.segmented > button, .views > button, .pd-zakladka, .dash-tab, .tab, .pm-filtr, .fch)::before { width: 100%; } /* Wiersz „Pokaż więcej”, odnośniki tekstowe w wierszach: wysokość wiersza listy (--h-row = 44), wygląd bez zmian. */ :root[data-ui="tablet"] :is(.pm-wiecej) { min-height: var(--h-row); } /* === 3. MENU BOCZNE — pozycja menu to wiersz listy: --h-row (44) =================================================================== */ :root[data-ui="tablet"] .nav-item { min-height: var(--h-row); } @container menu (width < 120px) { :root[data-ui="tablet"] .sidebar :is(.nav-item, summary) { height: var(--h-row); } } /* === 4. NAGŁÓWKI OKIEN — jedna wysokość: --h-naglowek-okna (jeden wiersz) albo --h-naglowek-okna-2 (tytuł z podtytułem) ================== */ :root[data-ui="tablet"] #modal-root .modal > header { box-sizing: border-box; align-items: center; min-height: var(--h-naglowek-okna); padding-block: var(--s-1); } :root[data-ui="tablet"] #modal-root .modal > header:has(> div > p) { min-height: var(--h-naglowek-okna-2); } :root[data-ui="tablet"] #modal-root .modal > header > div > p { margin-block: 0; } /* Kalkulator (strona w ramie): ten sam nagłówek co okna (było 50 px z liczby wpisanej w arkuszu). */ :root[data-ui="tablet"] #modal-root .modal.project-costs-modal > header.project-cost-head-bar { min-height: var(--h-naglowek-okna); } /* === 5. STOPKI OKIEN — jedna reguła: przyciski po prawej, „Pomoc” z lewej (rozpórka), główny ostatni; „Anuluj” i reszta = biały przycisk z ramką ===== */ :root[data-ui="tablet"] #modal-root .modal > footer { justify-content: flex-end; } :root[data-ui="tablet"] #modal-root .modal > footer :is(.pln-sp, .ofd-sp) { display: none; } :root[data-ui="tablet"] #modal-root .modal.design-editor-modal > footer > .inline-actions > [data-action="close-modal"] { margin-right: 0; } :root[data-ui="tablet"] #modal-root .modal.design-editor-modal > footer > .inline-actions { justify-content: flex-end; } :root[data-ui="tablet"] #modal-root .modal > footer .button:not(.primary, .danger, .warn, :disabled) { border-color: var(--line-strong); background: var(--surface); color: var(--text); } :root[data-ui="tablet"] #modal-root .modal > footer .button:not(.primary, .danger, .warn):hover:not(:disabled) { background: var(--surface-2); } /* === 6. ODSTĘPSTWA Z POMIARU (skala_pomiar.py) ====================================================================================== */ :root[data-ui="tablet"] .zo-pasek-osi { --zo-ster-h: var(--h-control); } /* „+” w pasku osi: było 44 (zapasowa wartość) */ :root[data-ui="tablet"] input.uzy-grupa-nazwa:not([type="checkbox"]):not([type="radio"]) { min-height: var(--h-control-sm); height: var(--h-control-sm); } /* nazwa działu w wierszu */ /* === 7. WYGLĄD WIDOKÓW I OKIEN (przegląd 2× na tablecie) =============================================================================== */ /* 7.1 Tytuł okna: jeden krój (Bricolage, 700) we wszystkich oknach — „Edytuj projekt” i „Nowe zadanie” były zwykłym pismem, reszta krojem tytułów. Kalkulator ma własny (mniejszy) tytuł. */ :root[data-ui="tablet"] #modal-root .modal:not(.project-costs-modal) > header :is(h2, h3) { font-family: var(--font-tytul); font-size: var(--t-lg); font-weight: var(--w-bold); letter-spacing: var(--ls-tytul); line-height: var(--lh-base); } /* Stopka Design: „Podgląd kart dla klienta” zostaje akcentowym (miękkim) przyciskiem. */ :root[data-ui="tablet"] #modal-root .modal.design-editor-modal > footer .button.design-footer-presentation-button { border-color: transparent; background: var(--accent-soft); color: var(--accent-strong); } /* 7.2 Przełącznik w obramowaniu (Produkcja i montaż, Raporty, Użytkownicy, Populacja w oknie projektu) = ten sam przełącznik co wszędzie: taca 3 px, biały aktywny. */ :root[data-ui="tablet"] .segmented:is(.hala-zakladki, .uzy-zakladki, .project-population-tryb, .poczta-jezyki, :not([class*=" "])) { --seg-obw: 6px; gap: 3px; padding: 3px; border: 0; border-radius: var(--r); background: var(--surface-3); } :root[data-ui="tablet"] .segmented:is(.hala-zakladki, .uzy-zakladki, .project-population-tryb, .poczta-jezyki, :not([class*=" "])) > button { min-height: calc(var(--h-tab) - var(--seg-obw)); height: calc(var(--h-tab) - var(--seg-obw)); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-muted); font-size: var(--t-sm); font-weight: var(--w-bold); } :root[data-ui="tablet"] .segmented:is(.hala-zakladki, .uzy-zakladki, .project-population-tryb, .poczta-jezyki, :not([class*=" "])) > button:hover { background: transparent; color: var(--text); } :root[data-ui="tablet"] .segmented:is(.hala-zakladki, .uzy-zakladki, .project-population-tryb, .poczta-jezyki, :not([class*=" "])) > button:is(.active, [aria-selected="true"], [aria-pressed="true"]) { background: var(--surface); box-shadow: var(--cien-1); color: var(--text); } /* 7.3 „?” przy tytule sekcji (Ustawienia): mały znak 32 px zamiast kółka 40 px, które rozpychało wiersz; pole dotyku 44 px z ::before (sekcja 2). */ :root[data-ui="tablet"] :is(h2, h3) > .help-button { width: var(--h-control-sm); height: var(--h-control-sm); margin-block: calc(var(--s-1) * -1); border-radius: var(--r-sm); } /* 7.4 Lejek: pasek sum i szukanie — gdy brakuje miejsca, szukanie zajmuje własną linię, a obie sumy stoją razem pod nim (nie „Sprzedane” samotnie w trzeciej). */ @container lejek (max-width: 900px) { :root[data-ui="tablet"] .lejek-szukaj { flex: 1 1 100%; } } /* 7.5 Zamówienia: wybór projektu węższy, szukanie dostaje więcej miejsca (podpowiedź nie ucina się w pół zdania). */ :root[data-ui="tablet"] .zr-fil > :first-child { flex: 0 1 240px; } /* === 8. PROMIEŃ KONTROLEK — pola i przyciski z własnym rogiem wpisanym w arkuszu widoku (pomiar: promień ≠ 8) ============================== */ :root[data-ui="tablet"] :is(.pln-btn, .zr-pole, .lejek-szukaj, .pl-data-pole, .kl-wiecej-przycisk, .klienci-wiecej, .block-image-overlay-action, .supplier-contact-remove) { border-radius: var(--r-sm); } :root[data-ui="tablet"] #modal-root .modal .mt-okm .btn { border-radius: var(--r-sm); } :root[data-ui="tablet"] .modal.ofk-okno :is(.ofv .button, .ofk-cbt, > footer .button, .ofk-wiecej) { border-radius: var(--r-sm); } /* === 9. UKŁAD (przegląd 2×) ========================================================================================================== */ :root[data-ui="tablet"] :is(.help-button, .orders-help-btn) { border-radius: var(--r-sm); } /* „?” przy pasku kartoteki: kwadrat z rogiem 8, nie kółko */ /* Notatki: boczny margines strony jak na pozostałych ekranach (był 16 zamiast 24 px — karta wystawała poza kolumnę innych stron). */ :root[data-ui="tablet"] .content:has(.zn-notes) { --margines-roboczy-x: var(--s-5); } /* Wynik w Kalkulatorze na wąskim tablecie (pion): dwie kolumny zamiast trzech — Konstrukcje i Usługi jedna pod drugą, Podsumowanie po prawej na całą wysokość (trzy kolumny po ~230 px łamały nazwy w 3–4 linie i zostawiały pustą środkową kolumnę). */ @media (max-width: 980px) { :root[data-ui="tablet"] .pcost-wynik > .project-cost-summary-panel.pcost-wynik-kolumny { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: max-content minmax(0, 1fr); } :root[data-ui="tablet"] .pcost-wynik-kolumny > .pcost-wynik-kolumna:nth-child(1) { grid-column: 1; grid-row: 1; } :root[data-ui="tablet"] .pcost-wynik-kolumny > .pcost-wynik-kolumna:nth-child(2) { grid-column: 1; grid-row: 2; } :root[data-ui="tablet"] .pcost-wynik-kolumny > .pcost-wynik-kolumna:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; } } /* === 10. POPRAWKI Z TESTU KOŃCOWEGO (29.10.2026, agent „test”) ================================================================================ */ /* 10.1 Tablica zadań: dolny rząd karty zawija się — osoby, dzwonek i strzałka schodzą razem do drugiej linii; znaczek etapu nie skraca się do „D…”, data nie jest przykrywana awatarem. */ :root[data-ui="tablet"] .zt-karta-dol { flex-wrap: wrap; row-gap: 0; } :root[data-ui="tablet"] .zt-karta-dol > :is(.zl-etap, .zt-termin) { flex: 0 0 auto; } /* 10.2 Paski edytora tekstu: przyciski tej samej wysokości co listy w pasku (40), nie 32. */ :root[data-ui="tablet"] .rich-toolbar :is(button, .rich-image-button, .rich-attach-button) { min-width: var(--h-control); height: var(--h-control); } /* 10.3 Rzędy o różnych wysokościach: karta konstrukcji w Design, klucz w Ustawieniach, rozwijanie działu, przyciski w nagłówku okna — wszystko wysokości kontrolki. */ :root[data-ui="tablet"] .design-construction-sidebar .design-construction-card-main { min-height: var(--h-control); } :root[data-ui="tablet"] .pole-klucza > .button.mini { height: var(--h-control); } :root[data-ui="tablet"] .uzy-rozwin { width: var(--h-control); height: var(--h-control); } :root[data-ui="tablet"] #modal-root .modal > header .button.mini { height: var(--h-control); } /* 8b. Dalsze przyciski i pola z rogiem 12 wpisanym w arkuszu widoku (pomiar po 1. przebiegu: 139 z 2548 kontrolek). `` — jak w sekcji 4. */ :root[data-ui="tablet"] :is(.pcost-wynik-przycisk, .zr .btn, .zr-wyb, .timeline-search, .tree-search, .catalog-toolbar .button, .kolumny-przycisk, .stopka-wiecej-przycisk, .combo-szukaj > .combo-input, .combo-input, .uzy-grupa-nazwa) { border-radius: var(--r-sm); }