/* fwcp — sysadmin theme (light + dark) ──────────────────────────────────────────────────────────── Theme strategy: - All colour values come from CSS variables defined in :root (light) and [data-theme="dark"]. follow-OS works via prefers-color-scheme media query. - User toggle stores choice in localStorage and sets data-theme on , which always wins over the OS default. - Layout uses CSS Grid with auto-fit + minmax for graceful reflow. - Touch targets ≥ 40px on small viewports. */ /* ── Theme: LIGHT (default) ───────────────────────────────── */ :root { --bg: #ffffff; --bg-1: #f7f7f6; --bg-2: #ededeb; --line: #d8d6d2; --line-2: #c0bdb8; --fg: #1a1a18; --fg-dim: #6b6862; --amber: #b87800; --amber-soft: rgba(184, 120, 0, .12); --red: #c83232; --red-bg: #fbeded; --red-bd: #f0c4c4; --green: #1c7a3e; --green-bg:#e8f5ec; --green-bd:#bce0c5; --orange: #c46518; --orange-bg:#fbeedd; --orange-bd:#eccda0; --blue: #0b76b3; --warn-bg: #fff7d8; --warn-bd: #e8d68a; --warn-fg: #8a6b00; --shadow: 0 1px 0 rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.05); --bg-stripe: rgba(0,0,0,0.018); --backdrop: rgba(20,20,20,.45); } /* ── Theme: DARK ──────────────────────────────────────────── */ [data-theme="dark"] { --bg: #0a0a0a; --bg-1: #111111; --bg-2: #161616; --line: #2a2a2a; --line-2: #3a3a3a; --fg: #e8e6e3; --fg-dim: #8a8680; --amber: #ffb000; --amber-soft: rgba(255, 176, 0, .15); --red: #ff5c5c; --red-bg: #1a0d0d; --red-bd: #5a1a1a; --green: #5cff8e; --green-bg:#0e1a13; --green-bd:#1d3a26; --orange: #ffaa44; --orange-bg:#1a1408; --orange-bd:#5a3a1a; --blue: #6bcfff; --warn-bg: #1f1808; --warn-bd: #5a4a1a; --warn-fg: #ffd066; --shadow: none; --bg-stripe: rgba(255,255,255,0.018); --backdrop: rgba(0,0,0,.6); } /* Follow OS preference when no explicit data-theme is set */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #0a0a0a; --bg-1: #111111; --bg-2: #161616; --line: #2a2a2a; --line-2: #3a3a3a; --fg: #e8e6e3; --fg-dim: #8a8680; --amber: #ffb000; --amber-soft: rgba(255, 176, 0, .15); --red: #ff5c5c; --red-bg: #1a0d0d; --red-bd: #5a1a1a; --green: #5cff8e; --green-bg:#0e1a13; --green-bd:#1d3a26; --orange: #ffaa44; --orange-bg:#1a1408; --orange-bd:#5a3a1a; --blue: #6bcfff; --warn-bg: #1f1808; --warn-bd: #5a4a1a; --warn-fg: #ffd066; --shadow: none; --bg-stripe: rgba(255,255,255,0.018); --backdrop: rgba(0,0,0,.6); } } /* ── Base ─────────────────────────────────────────────────── */ * { box-sizing: border-box; } [x-cloak] { display: none !important; } html, body { margin: 0; padding: 0; min-height: 100%; background: var(--bg); color: var(--fg); font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } body { background-image: repeating-linear-gradient(0deg, transparent 0 39px, var(--bg-stripe) 39px 40px); } button, input, select, textarea { font: inherit; color: inherit; } .muted { color: var(--fg-dim); } em.muted { font-style: normal; opacity: .85; font-size: .85em; } code { font-family: inherit; background: var(--bg-2); padding: 0 .3em; border: 1px solid var(--line); border-radius: 3px; } /* Form controls */ input, select, textarea { background: var(--bg); color: var(--fg); border: 1px solid var(--line); padding: .6rem .7rem; border-radius: 4px; width: 100%; min-height: 40px; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--amber); outline-offset: -1px; border-color: var(--amber); } button { background: var(--amber); color: #fff; border: 1px solid var(--amber); padding: .6rem 1rem; cursor: pointer; font-weight: 700; letter-spacing: .04em; border-radius: 4px; min-height: 40px; white-space: nowrap; } /* In dark mode, primary button text is dark for contrast against amber */ [data-theme="dark"] button { color: #1a1100; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) button { color: #1a1100; } } button:hover:not(:disabled) { filter: brightness(1.05); } button:active:not(:disabled) { transform: translateY(1px); } button:disabled { opacity: .5; cursor: not-allowed; } button.ghost { background: transparent; color: var(--fg); border: 1px solid var(--line); } [data-theme="dark"] button.ghost { color: var(--fg); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) button.ghost { color: var(--fg); } } button.ghost:hover:not(:disabled) { border-color: var(--amber); color: var(--amber); background: var(--amber-soft); } button.danger { background: transparent; border: 1px solid var(--red-bd); color: var(--red); } [data-theme="dark"] button.danger { color: var(--red); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) button.danger { color: var(--red); } } button.danger:hover:not(:disabled) { background: var(--red-bg); } button.mini { padding: .35rem .65rem; font-size: 12px; min-height: 32px; } label { display: block; margin: .85rem 0; } label > span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--fg-dim); margin-bottom: .35rem; font-weight: 600; } .error { color: var(--red); min-height: 1em; font-size: 13px; margin: .6rem 0 0; word-break: break-word; } .success { color: var(--green); font-size: 13px; margin: .6rem 0 0; font-weight: 600; } /* Narrow-viewport label hiding (used in topbar) */ .hide-narrow { display: inline; } .show-narrow { display: none; } @media (max-width: 540px) { .hide-narrow { display: none; } .show-narrow { display: inline; } } .pw-nag { margin: 0; border-radius: 0; border-left: 0; border-right: 0; border-top: 0; } /* ── Login ────────────────────────────────────────────────── */ .login-wrap { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 1rem; } .login-card { width: 360px; max-width: 100%; background: var(--bg-1); border: 1px solid var(--line); padding: 2rem 1.6rem; position: relative; box-shadow: var(--shadow); border-radius: 6px; } .login-card::before { content: ""; position: absolute; inset: -1px; border-left: 3px solid var(--amber); pointer-events: none; border-radius: 6px 0 0 6px; } .login-mark { font-size: 22px; font-weight: 700; letter-spacing: .04em; color: var(--amber); } .login-sub { margin: .2rem 0 1.4rem; color: var(--fg-dim); font-size: 12px; letter-spacing: .15em; text-transform: uppercase; } .login-card form button { width: 100%; margin-top: .4rem; } /* ── Topbar ───────────────────────────────────────────────── */ .topbar { display: flex; align-items: center; gap: 1rem; padding: .8rem 1.2rem; border-bottom: 1px solid var(--line); background: var(--bg-1); position: sticky; top: 0; z-index: 5; flex-wrap: wrap; } .brand { color: var(--amber); letter-spacing: .04em; white-space: nowrap; font-weight: 700; } .brand strong { color: var(--fg); margin-left: .15em; } .vitals { display: flex; gap: 1rem; color: var(--fg-dim); font-size: 13px; flex: 1; flex-wrap: wrap; min-width: 0; } .vitals > * { white-space: nowrap; } .vitals b { color: var(--amber); font-weight: 600; min-width: 2.4em; display: inline-block; text-align: right; } .topbar-actions { display: flex; gap: .4rem; align-items: center; position: relative; } .topbar-menu { display: flex; gap: .4rem; align-items: center; } .topbar-actions button { background: transparent; color: var(--fg-dim); border: 1px solid var(--line); padding: .35rem .7rem; min-height: 32px; font-weight: 500; } .topbar-actions button:hover { color: var(--amber); border-color: var(--amber); } .theme-toggle .icon { font-size: 14px; } /* hamburger menu — shown on mobile only */ .menu-toggle { display: none; } .menu-ico { display: none; } @media (max-width: 640px) { .topbar-actions { margin-left: auto; } .menu-toggle { display: inline-flex; align-items: center; gap: .45rem; } .menu-toggle-ico { font-size: 15px; } .topbar-menu { display: none; position: absolute; top: calc(100% + .55rem); right: 0; z-index: 30; flex-direction: column; align-items: stretch; gap: .3rem; min-width: 220px; padding: .55rem; background: var(--bg-1); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); } .topbar-menu.open { display: flex; } .topbar-menu > * { width: 100%; } .topbar-menu button, .topbar-menu .ghost-link { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 44px; padding: .5rem .7rem; justify-content: flex-start; font-size: 14px; } .topbar-menu .menu-ico { display: inline-flex; justify-content: center; width: 1.3em; font-size: 14px; color: var(--amber); } } /* ── Grid layout — responsive ─────────────────────────────── */ .grid { display: grid; /* auto-fit means: as many ~480px columns as fit, otherwise stack */ grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); } .grid > .panel { background: var(--bg); padding: 1.2rem; min-width: 0; overflow: hidden; } /* .span-2 only meaningful when there are 2 columns; auto-fit handles the rest */ @media (min-width: 1024px) { .grid { grid-template-columns: repeat(2, 1fr); } .span-2 { grid-column: span 2; } } @media (max-width: 600px) { .topbar { padding: .7rem .8rem; gap: .6rem; } .vitals { font-size: 12px; gap: .7rem; } .grid > .panel { padding: .9rem; } } .panel-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; gap: .8rem; flex-wrap: wrap; } .panel-h h2 { margin: 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-dim); font-weight: 600; flex: 1; min-width: 0; } .panel-h::before { content: ""; flex: 0 0 8px; height: 8px; background: var(--amber); margin-right: .5rem; border-radius: 1px; } /* ── List rows ────────────────────────────────────────────── */ .list { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; } .row { background: var(--bg-1); display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center; padding: .75rem .9rem; min-height: 48px; } .row.sub { padding-left: 2rem; position: relative; } .row.sub::before { content: "└"; color: var(--fg-dim); position: absolute; left: .9rem; top: .9rem; } .row .name { font-weight: 600; word-break: break-word; min-width: 0; } .row .meta { color: var(--fg-dim); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; word-break: break-word; } .row.muted { color: var(--fg-dim); text-align: center; padding: 1.6rem 1rem; grid-template-columns: 1fr; justify-items: center; } .row .tags { display: flex; gap: .4rem; flex-wrap: wrap; } .tag { display: inline-block; padding: .15rem .55rem; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; border: 1px solid var(--line); border-radius: 3px; font-weight: 600; } .tag.ssl { color: var(--green); border-color: var(--green-bd); background: var(--green-bg); } .tag.nossl { color: var(--fg-dim); } .row button { min-height: 32px; } /* Stack rows on narrow viewports */ @media (max-width: 560px) { .row { grid-template-columns: 1fr; row-gap: .45rem; } .row > * { grid-column: 1; } .row.sub { padding-left: 1.4rem; } .row.sub::before { left: .4rem; top: .8rem; } } /* ── Modal ────────────────────────────────────────────────── */ .modal-backdrop { position: fixed; inset: 0; background: var(--backdrop); backdrop-filter: blur(2px); display: grid; place-items: center; z-index: 100; padding: 1rem; overflow-y: auto; } .modal { background: var(--bg-1); color: var(--fg); border: 1px solid var(--amber); padding: 1.4rem; width: 480px; max-width: 100%; max-height: calc(100dvh - 2rem); overflow: auto; border-radius: 6px; box-shadow: var(--shadow); } .modal h3 { margin: 0 0 1rem; color: var(--amber); font-size: 13px; letter-spacing: .15em; text-transform: uppercase; font-weight: 700; } .modal menu { display: flex; gap: .6rem; justify-content: flex-end; padding: 0; margin: 1.2rem 0 0; flex-wrap: wrap; } @media (max-width: 640px) { /* modals fill the viewport width on mobile (override inline px widths) */ .modal-backdrop { padding: .7rem; } .modal { width: 100% !important; max-width: 100% !important; padding: 1.1rem; } .modal menu { justify-content: stretch; } .modal menu button { flex: 1; } } /* ── Charts ───────────────────────────────────────────────── */ canvas { max-width: 100% !important; height: auto !important; } #iface-select { width: auto; min-width: 100px; } /* chart row — two graphs side by side, each 49% wide */ .chart-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2%; background: var(--bg); } .chart-row > .panel.chart-panel { flex: 0 0 49%; width: 49%; } @media (max-width: 700px) { .chart-row > .panel.chart-panel { flex-basis: 100%; width: 100%; } } /* chart panels — fixed-height box */ .panel.chart-panel { background: var(--bg); min-width: 0; height: 500px; max-height: 500px; padding: .4rem .9rem; overflow: hidden; } .chart-panel .panel-h { margin-bottom: .2rem; } .chart-panel canvas { display: block; width: 100% !important; height: 456px !important; max-height: 456px !important; } /* ── HTMX swap effect ─────────────────────────────────────── */ .htmx-swapping { opacity: .5; transition: opacity .15s; } .htmx-request { cursor: progress; } /* ── Firewall ─────────────────────────────────────────────── */ .fw-state { margin-bottom: .8rem; } .banner { padding: .6rem .85rem; border: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 12px; border-radius: 4px; } .banner.muted { color: var(--fg-dim); background: var(--bg-1); } .banner-warn { border-color: var(--warn-bd); background: var(--warn-bg); color: var(--warn-fg); } .banner-actions { display: flex; gap: .4rem; flex-wrap: wrap; } .banner-actions button { padding: .3rem .8rem; font-size: 11px; min-height: 30px; } .fw-list .fw-row { grid-template-columns: auto 1fr auto; } .fw-pos { color: var(--fg-dim); font-size: 11px; letter-spacing: .08em; min-width: 2.5em; font-weight: 600; } .fw-action { font-weight: 700; } .fw-accept { color: var(--green); border-color: var(--green-bd); background: var(--green-bg); } .fw-drop { color: var(--red); border-color: var(--red-bd); background: var(--red-bg); } .fw-reject { color: var(--orange); border-color: var(--orange-bd); background: var(--orange-bg); } .fw-buttons { display: flex; gap: .3rem; flex-wrap: wrap; } .fw-footer { display: flex; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; } .fw-footer button { flex: 0 1 auto; } @media (max-width: 560px) { .fw-list .fw-row { grid-template-columns: auto 1fr; } .fw-list .fw-row .fw-buttons { grid-column: 1 / -1; justify-content: flex-end; } .fw-footer button { flex: 1 1 auto; min-width: 0; } } .sensitive-hint { font-size: 11px; color: var(--fg-dim); margin: .3rem 0 .8rem; padding: .5rem .7rem; background: var(--bg-2); border-left: 3px solid var(--amber); border-radius: 0 3px 3px 0; } .sensitive-hint code { background: transparent; border: 0; padding: 0; color: var(--amber); } /* ── PM2 + Systemd ───────────────────────────────────────── */ .pm2-list .pm2-row, .sd-list .sd-row { grid-template-columns: auto 1fr auto; } .pm2-id { font-size: 11px; letter-spacing: .08em; min-width: 2.6em; font-weight: 600; } .pm2-status { font-weight: 700; } .pm2-online { color: var(--green); border-color: var(--green-bd); background: var(--green-bg); } .pm2-errored { color: var(--red); border-color: var(--red-bd); background: var(--red-bg); } .pm2-launching { color: var(--orange); border-color: var(--orange-bd); background: var(--orange-bg); } @media (max-width: 560px) { .pm2-list .pm2-row, .sd-list .sd-row { grid-template-columns: 1fr; } .pm2-list .fw-buttons, .sd-list .fw-buttons { justify-content: flex-end; } } /* ── Search input in panel headers ───────────────────────── */ .search { width: auto; min-width: 0; max-width: 180px; min-height: 30px; padding: .3rem .55rem; font-size: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; } .search:focus { outline: 1px solid var(--amber); outline-offset: -1px; border-color: var(--amber); } @media (max-width: 540px) { .search { max-width: none; flex: 1 1 100%; order: 99; } } /* ── Topbar link button (looks like a button but is an anchor) ── */ .ghost-link { display: inline-flex; align-items: center; background: transparent; color: var(--fg-dim); border: 1px solid var(--line); padding: .35rem .7rem; min-height: 32px; border-radius: 4px; text-decoration: none; font-size: 14px; font-weight: 500; letter-spacing: .04em; } .ghost-link:hover { color: var(--amber); border-color: var(--amber); } /* ── Drag handle on fw rows ──────────────────────────────── */ .fw-list .fw-row { grid-template-columns: auto auto 1fr auto; } .handle { cursor: grab; color: var(--fg-dim); font-size: 14px; user-select: none; padding: 0 .2rem; } .handle:active { cursor: grabbing; } .fw-ghost { opacity: .4; background: var(--bg-2); } @media (max-width: 560px) { /* On mobile, drag handle is less useful; use ▲▼ buttons instead. Still show. */ .fw-list .fw-row { grid-template-columns: auto 1fr; } .fw-list .fw-row .handle { display: inline-block; grid-column: 1; } .fw-list .fw-row .fw-pos { grid-column: 2; justify-self: end; } .fw-list .fw-row > div:nth-child(3) { grid-column: 1 / -1; } .fw-list .fw-row .fw-buttons { grid-column: 1 / -1; justify-content: flex-end; } } /* ── Chart time-range selector ───────────────────────────── */ .chart-range { display: flex; gap: .2rem; flex-wrap: wrap; } .chart-range button { padding: .2rem .55rem; font-size: 11px; min-height: 26px; } .chart-range button.active { background: var(--amber); color: #fff; border-color: var(--amber); } [data-theme="dark"] .chart-range button.active { color: #1a1100; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .chart-range button.active { color: #1a1100; } } /* ── Telegram events grid (in modal) ─────────────────────── */ .events-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .3rem .8rem; padding: .5rem .7rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; margin-top: .3rem; } /* ── Log content (in domain logs modal) ──────────────────── */ .logs-modal .log-content { background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: .7rem .9rem; margin: 0; font-size: 11px; line-height: 1.55; max-height: 60vh; overflow: auto; white-space: pre-wrap; word-break: break-all; } /* ── Bandwidth: inline meta + history table ──────────────── */ .row .meta.bw { font-variant-numeric: tabular-nums; } .bw-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; } .bw-table th, .bw-table td { text-align: left; padding: .35rem .6rem; border-bottom: 1px solid var(--line); } .bw-table th { color: var(--fg-dim); font-weight: 600; } .bw-table td:not(:first-child), .bw-table th:not(:first-child) { text-align: right; } /* ── Audit log list ──────────────────────────────────────── */ .audit-list { display: flex; flex-direction: column; font-size: 11px; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; max-height: 320px; overflow-y: auto; } .audit-row { display: grid; grid-template-columns: auto auto 1fr auto auto auto; gap: .6rem; padding: .4rem .7rem; border-bottom: 1px solid var(--line); align-items: center; } .audit-row:last-child { border-bottom: 0; } .audit-row:nth-child(odd) { background: var(--bg-1); } .audit-ts { color: var(--fg-dim); white-space: nowrap; font-variant-numeric: tabular-nums; } .audit-method { font-weight: 600; font-size: 10px; letter-spacing: .05em; color: var(--fg-dim); min-width: 3em; } .audit-action { font-weight: 600; color: var(--amber); } .audit-target { color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .audit-ip { color: var(--fg-dim); font-variant-numeric: tabular-nums; } .audit-status { font-weight: 700; font-variant-numeric: tabular-nums; } .audit-ok .audit-status { color: var(--green); } .audit-warn .audit-status { color: var(--orange); } .audit-err .audit-status { color: var(--red); } @media (max-width: 560px) { .audit-row { grid-template-columns: 1fr auto; row-gap: .15rem; } .audit-ts { grid-column: 1 / -1; font-size: 10px; } .audit-action { grid-column: 1; } .audit-status { grid-column: 2; } .audit-target, .audit-method, .audit-ip { grid-column: 1 / -1; } } /* ── Service health panel ────────────────────────────────── */ .health-list .health-row { grid-template-columns: 1fr; }