/* ── тема ──────────────────────────────────────────────────────────────── :root — светлая палитра (по умолчанию) :root[data-theme="dark"] — тёмная, выбрана вручную @media dark + :not([light]) — тёмная по системной настройке переключатель в шапке пишет data-theme в и в localStorage */ :root { --bg: #f5f5f4; --panel: #ffffff; --panel-alt: #fafaf9; --border: #d9d9d6; --text: #1a1a1a; --text-dim: #6b6b68; --mono: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace; --sans: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --ok: #2f7d3c; --warn: #b58900; --err: #b3261e; --accent: #1a1a1a; --radius: 3px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #17181a; --panel: #1f2023; --panel-alt: #26282b; --border: #34363a; --text: #e7e7e5; --text-dim: #9a9a97; --ok: #5fbf6f; --warn: #e0b23a; --err: #ef5350; --accent: #e7e7e5; } } :root[data-theme="dark"] { --bg: #17181a; --panel: #1f2023; --panel-alt: #26282b; --border: #34363a; --text: #e7e7e5; --text-dim: #9a9a97; --ok: #5fbf6f; --warn: #e0b23a; --err: #ef5350; --accent: #e7e7e5; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 14px; line-height: 1.45; } a { color: inherit; } .wrap { max-width: 980px; margin: 0 auto; padding: 24px 20px 64px; } header.top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } header.top h1 { font-size: 15px; font-weight: 600; letter-spacing: 0.02em; margin: 0; text-transform: uppercase; } header.top .right { display: flex; align-items: center; gap: 14px; } header.top .sub { color: var(--text-dim); font-size: 12px; font-family: var(--mono); } form.logout { margin: 0; } .btn-plain { background: none; border: none; color: var(--text-dim); font-size: 12px; cursor: pointer; padding: 0; text-decoration: underline; } .btn-plain:hover { color: var(--text); } .theme-toggle { background: none; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-dim); font-size: 12px; cursor: pointer; padding: 3px 9px; font-family: var(--mono); line-height: 1.4; } .theme-toggle:hover { color: var(--text); border-color: var(--text-dim); } section.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 20px; } section.panel > .panel-head { padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); display: flex; justify-content: space-between; align-items: center; } section.panel > .panel-body { padding: 14px; } /* relay */ .relay-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .relay-opt { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; cursor: pointer; background: var(--bg); font-family: var(--mono); font-size: 13px; color: var(--text); flex: 1; min-width: 220px; text-align: left; } .relay-opt:hover { border-color: var(--text-dim); } .relay-opt.active { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--panel)); } .relay-opt .name { font-weight: 700; } .relay-opt .desc { display: block; color: var(--text-dim); font-size: 11px; margin-top: 3px; } .relay-opt:disabled { opacity: 0.5; cursor: default; } .relay-meta { color: var(--text-dim); font-size: 12px; margin-top: 8px; font-family: var(--mono); } /* table */ table { width: 100%; border-collapse: collapse; font-size: 13px; } th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; } th { color: var(--text-dim); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; } td.mono, th.mono { font-family: var(--mono); } tr.disabled td { color: var(--text-dim); } tr:last-child td { border-bottom: none; } .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .dot.online { background: var(--ok); } .dot.stale { background: var(--warn); } .dot.offline { background: var(--text-dim); } .count-badge { font-family: var(--mono); font-size: 11px; color: var(--text-dim); } /* ── whitelist: список ─────────────────────────────────────────────────── */ .wl-group { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; } .wl-group-head { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--panel-alt); border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: 12px; } .wl-group-head .cat { font-weight: 700; } .wl-group-head .cnt { color: var(--text-dim); } .wl-group-head .spacer { flex: 1; } .wl-items { padding: 6px 10px; display: flex; flex-wrap: wrap; gap: 6px; } .wl-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 999px; padding: 3px 6px 3px 10px; font-family: var(--mono); font-size: 12px; background: var(--bg); } .wl-chip.new { border-style: dashed; } .wl-chip .rm { border: none; background: none; cursor: pointer; color: var(--text-dim); font-size: 14px; line-height: 1; padding: 0 2px; } .wl-chip .rm:hover { color: var(--err); } .wl-additem { border: 1px dashed var(--border); border-radius: 999px; padding: 2px 8px; font-family: var(--mono); font-size: 12px; background: transparent; color: var(--text); min-width: 120px; } .wl-additem::placeholder { color: var(--text-dim); } .wl-iprow { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; } .wl-iprow input { border: 1px solid var(--border); border-radius: var(--radius); padding: 5px 8px; font-family: var(--mono); font-size: 12px; background: var(--bg); color: var(--text); } .wl-iprow input.ip { width: 150px; } .wl-iprow input.note { flex: 1; min-width: 180px; } .wl-del-cat { border: none; background: none; cursor: pointer; color: var(--text-dim); font-size: 12px; text-decoration: underline; } .wl-del-cat:hover { color: var(--err); } /* whitelist: сырой JSON (fallback) */ textarea.json-editor { width: 100%; min-height: 320px; font-family: var(--mono); font-size: 12px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; resize: vertical; } .wl-tabs { display: flex; gap: 4px; margin-bottom: 12px; } .wl-tab { border: 1px solid var(--border); background: var(--bg); color: var(--text-dim); font-size: 12px; padding: 4px 12px; cursor: pointer; border-radius: var(--radius); } .wl-tab.active { color: var(--text); border-color: var(--text-dim); font-weight: 600; } .actions { display: flex; gap: 8px; margin-top: 12px; align-items: center; flex-wrap: wrap; } button.btn { background: var(--text); color: var(--bg); border: none; border-radius: var(--radius); padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; } button.btn:hover { opacity: 0.85; } button.btn:disabled { opacity: 0.5; cursor: default; } button.btn.secondary { background: transparent; color: var(--text); border: 1px solid var(--border); } button.btn.small { padding: 4px 10px; font-size: 12px; font-weight: 600; } .msg { font-size: 12px; margin-left: 4px; } .msg.ok { color: var(--ok); } .msg.err { color: var(--err); } .wl-dirty { font-size: 12px; color: var(--warn); font-weight: 600; } button.btn.attn { box-shadow: 0 0 0 2px var(--warn); } .sub { color: var(--text-dim); } code { font-family: var(--mono); background: var(--bg); border: 1px solid var(--border); border-radius: 2px; padding: 0 3px; } /* login */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; } .login-box { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; width: 280px; } .login-box h1 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); margin: 0 0 18px; font-weight: 600; } .login-box input[type="password"] { width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); font-family: var(--mono); font-size: 13px; margin-bottom: 12px; } .login-box button { width: 100%; } .login-error { color: var(--err); font-size: 12px; margin-bottom: 10px; }