/* ========================================================= MOTYW 2026 — PALETA, SKALA, ZAGĘSZCZENIE Napisane 2026-10-05. Punkt 2 listy Oskara. ========================================================= TRZY PLIKI, NIE JEDEN — I KAŻDY ROBI INNĄ RZECZ ========================================================= motyw.css <- TEN plik. Pisany ręcznie. Zmienne, skala rozmiarów, zagęszczenie. motyw-marka.css <- generowany. Fiolet i turkus wpisane na sztywno w 64 miejscach -> kolory logo. motyw-jasny.css <- generowany. 357 reguł z jasnym kolorem wpisanym na sztywno -> odwrócone. Granica jest prosta: ręcznie to, co jest DECYZJĄ (ile ma mieć wysokości przycisk), generowane to, co jest PRZEPISANIEM (gdzie jeszcze został fiolet). Decyzji jest kilkadziesiąt, przepisywania czterysta — i tylko człowiek myli się przy czterystu. ========================================================= STARY WYGLĄD ZOSTAJE NIETKNIĘTY ========================================================= Oskar: „obecnego CSS nie usuwamy. Chcemy zachować możliwość powrotu do obecnego wyglądu, jeśli nowa wersja nie będzie nam odpowiadała". Dlatego KAŻDA reguła w tych trzech plikach siedzi za `[data-motyw="nowy"]`. Bez tego atrybutu na `` panel wygląda dokładnie jak dziś — bo `styles.css` nie jest zmieniony ani o jeden znak. Powrót to przełączenie, nie odkręcanie zmian. To ważniejsze, niż brzmi: gdyby powrót wymagał mojej poprawki, Oskar musiałby na nią czekać. ========================================================= SKALA: TRZY ROZMIARY PRZYCISKA I SZEŚĆ ODSTĘPÓW ========================================================= Dziś przycisk ma jeden rozmiar (padding 11/14, promień 15) i stąd bierze się „jeden moduł wygląda inaczej niż drugi": gdy jeden rozmiar nie pasuje, ktoś dopisuje `style=`. Pięć takich dopisków w pięciu modułach to pięć różnych przycisków. Trzy rozmiary pokrywają wszystko, co panel robi: akcja w wierszu tabeli (sm), zwykły przycisk, akcja główna w formularzu (lg). Czwarty rozmiar nie jest potrzebny i dlatego go nie ma — bo rozmiar, który istnieje, zostanie kiedyś użyty. ========================================================= */ :root[data-motyw="nowy"] { /* ========================================================= KOLORY Z LOGO Granat #0F2A4A, błękit #3B9FE0, błękit jasny #7FC4EE, mgła #B9D9F0. Odczytane z logo wstawionego w strona/index.html. Dzisiejszy panel jest fioletowo-turkusowy — czyli nie ma nic wspólnego z logo firmy. ========================================================= */ --bg:#071626; --bg2:#0A1F33; --panel:#0E2539; --panel2:#112B42; --card:#13314A; --card2:#0F2639; --line:rgba(127,196,238,.13); --line2:rgba(127,196,238,.22); --text:#EAF3FB; --muted:#8FAEC8; --muted2:#B9D3E8; --brand:#3B9FE0; --brand2:#7FC4EE; --brand3:#2E86C6; /* ODCIEN ZAZNACZENIA. Dopisane 2026-10-12. Karta wyboru ma stan zaznaczony, ale `styles.css` nadaje `.choice-card` tlo i obwodke z `!important` (linia 5057), a `!important` bije szczegolowosc — wiec `.choice-card.active` traci jedno i drugie i zaznaczona karta wyglada jak kazda inna. Sila odcienia dobrana pomiarem: przy 0,34 zaznaczona odroznia sie od niezaznaczonej 1,52:1, a bialy napis na niej ma 8,8:1. Przy 0,16 odroznienie bylo 1,11:1 — czyli prawie niewidoczne. */ --wybrane:rgba(59,159,224,.34); --danger:#FF6B6B; --warn:#F5B942; --ok:#3FCF8E; --info:#5FB3EA; /* ========================================================= PROMIENIE: MNIEJ ZAOKRĄGLEŃ Dziś: karta 22 px, okienko 26 px, przycisk 15 px. Przy tabeli danych takie zaokrąglenia zabierają miejsce i rozmywają siatkę — a panel rozliczeń to przede wszystkim siatka liczb. ========================================================= */ --radius:14px; --radius2:10px; --radius-przycisk:9px; --radius-pole:9px; /* Cienie słabsze: przy zagęszczonym ekranie mocny cień brudzi. */ --shadow:0 6px 20px rgba(0,0,0,.26); --shadow2:0 14px 44px rgba(0,0,0,.36); /* ========================================================= SKALA ODSTĘPÓW — sześć wartości i ani jednej więcej ========================================================= */ --o-1:4px; --o-2:8px; --o-3:12px; --o-4:16px; --o-5:24px; --o-6:32px; /* ========================================================= SKALA TEKSTU ========================================================= */ --font-xs:11px; --font-sm:12px; --font-base:13px; --font-lg:15px; --font-xl:19px; --font-2xl:24px; /* ========================================================= WYSOKOŚCI PRZYCISKÓW I PÓL ========================================================= */ --h-sm:28px; --h-base:34px; --h-lg:40px; /* Pasek boczny węższy — 292 px to przy 1280 px prawie czwarta część ekranu oddana na menu. */ --sidebar:232px; } /* ========================================================= TRYB JASNY Same zmienne. Reszta — 357 reguł z kolorem wpisanym na sztywno — siedzi w motyw-jasny.css, bo zmienne ich nie dotyczą. ========================================================= */ /* ========================================================= TRYB JASNY — POPRAWIONY KONTRAST (2026-10-05) ========================================================= Oskar: „popraw jasny motyw, ponieważ nie ma dużego kontrastu i źle to wygląda". ========================================================= WINOWAJCĄ NIE BYŁY KOLORY TEKSTU, A LINIE ========================================================= Zmierzone, nie ocenione na oko — kontrast wobec białego panelu: --line (alfa .12) 1,26:1 przy progu 3:1 --line2 (alfa .20) 1,49:1 Panel jest zbudowany z kart, paneli i tabel rozdzielonych tymi liniami. Przy 1,26:1 na białym tle nie ma ich praktycznie wcale — i cały układ zlewa się w jedną kartkę. Dokładnie to Oskar nazwał „źle to wygląda": nie chodziło o nieczytelny tekst, a o brak widocznej STRUKTURY. Teraz .30 i .44, czyli 1,91:1 i 2,75:1. Granice są widoczne, a nie krzyczą. ========================================================= A SAMO TŁO KART NIE WYSTARCZY — SPRAWDZONE LICZBĄ ========================================================= Biała karta na najciemniejszym rozsądnym tle strony daje 1,20:1. Policzyłem cztery warianty tła i żaden nie zbliża się do progu. Dlatego karta w trybie jasnym MUSI mieć krawędź i cień — tło samo jej nie oddzieli. Reguły niżej. ========================================================= KOLORY: WSZYSTKIE PRZESZŁY PRÓG 4,5:1 ========================================================= Trzy nie przechodziły i każdy z nich niósł znaczenie: --brand 3,93:1 kolor przycisku głównego i odnośników --warn 3,69:1 ostrzeżenia --muted 4,40:1 na tle strony (na białym jeszcze zdawał) Po zmianie najniższy z wszystkich ośmiu to 4,73:1 — na białym panelu i na tle strony, obie wartości policzone. ========================================================= */ :root[data-motyw="nowy"][data-tryb="jasny"] { --bg:#EDF2F8; --bg2:#E4EBF3; --panel:#FFFFFF; --panel2:#F7FAFD; --card:#FFFFFF; --card2:#F2F6FB; --line:rgba(11,32,57,.30); --line2:rgba(11,32,57,.44); --text:#0B2039; --muted:#4A6480; --muted2:#2E4A66; --brand:#1E6FAF; --brand2:#2E86C6; --brand3:#17558A; /* Ten sam odcien zaznaczenia, policzony dla jasnego panelu. */ --wybrane:rgba(30,111,175,.34); --danger:#C42B35; --warn:#8A5E00; --ok:#10704C; --info:#17558A; --shadow:0 2px 6px rgba(11,32,57,.10),0 8px 24px rgba(11,32,57,.06); --shadow2:0 8px 28px rgba(11,32,57,.16); /* NAJWAŻNIEJSZA LINIA TRYBU JASNEGO. Mówi przeglądarce, że panel jest jasny. Bez niej przeglądarka rysuje SWOIM ciemnym motywem wszystko, czego nie da się ostylować z CSS: ikonę kalendarza przy dacie, strzałki przy liczbie, rozwinięte listy, paski przewijania, okno wyboru pliku. W `styles.css` jest odwrotna linia (`color-scheme:dark`) — i tam zostaje, bo stary wygląd jest ciemny. */ color-scheme:light; } /* ========================================================= TŁO STRONY Dziś body ma trzy plamy gradientu: fioletową, turkusową i błękitną. Generator zamienił im kolory, ale nie natężenie — a przy jasnym tle plama o tej samej mocy wygląda jak zabrudzenie. ========================================================= */ :root[data-motyw="nowy"] body { background: radial-gradient(circle at 0% 0%,rgba(59,159,224,.16) 0,rgba(59,159,224,.05) 20%,transparent 44%), radial-gradient(circle at 92% 6%,rgba(127,196,238,.10) 0,transparent 40%), var(--bg); } :root[data-motyw="nowy"][data-tryb="jasny"] body { background: radial-gradient(circle at 0% 0%,rgba(59,159,224,.10) 0,transparent 38%), radial-gradient(circle at 94% 4%,rgba(127,196,238,.14) 0,transparent 34%), var(--bg); } /* ========================================================= PRZYCISKI — TRZY ROZMIARY (zasada Z3) ========================================================= */ :root[data-motyw="nowy"] .btn, :root[data-motyw="nowy"] .icon-button, :root[data-motyw="nowy"] .primary, :root[data-motyw="nowy"] .ghost { min-height:var(--h-base); padding:0 var(--o-3); border-radius:var(--radius-przycisk); font-size:var(--font-base); font-weight:650; gap:var(--o-2); /* Dziś przycisk podskakuje o 1 px przy najechaniu. Przy tabeli z dwudziestoma przyciskami to drganie całego wiersza. */ transition:background .14s ease,border-color .14s ease,box-shadow .14s ease; } :root[data-motyw="nowy"] .btn:hover, :root[data-motyw="nowy"] .icon-button:hover, :root[data-motyw="nowy"] .ghost:hover { transform:none; } :root[data-motyw="nowy"] .btn.small, :root[data-motyw="nowy"] .btn.sm { min-height:var(--h-sm); padding:0 var(--o-2); font-size:var(--font-sm); border-radius:7px; } :root[data-motyw="nowy"] .btn.lg { min-height:var(--h-lg); padding:0 var(--o-4); font-size:var(--font-lg); } :root[data-motyw="nowy"] .icon-button { width:var(--h-base); height:var(--h-base); min-width:var(--h-base); padding:0; border-radius:var(--radius-przycisk); } :root[data-motyw="nowy"] .btn.primary, :root[data-motyw="nowy"] .primary { background:linear-gradient(135deg,var(--brand),var(--brand3)); box-shadow:0 4px 14px rgba(59,159,224,.24); font-weight:750; } /* NAPIS NA PRZYCISKU GŁÓWNYM ZOSTAJE BIAŁY TAKŻE W TRYBIE JASNYM. Generator słusznie zamienił jasny kolor tekstu na `var(--text)` — dla zwykłego przycisku na jasnym tle to jest poprawne. Ale przycisk główny ma tło błękitne w OBU trybach, więc ciemny napis dałby na nim kontrast 2,4:1. To jest dokładnie ten rodzaj szczegółu, którego generator nie mógł wiedzieć, a człowiek musi dopowiedzieć. */ :root[data-motyw="nowy"][data-tryb="jasny"] .btn.primary, :root[data-motyw="nowy"][data-tryb="jasny"] .primary, :root[data-motyw="nowy"][data-tryb="jasny"] .btn.primary:hover { color:#FFFFFF; } /* ========================================================= POLA FORMULARZY ========================================================= */ :root[data-motyw="nowy"] .input, :root[data-motyw="nowy"] .topbar select, :root[data-motyw="nowy"] textarea, :root[data-motyw="nowy"] select { min-height:var(--h-base); padding:0 var(--o-3); border-radius:var(--radius-pole); font-size:var(--font-base); } :root[data-motyw="nowy"] textarea { padding:var(--o-2) var(--o-3); line-height:1.5; } /* ========================================================= TABELE — ZAGĘSZCZENIE (zasady Z3, Z4, 2.8) Dziś komórka ma 14 px odstępu z każdej strony i 14 px czcionki. Wiersz wychodzi ok. 47 px, więc przy 1440 px widać kilkanaście wierszy. Po zagęszczeniu wiersz ma ok. 33 px — na ten sam ekran wchodzi o jedną trzecią więcej kierowców. Nagłówek przyklejony u góry, bo przy dłuższej liście i tak się przewija, a bez nagłówka nie wiadomo, co jest w której kolumnie. ========================================================= */ :root[data-motyw="nowy"] th, :root[data-motyw="nowy"] td { padding:var(--o-2) var(--o-3); font-size:var(--font-base); } :root[data-motyw="nowy"] th { position:sticky; top:0; z-index:1; font-size:var(--font-xs); letter-spacing:.06em; background:var(--panel); box-shadow:inset 0 -1px 0 var(--line2); } :root[data-motyw="nowy"] td { color:var(--text); } /* Liczby prawą krawędzią i cyfrą o stałej szerokości. Przy kolumnie kwot to nie ozdoba: wyrównane do lewej kwoty „1 234,00" i „98,00" nie dają się porównać wzrokiem, a panel rozliczeń jest do porównywania kwot. */ :root[data-motyw="nowy"] td.num, :root[data-motyw="nowy"] th.num, :root[data-motyw="nowy"] .num { text-align:right; font-variant-numeric:tabular-nums; } :root[data-motyw="nowy"] .table-card table { min-width:0; } /* ========================================================= KARTY, PANELE, NAGŁÓWKI ========================================================= */ :root[data-motyw="nowy"] .card.pad, :root[data-motyw="nowy"] .pad { padding:var(--o-4); } :root[data-motyw="nowy"] .card h3 { font-size:var(--font-lg); margin:0 0 var(--o-2); } :root[data-motyw="nowy"] .page { padding:var(--o-4) var(--o-5) var(--o-6); } :root[data-motyw="nowy"] .subhead { margin:0 0 var(--o-4); } :root[data-motyw="nowy"] .subhead h2 { font-size:var(--font-2xl); letter-spacing:-.03em; } :root[data-motyw="nowy"] .page-icon { width:32px; height:32px; margin-right:var(--o-2); border-radius:var(--radius2); font-size:16px; } :root[data-motyw="nowy"] .panel-header { padding:var(--o-3) var(--o-4); } :root[data-motyw="nowy"] .panel-header h2 { font-size:var(--font-xl); } :root[data-motyw="nowy"] .headline { font-size:var(--font-2xl); margin:var(--o-1) 0 var(--o-2); } :root[data-motyw="nowy"] .eyebrow { font-size:var(--font-xs); } :root[data-motyw="nowy"] .muted { font-size:var(--font-sm); color:var(--muted); } /* ========================================================= SIATKI — WĘŻSZE PRZERWY, LEPSZE WYKORZYSTANIE SZEROKOŚCI ========================================================= */ :root[data-motyw="nowy"] .grid { gap:var(--o-3); margin-bottom:var(--o-4); } :root[data-motyw="nowy"] .split, :root[data-motyw="nowy"] .hero { gap:var(--o-3); margin-bottom:var(--o-4); } :root[data-motyw="nowy"] .form-grid { gap:var(--o-3); } :root[data-motyw="nowy"] .form-grid textarea { min-height:84px; } /* Przy szerokim ekranie formularz na dwie kolumny zostawia pół ekranu puste. Oskar: „lepsze wykorzystanie szerokości ekranu". */ @media (min-width:1600px) { :root[data-motyw="nowy"] .form-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } } /* ========================================================= KPI — MNIEJSZE Części KPI Oskar kazał usunąć całkiem (punkty 3.1, 10.3, 11.1, 14.6). Te, które zostają, nie mają zajmować ćwierci ekranu. ========================================================= */ :root[data-motyw="nowy"] .kpi, :root[data-motyw="nowy"] .kpi-card { padding:var(--o-3); border-radius:var(--radius2); } :root[data-motyw="nowy"] .kpi .value { font-size:var(--font-xl); margin:var(--o-1) 0 0; } :root[data-motyw="nowy"] .kpi .label { font-size:var(--font-xs); } /* ========================================================= OKIENKA (zasada 2.6) Jedna szerokość bazowa i dwa warianty. Dziś każde okienko ma `width:min(980px,96vw)`, a moduły dopisują sobie własne `max-width` — stąd okienka różnej szerokości na tym samym ekranie. ================================================================= */ :root[data-motyw="nowy"] .modal { width:min(860px,96vw); max-height:88vh; border-radius:var(--radius); padding:var(--o-4); } :root[data-motyw="nowy"] .modal.wide { width:min(1180px,97vw); } :root[data-motyw="nowy"] .modal.full { width:97vw; } :root[data-motyw="nowy"] .modal-head { margin-bottom:var(--o-3); padding-bottom:var(--o-2); border-bottom:1px solid var(--line); } :root[data-motyw="nowy"] .modal-head h2 { font-size:var(--font-xl); } :root[data-motyw="nowy"] .form-actions { display:flex; gap:var(--o-2); justify-content:flex-end; margin-top:var(--o-4); } /* ========================================================= PLAKIETKI I ZNACZNIKI ========================================================= */ :root[data-motyw="nowy"] .badge, :root[data-motyw="nowy"] .chip, :root[data-motyw="nowy"] .status, :root[data-motyw="nowy"] .platform, :root[data-motyw="nowy"] .pill, :root[data-motyw="nowy"] .tab { font-size:var(--font-xs); padding:3px var(--o-2); border-radius:6px; font-weight:700; } :root[data-motyw="nowy"] .avatar { width:28px; height:28px; min-width:28px; border-radius:8px; font-size:var(--font-sm); } :root[data-motyw="nowy"] .driver-cell { gap:var(--o-2); } /* ========================================================= LISTY ZDARZEŃ, PUSTE EKRANY, KOMUNIKATY ========================================================= */ :root[data-motyw="nowy"] .event, :root[data-motyw="nowy"] .command, :root[data-motyw="nowy"] .task { padding:var(--o-2) var(--o-3); border-radius:var(--radius2); } :root[data-motyw="nowy"] .timeline, :root[data-motyw="nowy"] .command-list { gap:var(--o-2); } :root[data-motyw="nowy"] .empty-state { padding:var(--o-5) var(--o-4); border-radius:var(--radius2); } :root[data-motyw="nowy"] .notice { padding:var(--o-3); border-radius:var(--radius2); font-size:var(--font-base); } :root[data-motyw="nowy"] .summary-row { padding:var(--o-2) 0; font-size:var(--font-base); } :root[data-motyw="nowy"] .big-money { font-size:var(--font-2xl); } /* ========================================================= CZERWONE OZNACZENIE NIEPRZEJRZANEGO MODUŁU (punkt 16) Kropka przy pozycji menu, nie czerwone tło. Czerwone tło przy dwunastu pozycjach znaczy czerwone menu — a wtedy oznaczenie przestaje cokolwiek wyróżniać. ========================================================= */ /* Kropka ZA NAPISEM, nie za ikona. Ikona siedzi w kwadratowym tle, wiec kropka przy niej wyglada jak czesc ikony, a nie jak znacznik. BEZ PRZEDROSTKA [data-motyw="nowy"] — i to jest celowe. Status prac nie zalezy od tego, jaki wyglad ktos wybral: po powrocie do starego wygladu kropki musza nadal byc, bo moduly nadal czekaja na przeglad. */ .nav-item[data-przeglad="wymaga"] .nav-label::after { content:""; display:inline-block; width:6px; height:6px; margin-left:6px; border-radius:50%; background:#FF6B6B; vertical-align:middle; flex:none; } /* Napis i kropka w jednej linii. `.nav button` uklada dzieci w siatke trzykolumnowa, wiec sam `::after` wewnatrz napisu wystarczy — ale przy dlugiej nazwie napis moze sie zlamac i kropka zostalaby sama w drugiej linii. */ .nav-item[data-przeglad="wymaga"] .nav-label { display:inline-flex; align-items:center; } /* ========================================================= PRZEŁĄCZNIK TRYBU ========================================================= */ .przelacznik-motywu { display:inline-flex; align-items:center; gap:2px; padding:2px; border:1px solid var(--line); border-radius:8px; background:var(--surface,rgba(127,196,238,.06)); } .przelacznik-motywu button { min-height:24px; padding:0 8px; border:0; border-radius:6px; background:transparent; color:var(--muted); font-size:11px; font-weight:700; cursor:pointer; white-space:nowrap; } .przelacznik-motywu button[aria-pressed="true"] { background:var(--brand,#3B9FE0); color:#FFFFFF; } /* ========================================================= RESPONSYWNOŚĆ (zasada Z13) Sprawdzane na 1920, 1440, 1280 i 1024 px. Przy 1280 px pasek boczny zjada zbyt dużo — zwęża się. Przy 1024 px tabela przestaje udawać, że się mieści, i przewija się U SIEBIE, nie całą stroną (to jest zasada Z4: strona nigdy nie przewija się w poziomie). ========================================================= */ @media (max-width:1366px) { :root[data-motyw="nowy"] { --sidebar:204px; } :root[data-motyw="nowy"] .page { padding:var(--o-3) var(--o-4) var(--o-6); } } @media (max-width:1100px) { :root[data-motyw="nowy"] .grid.four { grid-template-columns:repeat(2,minmax(0,1fr)); } :root[data-motyw="nowy"] .grid.three { grid-template-columns:repeat(2,minmax(0,1fr)); } :root[data-motyw="nowy"] .form-grid { grid-template-columns:1fr; } :root[data-motyw="nowy"] .split, :root[data-motyw="nowy"] .hero { grid-template-columns:1fr; } } :root[data-motyw="nowy"] .table-wrap { overflow-x:auto; } /* Strona nigdy nie przewija się w poziomie — przewija się tabela. */ :root[data-motyw="nowy"] body { overflow-x:hidden; } /* ========================================================= PUNKT 1.1 — WYBOR ROZLICZENIA NA PULPICIE SIE NIE MIESCIL Oskar: „przycisk zwiazany z rozliczeniem nalezy poszerzyc, poniewaz obecnie tekst »Rozliczenie« nie miesci sie prawidlowo i jest czesciowo ukryty". Przyczyna, znaleziona w arkuszu: `.dash-week` ma `max-width:300px` i `flex:0 1 300px`. W tym polu stoi NAZWA rozliczenia — a nazwy wygladaja jak „Rozliczenie 29.09–05.10.2026". Trzysta pikseli przy 13 px czcionki konczy sie w polowie daty. Co ciekawe, arkusz MA juz poprawna wersje tej reguly — ale schowana w @media (max-width:1100px). Czyli na malym ekranie pole jest szerokie, a na duzym wasie. Odwrotnie, niz powinno byc. Rozwiazanie: pole rosnie do wolnej szerokosci paska. Nie ustawiam mu konkretnej liczby pikseli, bo nazwy rozliczen beda rozne i kazda liczba bylaby zla dla jakiejs nazwy. ========================================================= */ :root[data-motyw="nowy"] .dash-week { max-width:none; flex:1 1 320px; min-width:0; } /* Pasek musi pozwolic polu rosnac, a nie trzymac go przy naglowku. */ :root[data-motyw="nowy"] .toolbar.wrap { gap:var(--o-3); } /* ========================================================= TEKST TYLKO DLA CZYTNIKA EKRANU Ta sama klasa co na stronie glownej (strona/index.html). BEZ PRZEDROSTKA [data-motyw="nowy"] — i to jest celowe, tak samo jak przy kropce statusu przegladu: dostepnosc nie zalezy od tego, jaki wyglad ktos wybral. Po powrocie do starego wygladu naglowek schowany dla oka musi nadal byc czytany przez czytnik, a nie wrocic na ekran. `clip-path` zamiast `display:none`, bo `display:none` USUWA tekst takze dla czytnika — czyli zrobiloby dokladnie to, czego nie chcemy. ========================================================= */ .tylko-dla-czytnika { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } /* ========================================================= SZYBKIE MENU KARTY KIEROWCY — PUNKT 4.15 Pasek przyklejony u gory, bo inaczej po przewinieciu do „Notatek" trzeba by wrocic na sama gore, zeby skoczyc do „Logow" — czyli dokladnie to przewijanie, ktorego menu ma oszczedzic. BEZ PRZEDROSTKA MOTYWU: ten pasek jest nowym elementem, nie zmiana wygladu istniejacego. Po powrocie do starego wygladu karta nadal go potrzebuje — jest najdluzszym ekranem panelu niezaleznie od koloru. ========================================================= */ .karta-szybkie-menu { position:sticky; top:0; z-index:2; display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; padding:8px; border:1px solid var(--line); border-radius:10px; background:var(--panel); box-shadow:var(--shadow); } /* ========================================================= MENU: BEZ EMOTIKON, MNIEJSZA CZCIONKA Prośba Oskara z 2026-10-05: „usuń wszystkie możliwe emotikony z nowego CSS i zmniejsz czcionkę menu". ========================================================= EMOTIKONY ZNIKAJĄ Z WYGLĄDU, NIE Z DANYCH ========================================================= Ikony pozycji menu (📊, 👤, 📄…) siedzą w `assets/js/data.js`, nie w arkuszu. Nie usuwam ich STĄD, bo wtedy zniknęłyby też przy starym wyglądzie — a to jest zmiana wyglądu, nie zmiana danych. Chowam je regułą w motywie. Dzięki temu: - w nowym wyglądzie menu jest tekstem, bez obrazków, - po przełączeniu na stary wygląd emotikony wracają, - ani jedna pozycja menu nie musi być przepisana. ========================================================= WYJĄTEK: ZWINIĘTY PASEK BOCZNY ========================================================= Przy zwiniętym pasku `styles.css` chowa NAPISY i zostawia same ikony — to jedyne, co wtedy widać. Gdybym schował tam również ikony, zwinięte menu byłoby pustym słupkiem bez ani jednego punktu zaczepienia. Dlatego ikony chowamy tylko wtedy, gdy pasek jest rozwinięty. ========================================================= */ :root[data-motyw="nowy"] body:not(.sidebar-collapsed) .nav button > span:first-child { display: none; } /* Siatka pozycji menu bez kolumny na ikonę. `styles.css` ustawia `grid-template-columns:32px 1fr 14px` — trzydzieści dwa piksele na ikonę, której już nie ma. Bez tej reguły zostałby po niej pusty odstęp i napisy stałyby odsunięte od krawędzi. */ :root[data-motyw="nowy"] body:not(.sidebar-collapsed) .nav button { grid-template-columns: 1fr 14px; padding: 7px 10px; font-size: var(--font-sm); border-radius: 8px; } /* Podpozycje jeszcze o stopień mniejsze — są głębiej w drzewie. */ :root[data-motyw="nowy"] .nav-subitem { font-size: var(--font-xs) !important; padding-left: 8px !important; } /* Strzałka rozwijania grupy przestaje krzyczeć — miała 15 px. */ :root[data-motyw="nowy"] .nav button small { font-size: var(--font-sm); } /* Nagłówek sekcji menu (jeśli jest) i nazwa firmy w pasku — ta sama skala, żeby pasek boczny nie miał trzech różnych wielkości tekstu. */ :root[data-motyw="nowy"] .nav-label { font-size: var(--font-sm); letter-spacing: -.005em; } :root[data-motyw="nowy"] .nav-subitem .nav-label { font-size: var(--font-xs); } /* ========================================================= NAGŁÓWKI EKRANÓW BEZ EMOTIKONY Ta sama prośba i ta sama zasada co przy menu: emotikona jest w danych (`SP.c.subhead('👤', …)`, `SP.c.ladowanie('⏳', …)`), a znika w WYGLĄDZIE. Po powrocie do starego wraca. `.page-icon` to kafelek 46 × 46 px z emotikoną przy tytule każdego ekranu — przy ośmiu ekranach pod rząd czyta się jak dekoracja, nie jak informacja. ========================================================= */ :root[data-motyw="nowy"] .page-icon { display: none; } /* Tytuł bez kafelka nie potrzebuje odstępu po lewej, który robił mu miejsce. */ :root[data-motyw="nowy"] .subhead h2 { gap: 0; } /* ========================================================= UTRZYMANIE KIEROWCY — PUNKT 6.9 Oskar: „lista kierowców powinna być wizualnie odsunięta od formularza kontaktu i pozostałych elementów. Całość ma być bardziej przejrzysta, schludna i logicznie podzielona". Trzy rzeczy stały jedna pod drugą bez przerwy: lista kierowców, formularz rozmowy i historia. Przy zapisywaniu rozmowy nie było widać, gdzie kończy się wybór człowieka, a zaczyna zapis. Odstęp i linia — nie ramka. Ramka wokół wszystkiego daje trzy prostokąty w prostokącie; linia mówi „tu koniec" i nie dokłada niczego do rysunku. ========================================================= */ :root[data-motyw="nowy"] .ret-karty { padding-bottom: var(--o-5); border-bottom: 1px solid var(--line2); margin-bottom: var(--o-5); } :root[data-motyw="nowy"] .retention-formularz { margin-bottom: var(--o-5); } /* Panel bez wybranego kierowcy — jedno zdanie, nie pusta karta wielkości ekranu. */ .ret-panel-pusty { padding: var(--o-5, 24px); text-align: center; } /* Daty kontaktu są teraz napisami, nie polami (punkty 6.1 i 6.2). Układ pozostaje ten sam, żeby trzy kolumny nadal stały w rzędzie. */ :root[data-motyw="nowy"] .retention-pole > b { display: block; margin-top: 2px; font-size: var(--font-base); } :root[data-motyw="nowy"] .retention-pole > small { display: block; margin-top: 2px; } /* ========================================================= TRYB JASNY: KARTA MUSI BYĆ WIDOCZNA JAKO KARTA Policzone wyżej: biała karta na tle strony to najwyżej 1,20:1. Tło samo jej nie oddzieli — potrzebna jest krawędź i cień. W trybie ciemnym jest odwrotnie: tam karta jest JAŚNIEJSZA od tła i widać ją bez obwódki. Dlatego te reguły dotyczą tylko jasnego. ========================================================= */ :root[data-motyw="nowy"][data-tryb="jasny"] .card, :root[data-motyw="nowy"][data-tryb="jasny"] .panel, :root[data-motyw="nowy"][data-tryb="jasny"] .modal { border-color: var(--line2); box-shadow: var(--shadow); } /* Nagłówek tabeli — mocniejsza linia pod spodem. Przy przyklejonym nagłówku (zagęszczenie, punkt 2.8) to ona oddziela go od wierszy, które pod niego wjeżdżają. */ :root[data-motyw="nowy"][data-tryb="jasny"] th { box-shadow: inset 0 -2px 0 var(--line2); } /* Wiersz pod kursorem — na białym tle delikatne rozjaśnienie jest niewidoczne, bo nie ma czego rozjaśniać. Przygaszamy zamiast rozjaśniać. */ :root[data-motyw="nowy"][data-tryb="jasny"] tr:hover td { background: rgba(11,32,57,.05); } /* Pola formularzy muszą wyglądać jak pola. Na białej karcie białe pole bez wyraźnej krawędzi jest niewidoczne — a człowiek nie wie, gdzie kliknąć. */ :root[data-motyw="nowy"][data-tryb="jasny"] .input, :root[data-motyw="nowy"][data-tryb="jasny"] textarea, :root[data-motyw="nowy"][data-tryb="jasny"] select, :root[data-motyw="nowy"][data-tryb="jasny"] .searchbox { background: #FFFFFF; border-color: var(--line2); } :root[data-motyw="nowy"][data-tryb="jasny"] .input:focus, :root[data-motyw="nowy"][data-tryb="jasny"] textarea:focus, :root[data-motyw="nowy"][data-tryb="jasny"] select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(30,111,175,.18); } /* Zwykły przycisk na białym tle też potrzebuje krawędzi — bez niej jest napisem, w który nikt nie kliknie. */ :root[data-motyw="nowy"][data-tryb="jasny"] .btn, :root[data-motyw="nowy"][data-tryb="jasny"] .icon-button, :root[data-motyw="nowy"][data-tryb="jasny"] .ghost { background: #FFFFFF; border-color: var(--line2); } :root[data-motyw="nowy"][data-tryb="jasny"] .btn:hover, :root[data-motyw="nowy"][data-tryb="jasny"] .ghost:hover { background: var(--card2); border-color: var(--brand); } /* Pasek boczny odcięty od treści — inaczej menu i strona to jedno pole. */ :root[data-motyw="nowy"][data-tryb="jasny"] .sidebar { background: var(--bg2); border-right: 1px solid var(--line2); } /* Zaznaczona pozycja menu — kolorem, nie samym pogrubieniem. */ :root[data-motyw="nowy"][data-tryb="jasny"] .nav button.active { background: rgba(30,111,175,.14); color: var(--brand3); box-shadow: inset 0 0 0 1px rgba(30,111,175,.30); } /* ========================================================= IKONY STANÓW W ROZLICZENIACH — PUNKT „BEZ EMOTIKON" Oskar, 2026-10-05: „w rozliczeniach zostały jeszcze emotki". Emotikony nagłówków i menu znikły wcześniej (`.page-icon`, ikony pozycji menu), ale w rozliczeniach są jeszcze ikony STANÓW: 🔒 przy ukrytej pozycji, 🚕 przy opłacie flotowej, 📆 przy raty i tak dalej. Rysują się wprost w treści, nie przez `.page-icon`. Dostały własną klasę, żeby dało się je schować tą samą regułą, co pozostałe — i żeby po powrocie do starego wyglądu wróciły. Wartości zostają W DANYCH (`settlements-visibility.js`, `settlements-adjustments-states.js`). Usunięcie ich u źródła zabrałoby je także przy starym wyglądzie, a to zmiana wyglądu, nie danych. ========================================================= */ :root[data-motyw="nowy"] .ikona-emoji { display: none; } /* Napis po schowanej ikonie nie może przyklejać się do poprzedniego słowa — ikona dawała między nimi odstęp. */ :root[data-motyw="nowy"] .ikona-emoji + * { margin-left: 0; } /* ========================================================= PASEK ZAKŁADEK ZASAD ROZLICZEŃ Dopisane 2026-10-12, przy przeglądzie „czy wygląd na pewno jest spójny". ========================================================= CO BYŁO NIE TAK — ZMIERZONE, NIE WYCZUTE ========================================================= `styles.css` maluje ten pasek na sztywno: .settlement-rules-tabs background:#f3f4f6 (linia 5254) .settlement-rules-tab color:#374151 .settlement-rules-tab:hover background:#ffffff .settlement-rules-tab.active background:#111827 Te reguły stoją ZA sekcją ciemnych nadpisań (kończy się na linii 5243), więc nic ich nie przejmuje. Generator trybu jasnego też nie: on z założenia zostawia tła zapisane szesnastkowo jasne, bo w trybie jasnym tło MA być jasne. Skutkiem w nowym motywie, który jest domyślnie ciemny, był jasnoszary prostokąt na granatowym panelu — kontrast tła paska do tła panelu 14,2:1. Nie chodzi o czytelność: taki kontrast między dwoma TŁAMI to po prostu jasna płyta w ciemnym ekranie. ========================================================= DLACZEGO KOLORY IDĄ ZE ZMIENNYCH ========================================================= Samo przyciemnienie tła nie wystarczyło: tekst zakładki ma wpisane `#374151`, czyli ciemny grafit. Na granacie `#0E2539` dawałby 1,5:1 — czyli nic. Dlatego i tło, i tekst biorą zmienne. Tryb jasny nowego motywu przestawia je u siebie (`--soft` na granatową mgłę, `--text` na granat), więc ta jedna reguła obsługuje oba tryby i nie trzeba jej powtarzać. ========================================================= SKALA, NIE TYLKO KOLOR ========================================================= Pasek był też o dziesięć pikseli wyższy od każdej innej kontrolki: `min-height:44px` przy `--h-base`. Nowy motyw gasi na przyciskach `transform` (linia 284), a zakładki wciąż podnosiły się o piksel przy najechaniu. Stan aktywny bierze ten sam gradient marki, co aktywny filtr (`.settlement-filter-chip.active`) — żeby dwa paski wyboru na jednym ekranie nie zaznaczały się inaczej. STARY WYGLĄD ZOSTAJE NIETKNIĘTY: całość jest obwarowana `[data-motyw="nowy"]`, a `styles.css` nie jest ruszony. ========================================================= */ :root[data-motyw="nowy"] .settlement-rules-tabs { gap: var(--o-1); margin: var(--o-3) 0 var(--o-4); padding: var(--o-1); background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius); } :root[data-motyw="nowy"] .settlement-rules-tab { min-height: var(--h-base); padding: 0 var(--o-3); border: 1px solid transparent; border-radius: var(--radius-przycisk); background: transparent; color: var(--muted2); font-size: var(--font-base); font-weight: 650; } :root[data-motyw="nowy"] .settlement-rules-tab:hover { background: var(--soft2); border-color: var(--line); color: var(--text); box-shadow: none; transform: none; } :root[data-motyw="nowy"] .settlement-rules-tab.active { background: linear-gradient(135deg, var(--brand), #6d5dfc 48%, #22c7a7); border-color: transparent; color: #fff; box-shadow: none; } :root[data-motyw="nowy"] .settlement-rules-tab.active:hover { background: linear-gradient(135deg, var(--brand), #6d5dfc 48%, #22c7a7); border-color: transparent; color: #fff; transform: none; } /* ========================================================= RAMKA WYJAŚNIENIA W ZASADACH ROZLICZEŃ Dopisane 2026-10-12, z przeglądu kaskady narzędziem `narzedzia/sprawdz-spojnosc-wygladu.js`. ========================================================= TEKST BYŁ NIEWIDOCZNY — ZMIERZONE ========================================================= `.settlement-rule-explain` dostaje w `styles.css` jasne tło: linia 4150 background:#f8fafc linia 4154 h3 { color:#0f172a } ciemny, zgodnie z tłem linia 4158 p, li { color:#334155 } ciemny, zgodnie z tłem Ale linia 5082 nadpisuje akapity NA CAŁYM EKRANIE: .settlement-rule-explain p, li { color:var(--muted2) !important } W nowym motywie `--muted2` to `#B9D3E8`, czyli jasny błękit. Jasny tekst na tle `#f8fafc` daje **1,48:1**. Wymagane 4,5:1. Ten sam rachunek w starym wyglądzie: 1,74:1. Czyli defekt jest STARSZY od nowego motywu i nie jest jego regresją — ale widać go dopiero, gdy się policzy, a nie gdy się czyta jedną regułę. ========================================================= CZEMU PRZYCZYNA JEST GDZIE INDZIEJ, NIŻ SIĘ WYDAJE ========================================================= Siostrzane pudełka — `.settlement-rule-card`, `.choice-card`, `.other-transaction-impact-card`, `.settlement-rule-kpi`, `.control-formula-row` — stoją w linii 5057 na jednej liście i dostają ciemny welon, obwódkę i jasny tekst. `.settlement-rule-explain` na tej liście NIE MA. Ktoś dopisał mu tylko kolor akapitu (5082), a tła nie. Dlatego naprawą nie jest zmiana koloru tekstu, a dokończenie tego, co zrobiono siostrom: tło ma być ciemne, bo tekst już jest jasny. Nagłówek `h3` też musi zejść ze sztywnego `#0f172a` — na ciemnym welonie byłby nieczytelny tak samo jak akapit dziś na jasnym. Po poprawce: akapit 8,87:1, nagłówek 12,26:1 w trybie ciemnym; 7,68:1 i 13,73:1 w jasnym. Zmienne obsługują oba tryby jedną regułą. ========================================================= */ :root[data-motyw="nowy"] .settlement-rule-explain { background: var(--soft); border: 1px solid var(--line); } :root[data-motyw="nowy"] .settlement-rule-explain h3 { color: var(--text); } /* ========================================================= ZAZNACZONA KARTA WYBORU Dopisane 2026-10-12, z tego samego przeglądu. ========================================================= STAN ZAZNACZONY PRZEPADAŁ ========================================================= `styles.css` daje karcie wyboru stan zaznaczony: linia 4270 .choice-card.active { border-color:rgba(37,99,235,.55); background:#eff6ff; } Ale linia 5057 ustawia `.choice-card` tło ORAZ obwódkę z `!important`. `!important` bije szczegółowość — więc reguła stanu, zapisana bez `!important`, przegrywa z regułą stanu zwykłego. Zaznaczona karta wyglądała jak każda inna; widać było tylko kropkę w polu wyboru. Dlatego ta reguła MUSI mieć `!important`: inaczej nie ma jak wygrać z regułą, która go ma. Nie jest to skrót — jest to jedyny sposób, w jakim stan może przebić stan zwykły w tej kaskadzie. ========================================================= SIŁA ODCIENIA DOBRANA POMIAREM, NIE NA OKO ========================================================= alfa 0,16 odróżnienie 1,11:1 prawie niewidoczne alfa 0,22 odróżnienie 1,23:1 alfa 0,34 odróżnienie 1,52:1 wybrane alfa 0,48 odróżnienie 1,98:1 tło zaczyna krzyczeć Przy 0,34 biały napis na zaznaczonej karcie ma 8,8:1, a obwódka `--brand` odcina się od wypełnienia 4,14:1. W trybie jasnym odpowiednio 1,47:1, 10,0:1 i 4,56:1. Odcień idzie ze zmiennej `--wybrane`, nie z wpisanego koloru — bo marka ciemnego i jasnego trybu to dwa różne błękity. ========================================================= */ :root[data-motyw="nowy"] .choice-card.active { background: var(--wybrane) !important; border-color: var(--brand) !important; } /* ========================================================= MODUŁ SZKÓD: DWIE KONTROLKI POZA SKALĄ Dopisane 2026-10-12, z przeglądu narzędziem `narzedzia/sprawdz-spojnosc-wygladu.js`. ========================================================= DLACZEGO TYLKO TE DWIE Z DZIEWIĘCIU ========================================================= Narzędzie wskazało dziewięć kontrolek z wysokością wpisaną na sztywno. Siedem to fałszywe alarmy i warto zapisać, dlaczego, żeby nikt nie „poprawiał" ich następnym razem: .fleet-task-search-button 46px ma też klasę `btn` .topbar-logout 40px ma też klasę `btn` .auth-submit 49px ma też klasę `btn` Te trzy mają w szablonie `class="btn …"`, a motyw ustawia `.btn` na `--h-base` selektorem `[data-motyw="nowy"] .btn`. Dwie klasy biją jedną, więc motyw JUŻ je normalizuje — wpisane piksele są martwe. .mini-bar 32px słupek wykresu .fleet-damage-progress-step 54px kółko postępu .fleet-car-plate 34px tablica rejestracyjna .faktura-pole-duze 42px pole celowo duże Te cztery nie są kontrolkami: to wykres, wskaźnik, plakietka i pole, które ma być duże z nazwy. ========================================================= ZOSTAJĄ DWIE — I TE SĄ PRAWDZIWE ========================================================= `.fleet-damage-tab` nie ma klasy `btn`, więc nic jej nie normalizuje: pasek zakładek szkód stał 46 px wysoko, przy 34 px każdej innej kontrolki. Dodatkowo promień 15 px przy 9 px i czcionka 12,5 px — wartość, której nie ma w skali wcale. Kolory tej zakładki są już w porządku: bierze `var(--muted)`, a `motyw-marka.css` przemalował jej stan aktywny na błękit. Tu chodzi wyłącznie o wymiary. `.fleet-damage-settlement-panel .form-actions .btn.primary` ma 48 px i CZTERY klasy w selektorze — czyli bije regułę motywu (dwie klasy) i wygrywa z nią naprawdę, w przeciwieństwie do tych trzech wyżej. Dostaje `--h-lg` (40 px), bo to główny przycisk zatwierdzenia na swoim ekranie, a nie zwykły przycisk w rzędzie. Selektor musi mieć pięć klas, żeby przebić tamte cztery. ========================================================= */ :root[data-motyw="nowy"] .fleet-damage-tab { min-height: var(--h-base); border-radius: var(--radius-przycisk); font-size: var(--font-base); } :root[data-motyw="nowy"] .fleet-damage-settlement-panel .form-actions .btn.primary { min-height: var(--h-lg); }