/* ============================================================================ 15-zadania.css — zadania, podzadania, wykonawcy, notatki-tematy ---------------------------------------------------------------------------- Trzy miejsca dzielą te same klocki: kartoteka „Zadania i notatki" (widok pełnoekranowy, `.zn-page`), panel zadań w oknie projektu (`.todo-panel`) i kartoteka „Notatki" (`.zn-notes`). Wszędzie układ jest ten sam: DRZEWO po lewej — SZCZEGÓŁY albo FORMULARZ po prawej. Zadanie ma wielu wykonawców i każdy odhacza SWOJĄ część, dlatego stan bywa cząstkowy: kropka `.todo-dot.part` i procent na pasku `.todo-bar`. Wcięcia podzadań liczy JS (`padding-left` inline rośnie z głębokością) — arkusz nie zna poziomów drzewa i nie próbuje ich odtwarzać. ============================================================================ */ /* Szerokości kolumn tego widoku — brak dla nich tokenu, bo nigdzie indziej nie występują. Trzymamy je razem, żeby zmienić proporcje w jednym miejscu. */ .zn-page, .todo-panel { --zn-drzewo: 390px; --zn-lista: 300px; } /* === 1. KARTOTEKA PEŁNOEKRANOWA =========================================== */ /* Kartoteka wypełnia ekran BEZ przewijania strony — przewijają się dopiero drzewo i szczegóły. Ten sam wzorzec co okno projektu. */ .content:has(.zn-page) { display: grid; grid-template-rows: minmax(0, 1fr); height: calc(100dvh / var(--skala-ui) - var(--topbar-h) - var(--s-5)); min-height: 0; overflow: hidden; } .zn-page, .zn-body { display: flex; flex-direction: column; min-height: 0; } .zn-page { height: 100%; gap: var(--s-3); } .zn-body { flex: 1; } /* Przełącznik widoku (Moje / Zlecone / Gotowe) — pigułki na wspólnym tle. */ .zn-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); } /* Ten sam przełącznik w Harmonogramie (Timeline · Gantt · Kalendarz · Obciążenie — tor A) i na stronie „Zadania” (v15 b7; także „Tydzień | Miesiąc” kalendarza — wzór zh2: wybrane białe na szarym, jak widoki; v15 b10: „Wiersze | Karty” w Klientach). */ /* v15 b19: wymiary ze wzoru (ui-seg) — ramka 3 px, promień 12, tło --surface-3; przycisk na wysokość kontrolki, 13 px / 600. */ .zn-sub .views, .hg-przelacznik .views, .zh-r1 .views, .zt-kal-pasek .views, .kl-pasek .views { display: flex; gap: 3px; padding: 3px; border-radius: var(--r); background: var(--surface-3); } .zn-sub .view, .hg-przelacznik .view, .zh-r1 .view, .zt-kal-pasek .view, .kl-pasek .view { min-height: var(--h-control); padding: 0 var(--s-3); border-radius: var(--r-sm); color: var(--text-muted); font-size: var(--t-sm); font-weight: var(--w-bold); cursor: pointer; } .zn-sub .view.on, .hg-przelacznik .view.on, .zh-r1 .view.on, .zt-kal-pasek .view.on, .kl-pasek .view.on { background: var(--surface); color: var(--text); box-shadow: var(--cien-1); } /* Dwie kolumny: lista trzyma stałą szerokość, szczegóły biorą resztę. */ .zn-two { display: grid; grid-template-columns: minmax(0, var(--zn-drzewo)) minmax(0, 1fr); gap: var(--s-3); flex: 1; min-height: 0; } /* === 2. DRZEWO ZADAŃ (lewa kolumna) ======================================= */ /* Ujednolicenie 11.08.2026 — cień kontenera --cien-1 (jak .zn-notes-left wyżej). */ .zn-tree, .todo-tree { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--cien-1); } .zn-tree-top { display: flex; flex-direction: column; gap: var(--s-2); flex: none; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); } .zn-tree-top-row { display: flex; align-items: center; gap: var(--s-2); } .zn-sort-select { max-width: 60%; margin-left: auto; } /* Szukajka: ramkę rysuje kontener, pole zostaje gołe (inaczej widać dwie ramki). */ .tree-search { display: flex; align-items: center; gap: var(--s-2); height: var(--h-control); padding: 0 var(--s-2); border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); } /* `:not(...)` = podbicie szczegółowości do (0,3,1), inaczej bazowa reguła pól (0,2,1) zostawia polu WŁASNĄ ramkę w środku ramki `.tree-search` i widać dwie. Monolit v8 robi dokładnie to samo i podpisuje: „koniec podwójnej ramki" (27422). */ .tree-search input:not([type="checkbox"]):not([type="radio"]) { flex: 1; min-width: 0; height: 100%; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; } .zn-tree-body, .todo-tree-body { flex: 1; overflow: auto; padding: var(--s-1) 0; } .todo-tree-head { display: flex; flex-direction: column; gap: var(--s-2); position: sticky; top: 0; z-index: 1; padding: var(--s-3); border-bottom: 1px solid var(--line); background: var(--surface); color: var(--text-muted); font-weight: var(--w-medium); } .todo-tree-head-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); } /* Nagłówek grupy (projekt / bez projektu) — zwijany, z licznikiem do zrobienia. */ .zn-group { display: flex; align-items: center; gap: var(--s-2); width: 100%; padding: var(--s-2) var(--s-3); border-top: 1px solid var(--line); color: var(--text-muted); font-size: var(--t-sm); font-weight: var(--w-bold); text-align: left; cursor: pointer; } .zn-tree-body > .zn-group:first-child { border-top: 0; } .zn-group:hover { background: var(--surface-2); } .zn-group-caret { flex: none; width: var(--s-3); font-size: var(--t-xs); text-align: center; } .zn-group-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zn-group-badge { margin-left: var(--s-1); } /* Panel zadań w oknie projektu: to samo drzewo, tylko dwie kolumny obok siebie. Lista zadań dostaje szerokość STAŁĄ (`--zn-lista`, 300 px), a formularz edycji całą resztę. Poprzedni podział .9fr/1.1fr dzielił okno prawie po połowie: lista z krótkimi nazwami miała ~560 px pustki, a formularz z trzema polami w rzędzie i edytorem opisu dusił się na tej samej szerokości. */ .todo-panel { display: grid; grid-template-columns: minmax(260px, var(--zn-lista)) minmax(0, 1fr); height: 100%; } .todo-tree { border: 0; border-right: 1px solid var(--line); border-radius: 0; } .todo-detail-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: auto; padding: var(--s-4); } /* === 3. WĘZEŁ DRZEWA ====================================================== */ /* Wcięcie podzadania nadaje JS (padding-left rośnie z głębokością) — tu tylko wygląd. */ .todo-node { display: flex; align-items: center; gap: var(--s-2); margin: 0 var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); cursor: pointer; } .todo-node:hover { background: var(--surface-2); } /* Ujednolicenie 11.08.2026 — pasek akcentu --s-1, jeden na całą aplikację. */ .todo-node.is-sel { background: var(--accent-soft); } /* POPR-n45: zaznaczenie = tło, bez paska z lewej */ /* STRZAŁKA ROZWIJANIA — cel do kliknięcia, nie ozdobnik. Miała 16 px szerokości i stopień 11 px; przy 8-pikselowej kropce statusu obok wyglądała jak przecinek i nie było widać, że w ogóle coś rozwija. Teraz kwadrat 22 px z wyraźnym trójkątem, obracany zamiast podmienianego znaku — ruch sam mówi, co się dzieje. Węzeł bez podzadań ma to pole PUSTE, ale zajęte, żeby tytuły wszystkich wierszy stały w jednej osi. */ .todo-caret { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: var(--r-sm); color: var(--text-muted); font-size: var(--t-2xs); line-height: 1; transition: background var(--szybko), color var(--szybko), transform var(--szybko); } .todo-caret.has { cursor: pointer; } .todo-caret.has:hover { background: var(--surface-3); color: var(--accent-strong); } /* Licznik podzadań przy tytule — od razu widać, że zadanie coś w sobie ma. */ .todo-node-kids { flex: none; min-width: 18px; padding: 1px var(--s-1); border-radius: var(--r-pill); background: var(--surface-3); color: var(--text-muted); font-size: var(--t-2xs); font-weight: var(--w-bold); text-align: center; } /* --- PODZADANIA: pudełko z kreską prowadzącą (jak w ClickUp) --------------- Wcześniej podzadanie było zwykłym wierszem odsuniętym inline'owym `padding-left` — z boku wyglądało jak zadanie główne, tylko wcięte. Teraz dzieci siedzą we własnym pudełku z pionową kreską i wcięciem, więc widać przynależność, a nie samo wcięcie. */ .todo-kids { position: relative; margin-left: 22px; padding-left: var(--s-3); } .todo-kids::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 6px; width: 2px; border-radius: var(--r-pill); background: var(--line-strong); } /* Sam wiersz podzadania: mniejszy stopień i poziomy łącznik do kreski. */ .todo-node.is-sub { position: relative; } .todo-node.is-sub .todo-node-title { font-size: var(--t-base); font-weight: var(--w-regular); } /* Łącznik MUSI sięgać do pionowej kreski, a wiersz ma własny margines boczny (`.todo-node { margin: 0 var(--s-2) }`). Bez doliczenia tych 8 px kreska kończyła się w powietrzu i zostawała widoczna przerwa — z boku wyglądało to jak połamana litera L, a nie jak połączenie z zadaniem nadrzędnym. */ .todo-node.is-sub::before { content: ""; position: absolute; left: calc((var(--s-3) + var(--s-2)) * -1); top: 50%; width: calc(var(--s-3) + var(--s-2)); height: 2px; border-radius: var(--r-pill); background: var(--line-strong); } .todo-node.is-root > .todo-node-title { font-weight: var(--w-bold); } .todo-node-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--w-medium); } .todo-node.is-done .todo-node-title { color: var(--text-faint); font-weight: var(--w-regular); text-decoration: line-through; } /* Licznik „odhaczone / wszyscy" albo procent — cyfry o równej szerokości. */ .todo-node-nm { flex: none; color: var(--text-muted); font-size: var(--t-xs); font-variant-numeric: tabular-nums; } /* B1c: skąd jest zadanie spoza „Zadań” (Etap, Design, Gwarancja, Plany) — spokojna plakietka w miejscu licznika. */ .todo-node-rodzaj { flex: none; padding: 0 var(--s-2); border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-medium); line-height: 1.6; } /* Pudełko reszty wiersza i termin (tura 4): na komputerze pudełko „znika" (dzieci stoją w wierszu jak dotąd), a termin jest tylko na telefonie — tam wiersz ma drugą linię (31-telefon-wzorzec.css). */ .todo-node-meta { display: contents; } .todo-node-termin { display: none; } /* Akcja „dodaj podzadanie" wychodzi spod kursora — drzewo zostaje spokojne. */ .todo-node-act { flex: none; opacity: 0; } .todo-node:hover .todo-node-act { opacity: 1; } /* Kropka stanu — te same tony co statusy w reszcie apki, więc „w toku" znaczy wszędzie to samo: open = do zrobienia · part = w toku · done = wykonane · over = po terminie. */ .todo-dot, .task-status-dot { --ton: var(--status-oczekuje); flex: none; width: var(--s-2); height: var(--s-2); border-radius: var(--r-pill); background: var(--ton); } :is(.zl-w, .zt-kolumna-glowa) > .todo-dot.open { box-sizing: border-box; border: 2px solid var(--line-strong); background: transparent; } .todo-dot.part, .task-status-dot.part { --ton: var(--status-wtoku); } .todo-dot.done, .task-status-dot.done { --ton: var(--status-gotowy); } .todo-dot.over, .task-status-dot.over { --ton: var(--danger); } /* Awatary wykonawców nachodzą na siebie; obrys = ta osoba już odhaczyła swoje. */ .todo-avas { display: inline-flex; flex: none; } .todo-avas .todo-ava:first-child { margin-left: 0; } /* NAPRAWA 11.08.2026 — kolor inicjałów dobierany do tła (kolor działu bywa jasny, a białe inicjały dawały wtedy 3,3:1 przy 9 px). Liczy to `kolorNapisuNa()` w public/js/rdzen/dane-projektu.js; szczegóły przy `.avatar` w 06-elementy. */ /* POPR2-awatar: inicjały 12 px (było 11 px — poniżej progu czytelności); ten sam rozmiar w awatarach pola „Dla kogo” (.asel-av). */ /* v15 b19 (wzór .zd-av): 26 px, tło = 24 % koloru osoby na powierzchni, inicjały w kolorze osoby przyciemnionym tuszem (czytelne także przy bardzo jasnym albo bardzo ciemnym kolorze działu i w ciemnym motywie); zrobione = zielona obwódka. */ .todo-ava { --avatar-d: 26px; --avatar-ramka: 2px; display: inline-grid; place-items: center; box-sizing: border-box; width: var(--avatar-d); height: var(--avatar-d); margin-left: 2px; border: 2px solid var(--surface); border-radius: var(--r-pill); background: color-mix(in srgb, var(--ava, var(--accent)) 24%, var(--surface)); color: color-mix(in srgb, var(--ava, var(--accent)) 70%, var(--text)); font-size: min(var(--t-xs), calc((var(--avatar-d) - 2 * var(--avatar-ramka)) * .44)); font-weight: var(--w-strong); line-height: 1; white-space: nowrap; } .todo-ava-wiecej { --ava: var(--text-faint); } /* „+N” — więcej niż 3 wykonawców */ /* Ciemny motyw: ciemny kolor działu (np. grafit) ginął na ciemnym tle (kontrast 2,5 : 1) — inicjały bliżej koloru tekstu. */ :root[data-theme="dark"] :is(.todo-ava, .zk-av) { background: color-mix(in srgb, var(--ava, var(--accent)) 24%, var(--line-strong)); color: color-mix(in srgb, var(--ava, var(--accent)) 35%, var(--text)); } /* ciemny motyw: kółko na jaśniejszym tle — awatar osoby z ciemnym kolorem nie znika w wierszu */ .todo-ava.is-done { box-shadow: 0 0 0 2px var(--ok); } /* === 4. SZCZEGÓŁY ZADANIA ================================================= */ /* `flex: 1` jest TU KONIECZNE — to ogniwo urywało łańcuch wysokości. Edytor opisu (`.rich-editor`) rośnie prawidłowo (`flex: 1 1 0%`), ale rósł tylko do wysokości TEGO pudełka, a ono miało `flex: 0 1 auto`, czyli kurczyło się do treści. Efekt: pole na opis miało 140 px minimum, a pod spodem zostawała pusta biel na całą resztę okna. Zadanie może zawierać tekst I RYSUNKI, więc pole musi brać całą dostępną wysokość. */ .todo-detail { display: flex; flex-direction: column; flex: 1; min-height: 0; } .todo-empty { padding: var(--s-7) var(--s-5); color: var(--text-faint); line-height: var(--lh-base); text-align: center; } .todo-d-head { display: flex; align-items: flex-start; gap: var(--s-3); margin-bottom: var(--s-3); } .todo-d-title { flex: 1; font-size: var(--t-lg); font-weight: var(--w-bold); line-height: var(--lh-tight); } .todo-d-title.is-done { color: var(--text-faint); text-decoration: line-through; } /* Pigułka stanu — ten sam ton co kropka w drzewie. */ .todo-pill { --ton: var(--status-oczekuje); flex: none; padding: 0 var(--s-3); border-radius: var(--r-pill); background: color-mix(in srgb, var(--ton) 16%, var(--surface)); color: var(--ton); font-size: var(--t-sm); font-weight: var(--w-bold); } .todo-pill.done { --ton: var(--status-gotowy); } .todo-pill.over { --ton: var(--danger); } .todo-pill.part { --ton: var(--status-wtoku); } .todo-d-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); color: var(--text-muted); } .todo-d-meta b { color: var(--text); font-weight: var(--w-medium); } .todo-d-meta b.is-over, .todo-due-over { color: var(--danger); font-weight: var(--w-bold); } /* Kropka rozdzielająca fragmenty metryki — czytelniejsza niż kreska. */ .todo-mnames { color: var(--text); font-weight: var(--w-medium); } .todo-mdiv { flex: none; width: 3px; height: 3px; border-radius: var(--r-pill); background: var(--line-strong); } .todo-remind { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--warn-strong); } .todo-d-tools { display: inline-flex; align-items: center; gap: var(--s-1); margin-left: auto; } .todo-block { display: flex; flex-direction: column; flex: 1; min-height: 0; margin-bottom: var(--s-4); } .todo-block-lbl, .task-detail-label { margin-bottom: var(--s-2); color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-bold); }.task-desc { flex: 1; min-height: 0; overflow: auto; white-space: pre-wrap; word-break: break-word; } /* Opis + stopka to jeden formularz — edytor ma rosnąć, stopka zostaje na dole. */ .todo-desc-form { display: flex; flex-direction: column; flex: 1; min-height: 0; } .zn-form .rich-editor, .todo-detail .rich-editor { display: flex; flex-direction: column; flex: 1; min-height: 0; } .task-rich-notes { --edytor-h: 140px; } /* Opis zadania (formularz i szczegóły) nie schodzi poniżej paska narzędzi + 140 px pola. Na tablecie (1024 px) wąska kolumna szczegółów zawijała pasek narzędzi w 3 rzędy, a `min-height: 0` wyżej ścinało samo pole opisu do zera — nie było gdzie pisać ani czego przeczytać. Najmniejsza wysokość = pasek + 140 px: pole ma `contain: size`, więc długość opisu jej nie powiększa — długi opis dalej przewija się w polu, a przyciski pod nim zostają na miejscu. Telefon ma własny układ (formularz na całą stronę, pole rośnie z treścią) i tej reguły nie dostaje (przegląd E1, 27.09). */ :root:not([data-ui="mobile"]) :is(.zn-form, .todo-detail) .task-rich-notes, :root:not([data-ui="mobile"]) :is(.todo-detail, .todo-detail .todo-block-main, .todo-detail .todo-desc-form) { min-height: min-content; } :root:not([data-ui="mobile"]) :is(.zn-form, .todo-detail) .task-rich-notes > .rich-editable { contain: size; } .task-rich-notes .rich-editable { flex: 1; min-height: var(--edytor-h); max-height: none; } /* Odhaczanie per-osoba: pole zostaje PUSTE do kliknięcia (ptaszek przezroczysty). */ .task-check { display: grid; place-items: center; flex: none; width: var(--s-5); height: var(--s-5); border: 2px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: transparent; cursor: pointer; } .task-check:hover { border-color: var(--status-gotowy); } .task-check:disabled { cursor: default; opacity: .6; } .task-check.checked { border-color: var(--status-gotowy); background: var(--status-gotowy); color: var(--text-invert); } /* Postęp = ilu wykonawców odhaczyło. Pasek czyta się szybciej niż „2/5". */ .todo-prog { display: flex; align-items: center; gap: var(--s-2); } .todo-prog b { color: var(--ok-strong); font-variant-numeric: tabular-nums; } .todo-bar { flex: 1; height: var(--s-2); overflow: hidden; border-radius: var(--r-pill); background: var(--surface-3); } .todo-bar span { display: block; height: 100%; background: var(--ok); } /* Stopka zostaje na dole panelu — akcje nie uciekają pod scroll. */ .todo-foot { display: flex; align-items: center; justify-content: space-between; flex: none; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); color: var(--text-muted); } .todo-foot-status { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-4); min-width: 0; } .todo-foot-acts { display: flex; align-items: center; gap: var(--s-2); flex: none; margin-left: auto; } .todo-foot-person { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text); font-weight: var(--w-medium); } .todo-foot-hint { color: var(--text-faint); font-size: var(--t-sm); } .todo-foot .todo-bar { flex: none; width: 130px; } .todo-col-tag { margin-left: auto; color: var(--text-muted); font-size: var(--t-xs); } .todo-col-tag.done { color: var(--ok-strong); font-weight: var(--w-medium); } .todo-dz { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); color: var(--text-faint); font-size: var(--t-sm); } /* === 5. FORMULARZ ZADANIA ================================================= */ /* Ujednolicenie 11.08.2026 — cień kontenera --cien-1 (jak drzewo obok). */ .zn-detail { display: flex; flex-direction: column; min-height: 0; overflow: auto; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--cien-1); } /* `.todo-detail-col >` DOPISANE — ta reguła rozciągała formularz tylko w widoku Zadania (`.zn-detail`), a w oknie zadań otwieranym z projektu rodzicem jest `.todo-detail-col`. Bez tego formularz DODAWANIA zadania nie rósł i pole opisu zostawało na swoim minimum 140 px, mimo że okno ma ponad 1200 px wysokości. Ten sam defekt co wcześniej w `.todo-detail`. */ .zn-detail > .zn-form, .zn-detail > .todo-detail, .todo-detail-col > .zn-form, .todo-detail-col > .todo-detail { display: flex; flex-direction: column; flex: 1; min-height: 0; } /* Ujednolicenie 11.08.2026 — wersaliki .03em → kanon .04em. Dotyczy czterech podpisów tej samej roli w tym arkuszu (.zn-form-sub, .zn-flbl, .notes2-lbl, .note-editor2-sub); w całej aplikacji było .02/.03/.04/.05/.08, a .04em ma 19 miejsc — to jest wartość kanoniczna, reszta była rozjazdem. */ .zn-form-sub { margin-bottom: var(--s-1); color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); } .zn-form-sub b { color: var(--accent-strong); } /* Tytuł wpisuje się wprost w nagłówek — bez ramki, żeby wyglądał jak nagłówek. */ .zn-head { display: flex; align-items: flex-start; gap: var(--s-3); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); } .zn-h-title { flex: 1; width: 100%; height: auto; padding: var(--s-1) 0; border: 0; background: none; font-size: var(--t-lg); font-weight: var(--w-bold); } .zn-h-title:focus { box-shadow: none; } /* Pola same dobierają liczbę kolumn — bez osobnych progów @media dla formularza. */ .zn-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-3); margin: var(--s-3) 0; } .zn-field { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }.zn-flbl { color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); } /* `.zn-isel` bywa