/* GulfGen theme for Gatus — PUBLIC page. * * Tokens are lifted from the console app's design system * (../../apps/console/src/index.css :root and .dark). Keep them in sync by hand; * this file is a copy, not an import — Gatus is a prebuilt Vue/Tailwind bundle and * `ui.custom-css` is the only styling hook it exposes. * * HOW THIS WORKS * Gatus 5.x ships shadcn-style semantic tokens (bg-background, bg-card, border, * text-muted-foreground, ...) whose values are HSL TRIPLETS consumed as * hsl(var(--token)) — so values here must be "H S% L%", with no hsl() wrapper and * no hex. Restyling those variables restyles nearly the whole UI at once. * * WHY !important * Gatus serves this file at /css/custom.css and links it BEFORE /css/app.css, so * app.css's own `:root` block would otherwise win on source order. `!important` on * a custom-property declaration beats a non-important one regardless of order or * specificity, which is the only order-proof option here. * * Dark mode is a `.dark` class on , the same convention the console uses, and * Gatus sets it from a cookie or prefers-color-scheme before first paint. */ :root { /* console --bg / --surface / --surface-2 / --surface-3 */ --background: 240 4.8% 95.9% !important; --card: 0 0% 100% !important; --popover: 0 0% 100% !important; --secondary: 0 0% 98% !important; --muted: 240 7.7% 94.9% !important; --accent: 240 7.7% 94.9% !important; /* console --text / --text-2 / --text-muted */ --foreground: 240 5.9% 10% !important; --card-foreground: 240 5.9% 10% !important; --popover-foreground: 240 5.9% 10% !important; --secondary-foreground: 240 5.2% 33.9% !important; --accent-foreground: 240 5.9% 10% !important; --muted-foreground: 240 5% 64.9% !important; /* console --border */ --border: 240 4.9% 83.9% !important; --input: 240 4.9% 83.9% !important; /* console --accent (indigo) drives primary + focus ring */ --primary: 243.7 54.5% 41.4% !important; --primary-foreground: 0 0% 100% !important; --ring: 243.7 54.5% 41.4% !important; /* console --err */ --destructive: 0 73.7% 41.8% !important; --destructive-foreground: 0 0% 100% !important; /* console --radius (4px), not Gatus's 0.5rem */ --radius: 4px !important; /* Status colors, used by the utility overrides at the bottom. */ --ggai-ok: #15803d; --ggai-ok-bg: #e7f6ec; --ggai-warn: #a16207; --ggai-warn-bg: #fdf3df; --ggai-err: #b91c1c; --ggai-err-bg: #fdeaea; } .dark { --background: 240 6.2% 6.3% !important; --card: 240 8.8% 11.2% !important; --popover: 240 8.8% 11.2% !important; --secondary: 240 8.1% 14.5% !important; --muted: 240 8.1% 14.5% !important; --accent: 240 8.7% 18% !important; --foreground: 240 4.8% 95.9% !important; --card-foreground: 240 4.8% 95.9% !important; --popover-foreground: 240 4.8% 95.9% !important; --secondary-foreground: 240 4.8% 95.9% !important; --accent-foreground: 240 4.8% 95.9% !important; --muted-foreground: 240 5% 64.9% !important; --border: 240 9.8% 20% !important; --input: 240 9.8% 20% !important; --primary: 238.7 83.5% 66.7% !important; --primary-foreground: 240 6.2% 6.3% !important; --ring: 238.7 83.5% 66.7% !important; --destructive: 0 90.6% 70.8% !important; --destructive-foreground: 240 6.2% 6.3% !important; --ggai-ok: #4ade80; --ggai-ok-bg: #052e16; --ggai-warn: #fbbf24; --ggai-warn-bg: #1c1400; --ggai-err: #f87171; --ggai-err-bg: #1f0000; } /* Typography: console's system stack, 14px base, 1.5 line-height. */ html, body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important; font-size: 14px !important; line-height: 1.5 !important; } code, pre, .font-mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace !important; } /* The status squares, uptime bars and health pills do NOT use the semantic tokens — * they are hardcoded Tailwind palette classes (bg-green-500, bg-red-500, ...). Remap * the ones that actually appear in the bundle to the console's ok/warn/err tokens, so * "healthy green" matches the product instead of Tailwind's default green. */ .bg-green-500, .bg-green-600, .bg-green-700 { background-color: var(--ggai-ok) !important; } .text-green-500, .text-green-600 { color: var(--ggai-ok) !important; } .bg-red-400, .bg-red-500, .bg-red-600, .bg-red-700 { background-color: var(--ggai-err) !important; } .text-red-400, .text-red-500, .text-red-600, .text-red-700 { color: var(--ggai-err) !important; } .bg-yellow-400, .bg-yellow-500 { background-color: var(--ggai-warn) !important; } /* Tinted callout backgrounds (error panels, badges). */ .bg-red-50, .bg-red-100, .bg-red-900, .bg-red-950 { background-color: var(--ggai-err-bg) !important; } .bg-yellow-50, .bg-yellow-900 { background-color: var(--ggai-warn-bg) !important; } /* Console uses square-ish corners (4px / 6px), Gatus defaults rounder. */ .rounded-lg { border-radius: 6px !important; } .rounded, .rounded-md { border-radius: 4px !important; }