/* WARIANT WYGLADU „PULPIT" — nakladka na `panel.css`. Wariant 2 z makiety pieciu skor panelu (2026-08-24). DROGA TEJ ZMIANY, BO ZMIENILA SIE W TRAKCIE: rano polecenie brzmialo „wariant 2 ALE NA LOCALHOSTA 8092 NIE NA SERWER" i arkusz wchodzil pod warunkiem portu. Wieczorem: „zmiana planow, zrobisz to od razu na serwerze" - warunek zdjety, wariant jest wygladem panelu wszedzie. CZYM TO JEST, A CZYM NIE JEST: - to jest DRUGI arkusz, wczytywany PO `panel.css` i nadpisujacy jego tokeny oraz kilkanascie regul ukladu. `panel.css` zostaje nietkniety, wiec cofniecie wariantu = skreslenie jednej linijki w `baza.html`, bez grzebania w tamtym pliku i bez odwracania commita; - to jest ROZJAZD Z SYSTEMEM WIZUALNYM REJENTA i trzeba go nazwac wprost: `_meta/design-system.md` mowi „grafit + zloto, ciemna plyta u gory", a ten arkusz daje biala kolumne i jeden akcent. Dopoki tamten plik nie zostanie przepisany, zrodlem prawdy dla APLIKACJI pozostaje on - rozeszly sie panel i Rejent, nie system i jego kopia. CO ZMIENIA WOBEC STANU OBECNEGO — trzy rzeczy, kazda z powodem: 1. NAWIGACJA SCHODZI DO LEWEJ KOLUMNY. Dziewiec zakladek w jednym pasie czyta sie jak jeden ciag i przy dziesiatej pas sie zlamie; w kolumnie kazda ma wlasna linijke, a menu ma miejsce, zeby kiedys dostac grupy („flota / klienci / dostep"). Plyta NIE ZNIKA — obraca sie: pas z gory staje sie grafitowa kolumna po lewej, wiec „ciemne jest to, co prowadzi miedzy rzeczami" obowiazuje dalej. (Przez pierwsze godziny wariantu kolumna byla BIALA i ta zasada byla tu zlamana. Zdjal to Mariusz tego samego wieczoru: „pasek lewy zrob czarny, bo jest za bialo na tej stronie". Bialy wariant nie zostaje jako opcja — od cofania jest git.) 2. GRANAT JEST INTERAKCJA W TRESCI, ZLOTO ORIENTACJA NA PLYCIE. Stalowy granat `#23507A` bierze guziki, odnosniki i obrys aktywnego pola — czyli wszystko, co stoi na bieli. Zloto zostaje przy tym, po co jest w systemie: mowi „jestes tutaj" na grafitowej kolumnie, gdzie ma 7,78:1. Przez chwile — dopoki kolumna byla biala — zloto nie mialo na czym stanac (`--pasek-akcent` na bieli to 1,9:1) i granat bral obie role naraz. Kolumna wrocila na grafit, wiec role rozeszly sie z powrotem i ekran ma znowu jedno wolanie na warstwe, a nie dwa na jednym tle. 3. NAGLOWKI IDA SANSEM. Literata zostaje w plikach i wraca z kazdym innym wariantem, ale pulpit narzedziowy z serifowym tytulem czyta sie jak dokument, a nie jak panel. Krojow nie dokladamy — `--font-display` wskazuje na Public Sans, ktory juz tu lezy (zasada ZERO CDN zostaje spelniona sama z siebie). Ikony przy pozycjach menu sa MASKAMI CSS po `href`, nie znacznikami w szablonie: dzieki temu wariant nie dotyka `baza.html` poza jedna linia . */ :root { /* --- paleta ----------------------------------------------------------- */ --ink: #172029; /* 14,9:1 na karcie */ --paper: #F1F3F6; /* podloze aplikacji */ --surface-2: #FFFFFF; /* karty */ --muted: #59636F; /* 6,0:1 na karcie */ /* AKCENT GRAFITOWY, NIE BLEKITNY (polecenie Mariusza 2026-08-26: „zmieniasz kazdy kolor przycisku z niebieskiego na czarny na calej stronie, nie chce widziec niebieskiego przycisku"). Stalo tu `#23507A` i to ono malowalo KAZDY guzik w panelu, bo `--brand` i `--brand-hover` w `panel.css` licza sie z `--accent`. Wracamy do `--grafit`, czyli do wartosci, ktora `panel.css` ma u siebie - to nie jest nowy kolor, tylko zdjecie nadpisania. Zgodne z ksiega marki (`CLAUDE.md`, sek. „Design panelu"): „grafit = interakcja, zloto = orientacja i marka, kolor nasycony = znaczenie". Blekit byl czwarta barwa, ktorej ten podzial nie przewiduje. */ --accent: var(--grafit); /* `--brand` i `--brand-hover` w panel.css sa liczone z `--accent`, wiec ida za nim same. Nie powtarzamy ich tutaj, zeby nie powstalo drugie zrodlo. */ --line: #C4CBD4; /* obrys pola formularza */ --line-strong: #DFE3E9; /* obrys karty */ --line-soft: #E7EBF0; /* linie w rubryce */ /* Zloto schodzi z ekranu razem z plyta (patrz punkt 2 wyzej). Tokeny zostaja zdefiniowane, bo panel.css siega po nie w znaku ekranu i przy roli marki — wskazuja na akcent, zeby nie zostawic na bialym pasku barwy o kontrascie 1,9:1. Od 2026-08-26 akcent jest grafitem, wiec znak ekranu jest grafitowy; zloto zostaje tam, gdzie ma sens - na plycie paska i w powitaniu. */ --mosiadz: var(--accent); --mosiadz-ciemny: var(--accent); --mosiadz-jasny: var(--accent); /* --- pasek: plyta zostaje grafitowa, zmienia sie tylko jej bok --------- */ /* NIE MA TU ANI JEDNEGO TOKENU PLYTY I TO JEST CALA ZMIANA z wieczora 2026-08-24. Wariant nadpisywal ich siedem (`--pasek`, `--pasek-tekst`, `--pasek-tekst-cichy`, `--pasek-akcent`, `--plyta-hover`, `--ok-na-plycie`, `--warn-na-plycie`), zeby zrobic z kolumny biel. Skreslenie nadpisan przywraca komplet naraz — kazdy z nich stoi w `panel.css` POLICZONY POD #1C1F24 razem z kontrastami (15,14:1 tekst, 7,49:1 pozycja nieaktywna, 7,78:1 zlota kreska). Wpisanie tutaj wlasnych wartosci znaczyloby liczenie tego drugi raz i rozjazd przy pierwszej zmianie w tamtym pliku. UWAGA DLA NASTEPNEJ SESJI: brak tych tokenow to DECYZJA, nie zguba. 2026-08-24 23:05 zostaly juz raz „odzyskane" commitem `ef4ad57` jako rzekomo zgubione w `144129b` — i przywrocilo to biala kolumne, ktora Mariusz kazal zdjac. Zostaje jedno: szerokosc. 232 -> 208 px (2026-08-24, przy wyrownywaniu sekcji): kolumna menu zabierala tabelom szerokosc na tyle, ze `opis_dokumentu` w rubryce AI lamalo sie w srodku wyrazu. Najdluzsza pozycja menu („Dodaj urzadzenie") miesci sie w 208 px z zapasem, wiec te 24 px sa czystym zyskiem dla tresci. */ --pasek-szerokosc: 208px; --font-display: var(--font-body); /* Rubryka: naglowek przestaje byc czarna belka. Na ekranie, gdzie kazda rzecz jest biala karta z cieniem, czarny pas przekrzykiwal wszystko inne. */ --rubryka-tlo: #F7F9FB; --rubryka-tekst: var(--muted); } /* --- szkielet: dwie kolumny zamiast paska nad trescia ---------------------- */ /* `:has(> .pasek)` ZAWEZA uklad do ekranow Z MENU. Ekran logowania i strona bledu maja wlasny i NIE MAJA paska - bez tego warunku dostawalyby pusta kolumne 232 px po lewej i karte zepchnieta na prawo. Przegladarka bez `:has` po prostu nie wchodzi w ten uklad: menu zostaje pasem u gory, czyli wygladem sprzed wariantu. */ body:has(> .pasek) { display: grid; grid-template-columns: var(--pasek-szerokosc) minmax(0, 1fr); min-height: 100vh; /* Kolumna menu STOI (`position: sticky` z `panel.css`), wiec jej wlasne tlo ma wysokosc okna, nie strony — na dlugim ekranie konczylo sie w polowie i lewa krawedz urywala sie w powietrzu. Plyte maluje wiec cale `body`; pasek daje juz tylko to, co w nim stoi. BEZ KRESKI MIEDZY PLYTA A PAPIEREM (sek. 2b p. 2): #1C1F24 styka sie z papierem kontrastem 15,3:1, wiec krawedz widac sama z siebie. Jasna linia stala tu dopoki kolumna byla biala i nie bylo czym tej krawedzi pokazac. */ background: linear-gradient(90deg, var(--pasek) 0 var(--pasek-szerokosc), var(--paper) var(--pasek-szerokosc)); } .pasek { flex-direction: column; align-items: stretch; gap: var(--space-6); height: 100vh; padding: var(--space-6) var(--space-3); background: transparent; overflow-y: auto; } /* ZNAK MARKI. Podmiany pliku TU NIE MA i to jest teraz poprawne: szablon podaje wariant „na ciemnym", a kolumna jest ciemna. Dopoki byla biala, wariant podstawial przez `content` rysunek na jasne tlo — bialy znak na bialej kolumnie znikal bez sladu. Plyta wrocila, wiec podmiana zeszla razem z powodem, dla ktorego stala. Lockup lamie sie na dwa wiersze wszedzie, gdzie ten arkusz siega — takze na karcie logowania i na stronie bledu, ktore maja wlasny i tez go wczytuja. */ .marka { flex-direction: column; align-items: flex-start; gap: var(--space-1); padding: 0 var(--space-2); } /* LOCKUP NA SRODKU, ALE TYLKO W KOLUMNIE MENU (polecenie Mariusza 2026-08-24: „wycentruj logo, bo jest tak brzydko po lewej"). W pasie poziomym znak siedzial przy lewej krawedzi, bo ZACZYNAL wiersz; w kolumnie 208 px nie zaczyna niczego — stoi nad menu jako jego szyld, a szyld wisi na srodku. Zawezenie do `.pasek` jest tu istotne: ten sam `.marka` stoi na karcie logowania, gdzie znak zapowiada tytul i akapit wyrownane do lewej — wysrodkowany zlamalby tam krawedz, wzdluz ktorej czyta sie cala karte. */ .pasek .marka { align-items: center; } /* Nazwa marki zostaje SERIFEM. `--font-display` wskazuje w tym wariancie na Public Sans (naglowki ida sansem, patrz naglowek pliku), ale znak marki naglowkiem nie jest — bez tej linii „Inskryptor" w pasku zmienialby krój razem z tytulami ekranow. */ .marka-nazwa { font-family: "Literata Variable", Georgia, serif; } .marka-rola { font-size: 13px; letter-spacing: .16em; } .marka-rola::before { display: none; } /* --- menu: pozycja na wiersz, ikona przed nazwa ---------------------------- */ .pasek nav { flex-direction: column; align-items: stretch; /* 6 px zamiast 1 px (polecenie Mariusza 2026-08-26: „zrob wieksze lekko odstepy miedzy tymi"). „Lekko" wziete doslownie: przy 1 px pozycje stykaly sie tlami pod kursorem i czytaly jak jedna lista bez przerw, przy 12 px kolumna rozjezdzalaby sie na wysokosc ekranu. Szesc daje oddech, nie odstep. */ gap: 6px; margin-left: 0; flex: 1; } .pasek nav a { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: 16px; transition: color var(--ruch-wjazd) var(--ruch-krzywa), background-color var(--ruch-wjazd) var(--ruch-krzywa); } .pasek nav a:hover { background: var(--plyta-hover); } /* Kreska „jestes tutaj" obraca sie z poziomu na pion i przenosi na LEWA krawedz: pod pozycja w kolumnie czytalaby sie jak separator listy, nie jak wskaznik. */ .pasek nav a::after { left: 0; right: auto; top: 6px; bottom: 6px; width: 3px; height: auto; border-radius: 0 2px 2px 0; transform: scaleY(0); transform-origin: center; transition: transform var(--ruch-wjazd) var(--ruch-krzywa); } /* MENU ZACHOWUJE SIE DOKLADNIE JAK „KONTA" (polecenie Mariusza 2026-08-26: „rzeczy z paska nawigacji mialy miec animacje takie jak konta"). To znaczy DWIE rzeczy i ani jednej wiecej: pod kursorem samo tlo, a zlota szyna przy lewej krawedzi WYLACZNIE przy pozycji aktywnej. Kreska `::after` wjezdzala dotad z gory i z dolu do srodka takze pod kursorem - i to bylo to „co innego". ⚠️ ZAPIS DWOCH MOICH POMYLEK POD RZAD, zeby nikt nie probowal tego „poprawiac" trzeci raz: najpierw przenioslem ruch Z MENU NA KONTA (odwrotnie, niz brzmialo polecenie), a potem dolozylem Kontom szyne na hover, ktorej NIGDY nie mialy. Wzorzec jest jeden: „Konta" sprzed 26 sierpnia. */ .pasek nav a::after { content: none; } /* AKTYWNA POZYCJA NIE MA WYPELNIENIA. Stan niosa dwie rzeczy, ktore `panel.css` juz daje: zlota kreska przy krawedzi (`::after` wyzej) i jasniejszy, grubszy napis. Wypelnienie bylo potrzebne dopoki kolumna byla biala — zlota kreska na bieli ma 1,9:1 i sama nie udzwignelaby stanu. Na plycie kreska ma 7,78:1 i udzwiga, a jasny prostokat zostalby JEDYNA swiecaca plama na czarnej kolumnie: polecenie „ten przycisk tez zrob czarny" (Mariusz 2026-08-24) dotyczylo dokladnie jego. */ .pasek nav a.aktywny { box-shadow: inset 3px 0 0 var(--pasek-akcent); } /* Ikony: jeden ksztalt na zakladke, wycinany maska z SVG stroke 1.8 — ten sam rysunek co znaki ekranow, tylko mniejszy. Kolor bierze `currentColor`, wiec ikona blednie i zapala sie razem z napisem obok. */ .pasek nav a::before { content: ""; width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 18px 18px; mask-size: 18px 18px; } .pasek nav a[href="/flota"]::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .pasek nav a[href="/statystyki"]::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .pasek nav a[href="/panel/nebula"]::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .pasek nav a[href="/urzadzenia/dodaj"]::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .pasek nav a[href="/kancelarie"]::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .pasek nav a[href="/rejestracje"]::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .pasek nav a[href="/rozmowy"]::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .pasek nav a[href="/dysk"]::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } /* Czas pracy: ta sama tarcza co znak ekranu (`znaki.html`). Bez tej reguly `::before` zostaje samym currentColor bez maski i zakladka dostaje PELNY KWADRAT zamiast ikony - widac to bylo na pierwszym zrzucie ekranu. */ /* Zadania: ten sam rysunek co znak ekranu. Bez tej reguly `::before` zostaje samym currentColor bez maski i zakladka dostaje PELNY KWADRAT. */ .pasek nav a[href="/zadania"]::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } /* ZGLOSZENIA: dymek rozmowy z wykrzyknikiem. Dymek, bo to CZLOWIEK do nas mowi - nie licznik i nie stan maszyny; wykrzyknik, bo mowi o usterce. Ksztalt celowo nie powtarza dzwonka ani trojkata ostrzegawczego: te dwa znacza „program cos zauwazyl", a to znaczy „ktos to zglosil". */ .pasek nav a[href="/zgloszenia"]::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } /* POMOC ZDALNA: ekran ze strzałką „wchodzę". Bez tej reguły `::before` zostaje pełnym kwadratem (pierwszy zrzut 25.09). */ .pasek nav a[href="/pomoc/prosby"]::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } /* INSTALATORY: strzałka w dół do tacy - plik, który kancelaria pobiera. Bez tej reguły `::before` zostaje pełnym kwadratem (pierwszy zrzut 03.10). */ .pasek nav a[href="/instalatory"]::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .pasek nav a[href="/czas"]::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .pasek nav a[href="/konta"]::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } /* --- kto jest zalogowany: na dol kolumny, nie na prawo -------------------- */ .pasek .prawa { margin-left: 0; margin-top: auto; flex-direction: column; align-items: stretch; gap: var(--space-2); padding: var(--space-4) var(--space-2) 0; /* Kreska DZIELACA WNETRZE PLYTY, wiec liczona z jej wlasnego tekstu, a nie z `--line-strong` — ta jest obrysem karty na papierze i na grafitcie znika. */ border-top: 1px solid color-mix(in srgb, var(--pasek-tekst) 20%, transparent); } .pasek .prawa form { width: 100%; } .pasek .prawa .przycisk { width: 100%; } /* „Konta" stoja przy tozsamosci, a nie w menu (polecenie z 2026-08-24) — i tak zostaje. W kolumnie dostaja jednak rysunek pozycji menu, bo goly napis miedzy loginem a guzikiem „Wyloguj" czytal sie jak podpis, nie jak odnosnik. */ .pasek .prawa .pozycja-prawej { display: flex; align-items: center; /* NA SRODEK (polecenie Mariusza 2026-08-24: „te konta tez daj na srodek"). `justify-content`, a nie `text-align`: pozycja to ikona I napis, wiec srodkuje sie cala para naraz - samo `text-align` przesunieloby napis, zostawiajac ikone przy lewej krawedzi. Podswietlenie stanu aktywnego zostaje na lewej krawedzi (`inset 3px 0 0`), bo to szyna, nie tlo tekstu - srodkowanie jej nie dotyczy. */ justify-content: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); box-shadow: none; } .pasek .prawa .pozycja-prawej::before { content: ""; width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 18px 18px; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-size: 18px 18px; mask-image: url('data:image/svg+xml;utf8,'); } /* ⚠️ POPRAWKA WLASNEJ POMYLKI (2026-08-26). Zrozumialem polecenie odwrotnie: przenioslem ruch Z MENU na „Konta", a mialo byc na odwrot - to „Konta" podobaly sie wlascicielowi i to ICH zachowanie mialy dostac pozycje menu. „Konta" wracaja wiec do swojego: pelna szyna cieniem wewnetrznym, bez wjazdu. */ .pasek .prawa .pozycja-prawej:hover { background: var(--plyta-hover); } /* Ten sam wzorzec stanu co w