/* Sprawy - arkusz stylow. * * Zasady, ktore trzymaja to w ryzach: * - gesto. Lista spraw to tabela, nie kafelki z cieniem. * - kolorem przewodnim zostaje ATRAMENT (czern / biel w ciemnym). Barwa * doszla 23.09, ale jako WARSTWA, nie jako nowy motyw: tlo strony, szklo * widgetow i piec barw lejka. Tekst, tabele i przycisk glowny sa nadal * atramentem - inaczej kolor przestaje cokolwiek znaczyc. * - piec barw lejka to JEDEN slownik. Ta sama barwa oznacza etap 3 w lejku, * w tabeli i na kropce przy sprawie. Barwa niesie poziom, nie ozdobe. * - SZKLO zamiast plaskiego tla: widget jest polprzezroczysty i rozmywa to, * co pod nim. Dlatego pod strona lezy poswiata (`body::before`) - bez niej * nie ma czego rozmywac i szklo wyglada jak zwykly szary prostokat. * - czcionka systemowa, liczby tabularne. * - telefon jest pierwszym rozmiarem, nie wyjatkiem na koncu. * * Paleta jasna i ciemna to ten sam projekt odbity, nie dwa rozne. W ciemnej * role atramentu przejmuje biel - dlatego `--akcent` w obu trybach znaczy * to samo: "kolor, ktorym sie pisze". * * MOTYW (25.09). Domyslny jest CIEMNY - tak samo jak na `posty`. Ustawienie * systemu nie ma tu glosu; decyduje wylacznie przelacznik w rogu, ktory * ustawia `data-motyw` na : * brak atrybutu -> ciemny (`:root`) * data-motyw="jasny" -> jasny * data-motyw="ciemny"-> ciemny, czyli to samo co brak atrybutu * Do 25.09 strona szla za systemem i lista tokenow ciemnych stala przez to * podwojnie - raz w `@media`, raz pod atrybutem. Teraz kazda barwa jest * zapisana w jednym miejscu. */ :root { /* Kontrolki systemowe (paski przewijania, listy rozwijane) maja isc za * motywem strony, inaczej w ciemnym trybie swieca na bialo. */ color-scheme: dark; --tlo-strony: #08080c; --tlo: #101018; --tlo-2: #16161f; --tlo-3: #1e1e29; --tekst: #eceef5; --tekst-2: #9599ad; --linia: #24242f; --linia-mocna: #33333f; --akcent: #eceef5; --akcent-tekst: #0a0a0f; --ostrzezenie: #e2a35f; --sukces: #5ecb92; /* Slownik lejka: piec barw, po jednej na poziom. Kolejnosc to progresja * chlod -> cieplo -> zielen, wiec sam gradient kolumny "poziom" w tabeli * czyta sie jak ruch w lejku. Zielen na koncu nie jest przypadkiem: piaty * poziom to zamkniecie, czyli to samo, co `--sukces`. */ --p1: #8b98ff; --p2: #4fc2dd; --p3: #e0b05a; --p4: #ef84b4; --p5: #5ecb92; /* Szklo. `--szklo` jest polprzezroczyste celowo - pod spodem ma byc widac * poswiate z `body::before`. `--szklo-blask` to cienka jasna kreska u gory * widgetu: to ona sprawia, ze plaszczyzna wyglada na szybe, a nie na plame. */ --szklo: rgba(255, 255, 255, 0.045); --szklo-mocne: rgba(255, 255, 255, 0.07); --szklo-linia: rgba(255, 255, 255, 0.1); --szklo-blask: rgba(255, 255, 255, 0.14); --szklo-cien: 0 1px 2px rgba(0, 0, 0, 0.5), 0 18px 40px -22px rgba(0, 0, 0, 0.9); /* Tlo dymka wykresu: nieprzezroczyste, bo dymek stoi nad slupkami. */ --tlo-dymka: #1a1a24; --cien-fokus: 0 0 0 3px rgba(139, 152, 255, 0.28); --cien-unoszenie: 0 1px 2px rgba(0, 0, 0, 0.6); } /* Wersja jasna - ten sam projekt odbity. Wlacza ja WYLACZNIE przelacznik, * przez `data-motyw="jasny"` na . Bloku `prefers-color-scheme` tu nie ma: * ustawienie systemu niczego nie przelacza, bo domyslna twarza tej strony jest * ciemny atrament. `data-motyw="ciemny"` nie potrzebuje wlasnego bloku - to * jest po prostu `:root` powyzej. * * Tokeny musza sie zgadzac co do jednego: nowy token dopisany wyzej i tu. */ :root[data-motyw="jasny"] { color-scheme: light; --tlo-strony: #f4f5f8; --tlo: #ffffff; --tlo-2: #f2f3f7; --tlo-3: #e7e9f0; --tekst: #0a0a0f; --tekst-2: #62667a; --linia: #e2e4ec; --linia-mocna: #ccd0dd; --akcent: #0a0a0f; --akcent-tekst: #ffffff; --ostrzezenie: #b45309; --sukces: #157f4d; /* Ten sam slownik lejka, przyciemniony. Na bieli rozjasnione warianty * z gory rozplywaja sie w tle - to nie jest ta sama wartosc z inna alfa. */ --p1: #5b6ee8; --p2: #2f9bb8; --p3: #b8862f; --p4: #c9548a; --p5: #157f4d; /* Szklo na jasnym tle musi miec WYSOKA alfe: szyba nad biela rozjasnia, * a nie przyciemnia. Rola ta sama, wartosci nie do odwrocenia wprost. */ --szklo: rgba(255, 255, 255, 0.72); --szklo-mocne: rgba(255, 255, 255, 0.86); --szklo-linia: rgba(255, 255, 255, 0.9); --szklo-blask: rgba(255, 255, 255, 0.95); --szklo-cien: 0 1px 2px rgba(16, 20, 40, 0.05), 0 12px 32px -18px rgba(16, 20, 40, 0.28); --tlo-dymka: #ffffff; --cien-fokus: 0 0 0 3px rgba(91, 110, 232, 0.24); --cien-unoszenie: 0 1px 2px rgba(10, 10, 15, 0.08); --r: 6px; --r-mala: 4px; --r-karta: 14px; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--tlo-strony); color: var(--tekst); font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -0.006em; -webkit-font-smoothing: antialiased; min-height: 100vh; } /* Poswiata pod cala strona. Trzy rozmyte plamy w barwach lejka - na tyle * slabe, ze na plaskim tle bylyby prawie niewidoczne, ale szklo widgetow je * rozmywa i podbija, wiec widac je dokladnie tam, gdzie maja dzialac. * `fixed`, bo ma nie jechac ze scrollem: to jest tlo pokoju, nie tresc. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60vw 52vh at 12% -6%, color-mix(in srgb, var(--p1) 26%, transparent), transparent 70%), radial-gradient(52vw 46vh at 88% 4%, color-mix(in srgb, var(--p4) 20%, transparent), transparent 70%), radial-gradient(64vw 56vh at 62% 102%, color-mix(in srgb, var(--p2) 18%, transparent), transparent 72%); } /* Liczby nie maja skakac w kolumnie przy kazdym odswiezeniu. */ .liczba, td, th, input, select { font-variant-numeric: tabular-nums; } /* --- szkielet ------------------------------------------------------------ */ #aplikacja { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; } /* Pasek jest szklem przyklejonym do krawedzi ekranu - dlatego ma rozmycie, * ale nie ma promienia ani cienia: nie unosi sie nad trescia, tylko ja * ogranicza. */ .pasek { display: flex; flex-direction: column; gap: 4px; padding: 18px 12px; border-right: 1px solid var(--linia); background: var(--szklo); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); position: sticky; top: 0; align-self: start; height: 100vh; z-index: 5; } .marka { padding: 0 8px 16px; } .marka h1 { font-size: 15px; font-weight: 600; margin: 0; letter-spacing: -0.01em; } .marka span { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tekst-2); margin-top: 2px; } .nawigacja { display: flex; flex-direction: column; gap: 4px; } /* Pozycja nawigacji to nie przycisk z ramka - ramki w tym miejscu robilyby * z lewej kolumny plot. Stan biezacy niesie tlo, grubsze pismo i kolorowy * pasek z boku. */ .nawigacja button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; border-radius: var(--r); padding: 9px 10px; min-height: 38px; font-size: 13px; font-weight: 500; color: var(--tekst-2); box-shadow: none; } .nawigacja button svg { width: 15px; height: 15px; fill: currentColor; flex: 0 0 auto; } .nawigacja button:hover { background: var(--szklo-mocne); border-color: transparent; color: var(--tekst); } .nawigacja button[aria-current="page"] { background: color-mix(in srgb, var(--p1) 14%, transparent); color: var(--tekst); font-weight: 600; box-shadow: inset 2px 0 0 var(--p1); } .nawigacja button[aria-current="page"] svg { color: var(--p1); } /* Nowa sprawa zostaje pelnym atramentem - to jedyne dzialanie w tej kolumnie, * ktore cos tworzy, i ma sie roznic od przelaczania widokow. */ .nawigacja button.glowny, .nawigacja button.glowny:hover { background: var(--akcent); color: var(--akcent-tekst); border-color: var(--akcent); font-weight: 600; margin-top: 8px; box-shadow: var(--cien-unoszenie); } .nawigacja button.glowny:hover { opacity: 0.88; } .pasek-stopka { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--linia); display: flex; flex-direction: column; gap: 8px; } .pasek .kto { color: var(--tekst-2); font-size: 12px; padding: 0 8px; } .pasek-stopka .przyciski button { flex: 1 1 0; padding: 7px 8px; min-height: 34px; font-size: 12px; } main { padding: 24px 24px 48px; max-width: 1180px; width: 100%; } /* Naglowek sekcji: maly, rozstrzelony, szary. Ma nazywac sekcje, a nie * konkurowac z liczbami pod soba. */ h2 { font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--tekst-2); margin: 0 0 8px; } .sekcja { margin-bottom: 28px; } /* --- szklo --------------------------------------------------------------- */ /* Jedna definicja dla wszystkich widgetow. Kazdy element, ktory ma wygladac * jak szyba, dostaje te trzy rzeczy razem: polprzezroczyste tlo, rozmycie tego, * co pod nim, i jasna kreske u gory (`inset 0 1px 0`). Kreska jest wazniejsza, * niz wyglada - bez niej krawedz gubi sie w tle i szyba robi sie plama. */ .karta, .kafle, .lejek, .tabela-oprawa, .dane-sprawy, .komunikat, .wykres-dymek { background: var(--szklo); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border: 1px solid var(--linia); box-shadow: var(--szklo-cien), inset 0 1px 0 var(--szklo-blask); } /* --- HUD ------------------------------------------------------------------ */ /* Siatka na odstepie 1px, ktora linia pod spodem zamienia w kreski miedzy * kaflami - jedna ramka zamiast ramki wokol kazdego kafla. Kafel NIE ma * wlasnego tla: przez cala plyte widac te sama poswiate, wiec siedem kafli * czyta sie jak jeden przedmiot. */ .kafle { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 1px; border-radius: var(--r-karta); overflow: hidden; } .kafel { background: transparent; padding: 13px 15px; box-shadow: inset 0 0 0 0.5px var(--linia); transition: background 0.15s ease; } .kafel:hover { background: var(--szklo-mocne); } .kafel .etykieta { font-size: 11px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--tekst-2); display: block; margin-bottom: 2px; } .kafel .wartosc { font-size: 30px; font-weight: 600; line-height: 1.15; letter-spacing: -0.03em; display: block; } .kafel .dopisek { font-size: 12px; color: var(--tekst-2); } /* Lejek: slupki, nie wykres. Dlugosc jest proporcja do poziomu 1, barwa jest * numerem poziomu - ta sama, co przy sprawie na liscie. */ .lejek { border-radius: var(--r-karta); overflow: hidden; } .lejek-wiersz { display: grid; grid-template-columns: minmax(0, 270px) 1fr 44px 92px; align-items: center; gap: 12px; padding: 10px 15px; border-bottom: 1px solid var(--linia); font-size: 13px; } .lejek-wiersz:last-child { border-bottom: 0; } /* Naglowek lejka nazywa dwie liczby po prawej. Wyglada jak `th` w tabelach * obok - to ta sama rola, wiec ma byc ten sam sygnal wizualny. */ .lejek-naglowek { font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--tekst-2); background: var(--szklo-mocne); padding-top: 8px; padding-bottom: 8px; } .lejek-naglowek .nazwa { font-weight: 500; color: var(--tekst-2); } .lejek-naglowek span { white-space: nowrap; } .lejek-naglowek .liczba { font-weight: 500; } /* Nazwa etapu jest dluga ("3 Kontakt telefoniczny i aktualizacja oferty"). * Do 23.09 kolumna urywala ja wielokropkiem, a pelna tresc byla tylko * w `title` - czyli etap 3 nie dalo sie przeczytac bez najezdzania myszka. * Teraz zawija sie w druga linie: wiersz rosnie o kilka pikseli, ale nazwa * jest widoczna w calosci, co jest wazniejsze niz rowna wysokosc wierszy. */ .lejek-wiersz .nazwa { color: var(--tekst); font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; } /* Slupek ma max-width, bo na szerokim ekranie pelna szerokosc zamienia lejek * w piec pasow przez caly monitor - wtedy nie widac proporcji, tylko plame. * Skala i tak jest wzgledna do poziomu 1. */ .slupek { background: var(--tlo-3); height: 10px; max-width: 460px; border-radius: 999px; overflow: hidden; } .slupek i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--barwa, var(--akcent)) 62%, transparent), var(--barwa, var(--akcent))); transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .lejek-wiersz .liczba { text-align: right; font-weight: 600; } .lejek-wiersz .konwersja { text-align: right; color: var(--tekst-2); font-size: 12px; } /* Slownik barw lejka. `--barwa` dziedziczy sie w dol, wiec wystarczy postawic * ja na elemencie: slupek, kropka i znacznik poziomu czytaja to samo. */ .poziom-1 { --barwa: var(--p1); } .poziom-2 { --barwa: var(--p2); } .poziom-3 { --barwa: var(--p3); } .poziom-4 { --barwa: var(--p4); } .poziom-5 { --barwa: var(--p5); } /* --- karty, wykres, KPI --------------------------------------------------- */ /* Karta to jedyne miejsce, gdzie promien jest wiekszy niz w kontrolkach: * pojemnik moze byc bardziej zaokraglony niz to, co w nim stoi, odwrotnie * nigdy - inaczej rogi nie sa koncentryczne i widac to od razu. */ .karta { border-radius: var(--r-karta); padding: 16px; } .karta > h2 { margin-bottom: 12px; } .karta + .karta, .karta.sekcja { margin-bottom: 14px; } .karta-gora { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .karta-gora h2 { margin: 0; } .znacznik { font-size: 11px; color: var(--tekst-2); border: 1px solid var(--linia); background: var(--szklo-mocne); border-radius: 999px; padding: 3px 9px; white-space: nowrap; } .siatka-gora { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; align-items: stretch; } .kolumna-kpi { display: grid; grid-template-rows: 1fr 1fr; gap: 14px; } /* Wykres: slupki miesiecy. Rysowany divami, nie biblioteka - szesc slupkow * nie jest warte zaleznosci, ktora za rok trzeba bedzie aktualizowac. */ .wykres { position: relative; height: 196px; margin-top: 16px; } .wykres-siatka { position: absolute; left: 0; right: 0; top: 0; bottom: 24px; display: flex; flex-direction: column; justify-content: space-between; } .wykres-linia { border-top: 1px solid var(--linia); position: relative; } .wykres-podpis { position: absolute; right: 0; top: -7px; font-size: 10px; color: var(--tekst-2); padding-left: 6px; } .wykres-slupki { position: absolute; left: 0; right: 34px; top: 0; bottom: 0; display: flex; align-items: flex-end; gap: 10px; } .kolumna { flex: 1 1 0; height: 100%; display: flex; flex-direction: column; } .stos { flex: 1 1 auto; display: flex; flex-direction: column-reverse; min-height: 0; } .stos .czesc { display: block; width: 100%; } /* Zaokraglony jest sam wierzcholek slupka, nie kazdy jego kawalek - inaczej * miejsce styku wygranych z reszta wyglada jak szczelina. */ .stos .czesc.pelna { background: linear-gradient(180deg, color-mix(in srgb, var(--p5) 82%, transparent), var(--p5)); } .stos .czesc.pusta { background: linear-gradient(180deg, color-mix(in srgb, var(--p1) 62%, transparent), color-mix(in srgb, var(--p1) 34%, transparent)); border-radius: 5px 5px 0 0; } .stos.bez-reszty .czesc.pelna { border-radius: 5px 5px 0 0; } /* Miesiac bez spraw nie moze byc niewidzialny - inaczej wyglada jak dziura * w danych zamiast jak zero. */ .stos.pusty-miesiac { border-bottom: 2px solid var(--linia-mocna); } .kolumna { transition: transform 0.15s ease; } .kolumna:hover { transform: translateY(-2px); } .kolumna:hover .stos .czesc { filter: brightness(1.12); } .kolumna .etykieta { height: 24px; line-height: 24px; text-align: center; font-size: 11px; color: var(--tekst-2); } /* Dymek stoi NAD wykresem, wiec jego tlo musi byc nieprzezroczyste: szklo * z rozmyciem przepuszczalo slupki i cyfry robily sie nieczytelne. Stad * `--tlo-dymka` zamiast `--szklo-mocne` i mocniejszy cien zamiast ramki. */ .wykres-dymek { position: absolute; top: 2px; transform: translateX(-50%); z-index: 3; min-width: 168px; background: var(--tlo-dymka); border: 1px solid var(--linia-mocna); border-radius: 12px; padding: 10px 12px; font-size: 12px; color: var(--tekst-2); white-space: nowrap; pointer-events: none; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.35); } .dymek-glowa { font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--tekst-2); } /* Liczba spraw jest tu odpowiedzia na pytanie "ile" - dostaje rozmiar, * a jednostka ("sprawy") siedzi obok maluczko, zamiast z nia konkurowac. */ .dymek-suma { display: flex; align-items: baseline; gap: 6px; margin: 3px 0 8px; } .dymek-liczba { font-size: 22px; font-weight: 600; color: var(--tekst); line-height: 1; } .dymek-podpis { font-size: 12px; color: var(--tekst-2); } .dymek-wiersz { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 2px 0; } .dymek-klucz { display: flex; align-items: center; gap: 6px; } .dymek-wartosc { color: var(--tekst); font-weight: 600; } .dymek-wygrane .dymek-wartosc { color: var(--p5); } .dymek-reszta { color: var(--tekst-2); } /* Kreska oddziela "ile spraw" od "z czego" - bez niej kategorie czytalyby sie * jak dalszy ciag tej samej listy, co one nie sa. */ .dymek-kategorie { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--linia); } .wykres-dymek.przy-lewej { transform: translateX(-14px); } .wykres-dymek.przy-prawej { transform: translateX(-100%) translateX(14px); } .legenda { display: flex; gap: 18px; margin-top: 12px; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--tekst-2); } .legenda span { display: flex; align-items: center; gap: 6px; } .probka { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .probka-pelna { background: var(--p5); } .probka-pusta { background: color-mix(in srgb, var(--p1) 45%, transparent); } .karta-kpi { display: flex; flex-direction: column; justify-content: center; gap: 4px; } .karta-kpi .etykieta { font-size: 11px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--tekst-2); } .kpi-rzad { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .karta-kpi .wartosc { display: block; font-size: 32px; font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; } .karta-kpi .dopisek { font-size: 12px; color: var(--tekst-2); } /* Pierscien to miernik, nie ozdoba: tor musi byc widoczny, inaczej sam luk * wyglada jak koleczko ladowania. */ .pierscien { width: 54px; height: 54px; flex: 0 0 auto; transform: rotate(-90deg); } .pierscien circle { fill: none; stroke-width: 7; } .pierscien .tlo { stroke: var(--tlo-3); } .pierscien .wypelnienie { stroke: var(--p5); stroke-linecap: round; } /* Pigulka zmiany. Wzrost jest zielony, spadek bursztynowy - po dolozeniu barw * nie ma powodu, zeby te dwie rzeczy roznily sie samym ksztaltem ramki. */ .pigulka { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--linia); background: var(--szklo-mocne); color: var(--tekst-2); white-space: nowrap; } .pigulka.w-gore { background: color-mix(in srgb, var(--sukces) 16%, transparent); border-color: color-mix(in srgb, var(--sukces) 40%, transparent); color: var(--sukces); } .pigulka.w-dol { background: color-mix(in srgb, var(--ostrzezenie) 14%, transparent); border-color: color-mix(in srgb, var(--ostrzezenie) 38%, transparent); color: var(--ostrzezenie); } /* --- tabele --------------------------------------------------------------- */ .tabela-oprawa { overflow-x: auto; border-radius: var(--r-karta); } table { border-collapse: collapse; width: 100%; font-size: 13px; } th { text-align: left; font-weight: 500; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--tekst-2); background: var(--szklo-mocne); padding: 9px 13px; border-bottom: 1px solid var(--linia); white-space: nowrap; } td { padding: 9px 13px; border-bottom: 1px solid var(--linia); vertical-align: top; } tbody tr:last-child td { border-bottom: 0; } tbody tr.klikalna { cursor: pointer; } tbody tr.klikalna:hover td { background: var(--szklo-mocne); } td.num, th.num { text-align: right; } /* Numer sprawy i data to jedno slowo, mimo ze maja w srodku myslnik - bez * tego waska kolumna lamie "2026-017" na dwie linie i wiersz robi sie wyzszy * od sasiadow. Widoczne na prawdziwych danych z arkusza testowego. */ /* Reguly wspolne dla OBU list spraw - biezacej i historycznej. Przypiete * wczesniej do samego `#widok-lista` i zakladka historyczna od razu zlamala * numery, wiec selektory obejmuja teraz oba widoki. */ #widok-lista td:first-child, #widok-lista td:last-child, #widok-historyczne td:first-child, #widok-historyczne td:last-child { white-space: nowrap; } /* Status to jedna wartosc, nie zdanie - "brak odpowiedzi" lamane na dwie * linie czyta sie jak dwie osobne informacje. W liscie biezacej stoi * w kolumnie 7, w historycznej w 6. */ #widok-lista td:nth-child(7), #widok-historyczne td:nth-child(6) { white-space: nowrap; } /* Tabele HUD maja cztery kolumny na 1100 px, wiec przy automatycznym ukladzie * pierwsza zabiera cala wolna przestrzen, a trzy liczby zbijaja sie do prawej * krawedzi. Oddanie pierwszej kolumnie 40% rozklada liczby rowno. */ #widok-hud th:first-child, #widok-hud td:first-child { width: 40%; } /* Tabela kategorii: slupek ma brac wolne miejsce, a nie nazwa - stad wyjatek * od reguly wyzej. Liczby dostaja dokladnie tyle, ile potrzebuja, zeby nie * rozjezdzaly sie po prawej krawedzi. */ .tabela-kategorie th:first-child, .tabela-kategorie td:first-child { width: 1%; white-space: nowrap; } .tabela-kategorie .slupek-kol { width: auto; } .tabela-kategorie .num { width: 1%; white-space: nowrap; } .tabela-kategorie td { vertical-align: middle; } .tabela-kategorie tbody td { padding-top: 11px; padding-bottom: 11px; } /* Nazwa kategorii jest pierwsza rzecza, ktora sie czyta w wierszu - dostaje * pelny atrament, reszta wiersza jest od niej lzejsza. */ .tabela-kategorie .nazwa-kat { font-weight: 500; } /* Skutecznosc to POINTA tej tabeli (nazywa sie "Konwersja wg kategorii"), * wiec jako jedyna liczba jest wyrozniona. Zero zostaje szare - inaczej * czerwien albo zielen przy zerze sugerowalaby wynik, a to jest brak wyniku. */ .tabela-kategorie .skutecznosc { font-weight: 600; color: var(--tekst); } .tabela-kategorie .skutecznosc.ma-wygrane { color: var(--p5); } /* Wiersz bez ani jednej sprawy nie ma czego pokazac - gasnie w calosci * zamiast rysowac pusty tor udajacy dane. */ .tabela-kategorie tr.pusta td { color: var(--tekst-2); } .tabela-kategorie tr.pusta .slupek { opacity: 0.4; } /* Slupek kategorii: ta sama mechanika i te same barwy, co lejek i wykres. * Dwa segmenty obok siebie - wygrane, potem reszta - wiec dlugosc calosci * mowi "ile spraw", a ciemna czesc "ile z nich wygranych". */ .slupek-kat { display: flex; height: 8px; min-width: 120px; max-width: none; } .slupek-kat i { display: block; height: 100%; transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1); } /* Segmenty stykaja sie ze soba, wiec zaokraglony jest tylko poczatek * pierwszego i koniec ostatniego - inaczej w miejscu styku powstaje * przewezenie wygladajace na dziure w danych. */ .slupek-kat .czesc-wygrane { background: var(--p5); } .slupek-kat .czesc-reszta { background: color-mix(in srgb, var(--p1) 45%, transparent); } .slupek-kat i:first-child { border-radius: 999px 0 0 999px; } .slupek-kat i:last-child { border-radius: 0 999px 999px 0; } .slupek-kat i:only-child { border-radius: 999px; } .cisza { color: var(--tekst-2); } .stoi { color: var(--ostrzezenie); font-weight: 600; } .wygrana { color: var(--sukces); font-weight: 600; } /* Znacznik poziomu - kwadracik z cyfra, barwiony wg slownika lejka. Czyta sie * go bez naglowka i bez liczenia, ktora to kolumna. */ .poziom { display: inline-block; min-width: 22px; text-align: center; border: 1px solid color-mix(in srgb, var(--barwa, var(--linia-mocna)) 45%, transparent); background: color-mix(in srgb, var(--barwa, var(--tlo-2)) 16%, transparent); color: var(--barwa, var(--tekst)); border-radius: var(--r-mala); font-size: 12px; font-weight: 600; padding: 0 5px; } /* --- formularze i przyciski ---------------------------------------------- */ form { display: grid; gap: 14px; } .pola { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } /* Pole, ktorego wartosc nie miesci sie w jednej komorce siatki - dzis dotyczy * wylacznie etapu ("3 Kontakt telefoniczny i aktualizacja oferty"). W zwyklej * kolumnie przegladarka ucinala nazwe w srodku, wiec z listy nie dalo sie * odczytac, co jest wybrane. Zajmuje dwie kolumny, a gdy siatka ma tylko * jedna - po prostu cala szerokosc. */ .pola .szerokie { grid-column: span 2; } @media (max-width: 620px) { .pola .szerokie { grid-column: auto; } } label { display: grid; gap: 5px; font-size: 12px; color: var(--tekst-2); } /* Podpis pola i znacznik "wymagane" w jednej linii. Bez tego `label` * (display: grid) stawia znacznik w osobnym wierszu, pole robi sie wyzsze * od sasiadow i caly rzad formularza sie rozjezdza. */ label .podpis { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } label .wymagane { color: var(--p4); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } input, select, textarea, button { font: inherit; color: inherit; border-radius: var(--r); } input, select, textarea { background: var(--szklo-mocne); border: 1px solid var(--linia-mocna); padding: 9px 11px; width: 100%; min-height: 38px; } input::placeholder, textarea::placeholder { color: var(--tekst-2); opacity: 0.7; } /* Notatka nie ma byc pasem na cala szerokosc monitora - pisze sie w niej * jedno, dwa zdania. */ textarea { resize: vertical; min-height: 72px; max-width: 760px; } input:hover, select:hover, textarea:hover { border-color: var(--tekst-2); } input:focus, select:focus, textarea:focus, button:focus-visible { outline: none; border-color: var(--p1); box-shadow: var(--cien-fokus); } /* Przycisk drugoplanowy: szklo w ramce. */ button { background: var(--szklo-mocne); border: 1px solid var(--linia-mocna); padding: 9px 14px; min-height: 38px; font-weight: 500; cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease; } button:hover { border-color: var(--p1); color: var(--tekst); } button:active { transform: translateY(1px); } button:disabled { opacity: 0.45; cursor: default; } button:disabled:hover { border-color: var(--linia-mocna); } /* Przycisk glowny: pelny atrament. Na stronie jest go dokladnie jeden na * widok - to jest cala hierarchia dzialan. Barwa jest tu zajeta przez lejek, * wiec kolorowy przycisk glowny znaczylby "poziom", a nie "zrob". */ button.glowny { background: var(--akcent); border-color: var(--akcent); color: var(--akcent-tekst); font-weight: 600; box-shadow: var(--cien-unoszenie); } button.glowny:hover { background: var(--tekst); border-color: var(--tekst); opacity: 0.9; } button.glowny:active { opacity: 1; } .przyciski { display: flex; gap: 8px; flex-wrap: wrap; } /* Rzad przyciskow tuz pod siatka pol. Blok `Zmien` na karcie sprawy nie jest * formularzem, wiec nie lapie sie na `form { gap }` - do 25.09 "Zapisz zmiany" * stal doklejony do dolnej krawedzi ostatniego pola i czytal sie jak jego * czesc. Odstep jest wiekszy niz miedzy polami (14 px), zeby bylo widac, ze to * juz dzialanie, a nie kolejne pole. */ .pola + .przyciski { margin-top: 20px; } /* Pasek filtrow nad lista: pole szukania rozciagniete na 1100px czyta sie * gorzej niz krotkie - wpisuje sie w nie nazwe firmy, nie zdanie. */ .filtry { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; max-width: 620px; } /* Haslo z podgladem. Oko siedzi W POLU, nie obok: pole hasla ma swoja * szerokosc w formularzu i przycisk dostawiony z boku zwezalby je o polowe na * telefonie. Ikona jest przyciskiem, wiec dziala z klawiatury; `tabindex` nie * jest potrzebny. Podglad gasnie sam przy wylogowaniu - patrz app.js. */ .pole-haslo { position: relative; display: block; } .pole-haslo input { padding-right: 42px; } .pole-haslo .oko { position: absolute; top: 0; right: 0; height: 100%; width: 38px; min-height: 0; padding: 0; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 0 var(--r) var(--r) 0; color: var(--tekst-2); box-shadow: none; } .pole-haslo .oko:hover { color: var(--tekst); } .pole-haslo .oko:focus-visible { box-shadow: var(--cien-fokus); } .pole-haslo .oko svg { width: 17px; height: 17px; fill: currentColor; } /* Przelacznik motywu. Ikona bez podpisu, bo stoi w dwoch ciasnych miejscach * (brama i stopka paska) - opis niesie `title` i `aria-label`. */ .motyw { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 38px; padding: 0; flex: 0 0 auto; } .motyw svg { width: 16px; height: 16px; fill: currentColor; } /* Pasek boczny: przelacznik wchodzi w rzad z "Odswiez" i "Wyloguj", ale nie * rozciaga sie razem z nimi - to nie jest dzialanie tej samej wagi. */ .pasek-stopka .przyciski .motyw { flex: 0 0 38px; width: 38px; min-height: 34px; } /* Pole z przyciskiem zapisu w jednym rzedzie - patrz komentarz w app.js. */ .pole-z-przyciskiem { display: flex; gap: 6px; align-items: stretch; } .pole-z-przyciskiem input { flex: 1 1 auto; min-width: 0; } .pole-z-przyciskiem button { flex: 0 0 auto; } /* --- komunikaty ----------------------------------------------------------- */ .komunikat { padding: 10px 13px; border-left: 3px solid var(--p1); border-radius: var(--r); font-size: 13px; margin-bottom: 16px; } .komunikat.blad { border-left-color: var(--ostrzezenie); } .komunikat.ok { border-left-color: var(--sukces); } /* --- logowanie ------------------------------------------------------------ */ .brama { max-width: 360px; margin: 12vh auto; padding: 0 16px; } .brama h1 { font-size: 22px; letter-spacing: -0.02em; margin: 0 0 4px; } .brama p { color: var(--tekst-2); font-size: 13px; margin: 0 0 20px; } /* Brama jest jedynym ekranem bez nawigacji, wiec szklo musi tu zrobic cala * robote - bez niego formularz wisi na poswiacie bez oparcia. */ /* Rzad nad formularzem: przelacznik motywu. Na bramie stoi osobno, bo paska * bocznego jeszcze nie ma - a tryb wybiera sie najczesciej raz, zaraz po * wejsciu, zanim cokolwiek widac. */ .brama-gora { display: flex; justify-content: flex-end; margin-bottom: 10px; } .brama form { background: var(--szklo); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border: 1px solid var(--linia); box-shadow: var(--szklo-cien), inset 0 1px 0 var(--szklo-blask); border-radius: var(--r-karta); padding: 18px; } /* --- karta sprawy --------------------------------------------------------- */ .karta-naglowek { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .karta-naglowek h2 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; text-transform: none; color: var(--tekst); margin: 0; } .karta-naglowek .id { color: var(--tekst-2); font-size: 13px; } .dane-sprawy { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 24px; margin-bottom: 22px; padding: 15px; border-radius: var(--r-karta); } .dane-sprawy div { font-size: 13px; } .dane-sprawy .etykieta { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--tekst-2); } .historia { list-style: none; padding: 0; margin: 0; } .historia li { margin-bottom: 9px; font-size: 13px; } .historia .meta { color: var(--tekst-2); font-size: 12px; } /* Notatki to jedyne miejsce na karcie, gdzie stoi tekst pisany przez * czlowieka - dlatego maja wlasna liste, a nie kolejne wiersze historii. * Pasek z lewej jest znacznikiem "to napisal ktos", nie ozdoba. */ .notatki { list-style: none; padding: 0; margin: 14px 0 0; max-width: 760px; } .notatki li { border-left: 2px solid var(--linia-mocna); padding: 2px 0 2px 11px; margin-bottom: 12px; } .notatki li:last-child { margin-bottom: 0; } .notatki .tresc { font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; } .notatki .meta { color: var(--tekst-2); font-size: 12px; margin-top: 3px; } .ukryty { display: none !important; } /* Rozmycie tla kosztuje. Kto wylaczyl animacje w systemie, ten zwykle siedzi * na sprzecie, ktory tego nie lubi - wiec razem z ruchem gasnie tez szklo. */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; } .karta, .kafle, .lejek, .tabela-oprawa, .dane-sprawy, .komunikat, .wykres-dymek, .brama form, .pasek { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--tlo); } } /* Ponizej 900 px lewa kolumna kladzie sie na gore jako pasek - na telefonie * nie ma miejsca na stala nawigacje z boku, a Artur domyka sprzedaz wlasnie * telefonem. */ @media (max-width: 900px) { /* `auto 1fr`, nie dwa wiersze `auto`: przy `min-height: 100vh` siatka * rozdzielala nadmiar wysokosci rowno miedzy pasek i tresc, wiec pod * naglowkiem siedziala pusta wstega okolo 90 px. Teraz nadmiar bierze * w calosci `main`. */ #aplikacja { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; } .pasek { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; height: auto; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--linia); } .marka { padding: 0 8px 0 0; } .marka span { display: none; } .nawigacja { flex-direction: row; flex: 1 1 auto; gap: 6px; } .nawigacja button { width: auto; } .nawigacja button.glowny { margin-top: 0; } .nawigacja button[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--p1); } .pasek-stopka { margin-top: 0; padding-top: 0; border-top: 0; flex-direction: row; align-items: center; gap: 8px; } main { padding: 16px 12px 40px; } .siatka-gora { grid-template-columns: minmax(0, 1fr); } .kolumna-kpi { grid-template-rows: none; grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .kolumna-kpi { grid-template-columns: minmax(0, 1fr); } .wykres { height: 168px; } .legenda { gap: 12px; } /* Nazwa etapu nie miesci sie w wierszu razem ze slupkiem, wiec na telefonie * bierze cala pierwsza linie, a slupek z liczbami idzie pod nia. */ .lejek-wiersz { grid-template-columns: 1fr 40px 56px; grid-template-areas: "nazwa nazwa nazwa" "slupek liczba konwersja"; gap: 6px 8px; padding: 10px 12px; } .lejek-wiersz .nazwa { grid-area: nazwa; } .lejek-wiersz .slupek { grid-area: slupek; } .lejek-wiersz .liczba { grid-area: liczba; } .lejek-wiersz .konwersja { grid-area: konwersja; } /* Naglowek lejka znika na telefonie: wiersz jest tu dwulinijkowy i osie * naglowka nie pokrywalyby sie z niczym. Liczby zostaja czytelne z ukladu * (slupek, obok niego liczba i procent), a miejsca na ekranie jest mniej. */ .lejek-naglowek { display: none; } .kafel .wartosc { font-size: 26px; } .dane-sprawy { padding: 12px; } /* Cztery pozycje nie mieszcza sie w jednym wierszu: pasek wychodzil poza * ekran (436 px przy szerokosci 390), przez co cala strona przewijala sie * w bok, a "Nowa sprawa" bylo obciete do samego plusa. Drugie slowo * etykiety znika - "Aktywne" i "Nowa" nie sa w tym pasku dwuznaczne. */ /* Safari na iOS sam przybliza strone, kiedy dotkniete pole ma pismo * mniejsze niz 16 px - i po przyblizeniu juz z niego nie wraca. Formularz * nowej sprawy i okno logowania mialy 12 px, wiec kazde wejscie w pole * rozjezdzalo uklad. */ input, select, textarea { font-size: 16px; } .nawigacja { gap: 4px; } .nawigacja .dopisek { display: none; } .nawigacja button { padding: 9px 8px; gap: 6px; font-size: 12px; white-space: nowrap; } /* Tabele na telefonie: kolumny, ktore nie sa potrzebne do rozpoznania * wiersza, znikaja. Komplet danych jest na karcie sprawy, a wiersz po * dotknieciu ja otwiera - przewijanie tabeli w bok na telefonie jest * gorsze niz brak kolumny. */ /* Lista aktywnych: bez kontaktu i kategorii (634 px -> miesci sie). */ #widok-lista th:nth-child(3), #widok-lista td:nth-child(3), #widok-lista th:nth-child(4), #widok-lista td:nth-child(4) { display: none; } /* Historyczne: bez kontaktu, kategorii i etapu. Zostaje sprawa, firma, * status, budzet i data domkniecia - czyli to, po co sie tu wchodzi. */ #widok-historyczne th:nth-child(3), #widok-historyczne td:nth-child(3), #widok-historyczne th:nth-child(4), #widok-historyczne td:nth-child(4), #widok-historyczne th:nth-child(5), #widok-historyczne td:nth-child(5) { display: none; } /* Konwersja wg kategorii: kolumna "wygranych" znika - slupek pokazuje * udzial wygranych, a "skutecznosc" ten sam stosunek w procentach. */ .tabela-kategorie th:nth-child(4), .tabela-kategorie td:nth-child(4) { display: none; } /* Same kolumny to za malo: przy 13 px odstepu i rozstrzelonym naglowku * wiersz i tak nie miescil sie w oprawie (490 px na 364 px). Na telefonie * komorki sa ciasniejsze, a naglowek mniejszy i mniej rozstrzelony - * szerokosc kilku kolumn bierze sie z napisu w naglowku, nie z danych. */ th { padding: 8px 6px; font-size: 10px; letter-spacing: 0.02em; } td { padding: 9px 6px; font-size: 12px; } /* Wyjatek od zakazu lamania statusu (regula wyzej): w historycznych * "Bez odpowiedzi" w jednej linii zabiera 106 px z 364 i jako jedyna * kolumna wypychala tabele poza oprawe. Status lamany na dwie linie czyta * sie gorzej niz w jednej, ale wciaz lepiej niz kolumna "domknieta" * schowana za przewijaniem w bok. Lista biezaca zostaje bez zmian - * tam tabela miesci sie bez tego. */ #widok-historyczne td:nth-child(6) { white-space: normal; } /* Na telefonie nazwa etapu lamie sie na cztery linie i rozpycha wiersz. * Kolumna znika, bo nic nie traci: kolorowy znacznik poziomu obok niesie * dokladnie te sama informacje, tylko jednym znakiem. */ #widok-lista th:nth-child(6), #widok-lista td:nth-child(6) { display: none; } } /* Ponizej 380 px (typowy Android ma 360, stare iPhone'y 320) same ciasniejsze * komorki nie wystarczaja: pasek nawigacji mial 373 px i znowu wypychal cala * strone w bok. */ @media (max-width: 380px) { /* Ikony w nawigacji znikaja - etykieta niesie tu cala tresc, a ikona * kosztuje 21 px na przycisk, czyli dokladnie tyle, ile brakowalo. */ .nawigacja button svg { display: none; } .nawigacja button { padding: 9px 6px; } th, td { padding-left: 4px; padding-right: 4px; } /* Historyczne: dodatkowo bez budzetu - na tej szerokosci to piata kolumna * za duzo. Kwota zostaje na karcie sprawy. */ #widok-historyczne th:nth-child(7), #widok-historyczne td:nth-child(7) { display: none; } /* Nazwa kategorii moze sie tu lamac: bez tego trzyma cala tabele * szeroko otwarta, bo stoi w kolumnie `width: 1%` z zakazem lamania. */ .tabela-kategorie th:first-child, .tabela-kategorie td:first-child { white-space: normal; } }