/* ============================================================================ 11-edytor-pasek.css — pasek edytora tekstu na telefonie (M2, 18.10.2026; wzór: artefakt okna_css.txt B31–B36) ---------------------------------------------------------------------------- Poprawka błędu: pasek z ~16 narzędziami przewijał się w bok i część przycisków była schowana. Teraz: • telefon PION — zwinięty: wiersz „Aa · przerwa · pełny ekran”; po „Aa” siatka 7 kolumn × 3 wiersze, wszystkie przyciski widoczne bez przewijania; pole pisania min. 180 px; • telefon POZIOMO — jeden wiersz (Aa, narzędzia, pełny ekran); nagłówek karty „Opis…” ukryty; • przy pisaniu okno oddaje miejsce edytorowi (klasa ed-fokus nadawana w js/okna/edytor-zalaczniki.js); • lista „Załącznik jako link” jako dolny arkusz; panel emotikon pod paskiem, bez przycinania maską. Zakres: każdy edytor poza czatem (.chat-rich-editor) i Notatkami (.note-editor2) — te mają własny, wcześniejszy układ „Aa” (4-projekty-zadania-czat.css, 4c-notatki.css). Przełącznik „Aa” (klasa is-format-open) obsługuje akcje-czat.js. Tylko :root[data-ui="mobile"]; zero !important. ============================================================================ */ /* --- „Aa”: zawsze widoczny, gdy edytor ma tu układ telefonu --- */ :root[data-ui="mobile"] .rich-editor:not(.chat-rich-editor, .note-editor2 .rich-editor) .rich-toolbar > .rich-aa-toggle { display: inline-grid; place-items: center; min-width: 44px; height: 44px; font-size: var(--t-base); font-weight: var(--w-strong); } :root[data-ui="mobile"] .rich-editor.is-format-open:not(.chat-rich-editor, .note-editor2 .rich-editor) .rich-toolbar > .rich-aa-toggle { background: var(--accent-soft); color: var(--accent-strong); } /* --- Zwinięty pasek: tylko Aa i pełny ekran --- */ :root[data-ui="mobile"] .rich-editor:not(.is-format-open, .chat-rich-editor, .note-editor2 .rich-editor) .rich-toolbar { flex-wrap: nowrap; justify-content: space-between; overflow: visible; padding-right: var(--s-1); -webkit-mask-image: none; mask-image: none; } :root[data-ui="mobile"] .rich-editor:not(.is-format-open, .chat-rich-editor, .note-editor2 .rich-editor) .rich-toolbar > :not(.rich-aa-toggle, .rich-expand-wrap) { display: none; } /* --- Rozwinięty pasek: wspólne --- */ :root[data-ui="mobile"] .rich-editor.is-format-open:not(.chat-rich-editor, .note-editor2 .rich-editor) .rich-toolbar { overflow: visible; padding: var(--s-1); padding-right: var(--s-1); -webkit-mask-image: none; mask-image: none; } :root[data-ui="mobile"] .rich-editor.is-format-open:not(.chat-rich-editor, .note-editor2 .rich-editor) .rich-toolbar > .rich-sep { display: none; } :root[data-ui="mobile"] .rich-editor.is-format-open:not(.chat-rich-editor, .note-editor2 .rich-editor) .rich-toolbar > .rich-expand-wrap { margin-left: 0; } /* --- Rozwinięty, PION: siatka 7 × 3 --- */ :root[data-ui="mobile"]:not([data-telefon-poziomo]) .rich-editor.is-format-open:not(.chat-rich-editor, .note-editor2 .rich-editor) .rich-toolbar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; } :root[data-ui="mobile"]:not([data-telefon-poziomo]) .rich-editor.is-format-open:not(.chat-rich-editor, .note-editor2 .rich-editor) .rich-toolbar > * { width: auto; min-width: 0; } :root[data-ui="mobile"]:not([data-telefon-poziomo]) .rich-editor.is-format-open:not(.chat-rich-editor, .note-editor2 .rich-editor) .rich-toolbar > .rich-aa-toggle { grid-column: 1; grid-row: 1; } :root[data-ui="mobile"]:not([data-telefon-poziomo]) .rich-editor.is-format-open:not(.chat-rich-editor, .note-editor2 .rich-editor) .rich-toolbar > .rich-expand-wrap { grid-column: 7; grid-row: 1; } :root[data-ui="mobile"]:not([data-telefon-poziomo]) .rich-editor.is-format-open:not(.chat-rich-editor, .note-editor2 .rich-editor) .rich-toolbar > :is(select, .combo) { grid-column: span 2; width: auto; } :root[data-ui="mobile"]:not([data-telefon-poziomo]) .rich-editor.is-format-open:not(.chat-rich-editor, .note-editor2 .rich-editor) .rich-toolbar > .rich-expand-wrap > button { width: 100%; } :root[data-ui="mobile"]:not([data-telefon-poziomo]) .rich-editor.is-format-open:not(.chat-rich-editor, .note-editor2 .rich-editor) .rich-toolbar > .rich-emoji-wrap { display: grid; } :root[data-ui="mobile"]:not([data-telefon-poziomo]) .rich-editor.is-format-open:not(.chat-rich-editor, .note-editor2 .rich-editor) .rich-toolbar > .rich-emoji-wrap > button { width: 100%; } /* --- Pole pisania: min. 180 px w pionie --- */ :root[data-ui="mobile"]:not([data-telefon-poziomo]) .modal .rich-editor:not(.chat-rich-editor, .note-editor2 .rich-editor) .rich-editable { min-height: 180px; } /* --- Rozwinięty, POZIOMO: jeden wiersz (zawija się dopiero, gdy okno jest węższe niż pasek) --- */ :root[data-ui="mobile"][data-telefon-poziomo] .rich-editor.is-format-open:not(.chat-rich-editor, .note-editor2 .rich-editor) .rich-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0; } :root[data-ui="mobile"][data-telefon-poziomo] .rich-editor.is-format-open:not(.chat-rich-editor, .note-editor2 .rich-editor) .rich-toolbar > .rich-expand-wrap { margin-left: auto; } /* Poziomo nagłówek karty opisu („Opis prac dla projektanta”) schowany — edytor dostaje całą wysokość. */ :root[data-ui="mobile"][data-telefon-poziomo] .design-description-panel > .form-panel-head { display: none; } /* --- Przy pisaniu okno oddaje miejsce edytorowi: znika wybór Design i zakładki okna --- */ :root[data-ui="mobile"] #modal-root .modal.ed-fokus :is(.design-construction-sidebar, [data-ed-fokus-ukryj]) { display: none; } /* --- Panel emotikon: pod paskiem (pozycję liczy JS), niski w poziomie, bez przycinania --- */ :root[data-ui="mobile"][data-telefon-poziomo] .rich-emoji-panel { max-height: 200px; } /* Telefon PIONOWO (GUI-FIX-A, wzór B34): panel w szerokości karty edytora (szerokość i położenie liczy JS), 8 kolumn bez odstępów, pola dotyku 44 px — zamiast 11 kolumn po 36 px na całą szerokość ekranu. */ :root[data-ui="mobile"]:not([data-telefon-poziomo]) .rich-emoji-panel.is-pod-paskiem { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; padding: var(--s-2); max-height: 240px; } /* wzór: odstęp 2 px, wewnętrzny 8 px (GUI-DESIGN-FIX1; wcześniej 0 / 4 px) */ :root[data-ui="mobile"]:not([data-telefon-poziomo]) .rich-emoji-panel.is-pod-paskiem .rich-emoji { aspect-ratio: auto; min-width: 0; height: var(--h-control); } /* --- Pełny ekran edytora = okno jak każde inne (GUI-FIX-A; wzór: artefakt `edRozwin` — nagłówek + opis + stopka „Gotowe”) --- Wygląd nagłówka i stopki jak w oknach telefonu (2-okna.css §1): tło okna, tytuł 16/600, opis 13, stopka w strefie kciuka. */ :root[data-ui="mobile"] .rich-expand-overlay { padding: 0; place-items: stretch; background: var(--okno-tlo); backdrop-filter: none; } :root[data-ui="mobile"] .rich-expand-panel { width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; box-shadow: none; background: var(--surface); } /* wzór: tło okna = --pow (karta), nagłówek 12/8/8/16 z kreską */ :root[data-ui="mobile"] .rich-expand-head { flex: none; min-height: calc(var(--app-bar-h) + var(--bezpieczna-gora)); padding: calc(var(--bezpieczna-gora) + var(--s-3)) var(--s-2) var(--s-2) var(--s-4); border-bottom: 1px solid var(--line); background: transparent; } :root[data-ui="mobile"] .rich-expand-tytul { display: grid; gap: 2px; min-width: 0; } :root[data-ui="mobile"] .rich-expand-tytul > strong { font-family: var(--font-tytul); font-size: var(--t-lg); font-weight: 600; line-height: var(--lh-base); } :root[data-ui="mobile"] .rich-expand-tytul > small { font-size: var(--t-sm); color: var(--text-faint); } :root[data-ui="mobile"] .rich-expand-panel .rich-editor.rich-expand-editor { margin: var(--s-3) var(--s-4) 0; border: 1px solid var(--line-strong); border-radius: var(--r-sm); } :root[data-ui="mobile"] .rich-expand-stopka { display: flex; flex: none; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-3); padding: var(--s-2) var(--s-4) calc(var(--s-2) + var(--bezpieczny-dol)); border-top: 1px solid var(--line); background: var(--surface); } :root[data-ui="mobile"] .rich-expand-stopka > .button { flex: 0 0 auto; min-width: min(188px, 100%); min-height: var(--h-control); font-size: var(--t-base); } /* wzór: „Gotowe” 188 × 44 px po prawej */ /* poziomo: nagłówek i stopka w jednym wąskim rzędzie, bez opisu (jak w oknach — POPR2-n22) */ :root[data-ui="mobile"][data-telefon-poziomo] .rich-expand-head { min-height: 0; padding: var(--s-1) var(--s-4); } :root[data-ui="mobile"][data-telefon-poziomo] .rich-expand-tytul > small { display: none; } :root[data-ui="mobile"][data-telefon-poziomo] .rich-expand-stopka { margin-top: var(--s-2); padding-block: var(--s-2) calc(var(--s-2) + var(--bezpieczny-dol)); } :root[data-ui="mobile"][data-telefon-poziomo] .rich-expand-stopka > .button { min-height: 44px; } /* --- Lista „Załącznik jako link” = dolny arkusz --- */ :root[data-ui="mobile"] .zal-menu.is-arkusz { inset: auto 0 0 0; width: auto; max-height: 60dvh; padding: var(--s-2) var(--s-2) calc(var(--s-3) + env(safe-area-inset-bottom)); border-width: 1px 0 0; border-radius: var(--r-lg) var(--r-lg) 0 0; } :root[data-ui="mobile"] .zal-menu.is-arkusz .zal-poz { min-height: 56px; padding: var(--s-2) var(--s-3); } /* 23.10.2026 (przegląd telefonu): przycisk „powiększ edytor” miał 36 px szerokości (33 pt) — szerokość jak wysokość kontrolki. */ :root[data-ui="mobile"] .rich-expand-toggle { flex: 0 0 var(--h-control); width: var(--h-control); min-width: var(--h-control); } /* Przycisk „powiększ edytor” ma 36 px wysokości (wygląd bez zmian) — pole dotyku do 44 px dokłada ::after (przegląd telefonu 23.10.2026). */ :root[data-ui="mobile"] .rich-expand-toggle { position: relative; } :root[data-ui="mobile"] .rich-expand-toggle::after { content: ""; position: absolute; inset: -4px 0; }