Spaces:
Configuration error
Configuration error
| """DEX Studio UI theme and shared styles. | |
| Centralises colour palette, typography, and recurring CSS so that | |
| all pages render consistently. | |
| """ | |
| from __future__ import annotations | |
| from string import Template | |
| __all__ = [ | |
| "COLORS", | |
| "apply_global_styles", | |
| ] | |
| # -- Colour palette (dark-first, inspired by DEX brand) ------------------- | |
| COLORS = { | |
| "bg_primary": "#0f1117", | |
| "bg_secondary": "#1a1d27", | |
| "bg_card": "#1e2130", | |
| "bg_hover": "#252838", | |
| "accent": "#6366f1", # indigo-500 | |
| "accent_light": "#818cf8", # indigo-400 | |
| "accent_muted": "#4f46e5", # indigo-600 | |
| "success": "#22c55e", | |
| "warning": "#f59e0b", | |
| "error": "#ef4444", | |
| "text_primary": "#f1f5f9", | |
| "text_secondary": "#94a3b8", | |
| "text_muted": "#64748b", | |
| "border": "#2e3347", | |
| "divider": "#313652", | |
| } | |
| # -- Global CSS injected once at app startup ------------------------------ | |
| _GLOBAL_CSS = Template(""" | |
| :root { | |
| --bg-primary: $bg_primary; | |
| --bg-secondary: $bg_secondary; | |
| --bg-card: $bg_card; | |
| --accent: $accent; | |
| --accent-light: $accent_light; | |
| --success: $success; | |
| --warning: $warning; | |
| --error: $error; | |
| --text-primary: $text_primary; | |
| --text-secondary: $text_secondary; | |
| --text-muted: $text_muted; | |
| --border: $border; | |
| } | |
| body { | |
| background-color: var(--bg-primary) !important; | |
| color: var(--text-primary) !important; | |
| font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; | |
| } | |
| .nicegui-content { | |
| background-color: var(--bg-primary) !important; | |
| } | |
| /* Card styling */ | |
| .dex-card { | |
| background-color: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| padding: 1.25rem; | |
| transition: border-color 0.2s ease; | |
| } | |
| .dex-card:hover { | |
| border-color: var(--accent); | |
| } | |
| /* Status indicators */ | |
| .status-healthy { color: var(--success); } | |
| .status-degraded { color: var(--warning); } | |
| .status-unhealthy { color: var(--error); } | |
| /* Section headers */ | |
| .section-title { | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: var(--text-muted); | |
| margin-bottom: 0.5rem; | |
| } | |
| /* Sidebar */ | |
| .sidebar-nav { | |
| background-color: var(--bg-secondary); | |
| border-right: 1px solid var(--border); | |
| height: 100vh; | |
| padding: 1rem 0; | |
| } | |
| .sidebar-link { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| padding: 0.6rem 1.25rem; | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| font-size: 0.875rem; | |
| transition: all 0.15s ease; | |
| border-left: 3px solid transparent; | |
| } | |
| .sidebar-link:hover { | |
| color: var(--text-primary); | |
| background-color: var(--bg-card); | |
| } | |
| .sidebar-link.active { | |
| color: var(--accent-light); | |
| background-color: var(--bg-card); | |
| border-left-color: var(--accent); | |
| } | |
| /* Metric cards */ | |
| .metric-value { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| line-height: 1; | |
| color: var(--text-primary); | |
| } | |
| .metric-label { | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| margin-top: 0.25rem; | |
| } | |
| """).substitute(COLORS) | |
| def apply_global_styles() -> None: | |
| """Inject global CSS into the current NiceGUI page.""" | |
| from nicegui import ui | |
| ui.add_css(_GLOBAL_CSS) | |