/* styl.css — wspólny wygląd panelu. Telefon jest pierwszy (jedna kolumna od 380 px w górę), komputer dostaje szersze siatki. Motyw ciemny i jasny według ustawień systemu, z możliwością wymuszenia (atrybut data-theme na : „jasny” albo „ciemny”). DWIE REGUŁY, KTÓRE TRZYMAJĄ TEN PLIK: 1) Żadnego stylu w treści strony (CSP bez unsafe-inline): stan pokazujemy KLASĄ i atrybutem data-*, nigdy przez element.style. Dlatego kolory lampek są tu, w selektorach [data-klasa="…"]. 2) ZIELONY należy wyłącznie do statusu złącza Charging (klasa „laduje”). Połączenie ONLINE i rejestracja ACCEPTED dostają kolor „ok” (niebieski) — żeby „połączona” nigdy nie wyglądała jak „ładuje”. To jest lekcja z testu ZDWL, nie kwestia gustu. */ :root { color-scheme: light dark; --tlo: #f4f5f7; --tlo-karty: #ffffff; --tlo-drugie: #eceef2; --tlo-wciecie: #f8f9fb; --tekst: #16181d; --tekst-drugi: #5b6170; --ramka: #d3d7e0; --ramka-mocna: #b4bac7; --ok: #1f5fd0; --ok-tlo: #e5eeff; --laduje: #0f7b3f; --laduje-tlo: #e2f5e9; --uwaga: #8a6300; --uwaga-tlo: #fdf3dc; --ostrzezenie: #a24a00; --ostrzezenie-tlo: #fdeadd; --awaria: #b3261e; --awaria-tlo: #fdeaea; --neutralna: #4a5060; --neutralna-tlo: #eceef2; /* Wyróżnienie „to jest krok rozstrzygający”: jedyny fiolet w panelu. Osobny kolor, bo krok rozstrzygający nie jest ani stanem (lampka), ani ostrzeżeniem, a musi być widać go od razu. */ --wyrozniony: #6b2f8f; --wyrozniony-tlo: #f3ebfa; --promien: 10px; --odstep: 12px; --dotyk: 48px; --szeregowa: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "DejaVu Sans Mono", monospace; } @media (prefers-color-scheme: dark) { :root:not([data-theme="jasny"]) { --tlo: #12141a; --tlo-karty: #1a1d25; --tlo-drugie: #22262f; --tlo-wciecie: #15181e; --tekst: #e8eaf0; --tekst-drugi: #a2a9b8; --ramka: #2d323d; --ramka-mocna: #3d4450; --ok: #7fb0ff; --ok-tlo: #17263d; --laduje: #6fd699; --laduje-tlo: #122a1d; --uwaga: #e8c268; --uwaga-tlo: #2b2415; --ostrzezenie: #f0a06a; --ostrzezenie-tlo: #2e1d12; --awaria: #ff8b84; --awaria-tlo: #331616; --neutralna: #9aa1b1; --neutralna-tlo: #22262f; --wyrozniony: #c79bec; --wyrozniony-tlo: #241a2e; } } :root[data-theme="ciemny"] { --tlo: #12141a; --tlo-karty: #1a1d25; --tlo-drugie: #22262f; --tlo-wciecie: #15181e; --tekst: #e8eaf0; --tekst-drugi: #a2a9b8; --ramka: #2d323d; --ramka-mocna: #3d4450; --ok: #7fb0ff; --ok-tlo: #17263d; --laduje: #6fd699; --laduje-tlo: #122a1d; --uwaga: #e8c268; --uwaga-tlo: #2b2415; --ostrzezenie: #f0a06a; --ostrzezenie-tlo: #2e1d12; --awaria: #ff8b84; --awaria-tlo: #331616; --neutralna: #9aa1b1; --neutralna-tlo: #22262f; --wyrozniony: #c79bec; --wyrozniony-tlo: #241a2e; } * { box-sizing: border-box; } /* Atrybut hidden MUSI wygrywać z display z naszych klas (.logowanie i .panel mają display: flex, a reguła autorska bije regułę przeglądarki). Bez tego ekran logowania zostaje nad panelem, a panel prześwituje pod formularzem logowania. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; } body { background: var(--tlo); color: var(--tekst); font-family: system-ui, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.45; -webkit-text-size-adjust: 100%; } h1 { font-size: 1.25rem; margin: 0 0 8px; } h2 { font-size: 1.1rem; margin: 0 0 8px; } h3 { font-size: 0.98rem; margin: 0 0 6px; } p { margin: 0 0 8px; } a { color: var(--ok); } .pomin { position: absolute; left: -999px; } .pomin:focus { position: static; display: block; padding: 8px; } /* ------------------------------------------------------------------ logowanie */ .logowanie { display: flex; justify-content: center; padding: 24px 16px; } .logowanie .karta { width: 100%; max-width: 420px; } .karta { background: var(--tlo-karty); border: 1px solid var(--ramka); border-radius: var(--promien); padding: 16px; } /* ------------------------------------------------------------------ szkielet */ .panel { display: flex; flex-direction: column; min-height: 100vh; } .gora { position: sticky; top: 0; z-index: 5; background: var(--tlo-karty); border-bottom: 1px solid var(--ramka); padding: 8px 16px; display: flex; flex-direction: column; gap: 6px; } .gora-rzad { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .gora-prawa { display: flex; align-items: center; gap: 6px; margin-left: auto; } .znak { font-weight: 700; letter-spacing: 0.02em; } .nawigacja { display: flex; overflow-x: auto; gap: 4px; padding: 6px 12px; background: var(--tlo-drugie); border-bottom: 1px solid var(--ramka); } .nawigacja button { flex: 0 0 auto; min-height: 42px; border: 1px solid transparent; background: transparent; color: var(--tekst-drugi); border-radius: var(--promien); padding: 6px 12px; font-size: 0.95rem; cursor: pointer; } .nawigacja button[aria-current="page"] { background: var(--tlo-karty); border-color: var(--ramka-mocna); color: var(--tekst); font-weight: 600; } .ekran { flex: 1 1 auto; padding: 12px 16px 28px; display: flex; flex-direction: column; gap: 12px; } .stopka { padding: 8px 16px 16px; border-top: 1px solid var(--ramka); color: var(--tekst-drugi); } /* ------------------------------------------------------------------ pola, przyciski */ label { font-size: 0.85rem; color: var(--tekst-drugi); } input, select, textarea { font: inherit; color: var(--tekst); background: var(--tlo-wciecie); border: 1px solid var(--ramka-mocna); border-radius: 8px; padding: 10px; min-height: 44px; width: 100%; max-width: 100%; } textarea { font-family: var(--szeregowa); font-size: 0.85rem; min-height: 120px; resize: vertical; } select { min-width: 120px; } button { font: inherit; min-height: var(--dotyk); border-radius: 8px; border: 1px solid var(--ramka-mocna); background: var(--tlo-drugie); color: var(--tekst); padding: 10px 14px; cursor: pointer; } button:disabled { opacity: 0.5; cursor: default; } button.glowny { background: var(--ok); border-color: var(--ok); color: #ffffff; font-weight: 600; } :root[data-theme="ciemny"] button.glowny, button.glowny { color: #ffffff; } button.drugi { min-height: 40px; padding: 6px 10px; font-size: 0.9rem; } button.mocny { border-color: var(--awaria); color: var(--awaria); background: var(--awaria-tlo); font-weight: 600; } .przyciski { display: flex; flex-wrap: wrap; gap: 8px; } .formularz { display: flex; flex-direction: column; gap: 8px; } .rzad { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; } .rzad > div { flex: 1 1 140px; min-width: 120px; } .przelacznik { display: flex; align-items: center; gap: 8px; min-height: 40px; } .przelacznik input { width: 22px; min-height: 22px; flex: 0 0 auto; } /* ------------------------------------------------------------------ kafelki i pola */ /* minmax(0, 1fr), nie 1fr: kolumna 1fr nie zejdzie poniżej min-content dziecka, a długie nazwy poleceń (GetCompositeSchedule) i numery UUID rozpychały wtedy stronę w poziomie na telefonie. */ .kafelki { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } @media (min-width: 720px) { .kafelki { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } } /* Kafelek i sekcja polecenia muszą dać się zwęzić poniżej swojej treści (min-width: 0), inaczej długie słowo w środku rozpycha całą stronę. */ .kafelek, .polecenie { min-width: 0; } .kafelek { background: var(--tlo-karty); border: 1px solid var(--ramka); border-left: 4px solid var(--ramka-mocna); border-radius: var(--promien); padding: 12px; } .kafelek[data-klasa="laduje"] { border-left-color: var(--laduje); } .kafelek[data-klasa="ok"] { border-left-color: var(--ok); } .kafelek[data-klasa="uwaga"] { border-left-color: var(--uwaga); } .kafelek[data-klasa="ostrzezenie"] { border-left-color: var(--ostrzezenie); } .kafelek[data-klasa="awaria"] { border-left-color: var(--awaria); background: var(--awaria-tlo); } .kafelek-stacja { border-left-width: 6px; } dl.pola { display: grid; grid-template-columns: minmax(96px, 42%) 1fr; gap: 2px 10px; margin: 0; font-size: 0.92rem; } dl.pola dt { color: var(--tekst-drugi); font-size: 0.85rem; /* Nazwy kluczy OCPP są długie (MeterValuesSampledData): na telefonie muszą się łamać, nie nachodzić. */ overflow-wrap: anywhere; } dl.pola dd { margin: 0; overflow-wrap: anywhere; } .wartosc-duza { font-size: 1.3rem; font-weight: 700; } .szeregowa, code { font-family: var(--szeregowa); font-size: 0.85rem; overflow-wrap: anywhere; } .drobne { font-size: 0.8rem; color: var(--tekst-drugi); } .pusty { color: var(--tekst-drugi); font-style: italic; padding: 8px 0; } .nieswieze { opacity: 0.4; } /* ------------------------------------------------------------------ lampki i znaczki */ .lampka { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--ramka); background: var(--neutralna-tlo); color: var(--tekst); } .lampka .kropka { width: 11px; height: 11px; border-radius: 50%; background: var(--neutralna); flex: 0 0 auto; } .lampka[data-klasa="ok"] { background: var(--ok-tlo); border-color: var(--ok); } .lampka[data-klasa="ok"] .kropka { background: var(--ok); } .lampka[data-klasa="laduje"] { background: var(--laduje-tlo); border-color: var(--laduje); } .lampka[data-klasa="laduje"] .kropka { background: var(--laduje); } .lampka[data-klasa="uwaga"] { background: var(--uwaga-tlo); border-color: var(--uwaga); } .lampka[data-klasa="uwaga"] .kropka { background: var(--uwaga); } .lampka[data-klasa="ostrzezenie"] { background: var(--ostrzezenie-tlo); border-color: var(--ostrzezenie); } .lampka[data-klasa="ostrzezenie"] .kropka { background: var(--ostrzezenie); } .lampka[data-klasa="awaria"] { background: var(--awaria-tlo); border-color: var(--awaria); } .lampka[data-klasa="awaria"] .kropka { background: var(--awaria); } .lampki { display: flex; flex-wrap: wrap; gap: 8px; } .lampka-duza { flex: 1 1 160px; justify-content: flex-start; border-radius: var(--promien); padding: 10px 12px; font-size: 0.95rem; } .znaczek { display: inline-block; font-size: 0.75rem; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--ramka-mocna); background: var(--neutralna-tlo); color: var(--tekst-drugi); margin-right: 4px; white-space: nowrap; } .znaczek[data-rodzaj="awaria"] { background: var(--awaria-tlo); border-color: var(--awaria); color: var(--awaria); } .znaczek[data-rodzaj="ostrzezenie"] { background: var(--ostrzezenie-tlo); border-color: var(--ostrzezenie); color: var(--ostrzezenie); } .znaczek[data-rodzaj="ok"] { background: var(--ok-tlo); border-color: var(--ok); color: var(--ok); } .znaczek[data-rodzaj="plan"] { background: var(--uwaga-tlo); border-color: var(--uwaga); color: var(--uwaga); font-weight: 600; } .niezapisane { font-size: 0.8rem; padding: 4px 8px; border-radius: 999px; background: var(--ostrzezenie-tlo); border: 1px solid var(--ostrzezenie); color: var(--ostrzezenie); } /* ------------------------------------------------------------------ uwagi i odmowy */ .uwaga-tekst { font-size: 0.85rem; border-left: 3px solid var(--uwaga); background: var(--uwaga-tlo); color: var(--tekst); padding: 8px 10px; border-radius: 6px; } .uwaga-tekst[data-rodzaj="ostrzezenie"] { border-left-color: var(--ostrzezenie); background: var(--ostrzezenie-tlo); } .uwaga-tekst[data-rodzaj="neutralna"] { border-left-color: var(--ramka-mocna); background: var(--tlo-drugie); color: var(--tekst-drugi); } .odmowa { border: 1px solid var(--awaria); background: var(--awaria-tlo); border-radius: var(--promien); padding: 10px 12px; font-size: 0.9rem; } .odmowa[data-zrodlo="ladowarka"] { border-color: var(--ostrzezenie); background: var(--ostrzezenie-tlo); } .odmowa[data-zrodlo="brama"] { border-color: var(--uwaga); background: var(--uwaga-tlo); } .odmowa strong { display: block; } .wynik { border: 1px solid var(--ramka); border-radius: var(--promien); background: var(--tlo-wciecie); padding: 10px 12px; font-size: 0.9rem; } .wynik[data-zrodlo="ladowarka"] { border-color: var(--ok); } .wynik[data-zrodlo="serwer"] { border-color: var(--ostrzezenie); } .wynik[data-zrodlo="brama"] { border-color: var(--uwaga); } /* KOLOR Z TREŚCI ODPOWIEDZI, nie ze źródła — i PO regułach data-zrodlo, żeby wygrywał (ta sama waga selektora, więc decyduje kolejność). Wcześniej każda odpowiedź od ładowarki dostawała zieloną obwódkę, więc „Rejected” wyglądało jak sukces, a plan każe potwierdzać KAŻDY krok próby 2 słowem Accepted w dzienniku. */ .wynik[data-odpowiedz="Accepted"] { border-color: var(--ok); border-left-width: 4px; } .wynik[data-odpowiedz="Rejected"], .wynik[data-odpowiedz="NotSupported"], .wynik[data-odpowiedz="NotImplemented"], .wynik[data-odpowiedz="Faulted"] { border-color: var(--ostrzezenie); border-left-width: 4px; } .wynik .odpowiedz-stacji { margin: 4px 0 8px; } /* ------------------------------------------------------------------ tabele i listy */ .tabela { overflow-x: auto; border: 1px solid var(--ramka); border-radius: var(--promien); background: var(--tlo-karty); } table { border-collapse: collapse; width: 100%; font-size: 0.85rem; } th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--ramka); vertical-align: top; } th { position: sticky; top: 0; background: var(--tlo-drugie); color: var(--tekst-drugi); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; z-index: 1; } tbody tr[data-klasa="awaria"] { background: var(--awaria-tlo); } tbody tr[data-plan="1"] td { border-left: 3px solid var(--uwaga); } .przewijanie { max-height: 60vh; overflow-y: auto; } .lista-ramek { display: flex; flex-direction: column; gap: 4px; max-height: 65vh; overflow-y: auto; border: 1px solid var(--ramka); border-radius: var(--promien); padding: 6px; background: var(--tlo-karty); } /* flex-shrink: 0 jest tu OBOWIĄZKOWE. Lista jest kolumną flex z max-height i własnym przewijaniem, a domyślne flex-shrink: 1 zgniatało każdy wiersz do min-height (44 px) — wtedy trzy linie wiersza nachodziły na siebie i dziennik rozmowy był nieczytelny. */ .lista-ramek > * { flex: 0 0 auto; } .ramka-wiersz { display: grid; grid-template-columns: 1fr; gap: 2px; width: 100%; text-align: left; min-height: 44px; padding: 7px 9px; border: 1px solid var(--ramka); border-left: 4px solid var(--neutralna); border-radius: 8px; background: var(--tlo-wciecie); } .ramka-wiersz[data-kierunek="od-stacji"] { border-left-color: var(--ok); } .ramka-wiersz[data-kierunek="do-stacji"] { border-left-color: var(--uwaga); } .ramka-wiersz[data-rodzaj="polecenie"] { border-left-color: var(--ostrzezenie); border-style: dashed; } .ramka-wiersz[data-typ="4"] { background: var(--awaria-tlo); } .ramka-gora { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: 0.82rem; } .ramka-akcja { font-weight: 700; font-size: 0.92rem; } .ramka-tresc { font-family: var(--szeregowa); font-size: 0.78rem; color: var(--tekst-drugi); overflow-wrap: anywhere; /* Podgląd treści to dwie linijki: cała ramka jest pod kliknięciem, dosłownie. */ display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; max-height: 2.8em; overflow: hidden; } pre.json { font-family: var(--szeregowa); font-size: 0.8rem; background: var(--tlo-wciecie); border: 1px solid var(--ramka); border-radius: 8px; padding: 10px; margin: 0 0 8px; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 50vh; } /* ------------------------------------------------------------------ konsola poleceń */ .polecenie { background: var(--tlo-karty); border: 1px solid var(--ramka); border-radius: var(--promien); padding: 12px; display: flex; flex-direction: column; gap: 8px; } .polecenie > summary { cursor: pointer; font-weight: 600; min-height: 40px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; overflow-wrap: anywhere; /* display: flex zdejmuje trójkącik przeglądarki, więc rysujemy własny znak rozwinięcia. */ list-style: none; } .polecenie > summary::-webkit-details-marker { display: none; } .polecenie > summary::after { content: "▾ zwiń"; margin-left: auto; font-weight: 400; font-size: 0.8rem; color: var(--tekst-drugi); white-space: nowrap; } .polecenie:not([open]) > summary::after { content: "▸ rozwiń"; } .siatka-amperow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } /* 4 A stoi OSOBNO (poniżej minimum z normy), ale wygląda jak reszta przycisków prądu. */ .siatka-amperow button, button.amper-osobno { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; min-height: 62px; line-height: 1.2; } .siatka-amperow button .amper, button.amper-osobno .amper { font-size: 1.15rem; font-weight: 700; } .siatka-amperow button .pwm, button.amper-osobno .pwm { font-size: 0.72rem; color: var(--tekst-drugi); } .siatka-amperow button[data-ponizej="1"], button.amper-osobno[data-ponizej="1"] { border-color: var(--ostrzezenie); background: var(--ostrzezenie-tlo); } .siatka-amperow button[aria-pressed="true"] { border-color: var(--ok); background: var(--ok-tlo); font-weight: 700; } .karta-startu { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } /* ------------------------------------------------------------------ komunikaty i okno */ .komunikaty { position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 20; display: flex; flex-direction: column; gap: 6px; pointer-events: none; } .komunikat { border-radius: 8px; padding: 10px 12px; font-size: 0.9rem; border: 1px solid var(--ramka-mocna); background: var(--tlo-karty); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); } .komunikat[data-rodzaj="ok"] { border-color: var(--laduje); background: var(--laduje-tlo); } .komunikat[data-rodzaj="blad"] { border-color: var(--awaria); background: var(--awaria-tlo); } .komunikat[data-rodzaj="uwaga"] { border-color: var(--uwaga); background: var(--uwaga-tlo); } .okno { width: min(96vw, 760px); max-height: 88vh; border: 1px solid var(--ramka-mocna); border-radius: var(--promien); background: var(--tlo-karty); color: var(--tekst); padding: 0; } .okno::backdrop { background: rgba(0, 0, 0, 0.55); } .okno-gora { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--ramka); position: sticky; top: 0; background: var(--tlo-karty); } .okno-tresc { padding: 12px; overflow-y: auto; max-height: calc(88vh - 60px); } /* ------------------------------------------------------------------ komputer */ @media (min-width: 1000px) { .ekran { padding: 16px 24px 32px; } .dwie-kolumny { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }