:root { --bg: #f8fafc; --surface: #ffffff; --border: #e2e8f0; --text: #1e293b; --text-muted: #64748b; --primary: #2563eb; --primary-hover: #1d4ed8; --primary-light: #eff6ff; --success: #16a34a; --success-bg: #dcfce7; --danger: #dc2626; --danger-bg: #fee2e2; --warning: #d97706; --warning-bg: #fef3c7; --info: #7c3aed; --info-bg: #ede9fe; --gray-bg: #f1f5f9; } /* Dark mode — toggled by JS setting data-theme="dark" on (see theme-toggle script in base.html/admin_base.html), persisted in localStorage. Every color in this file is a var() reference, so this block is the only place dark mode needs to be defined. "Cobalt" palette -- these are the EXACT values from the StackLab reference's own html.theme-cobalt block (static/css/claude-themes.css on that install), not a guessed approximation: --c-bg/--c-panel/ --c-line/--c-ink/--c-muted/--c-accent/--c-accent-strong mapped 1:1 onto this file's own --bg/--surface/--border/--text/--text-muted/ --primary/--primary-hover. */ html[data-theme="dark"] { --bg: #0b1120; --surface: #0f172a; --border: #1c2938; --text: #e2e8f0; --text-muted: #94a3b8; --primary: #3b82f6; --primary-hover: #60a5fa; --primary-light: #13233f; --success: #4ade80; --success-bg: #14532d; --danger: #f87171; --danger-bg: #7f1d1d; --warning: #fbbf24; --warning-bg: #78350f; --info: #a78bfa; --info-bg: #3730a3; --gray-bg: #111827; } * { box-sizing: border-box; } /* html/body never scroll natively -- the browser's own scrollbar would otherwise show at the page's outer edge alongside this app's own reading-progress rail (style.css's #reading-progress), which looked like two competing scroll indicators fighting over the same edge. Reference: the StackLab wiki (tools.stacklab.vn) uses this exact pattern -- html/body overflow:hidden, .layout fixed to viewport height, .sidebar/.content scroll independently inside it with their own native scrollbar hidden (further down this file) -- so the reading-progress rail ends up the ONLY visible scroll indicator on the page, not fighting a second one. */ html, body { height: 100%; } body { font-family: -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); margin: 0; overflow: hidden; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } /* Top navbar */ .topbar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 0.75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; /* Explicit stacking (not just relying on DOM order) so #sparkle-canvas (position:fixed, z-index:0) can never end up painting OVER real content regardless of what else on the page might establish its own stacking context -- same belt-and-suspenders approach the StackLab reference uses for its own #nightfx-canvas. */ position: relative; z-index: 1; } .topbar .brand { font-size: 1.1rem; font-weight: 700; color: var(--primary); display: flex; align-items: center; gap: 0.75rem; } .topbar .brand a { color: var(--primary); } .topbar .user { color: var(--text-muted); font-size: 0.9rem; display: flex; align-items: center; } .topbar .user a { margin-left: 1rem; } /* Dark mode toggle */ .theme-toggle { background: none; border: 1px solid var(--border); border-radius: 6px; width: 2rem; height: 2rem; font-size: 1rem; line-height: 1; cursor: pointer; margin-left: 1rem; color: var(--text); } .theme-toggle:hover { background: var(--gray-bg); } /* Mobile hamburger — hidden on desktop, shown below the .layout breakpoint */ .menu-toggle { display: none; background: none; border: none; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--text); padding: 0.25rem 0.5rem 0.25rem 0; } .sidebar-backdrop { display: none; } /* Layout: sidebar + content height (not min-height) + overflow:hidden -- .layout itself is pinned to exactly the viewport height below the topbar and never grows past it. .sidebar/.content below are the ones that actually scroll, each independently, when their own content is taller than that. */ .layout { display: flex; height: calc(100vh - 53px); overflow: hidden; position: relative; z-index: 1; } .sidebar { width: 220px; background: var(--surface); border-right: 1px solid var(--border); padding: 1rem 0; flex-shrink: 0; overflow-y: auto; } .sidebar .group-label { font-size: 0.75rem; text-transform: uppercase; color: var(--text-muted); padding: 0.5rem 1.25rem; margin-top: 0.5rem; } .sidebar a, .sidebar .disabled { display: block; padding: 0.5rem 1.25rem; color: var(--text); font-size: 0.92rem; } .sidebar a:hover { background: var(--gray-bg); text-decoration: none; } .sidebar a.active { background: var(--primary-light); color: var(--primary); font-weight: 600; border-right: 3px solid var(--primary); } .sidebar .disabled { color: #cbd5e1; cursor: not-allowed; } .sidebar .soon { font-size: 0.7rem; background: var(--gray-bg); color: var(--text-muted); padding: 0.1rem 0.4rem; border-radius: 4px; margin-left: 0.4rem; } .content { flex: 1; padding: 1.5rem 2rem; overflow-y: auto; } /* Hide the native scrollbar on the two panes that actually scroll -- scrolling still works fine (wheel/keyboard/touch), it just doesn't paint the OS/browser's own scrollbar track+thumb, so the only visible scroll indicator on the page is the reading-progress rail. Same ::-webkit-scrollbar{display:none} + scrollbar-width:none approach the StackLab wiki reference uses (its own .sidebar/.content rules). */ .sidebar::-webkit-scrollbar, .content::-webkit-scrollbar { display: none; } .sidebar, .content { -ms-overflow-style: none; scrollbar-width: none; } .breadcrumb { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 0.5rem; } .breadcrumb a { color: var(--text-muted); } h1 { font-size: 1.6rem; margin: 0.25rem 0 0.25rem; } .subtitle { color: var(--text-muted); margin-bottom: 1.5rem; } .flash { background: var(--primary-light); color: var(--primary-hover); padding: 0.6rem 1rem; margin-bottom: 1rem; border-radius: 6px; font-size: 0.9rem; } /* Buttons */ .btn { display: inline-block; padding: 0.5rem 1rem; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; font-size: 0.9rem; font-weight: 500; } .btn:hover { background: var(--gray-bg); text-decoration: none; } .btn-primary { background: var(--primary); border-color: var(--primary); color: white; } .btn-primary:hover { background: var(--primary-hover); } .btn-danger { color: var(--danger); border-color: var(--danger-bg); } .btn-danger:hover { background: var(--danger-bg); } .btn-row { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; } .btn-row form { margin: 0; } /* VPS list's top bar (Create + search + bulk action buttons) — nowrap on desktop so the bulk bar can sit flush right via margin-left:auto (see vps_list.html), but that same nowrap would force every button into one squeezed/overflowing line on a narrow screen instead of stacking, which is why this isn't just left as .btn-row's own default wrap. See the (max-width: 900px) override below, same breakpoint as the rest of this app's mobile layout. */ .vps-toolbar { flex-wrap: nowrap; } .vps-toolbar-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; flex-wrap: wrap; flex-shrink: 0; } /* Marketplace deployment status — a simple step list, not a full stepper widget: "done" steps are muted/checked, the "current" one is highlighted, everything after it is plain (not yet reached). */ .progress-steps { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .progress-steps li { padding: 0.35rem 0.6rem; border-radius: 6px; color: var(--text-muted); font-size: 0.9rem; } .progress-steps li.done { color: var(--success); } .progress-steps li.done::before { content: "✓ "; } .progress-steps li.current { background: var(--primary-light); color: var(--primary); font-weight: 600; } .progress-steps li.current::before { content: "→ "; } /* Table */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem; margin-bottom: 1.5rem; overflow-x: auto; } table { border-collapse: collapse; width: 100%; } th { text-align: left; font-size: 0.78rem; text-transform: uppercase; color: var(--text-muted); padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); } td { padding: 0.75rem; border-bottom: 1px solid var(--border); font-size: 0.9rem; } tr:last-child td { border-bottom: none; } td a { font-weight: 600; } /* Status badge */ .badge { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; } .badge-ACTIVE { background: var(--success-bg); color: var(--success); } .badge-SHUTOFF { background: var(--gray-bg); color: var(--text-muted); } .badge-ERROR { background: var(--danger-bg); color: var(--danger); } .badge-BUILD, .badge-REBOOT, .badge-HARD_REBOOT { background: var(--warning-bg); color: var(--warning); } .badge-SUSPENDED { background: var(--info-bg); color: var(--info); } /* Service cards (home page) */ .service-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; } .service-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem; text-align: left; } .service-card.active { border-color: var(--primary); cursor: pointer; } .service-card.active:hover { box-shadow: 0 2px 8px rgba(37,99,235,0.15); } .service-card.disabled { opacity: 0.55; } .service-card .icon { font-size: 1.6rem; } .service-card .name { font-weight: 700; margin: 0.5rem 0 0.25rem; } .service-card .desc { font-size: 0.82rem; color: var(--text-muted); } .service-card .tag { font-size: 0.7rem; background: var(--gray-bg); color: var(--text-muted); padding: 0.1rem 0.4rem; border-radius: 4px; } /* Marketplace: grouped-by-category grid of appliance cards (each item is its own tile, not a full-width row) */ .mp-category { margin-bottom: 2rem; } .mp-category-title { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin: 0 0 0.75rem; } /* auto-fit (not auto-fill): when a category has fewer cards than fit in a row, auto-fill still reserves empty invisible tracks for cards that COULD exist there, so the 1fr on real cards never grows past minmax's floor -- found live, e.g. the 2-card Firewall/Router row stayed pinned narrow with a wide dead gap to its right. auto-fit collapses those empty tracks, so the same 2 cards' 1fr actually claims the freed space and stretches to fill the row. */ .mp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 1.25rem; } .mp-card { display: flex; flex-direction: column; text-align: left; padding: 1.25rem; } .mp-card .mp-icon { width: 2.75rem; height: 2.75rem; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--border); display: flex; align-items: center; justify-content: center; padding: 0.4rem; margin-bottom: 0.75rem; } .mp-card .mp-icon img { width: 100%; height: 100%; object-fit: contain; } .mp-card h3 { margin: 0 0 0.35rem; font-size: 1rem; } .mp-card .subtitle { margin: 0 0 1rem; font-size: 0.85rem; flex: 1; } .mp-card .btn { align-self: flex-start; } /* Tabs */ .tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; overflow-x: auto; white-space: nowrap; } .tab-btn { padding: 0.6rem 1rem; background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-size: 0.9rem; color: var(--text-muted); flex-shrink: 0; } .tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; } .tab-panel { display: none; } .tab-panel.active { display: block; } /* Forms */ label { display: block; margin-top: 0.75rem; font-size: 0.88rem; font-weight: 500; } input, select, textarea { width: 100%; padding: 0.5rem 0.6rem; margin-top: 0.25rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.9rem; box-sizing: border-box; } .info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem 2rem; } .info-grid div { font-size: 0.88rem; } .info-grid .label { color: var(--text-muted); font-size: 0.78rem; text-transform: uppercase; margin-bottom: 0.15rem; } /* Status spinner — used while a VPS is in a transitional state (BUILD/REBOOT/...) */ .spinner { display: inline-block; width: 0.85em; height: 0.85em; margin-left: 0.5rem; border: 2px solid rgba(217, 119, 6, 0.25); border-top-color: var(--warning); border-radius: 50%; vertical-align: middle; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Row fade-out, used when a deleted VPS is removed from the list without a full reload */ .row-removing { opacity: 0; transition: opacity 0.3s ease; } /* Capacity gauge (admin dashboard's Node capacity tiles) -- fill color is set inline per-tile from the actual %used (green/warning/danger), same thresholds as everywhere else in this app that traffic-lights a number. */ .gauge-track { background: var(--gray-bg); border-radius: 999px; height: 0.5rem; overflow: hidden; margin-top: 0.6rem; } .gauge-fill { height: 100%; border-radius: 999px; transition: width 0.3s ease; } /* Fixed 2-column card grid (admin Settings, Branding, ...) -- deliberately NOT flex-wrap + flex-grow: with an odd/uneven number of independent cards, an auto-wrapped last row either stretches its few cards past what their content needs (uncapped flex-grow) or leaves a visible dead gap (flex-grow capped with max-width) -- found live, both looked wrong. A grid with an EXPLICIT 2-column track means every row is either a full pair (both columns used) or a single card the caller deliberately spans full-width with .card-grid-2-full -- never an accidental gap. align-items:stretch (not start) is intentional here -- the user wants every card's own background/border to fill the row's full height (no visible empty gap below a shorter sibling), not just its content's natural height. Safe because each card's own content is plain top-down block flow (h3/p/form) -- nothing inside a .card relies on align-items:flex-end the way a field+button ROW does, so stretching the card's box doesn't push its content down like it would for those. */ .card-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: stretch; } .card-grid-2-full { grid-column: 1 / -1; } /* Narrow sidebar + wide main column (admin Customer detail: a compact settings form next to a much heavier card full of tables) -- same "explicit grid, not auto-wrap" reasoning as .card-grid-2 above, but an even 50/50 split would waste space on the narrow card's side and starve the wide one, so the ratio is asymmetric on purpose. Same align-items:stretch reasoning as .card-grid-2 above too. */ .card-grid-aside { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 1.5rem; align-items: stretch; } /* Disabled action button (e.g. Detach Interface on the VPS's original NIC) */ .btn-disabled { color: #cbd5e1; border-color: var(--border); cursor: not-allowed; } .btn-disabled:hover { background: none; } /* Console preview thumbnail (iDRAC/iLO-style shortcut) next to General information */ .console-thumb { width: 160px; flex-shrink: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 0.75rem; cursor: pointer; text-align: center; } .console-thumb:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(37,99,235,0.15); } .console-thumb-screen { position: relative; aspect-ratio: 4 / 3; background: #0f172a; border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .console-thumb-screen::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: repeating-linear-gradient(90deg, #334155 0 6px, #0f172a 6px 12px); } .console-thumb-play { color: #64748b; font-size: 1.6rem; } .console-thumb:hover .console-thumb-play { color: var(--primary); } .console-thumb-label { margin-top: 0.5rem; font-size: 0.82rem; color: var(--text-muted); font-weight: 600; } /* Inline console popup */ .console-modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); z-index: 1000; align-items: center; justify-content: center; } .console-modal-backdrop.open { display: flex; } .console-modal { background: var(--surface); border-radius: 8px; width: min(900px, 92vw); height: min(650px, 85vh); display: flex; flex-direction: column; overflow: hidden; } .console-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 1rem; border-bottom: 1px solid var(--border); font-size: 0.9rem; font-weight: 600; } .console-modal-header button { background: none; border: none; font-size: 1.2rem; cursor: pointer; } .console-modal iframe { flex: 1; border: none; width: 100%; } /* Custom confirm/alert dialog — replaces the browser's native confirm()/ alert() so it matches the rest of the UI instead of showing the raw domain name in a generic browser popup. */ .dialog-backdrop { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); z-index: 1200; align-items: center; justify-content: center; } .dialog-backdrop.open { display: flex; } .dialog-box { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; width: min(360px, 90vw); padding: 1.5rem; } .dialog-message { font-size: 0.95rem; margin-bottom: 1.25rem; white-space: pre-line; } .dialog-actions { display: flex; justify-content: flex-end; gap: 0.5rem; } /* Flavor picker — selectable table (VPS creation form) */ .picker-table td { cursor: pointer; } .picker-row:hover { background: var(--gray-bg); } .picker-row.selected { background: var(--primary-light); } .picker-row.selected td:first-child { border-left: 3px solid var(--primary); } .picker-row td:first-child { border-left: 3px solid transparent; } .picker-row input[type=radio] { margin: 0; } .picker-row.disabled { opacity: 0.45; } .picker-row.disabled td { cursor: not-allowed; } /* Image picker — OS family tiles (VPS creation form) */ .os-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.75rem; } .os-tile { border: 1px solid var(--border); border-radius: 8px; padding: 1rem 0.5rem; text-align: center; cursor: pointer; background: var(--surface); } .os-tile:hover { border-color: var(--primary); } .os-tile.selected { border-color: var(--primary); background: var(--primary-light); } .os-tile-icon { font-size: 1.8rem; line-height: 1; } .os-tile-label { margin-top: 0.4rem; font-size: 0.85rem; font-weight: 600; } /* ========================================================================== Responsive — tablet (iPad) and phone. The sidebar becomes an off-canvas drawer (slide-in overlay) toggled by the hamburger button in the topbar, instead of trying to squeeze a 220px fixed sidebar next to content on a narrow screen. ========================================================================== */ @media (max-width: 900px) { .menu-toggle { display: inline-block; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 260px; max-width: 80vw; z-index: 1100; transform: translateX(-100%); transition: transform 0.25s ease; overflow-y: auto; padding-top: 1rem; } .sidebar.open { transform: translateX(0); box-shadow: 2px 0 16px rgba(0, 0, 0, 0.2); } .sidebar-backdrop.open { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 1050; } .content { padding: 1rem; max-width: 100%; } .topbar { padding: 0.65rem 1rem; } .info-grid { grid-template-columns: repeat(2, 1fr); } .card-grid-2 { grid-template-columns: 1fr; } .card-grid-aside { grid-template-columns: 1fr; } .service-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .vps-toolbar { flex-wrap: wrap; } .vps-toolbar-actions { margin-left: 0; width: 100%; } } @media (max-width: 480px) { .info-grid { grid-template-columns: 1fr; } h1 { font-size: 1.35rem; } .topbar .brand { font-size: 1rem; } .topbar .user { font-size: 0.8rem; } .topbar .user a { margin-left: 0.6rem; } .btn { padding: 0.45rem 0.8rem; font-size: 0.85rem; } .console-modal { width: 96vw; height: 80vh; } .auth-card { width: 92vw !important; } }