/* SnazzyVPS panel — the layer between the panel's own markup and the template. * * The views were written against a hand-rolled stylesheet: .btn.small, * .btn.primary, .muted, .tile, .jobform, .bars. Rather than rewrite 46 cards of * working, tested markup into Bootstrap's class names, this maps the names the * views already use onto the template's visual language. * * TWO THINGS ABOUT SPECIFICITY, both learned the hard way: * * 1. Every selector here is prefixed [dir=ltr], because the template's app.css * prefixes 4,965 of its own that way. `[dir=ltr] .card` is (0,2,0) and a * bare `.card` is (0,1,0), so an unprefixed rule here loses to app.css no * matter that this file loads last. * * 2. :root is deliberately NOT prefixed. `[dir=ltr] :root` requires :root to be * a descendant of [dir=ltr] — but :root IS , and nothing is its own * descendant, so such a block matches nothing at all. app.css declares all * its custom properties inside exactly that dead selector; it happens not to * matter because Bootstrap 4 reads none of them (var(--…) appears zero times * in the file), but it is the reason to be careful here. */ :root { --accent: #de1b76; --accent-dim: rgba(222, 27, 118, .12); } /* ---- cards -------------------------------------------------------------- */ /* 40 of the 46 cards are

Title

…
with no .card-body, so the padding lives on the card itself. */ [dir=ltr] .card { padding: 1.25rem; margin-bottom: 1.5rem; } [dir=ltr] .card > .card-body { padding: 0; } [dir=ltr] .card > h2 { font-size: 1rem; font-weight: 600; margin: 0 0 1rem; color: #212529; } [dir=ltr] .card > h3 { font-size: .9rem; font-weight: 600; } /* ---- typography helpers the views use ----------------------------------- */ [dir=ltr] .muted { color: #6c757d; } [dir=ltr] .right { text-align: right; } [dir=ltr] .inline { display: inline-block; } /* ---- buttons ------------------------------------------------------------ */ /* Only the legacy buttons. :not([class*="btn-"]) keeps this away from .btn-accent, .btn-outline-secondary and friends, which app.css already styles at the same specificity — an unqualified rule here flattened all of them to grey. */ [dir=ltr] .btn:not([class*="btn-"]) { border: 1px solid #ced4da; background: #fff; color: #343a40; border-radius: .25rem; padding: .375rem .75rem; font-size: .875rem; line-height: 1.5; display: inline-block; cursor: pointer; font-weight: 400; } [dir=ltr] .btn:not([class*="btn-"]):hover { background: #f8f9fa; border-color: #adb5bd; color: #212529; text-decoration: none; } [dir=ltr] .btn.small { padding: .2rem .5rem; font-size: .78rem; line-height: 1.4; } [dir=ltr] .btn.primary, [dir=ltr] .btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; } [dir=ltr] .btn.primary:hover, [dir=ltr] .btn-accent:hover { background: #b8155f; border-color: #b8155f; color: #fff; } [dir=ltr] form.inline { display: inline-block; margin: 0; } /* ---- forms -------------------------------------------------------------- */ [dir=ltr] .jobform { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .75rem; } [dir=ltr] .jobform input, [dir=ltr] .jobform select, [dir=ltr] .newsite input, [dir=ltr] .newsite select { border: 1px solid #ced4da; border-radius: .25rem; padding: .3rem .5rem; font-size: .85rem; background: #fff; color: #212529; } [dir=ltr] .jobform input:focus, [dir=ltr] .newsite input:focus { outline: none; border-color: var(--accent); } [dir=ltr] .newsite { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .5rem; align-items: center; } /* ---- status dots and severity ------------------------------------------- */ [dir=ltr] .dot { width: 9px; height: 9px; border-radius: 50%; background: #adb5bd; display: inline-block; } [dir=ltr] .dot.ok { background: #28a745; } [dir=ltr] .dot.bad, [dir=ltr] .dot.crit { background: #dc3545; } [dir=ltr] .dot.warn { background: #fd7e14; } [dir=ltr] .lv.crit { color: #dc3545; } [dir=ltr] .lv.warn { color: #fd7e14; } [dir=ltr] .lv.note { color: #868e96; } /* ---- stat tiles and grids ----------------------------------------------- */ [dir=ltr] .grid, [dir=ltr] .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; } [dir=ltr] .tile { background: #f8f9fa; border: 1px solid rgba(0,0,0,.06); border-radius: .35rem; padding: .7rem .85rem; } [dir=ltr] .tile .lbl, [dir=ltr] .lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #6c757d; } [dir=ltr] .tile .val, [dir=ltr] .num { font-size: 1.35rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; } [dir=ltr] .tile .val.ok { color: #28a745; } [dir=ltr] .tile .val.warn, [dir=ltr] .num.warn { color: #fd7e14; } [dir=ltr] .tile .val.crit, [dir=ltr] .num.crit { color: #dc3545; } [dir=ltr] .tile .sub, [dir=ltr] .sub { font-size: .72rem; color: #868e96; } /* ---- meters ------------------------------------------------------------- */ [dir=ltr] .meter { height: 6px; background: #e9ecef; border-radius: 3px; overflow: hidden; margin-top: .35rem; } [dir=ltr] .meter i { display: block; height: 100%; background: #28a745; } [dir=ltr] .meter i.warn { background: #fd7e14; } [dir=ltr] .meter i.crit { background: #dc3545; } /* ---- range switchers ---------------------------------------------------- */ [dir=ltr] .tabs { display: inline-flex; gap: .25rem; margin-bottom: .75rem; } [dir=ltr] .tabs a { padding: .2rem .6rem; border-radius: .25rem; font-size: .8rem; color: #6c757d; border: 1px solid transparent; } [dir=ltr] .tabs a:hover { background: #f1f3f5; color: #212529; text-decoration: none; } [dir=ltr] .tabs a.on { background: var(--accent-dim); color: var(--accent); border-color: rgba(222,27,118,.25); font-weight: 600; } /* ---- tab strips --------------------------------------------------------- * Fourteen tabs will not fit a narrow window, and Bootstrap's .nav-tabs wraps * onto a second row that then sits above the border and looks broken. Scroll * instead: one row always, swipeable on a touchpad, with the border drawn on * the strip so it stays put no matter how far it is scrolled. */ [dir=ltr] .panel-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid #dee2e6; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } [dir=ltr] .panel-tabs::-webkit-scrollbar { height: 3px; } [dir=ltr] .panel-tabs::-webkit-scrollbar-thumb { background: #dee2e6; border-radius: 3px; } [dir=ltr] .panel-tabs .nav-item { flex: 0 0 auto; } [dir=ltr] .panel-tabs .nav-link { white-space: nowrap; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: .5rem .85rem; color: #6c757d; font-size: .875rem; } [dir=ltr] .panel-tabs .nav-link:hover { color: #212529; background: transparent; border-bottom-color: #dee2e6; } [dir=ltr] .panel-tabs .nav-link.active { color: var(--accent); background: transparent; border-bottom-color: var(--accent); font-weight: 600; } /* ---- label + figure + sparkline ----------------------------------------- */ [dir=ltr] .sparkwrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } [dir=ltr] .minispark svg { vertical-align: middle; margin-right: .4rem; } [dir=ltr] .spark, [dir=ltr] .spark.neutral { color: var(--accent); } [dir=ltr] .spark.warn { color: #fd7e14; } [dir=ltr] .spark.crit { color: #dc3545; } /* ---- horizontal bar lists (top IPs, top paths) -------------------------- */ [dir=ltr] .bars .row { display: flex; align-items: center; gap: .6rem; margin-bottom: .25rem; } [dir=ltr] .bars .track { position: relative; flex: 1; background: #f1f3f5; border-radius: 3px; height: 20px; } [dir=ltr] .bars .track i { display: block; height: 100%; background: var(--accent-dim); border-radius: 3px; } [dir=ltr] .bars .track b { position: absolute; left: .5rem; top: 0; line-height: 20px; font-weight: 400; font-size: .78rem; } [dir=ltr] .bars .n { font-variant-numeric: tabular-nums; font-size: .78rem; color: #6c757d; min-width: 3rem; text-align: right; } /* ---- service pills ------------------------------------------------------ */ [dir=ltr] .chips { display: flex; flex-wrap: wrap; gap: .4rem; } [dir=ltr] .chip { display: inline-flex; align-items: center; gap: .4rem; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 999px; padding: .2rem .6rem; font-size: .78rem; color: #495057; } /* ---- flashes ------------------------------------------------------------ */ [dir=ltr] .flash { padding: .6rem .9rem; border-radius: .3rem; margin-bottom: 1rem; font-size: .875rem; } [dir=ltr] .flash.ok { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; } [dir=ltr] .flash.err { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } /* ---- tables inside cards ------------------------------------------------ */ [dir=ltr] .card table { width: 100%; font-size: .85rem; border-collapse: collapse; margin-bottom: 0; } [dir=ltr] .card table th { text-align: left; font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #6c757d; padding: .35rem .5rem; border-bottom: 1px solid #dee2e6; } [dir=ltr] .card table td { padding: .4rem .5rem; border-bottom: 1px solid #f1f3f5; vertical-align: top; } [dir=ltr] .card table tr:last-child td { border-bottom: 0; } /* ---- log output --------------------------------------------------------- */ [dir=ltr] pre { background: #1d1f21; color: #e6e6e6; padding: .8rem; border-radius: .3rem; overflow-x: auto; font-size: .78rem; line-height: 1.5; margin-bottom: 0; max-height: 32rem; } [dir=ltr] pre .lv.crit { color: #ff6b6b; } [dir=ltr] pre .lv.warn { color: #ffb454; } [dir=ltr] pre .lv.note { color: #9aa0a6; } [dir=ltr] code { color: var(--accent); background: rgba(222,27,118,.06); padding: .05rem .25rem; border-radius: .2rem; } [dir=ltr] pre code { background: none; color: inherit; padding: 0; } [dir=ltr] code.cred { display: inline-block; background: #1d1f21; color: #e6e6e6; padding: .2rem .45rem; border-radius: .2rem; user-select: all; font-size: .8rem; word-break: break-all; } /* ---- brand -------------------------------------------------------------- */ [dir=ltr] .brandlink { display: block; margin: 0 auto; } [dir=ltr] .brandlink:hover { opacity: .8; text-decoration: none; } [dir=ltr] .brandlogo { display: block; width: 100%; height: auto; margin: 0 auto; } /* ---- page rhythm -------------------------------------------------------- */ [dir=ltr] .page__container { padding-top: 1.5rem; padding-bottom: 2rem; } [dir=ltr] .page__heading h1 { font-size: 1.35rem; font-weight: 600; } /* ---- shell -------------------------------------------------------------- */ /* Replaces the template's mdk-header-layout / mdk-drawer-layout. Both are height:100%; overflow:hidden app-shells that scroll internally, and .mdk-header reserves 200px for a hero image collapsed by JavaScript — on a long page that clips the content. This is a plain flex row in normal document flow: the page scrolls the way a document should, and the sidebar sticks beside it. */ [dir=ltr] .panel-navbar { padding: .5rem 1rem; } [dir=ltr] .panel-navbar .navbar-brand { font-weight: 600; font-size: 1rem; } [dir=ltr] .panel-shell { display: flex; align-items: flex-start; min-height: calc(100vh - 56px); } [dir=ltr] .panel-sidebar { flex: 0 0 250px; width: 250px; align-self: stretch; background: #fff; border-right: 1px solid rgba(0,0,0,.08); padding: 1rem 0; position: sticky; top: 0; max-height: 100vh; overflow-y: auto; /* The template's .sidebar sets height:100%, which inside a sticky column collapses it. Override for this shell. */ height: auto; } [dir=ltr] .panel-main { flex: 1 1 auto; min-width: 0; background: #f5f6f8; } [dir=ltr] .panel-main .page__container { padding: 1.5rem; } [dir=ltr] .sidebar-heading { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #adb5bd; padding: .5rem 1.25rem .25rem; font-weight: 600; } [dir=ltr] .sidebar-menu { list-style: none; padding: 0; margin: 0 0 .5rem; } [dir=ltr] .sidebar-menu-button { display: flex; align-items: center; gap: .6rem; padding: .45rem 1.25rem; color: #495057; font-size: .875rem; text-decoration: none; } [dir=ltr] .sidebar-menu-button:hover { background: #f1f3f5; color: #212529; text-decoration: none; } [dir=ltr] .sidebar-menu-item.active > .sidebar-menu-button { background: var(--accent-dim); color: var(--accent); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); } [dir=ltr] .sidebar-menu-icon { font-size: 18px; opacity: .75; } @media (max-width: 767.98px) { [dir=ltr] .panel-shell { flex-direction: column; } [dir=ltr] .panel-sidebar { flex: 1 1 auto; width: 100%; position: static; max-height: none; border-right: 0; border-bottom: 1px solid rgba(0,0,0,.08); } }