/* uptime.ooo — themeable design system. Three switchable themes driven by a data-theme attribute on : "phosphor" (default terminal look), "pulse" (live-green, friendly), "signal" (violet, premium). Components read CSS variables so a theme swap is a single attribute change. */ :root { /* fonts */ --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace; --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --font-body: var(--sans); --font-chrome: var(--mono); /* headings, buttons, nav, labels, inputs, th, pills */ --font-data: var(--mono); /* numbers / .mono / values */ --font-display: var(--font-chrome); /* h1 display face; themes may override */ /* Shared cross-theme hooks. Default to the dark-theme values so existing themes are unchanged; light themes redefine them below. */ --card-shadow: none; /* elevation on panels/stats/cards */ --flash-fg: #ffc7c4; /* flash/error text on --down-bg */ /* ---- theme: PHOSPHOR (default) ---- */ --bg: #05070a; --bg-elev: #0a0e0c; --bg-elev2: #0e130f; --border: #16241a; --border-bright: #243b2c; --text: #cdd9cd; --muted: #6f8574; --accent: #3af07a; --accent-dim: #26a552; --btn-fg: #04140d; --up: #3af07a; --up-bg: rgba(58,240,122,.12); --down: #ff5c5c; --down-bg: rgba(255,92,92,.12); --pending: #ffc24b; --pending-bg: rgba(255,194,75,.12); --paused: #6f8574; --paused-bg: rgba(111,133,116,.12); --bar-none: #152016; --radius: 6px; --pill-radius: 4px; --pill-border: 1px; --prefix-title: "\203A\A0"; /* › */ --prefix-section: "#\A0"; --btn-primary: var(--accent); --accent-glow: 0 0 20px rgba(58,240,122,.25); --spark-glow: drop-shadow(0 0 3px rgba(58,240,122,.5)); --cursor-display: inline-block; --page-glow: radial-gradient(60% 40% at 50% -5%, rgba(58,240,122,.05), transparent 70%); } :root[data-theme="pulse"] { --font-chrome: var(--sans); --bg: #0a0f0d; --bg-elev: #101815; --bg-elev2: #141b17; --border: #1c2b24; --border-bright: #26382f; --text: #e8f0ea; --muted: #8ba396; --accent: #20e58a; --accent-dim: #12b981; --btn-fg: #04140d; --up: #20e58a; --up-bg: rgba(32,229,138,.14); --down: #f0554e; --down-bg: rgba(240,85,78,.14); --pending: #f5b14b; --pending-bg: rgba(245,177,75,.14); --paused: #7d9488; --paused-bg: rgba(125,148,136,.14); --bar-none: #182420; --radius: 11px; --pill-radius: 999px; --pill-border: 0px; --prefix-title: ""; --prefix-section: ""; --btn-primary: linear-gradient(135deg, #20e58a, #12b981); --accent-glow: none; --spark-glow: none; --cursor-display: none; --page-glow: radial-gradient(60% 40% at 50% -5%, rgba(32,229,138,.06), transparent 70%); } :root[data-theme="signal"] { --font-chrome: var(--sans); --bg: #0b0b12; --bg-elev: #141420; --bg-elev2: #181826; --border: #242436; --border-bright: #33334a; --text: #e6e6f2; --muted: #9a9ab8; --accent: #7c5cff; --accent-dim: #635bff; --btn-fg: #ffffff; --up: #3ddc84; --up-bg: rgba(61,220,132,.14); --down: #f0554e; --down-bg: rgba(240,85,78,.14); --pending: #f5b14b; --pending-bg: rgba(245,177,75,.14); --paused: #7d7d99; --paused-bg: rgba(125,125,153,.14); --bar-none: #24243a; --radius: 10px; --pill-radius: 999px; --pill-border: 0px; --prefix-title: ""; --prefix-section: ""; --btn-primary: linear-gradient(135deg, #635bff, #a855f7); --accent-glow: none; --spark-glow: none; --cursor-display: none; --page-glow: radial-gradient(60% 45% at 50% -8%, rgba(124,92,255,.10), transparent 70%); } /* ---- theme: DAYLIGHT (light, modern SaaS) ---- */ :root[data-theme="daylight"] { --font-chrome: var(--sans); --bg: #eef1f6; --bg-elev: #ffffff; --bg-elev2: #f7f9fc; --border: #e3e8ef; --border-bright: #d5dce6; --text: #1a2233; --muted: #697386; --accent: #4f46e5; --accent-dim: #6366f1; --btn-fg: #ffffff; --up: #16a34a; --up-bg: rgba(22,163,74,.10); --down: #e11d48; --down-bg: rgba(225,29,72,.10); --pending: #d97706; --pending-bg: rgba(217,119,6,.12); --paused: #94a3b8; --paused-bg: rgba(148,163,184,.14); --bar-none: #e2e8f0; --radius: 12px; --pill-radius: 999px; --pill-border: 0px; --prefix-title: ""; --prefix-section: ""; --btn-primary: linear-gradient(135deg, #6366f1, #4f46e5); --accent-glow: none; --spark-glow: none; --cursor-display: none; --page-glow: none; --card-shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 12px rgba(16,24,40,.05); --flash-fg: var(--down); } /* ---- theme: MERIDIAN (light, editorial ledger) ---- */ :root[data-theme="meridian"] { --font-chrome: var(--sans); --font-display: var(--serif); --bg: #f4efe6; --bg-elev: #fbf8f1; --bg-elev2: #f1ebdf; --border: #e3dccd; --border-bright: #d3c9b4; --text: #211d16; --muted: #6f6853; --accent: #9a3f2f; --accent-dim: #b6543f; --btn-fg: #fbf8f1; --up: #3f6b3a; --up-bg: rgba(63,107,58,.12); --down: #a83232; --down-bg: rgba(168,50,50,.12); --pending: #a8781f; --pending-bg: rgba(168,120,31,.14); --paused: #9a9686; --paused-bg: rgba(154,150,134,.16); --bar-none: #e3dccd; --radius: 4px; --pill-radius: 2px; --pill-border: 1px; --prefix-title: ""; --prefix-section: ""; --btn-primary: var(--accent); --accent-glow: none; --spark-glow: none; --cursor-display: none; --page-glow: none; --card-shadow: none; --flash-fg: var(--down); } /* ---- theme: BREEZE (light, airy & vibrant) ---- */ :root[data-theme="breeze"] { --font-chrome: var(--sans); --bg: #f2f5fb; --bg-elev: #ffffff; --bg-elev2: #f2f5fb; --border: #eaeefb; --border-bright: #dbe3f5; --text: #151a2e; --muted: #5b6580; --accent: #6b4ff7; --accent-dim: #22b8ff; --btn-fg: #ffffff; --up: #12b76a; --up-bg: rgba(18,183,106,.10); --down: #f0416a; --down-bg: rgba(240,65,106,.10); --pending: #f79009; --pending-bg: rgba(247,144,9,.12); --paused: #98a1bd; --paused-bg: rgba(152,161,189,.14); --bar-none: #eaeefb; --radius: 16px; --pill-radius: 999px; --pill-border: 0px; --prefix-title: ""; --prefix-section: ""; --btn-primary: linear-gradient(120deg, #6b4ff7, #22b8ff); --accent-glow: none; --spark-glow: none; --cursor-display: none; --page-glow: radial-gradient(70% 45% at 12% -8%, rgba(107,79,247,.10), transparent 60%), radial-gradient(60% 40% at 100% 0%, rgba(34,184,255,.10), transparent 55%); --card-shadow: 0 2px 8px rgba(30,41,89,.05), 0 12px 30px -12px rgba(30,41,89,.12); --flash-fg: var(--down); } * { box-sizing: border-box; } html { color-scheme: dark; } /* Light themes render with a light form-control / scrollbar scheme. */ html[data-theme="daylight"], html[data-theme="meridian"], html[data-theme="breeze"] { color-scheme: light; } /* Meridian leans editorial: serif numerals on the headline stat strip echo a printed ledger, while the small data cells stay monospaced. */ :root[data-theme="meridian"] .stat-val { font-family: var(--serif); font-weight: 600; } /* The impersonation bar hard-codes near-white ambers tuned for a dark ground. On a light canvas those wash out, so restate them in darker amber ink. */ html[data-theme="daylight"] .impersonation-bar, html[data-theme="meridian"] .impersonation-bar, html[data-theme="breeze"] .impersonation-bar { background: color-mix(in srgb, #f0a020 24%, var(--bg)); border-bottom-color: color-mix(in srgb, #b8791a 60%, transparent); color: #7a4d05; } html[data-theme="daylight"] .impersonation-tag, html[data-theme="meridian"] .impersonation-tag, html[data-theme="breeze"] .impersonation-tag { color: #8a5a08; border-color: color-mix(in srgb, #b8791a 55%, transparent); } html[data-theme="daylight"] .impersonation-who, html[data-theme="meridian"] .impersonation-who, html[data-theme="breeze"] .impersonation-who { color: #5c3d08; } html[data-theme="daylight"] .impersonation-note, html[data-theme="meridian"] .impersonation-note, html[data-theme="breeze"] .impersonation-note { color: color-mix(in srgb, #7a4d05 75%, transparent); } body { margin: 0; background: var(--page-glow), var(--bg); color: var(--text); font: 15px/1.55 var(--font-body); -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { font-family: var(--font-chrome); font-weight: 700; letter-spacing: -.01em; } h1 { font-size: 1.4rem; margin: 0 0 .2rem; font-family: var(--font-display); } h2 { font-size: 1rem; } .muted { color: var(--muted); } .small { font-size: .8rem; } .mono { font-family: var(--font-data); font-size: .88em; } .strong { font-weight: 600; } .num { text-align: right; font-family: var(--font-data); font-variant-numeric: tabular-nums; } .center { text-align: center; } /* topbar */ .topbar { display: flex; align-items: center; gap: 1.1rem; padding: .6rem 1.25rem; background: color-mix(in srgb, var(--bg) 85%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: blur(8px); font-family: var(--font-chrome); } .brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--text); font-weight: 800; letter-spacing: .2px; } .brand .dom { color: var(--accent); margin-left: .12em; } .brand svg { display: block; flex: none; color: var(--accent); } .cursor { display: var(--cursor-display); width: 7px; height: 1em; background: var(--accent); margin-left: 1px; vertical-align: -2px; animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } .topbar nav { display: flex; gap: .15rem; } .topbar nav a { color: var(--muted); padding: .3rem .55rem; border-radius: 5px; font-size: .85rem; } .topbar nav a.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); } .topbar nav a:hover { color: var(--text); text-decoration: none; } .spacer { flex: 1; } .org { color: var(--muted); font-size: .82rem; } /* Operator console — a deliberately distinct red-accented chrome so the operator always knows they are acting across every tenant, not inside one org. */ .admin-link { color: #ff6a6a !important; border: 1px solid color-mix(in srgb, #ff6a6a 45%, transparent); padding: .18rem .5rem; border-radius: 5px; font-size: .82rem; font-family: var(--font-chrome); } .admin-link:hover { background: color-mix(in srgb, #ff6a6a 15%, transparent); text-decoration: none; } .admin-topbar { border-bottom: 2px solid #ff5c5c; } .admin-badge { font-family: var(--font-chrome); font-size: .66rem; font-weight: 800; letter-spacing: 1px; color: #ff6a6a; border: 1px solid #ff5c5c; border-radius: 4px; padding: .1rem .4rem; text-transform: uppercase; } .inline { display: inline; margin: 0; } .linkbtn { background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; font-family: var(--font-chrome); font-size: .85rem; } .linkbtn:hover { color: var(--accent); } /* layout */ /* Content is fluid and uses the available width. In the sidebar (console) layout it fills the space beside the rail edge-to-edge; in top-bar mode it stays centered but wide. Forms self-constrain via .form, so wide is safe. */ .container { width: 100%; max-width: 1400px; margin: 1.6rem auto; padding: 0 1.6rem; } .nav-sidebar .container { max-width: none; margin: 1.4rem 0; padding: 0 2rem; } .container.narrow { max-width: 400px; margin-top: 8vh; } .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; } .page-head h1::before { content: var(--prefix-title); color: var(--accent); } .section { margin: 2rem 0 .75rem; padding-top: 1rem; border-top: 1px solid var(--border); } .section::before { content: var(--prefix-section); color: var(--accent-dim); font-family: var(--font-chrome); } .back { font-size: .85rem; } /* flash */ .flash { background: var(--down-bg); border: 1px solid var(--down); color: var(--flash-fg); padding: .55rem .8rem; border-radius: var(--radius); margin-bottom: 1rem; font-family: var(--font-chrome); font-size: .88rem; } /* impersonation ("view as user") banner — amber, deliberately unlike the green app chrome so an operator can never mistake it for a normal session. */ .impersonation-bar { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; padding: .5rem 1rem; background: color-mix(in srgb, #f0a020 16%, var(--bg)); border-bottom: 1px solid color-mix(in srgb, #f0a020 55%, transparent); color: #ffd79a; font-family: var(--font-chrome); font-size: .85rem; } .impersonation-tag { font-weight: 700; letter-spacing: .08em; color: #ffb84d; border: 1px solid color-mix(in srgb, #f0a020 55%, transparent); padding: .1rem .4rem; border-radius: var(--radius); } .impersonation-who { color: #ffe9c7; font-weight: 600; } .impersonation-note { color: color-mix(in srgb, #ffd79a 70%, transparent); } .impersonation-bar form { margin-left: auto; } /* buttons */ .btn { display: inline-block; cursor: pointer; font: inherit; font-family: var(--font-chrome); font-size: .88rem; padding: .5rem .9rem; border-radius: var(--radius); border: 1px solid var(--border-bright); background: var(--bg-elev2); color: var(--text); transition: .12s; } .btn:hover { border-color: var(--accent-dim); color: var(--accent); text-decoration: none; } .btn.primary { background: var(--btn-primary); border: 0; color: var(--btn-fg); font-weight: 700; padding: calc(.5rem + 1px) calc(.9rem + 1px); } .btn.primary:hover { filter: brightness(1.06); box-shadow: 0 0 18px -4px var(--accent); color: var(--btn-fg); } .btn.danger { color: var(--down); border-color: color-mix(in srgb, var(--down) 45%, transparent); background: transparent; } .btn.danger:hover { background: var(--down-bg); color: var(--down); } .actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } .small-btn { padding: .3rem .6rem; font-size: .8rem; } /* pills */ .pill { display: inline-block; padding: .1rem .5rem; border-radius: var(--pill-radius); font-family: var(--font-data); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; border: var(--pill-border) solid currentColor; } .pill.up { color: var(--up); background: var(--up-bg); } .pill.down { color: var(--down); background: var(--down-bg); } .pill.pending { color: var(--pending); background: var(--pending-bg); } .pill.paused, .pill.unknown { color: var(--paused); background: var(--paused-bg); } .pill.resolved { color: var(--up); background: var(--up-bg); } /* tables */ table.grid { width: 100%; border-collapse: collapse; font-size: .9rem; } table.grid th { text-align: left; color: var(--muted); font-weight: 500; font-size: .74rem; font-family: var(--font-chrome); text-transform: uppercase; letter-spacing: .5px; padding: .5rem .6rem; border-bottom: 1px solid var(--border); } table.grid th.num { text-align: right; } table.grid td { padding: .55rem .6rem; border-bottom: 1px solid var(--border); } table.grid tr:hover td { background: var(--bg-elev); } .trunc { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* cards */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin: 1rem 0; } .card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1rem; box-shadow: var(--card-shadow); } .card-label { color: var(--muted); font-size: .74rem; font-family: var(--font-chrome); text-transform: uppercase; letter-spacing: .5px; } .card-value { font-family: var(--font-data); font-size: 1.6rem; font-weight: 600; margin-top: .2rem; color: var(--accent); text-shadow: var(--accent-glow); } /* empty state */ .empty { text-align: center; padding: 3rem 1rem; background: var(--bg-elev); border: 1px dashed var(--border-bright); border-radius: var(--radius); } .empty p { color: var(--muted); margin-bottom: 1rem; font-family: var(--font-chrome); } /* sparkline */ .spark-wrap { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem; } .spark { width: 100%; height: 120px; display: block; } .sparkline { stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; filter: var(--spark-glow); } .seg-up { fill: var(--up); } .seg-down { fill: var(--down); } /* uptime history bars — the status-page daily strip, shared with the app. bar-partial maps to the pending/warning colour so the strip stays themed. */ .bars { display: flex; gap: 2px; height: 34px; align-items: stretch; } .bar { flex: 1; border-radius: 1px; min-width: 2px; background: var(--bar-none); } .bar-up { background: var(--up); } .bar-partial { background: var(--pending); } .bar-down { background: var(--down); } .bar-none { background: var(--bar-none); } .bars-legend { display: flex; justify-content: space-between; color: var(--muted); font-size: .72rem; margin-top: .35rem; font-family: var(--font-chrome); } /* compact variant for dashboard rows */ .bars.compact { height: 18px; gap: 1px; width: 130px; } .bars.compact .bar { min-width: 1px; } td .bars.compact { margin: 0; } /* auth */ .auth-card { text-align: left; } .auth-title { text-align: center; margin-bottom: .25rem; font-family: var(--font-chrome); } .stack { display: flex; flex-direction: column; gap: .9rem; margin: 1.5rem 0; } .stack label, .form label { display: flex; flex-direction: column; gap: .3rem; font-size: .82rem; font-family: var(--font-chrome); color: var(--muted); } input, select, textarea { font: inherit; font-family: var(--font-chrome); color: var(--text); background: var(--bg-elev2); border: 1px solid var(--border-bright); border-radius: var(--radius); padding: .55rem .65rem; width: 100%; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } textarea { resize: vertical; } /* forms */ .form { display: flex; flex-direction: column; gap: 1rem; max-width: 720px; } .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; } .hint { font-size: .8rem; margin: -.4rem 0 0; font-family: var(--font-chrome); } .advanced { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem 1rem; } .advanced summary { cursor: pointer; color: var(--muted); font-family: var(--font-chrome); } .advanced > .form-row, .advanced > label { margin-top: .9rem; } /* checkbox lists */ fieldset.checks { border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem 1rem; } fieldset.checks legend { color: var(--muted); font-size: .82rem; font-family: var(--font-chrome); padding: 0 .4rem; } .check { flex-direction: row !important; align-items: center; gap: .5rem; color: var(--text) !important; padding: .25rem 0; cursor: pointer; } .check input { width: auto; } /* theme picker cards */ .theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; } .theme-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .theme-card.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .theme-prev { padding: 1.1rem; } .theme-prev .pv-brand { font-weight: 800; font-size: 1.05rem; } .theme-prev .pv-swatches { display: flex; gap: 6px; margin: .8rem 0; } .theme-prev .pv-sw { width: 26px; height: 26px; border-radius: 6px; border: 1px solid rgba(255,255,255,.08); } .theme-prev .pv-bar { display: flex; gap: 2px; height: 16px; margin-top: .3rem; } .theme-prev .pv-bar span { flex: 1; border-radius: 2px; } .theme-meta { padding: .9rem 1.1rem; border-top: 1px solid var(--border); display: flex; align-items: center; gap: .6rem; } .theme-meta .name { font-family: var(--font-chrome); font-weight: 700; text-transform: capitalize; } /* ---- account menu (top-bar layout) ---- */ /* A pure CSS
dropdown so the top bar carries only primary nav; all settings/account links collapse behind the org name. */ .acctmenu { position: relative; } .acctmenu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; padding: .28rem .6rem; border-radius: 6px; border: 1px solid var(--border); color: var(--muted); font-family: var(--font-chrome); } .acctmenu > summary::-webkit-details-marker { display: none; } .acctmenu > summary .org { color: inherit; } .acctmenu > summary:hover, .acctmenu[open] > summary { color: var(--text); border-color: var(--border-bright); } .acctmenu .caret { font-size: .7rem; transition: transform .12s; } .acctmenu[open] .caret { transform: rotate(180deg); } .acctmenu-pop { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 40; min-width: 190px; display: flex; flex-direction: column; gap: .05rem; padding: .4rem; background: var(--bg-elev); border: 1px solid var(--border-bright); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.4); } .acctmenu-pop a, .acctmenu-signout { display: block; text-align: left; padding: .4rem .55rem; border-radius: 5px; color: var(--muted); font-size: .85rem; font-family: var(--font-chrome); } .acctmenu-pop a:hover, .acctmenu-signout:hover { color: var(--text); background: var(--bg-elev2); text-decoration: none; } .acctmenu-pop a.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); } .acctmenu-pop a.admin-link { color: #ff6a6a !important; border: 0; padding: .4rem .55rem; } .acctmenu-sep { height: 1px; background: var(--border); margin: .3rem 0; } .acctmenu-signout { width: 100%; } /* ---- sidebar layout ---- */ .shell { display: flex; align-items: stretch; min-height: 100vh; } .sidebar { flex: none; width: 220px; box-sizing: border-box; display: flex; flex-direction: column; gap: 1.1rem; padding: 1.1rem .9rem; border-right: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 85%, transparent); position: sticky; top: 0; height: 100vh; } .sidebar .brand { padding: 0 .3rem; } .side-nav { display: flex; flex-direction: column; gap: .1rem; } .side-nav a { display: flex; align-items: center; gap: 0; color: var(--muted); padding: .42rem .55rem; border-radius: 6px; font-size: .88rem; font-family: var(--font-chrome); } .side-nav a:hover { color: var(--text); background: var(--bg-elev); text-decoration: none; } .side-nav a.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); box-shadow: inset 2px 0 0 var(--accent); } .side-nav a.admin-link { color: #ff6a6a !important; border: 0; padding: .42rem .55rem; } .side-nav a.admin-link.active { box-shadow: inset 2px 0 0 #ff6a6a; } /* nav icons — line glyphs that inherit the link colour, shown in both layouts */ .nav-ico { width: 15px; height: 15px; flex: none; margin-right: .55rem; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .topbar nav a { display: inline-flex; align-items: center; } /* live fleet status in the sidebar foot */ .side-status { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; font-family: var(--font-data); font-size: .72rem; color: var(--muted); } .side-status .dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 6px var(--up); flex: none; } .side-status .ss-up { color: var(--up); } .side-status .ss-down { color: var(--down); } .side-status .ss-paused { color: var(--muted); } .side-group { display: flex; flex-direction: column; gap: .35rem; } .side-label { margin: 0; padding: 0 .55rem; color: var(--muted); font-size: .66rem; text-transform: uppercase; letter-spacing: 1px; font-family: var(--font-chrome); opacity: .7; } .side-foot { margin-top: auto; display: flex; flex-direction: column; gap: .5rem; padding-top: .8rem; border-top: 1px solid var(--border); } .shell-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* ---- table density (per-user) ---- */ .density-compact table.grid { font-size: .84rem; } .density-compact table.grid th { padding: .32rem .55rem; } .density-compact table.grid td { padding: .3rem .55rem; } /* ---- preferences page ---- */ .pref-block { margin-bottom: 1.75rem; } .pref-choice { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .9rem; } .pref-card { position: relative; display: flex; flex-direction: column; gap: .3rem; cursor: pointer; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); } .pref-card:hover { border-color: var(--border-bright); } .pref-card.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .pref-card input { position: absolute; opacity: 0; width: 0; height: 0; } .pref-card-name { font-family: var(--font-chrome); font-weight: 700; } .pref-card-desc { color: var(--muted); font-size: .82rem; } .pref-card-fig { display: block; margin-bottom: .3rem; } .fig-topbar, .fig-sidebar { display: block; width: 100%; height: 34px; border: 1px solid var(--border-bright); border-radius: 4px; position: relative; overflow: hidden; } .fig-topbar::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 9px; background: var(--accent); opacity: .55; } .fig-sidebar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 26px; background: var(--accent); opacity: .55; } .pref-cols { display: flex; flex-wrap: wrap; gap: .6rem .9rem; margin-top: .8rem; } .pref-check { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; font-size: .88rem; padding: .4rem .7rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); } .pref-check input { accent-color: var(--accent); } .pref-actions { margin-top: 1rem; } /* ---- analytics console ---- */ /* window selector (24h / 7d / 30d) */ .win-select { display: inline-flex; gap: .2rem; border: 1px solid var(--border); border-radius: var(--radius); padding: .2rem; } .win-select a { color: var(--muted); padding: .25rem .6rem; border-radius: 4px; font-family: var(--font-chrome); font-size: .82rem; } .win-select a:hover { color: var(--text); text-decoration: none; } .win-select a.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); } /* live visitor panel */ .live-panel { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; margin: 1rem 0 1.5rem; } .live-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; } .live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--up); align-self: center; box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 70%, transparent); animation: livepulse 1.8s infinite; } .live-dot.stale { background: var(--paused); animation: none; box-shadow: none; } @keyframes livepulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .live-now { font-family: var(--font-data); font-size: 2.1rem; font-weight: 700; color: var(--accent); text-shadow: var(--accent-glow); line-height: 1; } .live-label { font-family: var(--font-chrome); font-size: .9rem; } .live-split { margin-left: auto; font-family: var(--font-chrome); font-size: .82rem; } .live-grid { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 1.2rem; margin-top: 1rem; } .live-col .card-label { margin-bottom: .4rem; } .live-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; } .live-list li { display: flex; justify-content: space-between; gap: .6rem; padding: .18rem 0; font-size: .84rem; font-family: var(--font-chrome); } .ll-label { color: var(--text); min-width: 0; } .ll-count { color: var(--accent); font-family: var(--font-data); font-variant-numeric: tabular-nums; } .live-feed { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: .15rem; } .live-feed li { display: flex; align-items: baseline; gap: .5rem; padding: .22rem 0; border-bottom: 1px solid var(--border); font-size: .82rem; } .live-feed li:last-child { border-bottom: 0; } .feed-surface { flex: none; font-family: var(--font-chrome); font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: .05rem .35rem; border-radius: 4px; border: 1px solid currentColor; } .feed-surface.app { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .feed-surface.public { color: var(--pending); background: var(--pending-bg); } .feed-path { font-family: var(--font-data); color: var(--text); } .feed-meta { flex: 1; text-align: right; font-family: var(--font-chrome); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* traffic trend chart */ .chart { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; } .chart-bars { display: flex; align-items: flex-end; gap: 3px; height: 160px; } .chart-col { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 3px; } .chart-bar { width: 100%; min-height: 2px; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, var(--accent), var(--accent-dim)); filter: var(--spark-glow); transition: opacity .12s; } .chart-col:hover .chart-bar { opacity: .75; } .chart-axis { display: flex; justify-content: space-between; margin-top: .5rem; color: var(--muted); font-family: var(--font-chrome); font-size: .74rem; } /* breakdown tables grid */ .breakdown-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem 1.4rem; margin-top: 1rem; } .breakdown .card-label { margin-bottom: .35rem; } table.grid.mini { font-size: .82rem; } table.grid.mini th { padding: .3rem .4rem; font-size: .68rem; } table.grid.mini td { padding: .3rem .4rem; } .bd-empty { padding: .5rem .1rem; } /* ===== command center dashboard ===== */ .cc-banner { display: flex; align-items: center; gap: .55rem; font-family: var(--font-chrome); font-size: .82rem; padding: .45rem .85rem; border-radius: var(--radius); } .cc-banner .dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; } .cc-banner.ok { color: var(--up); background: var(--up-bg); border: 1px solid color-mix(in srgb, var(--up) 35%, transparent); } .cc-banner.degraded { color: var(--pending); background: var(--pending-bg); border: 1px solid color-mix(in srgb, var(--pending) 35%, transparent); } .cc-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; margin: 0 0 1.1rem; } .cc-strip .stat { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .8rem; box-shadow: var(--card-shadow); } .cc-strip .stat.alert { border-color: color-mix(in srgb, var(--down) 40%, transparent); } .stat-lbl { color: var(--muted); font-family: var(--font-chrome); font-size: .66rem; text-transform: uppercase; letter-spacing: .5px; } .stat-val { font-family: var(--font-data); font-size: 1.5rem; font-weight: 700; margin-top: .1rem; } .stat-val.up { color: var(--up); text-shadow: var(--accent-glow); } .stat-val.down { color: var(--down); } .stat-val.muted { color: var(--muted); } .cc-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1rem; align-items: start; } .cc-col { display: flex; flex-direction: column; gap: 1rem; } .panel { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--card-shadow); } .panel > h2 { font-family: var(--font-chrome); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; margin: 0; padding: .55rem .9rem; border-bottom: 1px solid var(--border); color: var(--muted); } .panel > h2::before { content: none; } .panel > h2.crit { color: var(--down); } .panel > h2.warn { color: var(--pending); } .panel > h2 .cnt { float: right; color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; } .panel-empty { margin: 0; padding: .8rem .9rem; font-size: .85rem; } .inc { display: flex; align-items: center; gap: .7rem; padding: .6rem .9rem; border-top: 1px solid var(--bg-elev2); } .inc:first-of-type { border-top: 0; } .inc.live { background: color-mix(in srgb, var(--down) 5%, transparent); } .inc .sig { width: 8px; height: 8px; border-radius: 50%; flex: none; } .inc .sig.down { background: var(--down); box-shadow: 0 0 8px var(--down); } .inc .sig.pending { background: var(--pending); } .inc-body { flex: 1; min-width: 0; } .inc-meta { font-size: .76rem; color: var(--muted); } .cc-atrisk .num.bad { color: var(--down); } .cc-atrisk .num.warnnum { color: var(--pending); } .region { display: flex; align-items: center; gap: .6rem; padding: .5rem .9rem; border-top: 1px solid var(--bg-elev2); } .region:first-of-type { border-top: 0; } .region .rdot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .region .rdot.up { background: var(--up); } .region .rdot.down { background: var(--down); } .region .rname { flex: 1; font-family: var(--font-data); } .region .rstat { color: var(--muted); font-family: var(--font-data); font-size: .8rem; } .region .rstat.bad { color: var(--down); } .rt { padding: .7rem .9rem; } .rt-spark { width: 100%; height: 40px; display: block; margin-bottom: .5rem; } .rt-nums { display: flex; justify-content: space-between; color: var(--muted); font-family: var(--font-data); font-size: .82rem; } .rt-nums b { color: var(--text); } .rt-nums b.warn { color: var(--pending); } .slow { display: flex; justify-content: space-between; padding: .35rem .9rem; border-top: 1px solid var(--bg-elev2); font-family: var(--font-data); font-size: .82rem; } .slow .ms { color: var(--pending); } .mw { display: flex; gap: .5rem; align-items: center; padding: .5rem .9rem; border-top: 1px solid var(--bg-elev2); } .mw:first-of-type { border-top: 0; } .evt { display: flex; gap: .55rem; align-items: baseline; padding: .4rem .9rem; border-top: 1px solid var(--bg-elev2); font-size: .82rem; color: var(--muted); } .evt .ed { font-size: .7rem; } .evt .ed.down { color: var(--down); } .evt .ed.up { color: var(--up); } .evt .ed.ack, .evt .ed.pending { color: var(--pending); } .evt b.down { color: var(--down); } .evt b.up { color: var(--up); } .evt b.pending { color: var(--pending); } .evt .when { margin-left: auto; font-family: var(--font-data); font-size: .74rem; } .cc-statusbar { display: flex; align-items: center; gap: 1.2rem; margin: 1.2rem 0 0; padding: .5rem 0 0; border-top: 1px solid var(--border); color: var(--muted); font-family: var(--font-data); font-size: .74rem; } .cc-statusbar .live { color: var(--accent); } .cc-statusbar .spacer { flex: 1; } /* SLA sub-strip */ .cc-substrip-label { font-family: var(--font-chrome); font-size: .68rem; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); margin: 0 0 .45rem; } .cc-strip.sla { grid-template-columns: repeat(4, 1fr); } /* plan & quota meters */ .quota { padding: .7rem .9rem; display: flex; flex-direction: column; gap: .3rem; } .q-row { display: flex; justify-content: space-between; font-size: .82rem; color: var(--muted); } .q-row .q-num { font-family: var(--font-data); color: var(--text); } .q-bar { height: 5px; border-radius: 3px; background: var(--bg-elev2); overflow: hidden; margin-bottom: .45rem; } .q-bar span { display: block; height: 100%; background: var(--accent); border-radius: 3px; } /* alert delivery */ .alertline { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; padding: .7rem .9rem; font-family: var(--font-data); font-size: .84rem; } .alertline .al-ok { color: var(--up); } .alertline .al-fail { color: var(--down); } .alertline .al-when { color: var(--muted); margin-left: auto; font-size: .78rem; } /* compact density tightens the dashboard */ body.density-compact .cc-strip { gap: .45rem; } body.density-compact .cc-strip .stat { padding: .45rem .65rem; } body.density-compact .stat-val { font-size: 1.25rem; } body.density-compact .cc-grid { gap: .7rem; } body.density-compact .cc-col { gap: .7rem; } /* ---- mobile ---- */ @media (max-width: 760px) { .live-grid { grid-template-columns: 1fr; gap: 1rem; } .live-split { margin-left: 0; width: 100%; } .cc-grid { grid-template-columns: 1fr; } .cc-strip { grid-template-columns: repeat(2, 1fr); } .feed-meta { text-align: left; white-space: normal; } .topbar { flex-wrap: wrap; gap: .5rem .7rem; padding: .55rem .9rem; } .topbar .spacer { display: none; } .topbar nav { order: 3; width: 100%; overflow-x: auto; gap: .1rem; padding-bottom: 2px; -webkit-overflow-scrolling: touch; } .topbar nav a { white-space: nowrap; } .acctmenu { margin-left: auto; } .org { margin-left: auto; } /* Sidebar collapses to a horizontal bar so it doesn't eat a phone's width. */ .shell { flex-direction: column; min-height: 0; } .sidebar { width: auto; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; border-right: 0; border-bottom: 1px solid var(--border); } .sidebar .side-group { flex-direction: row; align-items: center; gap: .4rem; } .sidebar .side-nav { flex-direction: row; flex-wrap: wrap; } .side-label { display: none; } .side-foot { margin: 0 0 0 auto; flex-direction: row; align-items: center; border-top: 0; padding-top: 0; } .pref-choice { grid-template-columns: 1fr; } .container { margin: 1.2rem auto; padding: 0 1rem; } .page-head { flex-direction: column; align-items: stretch; gap: .7rem; } .form-row { grid-template-columns: 1fr; } table.grid { font-size: .82rem; display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } table.grid th, table.grid td { padding: .5rem .5rem; } .trunc { max-width: 160px; } .cards { grid-template-columns: 1fr 1fr; } } /* ---- shared site footer (RoamGO attribution) ---- */ .sitefooter { margin-top: auto; border-top: 1px solid var(--border); padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); color: var(--muted); font-size: .82rem; } .sitefooter-inner { max-width: 1000px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; } .sitefooter a { color: var(--muted); text-decoration: none; transition: color .12s; } .sitefooter a:hover { color: var(--accent); } .sitefooter .dom { color: var(--accent); } .sitefooter-links { display: flex; gap: 1.1rem; } @media (max-width: 640px) { .sitefooter-inner { justify-content: center; text-align: center; } }