/* ===================================================================== Bramka SMS - panel administracyjny Czysty CSS, bez zewnetrznych zaleznosci. Motyw jasny/ciemny: prefers-color-scheme + reczne nadpisanie przez data-theme na . ================================================================== */ /* ---------------------------- tokeny ------------------------------ */ :root { color-scheme: light; --surface-0: #f4f4f1; /* tlo strony */ --surface-1: #fcfcfb; /* karty, tabele */ --surface-2: #f0efec; /* naglowki, hover */ --border: #e0dfd9; --border-strong: #cbcac2; --text-1: #0b0b0b; --text-2: #52514e; --text-3: #85837c; --accent: #2a78d6; --accent-ink: #ffffff; --accent-soft: #e7f0fc; /* paleta statusow (stala, nietematyzowana) */ --good: #0ca30c; --warning: #fab219; --serious: #ec835a; --critical: #d03b3b; /* 'unknown' - wynik nierozstrzygniety. Celowo pomaranczowy: ani zielony (nie wiemy, czy sie udalo), ani czerwony (to nie jest zwykly blad). */ --unknown: #d2690a; --good-soft: #e4f5e4; --warning-soft: #fdf1d6; --critical-soft: #fae4e4; --unknown-soft: #fceadb; --radius: 10px; --radius-sm: 6px; --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .04); --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; } /* ciemny z ustawien systemu (ustepuje recznemu przelacznikowi) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --surface-0: #121211; --surface-1: #1a1a19; --surface-2: #242422; --border: #34342f; --border-strong: #4a4a43; --text-1: #ffffff; --text-2: #c3c2b7; --text-3: #908f85; --accent: #3987e5; --accent-ink: #ffffff; --accent-soft: #17304d; --good-soft: #14301a; --warning-soft: #3a2f11; --critical-soft: #3a1c1c; --unknown: #ff9d45; --unknown-soft: #3c2612; --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .35); } } /* ciemny wymuszony przelacznikiem */ :root[data-theme="dark"] { color-scheme: dark; --surface-0: #121211; --surface-1: #1a1a19; --surface-2: #242422; --border: #34342f; --border-strong: #4a4a43; --text-1: #ffffff; --text-2: #c3c2b7; --text-3: #908f85; --accent: #3987e5; --accent-ink: #ffffff; --accent-soft: #17304d; --good-soft: #14301a; --warning-soft: #3a2f11; --critical-soft: #3a1c1c; --unknown: #ff9d45; --unknown-soft: #3c2612; --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .35); } /* ---------------------------- podstawy ---------------------------- */ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--surface-0); color: var(--text-1); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-text-size-adjust: 100%; } h1, h2, h3 { margin: 0; font-weight: 650; line-height: 1.25; } h1 { font-size: 1.4rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1rem; } [hidden] { display: none !important; } .muted { color: var(--text-2); } .small { font-size: .82rem; } .mono { font-family: var(--mono); } .num { text-align: right; font-variant-numeric: tabular-nums; } a { color: var(--accent); } /* ---------------------------- formanty ---------------------------- */ .input, .field input, .field select, .field textarea, select.input { width: 100%; padding: .5rem .6rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-1); color: var(--text-1); font: inherit; } .input:focus-visible, .field input:focus-visible, select.input:focus-visible, .btn:focus-visible, .tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* Znacznik tempa w tabeli routerow - ma sie roznic od licznikow obok, bo to ustawienie, a nie zmierzona wartosc. */ .badge-tempo { color: var(--accent); white-space: nowrap; } /* ------------------- zwijane objasnienia ("i") ---------------------- */ /* Opisy sa potrzebne raz - przy poznawaniu panelu - a potem tylko zabieraja miejsce nad tabelami. Natywne
: zero JavaScriptu, dziala z klawiatury i z czytnikiem ekranu, a przegladarka sama pamieta stan w obrebie strony. */ .info { margin: .6rem 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-1); font-size: .88rem; } .info > summary { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; color: var(--text-2); cursor: pointer; list-style: none; /* chowamy domyslny trojkat... */ user-select: none; } .info > summary::-webkit-details-marker { display: none; } /* ...takze w WebKit */ .info > summary:hover { color: var(--text-1); background: var(--surface-2); } .info > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* kolko z litera "i" - jedyny staly element belki */ .info-i { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: .75rem; font-weight: 700; font-style: italic; line-height: 1; } /* strzalka po prawej - obraca sie po rozwinieciu */ .info > summary::after { content: "\25BE"; margin-left: auto; font-size: .7rem; color: var(--text-3); transition: transform .15s ease; } .info[open] > summary::after { transform: rotate(180deg); } .info[open] > summary { border-bottom: 1px solid var(--border); } .info-body { padding: .6rem .7rem; color: var(--text-2); line-height: 1.55; } .info-body p { margin: 0 0 .5rem; } .info-body p:last-child { margin-bottom: 0; } .info-body code { font-family: var(--mono); font-size: .85em; } /* Warianty dla objasnien, ktore niosa ostrzezenie - belka zachowuje kolor znaczenia, ale tresc nadal jest schowana. */ .info-warn { border-color: var(--warning); background: var(--warning-soft); } .info-warn > summary { color: var(--text-1); } .info-warn .info-i { background: var(--warning); color: #000; } .info-unknown { border-color: var(--unknown); background: var(--unknown-soft); } .info-unknown > summary { color: var(--text-1); } .info-unknown .info-i { background: var(--unknown); color: #000; } /* -------------------------- pasek filtrow --------------------------- */ /* Pola zawijaja sie do kolejnego wiersza zamiast rozpychac panel - przy czterech filtrach na telefonie inaczej znika przycisk "Filtruj". */ .filters { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin: .6rem 0; padding: .7rem .8rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-1); } .filter { display: flex; flex-direction: column; gap: .25rem; flex: 1 1 10rem; } .filter > span { font-size: .8rem; color: var(--text-2); } .filter .input { width: 100%; } .filter-actions { flex: 0 0 auto; flex-direction: row; gap: .4rem; align-self: flex-end; } /* ------------------ grupa pol w formularzu (tempo) ------------------ */ /* Tempo to dwie liczby czytane razem ("10 na 60 s"), wiec musza stac obok siebie i byc wizualnie oddzielone od reszty formularza - inaczej wygladaja jak dwa niezwiazane ustawienia. */ .fieldset { margin: .8rem 0; padding: .7rem .8rem .4rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); } .fieldset legend { padding: 0 .35rem; font-size: .85rem; color: var(--text-2); } .fieldset .field { margin-bottom: .5rem; } .pair { display: flex; gap: .7rem; flex-wrap: wrap; } .pair > .field { flex: 1 1 8rem; margin-bottom: .5rem; } /* ------------------- edytor profilu routera (JSON) ------------------ */ /* Profil wpisuje sie recznie, wiec pole musi zachowywac wciecia i nie zawijac agresywnie - stad monospace, tabulacja 2 i pionowa zmiana rozmiaru. */ .code-area { width: 100%; font-family: var(--mono); font-size: .85rem; line-height: 1.5; tab-size: 2; resize: vertical; min-height: 12rem; white-space: pre; overflow-x: auto; } /* Profil WBUDOWANY: pole jest readOnly (tresc ma sie dac zaznaczyc i skopiowac), ale musi WYGLADAC na zablokowane - inaczej administrator pisze w nim zmiany, ktore i tak nie maja gdzie trafic. */ .code-area.is-locked { background: var(--surface-2); color: var(--text-2); border-style: dashed; cursor: not-allowed; } /* to samo dla zablokowanych pol tekstowych okna profilu */ .field input:disabled, .field textarea:disabled { background: var(--surface-2); color: var(--text-3); cursor: not-allowed; } select.input { width: auto; min-width: 9rem; } /* lista wyboru wewnatrz formularza (np. router konta) ma byc pelnej szerokosci - ta regula musi stac PO 'select.input', bo obie maja te sama specyficznosc */ .field select.input { width: 100%; } .input-search { width: min(15rem, 45vw); } .field { display: block; margin-bottom: .8rem; } .field > span { display: block; margin-bottom: .25rem; font-size: .85rem; color: var(--text-2); } .field em { font-style: normal; } .check { display: flex; align-items: center; gap: .5rem; margin: .45rem 0; font-size: .9rem; } .check input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); flex: 0 0 auto; } .check em { font-style: normal; color: var(--text-2); } /* pole zablokowane swiadomie (np. wylaczenie routera domyslnego) - musi wygladac na zablokowane, inaczej admin klika i nie rozumie, czemu nic sie nie dzieje */ .check input:disabled { opacity: .5; } .check input:disabled ~ span { color: var(--text-3); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .5rem .85rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-1); color: var(--text-1); font: inherit; font-size: .9rem; cursor: pointer; white-space: nowrap; } .btn:hover:not(:disabled) { background: var(--surface-2); } .btn:disabled { opacity: .55; cursor: not-allowed; } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn-primary:hover:not(:disabled) { filter: brightness(1.08); background: var(--accent); } .btn-danger { color: var(--critical); border-color: var(--border-strong); } .btn-danger:hover:not(:disabled) { background: var(--critical-soft); } .btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); } .btn-ghost:hover { background: var(--surface-2); color: var(--text-1); } /* Link wygladajacy jak przycisk (np. "Dokumentacja API" w gornym pasku). Reguly .btn pisane byly pod