/* ============================================================================ FILE: web/public/css/status.css All visual styles for the public status page. Sections: 1. Reset & CSS variables (light + dark) 2. Body, Header 3. Dark mode toggle 4. Page layout: main, heading, footer 5. System status banner 6. Region tabs (pill style) 7. Region card & feature rows 8. Status colour tokens (bg-, dot-, txt-, icon-) 9. Loading states: skeleton, spinner 10. Utility button ============================================================================ */ /* ── 1. Reset & CSS variables ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Light mode palette */ :root { --bg: #f1f5f9; --surface: #ffffff; --border: #e2e8f0; --border-soft: #f1f5f9; --text: #111827; --text-muted: #64748b; --text-faint: #94a3b8; --tab-bg: #ffffff; --tab-border: #e2e8f0; --tab-active-bg: #2563eb; --tab-active-text: #ffffff; --tab-active-border: #1d4ed8; --tab-inactive-text: #475569; --tab-inactive-hover: #f1f5f9; --toggle-bg: #e2e8f0; --toggle-knob: #ffffff; --skeleton-a: #f1f5f9; --skeleton-b: #e2e8f0; --icon-healthy: #dcfce7; --icon-degraded: #fef9c3; --icon-down: #fee2e2; --icon-unknown: #f1f5f9; } /* Dark mode overrides — applied when */ .dark { --bg: #0f172a; --surface: #1e293b; --border: #334155; --border-soft: #1e293b; --text: #f1f5f9; --text-muted: #94a3b8; --text-faint: #64748b; --tab-bg: #1e293b; --tab-border: #334155; --tab-active-bg: #3b82f6; --tab-active-text: #ffffff; --tab-active-border: #2563eb; --tab-inactive-text: #94a3b8; --tab-inactive-hover: #334155; --toggle-bg: #3b82f6; --toggle-knob: #ffffff; --skeleton-a: #1e293b; --skeleton-b: #334155; --icon-healthy: #14532d; --icon-degraded: #713f12; --icon-down: #7f1d1d; --icon-unknown: #1e293b; } /* ── 2. Body & Header ── */ body { font-family: system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; transition: background 0.2s, color 0.2s; } header { background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 32px; height: 58px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 10; gap: 12px; } .logo { font-weight: 700; font-size: 17px; letter-spacing: -0.3px; color: var(--text); display: flex; align-items: center; gap: 8px; text-decoration: none; } .logo img { height: 28px; width: 28px; border-radius: 6px; object-fit: contain; } .header-right { display: flex; align-items: center; gap: 12px; } /* ── 3. Dark mode toggle ── */ .dm-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); cursor: pointer; user-select: none; } .dm-track { position: relative; width: 40px; height: 22px; background: var(--toggle-bg); border-radius: 999px; transition: background 0.2s; flex-shrink: 0; } .dm-knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: var(--toggle-knob); border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .dark .dm-knob { transform: translateX(18px); } /* ── 4. Page layout ── */ main { max-width: 760px; margin: 0 auto; padding: 44px 16px 60px; } h1 { font-size: 27px; font-weight: 700; text-align: center; letter-spacing: -0.5px; color: var(--text); } .subtitle { text-align: center; color: var(--text-muted); margin-top: 6px; font-size: 14px; } .footer { text-align: center; color: var(--text-faint); font-size: 13px; margin-top: 32px; } /* ── 5. System status banner ── */ .banner { border-radius: 14px; padding: 22px 26px; margin: 28px 0 36px; display: flex; align-items: center; gap: 16px; color: #fff; transition: background 0.3s; } .banner-dot { width: 15px; height: 15px; border-radius: 50%; background: rgba(255,255,255,0.55); flex-shrink: 0; } .banner-title { font-size: 18px; font-weight: 700; } .banner-sub { font-size: 13px; opacity: 0.8; margin-top: 3px; } @keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.5); } 50% { box-shadow: 0 0 0 9px rgba(255,255,255,0); } } .pulse { animation: pulse 2s ease-in-out infinite; } /* ── 6. Region tabs (pill style) ── */ .tabs-wrapper { display: flex; gap: 8px; margin-bottom: 28px; flex-wrap: wrap; } .tab-btn { display: flex; align-items: center; gap: 8px; padding: 9px 20px; border-radius: 999px; border: 2px solid var(--tab-border); background: var(--tab-bg); cursor: pointer; font-size: 14px; font-weight: 600; color: var(--tab-inactive-text); white-space: nowrap; transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s; box-shadow: 0 1px 3px rgba(0,0,0,0.06); } .tab-btn:hover:not(.active) { background: var(--tab-inactive-hover); border-color: #94a3b8; transform: translateY(-1px); } .tab-btn.active { background: var(--tab-active-bg); border-color: var(--tab-active-border); color: var(--tab-active-text); box-shadow: 0 4px 12px rgba(37,99,235,0.35); transform: translateY(-1px); } /* Status dot inside each tab */ .tab-dot { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; flex-shrink: 0; transition: background 0.3s; } .tab-dot.healthy { background: #22c55e; } .tab-dot.degraded { background: #f59e0b; } .tab-dot.down { background: #ef4444; } /* White-ish dot on the active (blue) tab */ .tab-btn.active .tab-dot { background: rgba(255,255,255,0.55); } .tab-btn.active .tab-dot.healthy { background: #86efac; } .tab-btn.active .tab-dot.degraded { background: #fde68a; } .tab-btn.active .tab-dot.down { background: #fca5a5; } /* Feature count badge inside each tab */ .tab-count { background: rgba(255,255,255,0.25); border-radius: 999px; padding: 1px 7px; font-size: 11px; font-weight: 700; line-height: 16px; } .tab-btn:not(.active) .tab-count { background: var(--border); color: var(--text-muted); } /* Tab panel — only the active one is visible */ .tab-panel { display: none; } .tab-panel.active { display: block; } /* ── 7. Region card & feature rows ── */ .region-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.05); } .region-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; gap: 16px; border-bottom: 1px solid var(--border-soft); } .region-name { font-weight: 700; font-size: 16px; color: var(--text); } .region-meta { font-size: 13px; color: var(--text-faint); margin-top: 3px; } .region-pill { border-radius: 999px; padding: 5px 16px; font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; flex-shrink: 0; } .feature-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-bottom: 1px solid var(--border-soft); gap: 12px; transition: background 0.1s; } .feature-row:last-child { border-bottom: none; } .feature-row:hover { background: var(--border-soft); } .feature-left { display: flex; align-items: center; gap: 13px; } .feat-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; } .feature-name { font-weight: 600; font-size: 14px; color: var(--text); } .feature-desc { font-size: 12px; color: var(--text-faint); margin-top: 2px; } .feat-badge { display: flex; align-items: center; gap: 7px; flex-shrink: 0; } .feat-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .feat-label { font-size: 13px; font-weight: 600; white-space: nowrap; } /* ── 8. Status colour tokens ── */ .bg-healthy { background: #16a34a; } .bg-degraded { background: #d97706; } .bg-down { background: #dc2626; } .bg-unknown { background: #94a3b8; } .dot-healthy { background: #16a34a; } .dot-degraded { background: #d97706; } .dot-down { background: #dc2626; } .dot-unknown { background: #94a3b8; } .txt-healthy { color: #16a34a; } .txt-degraded { color: #d97706; } .txt-down { color: #dc2626; } .txt-unknown { color: var(--text-faint); } .icon-healthy { background: var(--icon-healthy); } .icon-degraded { background: var(--icon-degraded); } .icon-down { background: var(--icon-down); } .icon-unknown { background: var(--icon-unknown); } /* ── 9. Loading states ── */ .error-note { font-size: 12px; color: #dc2626; margin-top: 3px; } .spinner-inline { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--border); border-top-color: var(--text-faint); border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: middle; margin-right: 5px; } @keyframes spin { to { transform: rotate(360deg); } } .skeleton { background: linear-gradient(90deg, var(--skeleton-a) 25%, var(--skeleton-b) 50%, var(--skeleton-a) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 6px; height: 14px; } @keyframes shimmer { to { background-position: -200% 0; } } /* ── 10. Utility button ── */ .btn { padding: 6px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font-size: 13px; cursor: pointer; color: var(--text-muted); transition: background 0.1s; } .btn:hover { background: var(--tab-inactive-hover); }