/* ========================================================================== DMON Panel — Base Styles Reset, CSS custom properties, themes, typography ========================================================================== */ /* --- Reset --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 14px; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { line-height: 1.5; min-height: 100vh; } img, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } table { border-collapse: collapse; width: 100%; } /* --- CSS Custom Properties — Dark Theme (default) --- */ :root { /* Surface */ --bg-primary: #0d1117; --bg-secondary: #161b22; --bg-tertiary: #1c2128; --bg-elevated: #21262d; --bg-hover: #272c33; --bg-active: #2d333b; /* Borders */ --border-default: #30363d; --border-muted: #21262d; --border-subtle: #1c2128; /* Text */ --text-primary: #e6edf3; --text-secondary: #8b949e; --text-tertiary: #6e7681; --text-inverse: #ffffff; --text-link: #21ba61; /* Accent */ --accent: #21ba61; --accent-hover: #2ed474; --accent-muted: rgba(33, 186, 97, 0.15); --accent-subtle: rgba(33, 186, 97, 0.08); /* Status */ --status-up: #22c55e; --status-up-bg: rgba(34, 197, 94, 0.12); --status-down: #ef4444; --status-down-bg: rgba(239, 68, 68, 0.12); --status-stale: #f59e0b; --status-stale-bg: rgba(245, 158, 11, 0.12); --status-unknown: #6b7280; --status-unknown-bg: rgba(107, 114, 128, 0.12); /* Severity */ --severity-critical: #ef4444; --severity-critical-bg: rgba(239, 68, 68, 0.12); --severity-warning: #f59e0b; --severity-warning-bg: rgba(245, 158, 11, 0.12); --severity-info: #06b6d4; --severity-info-bg: rgba(6, 182, 212, 0.12); /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5); /* Spacing */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem; /* Radius */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; /* Layout */ --sidebar-width: 240px; --sidebar-collapsed-width: 60px; --topbar-height: 56px; /* Transitions */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; } /* --- Light Theme --- */ [data-theme="light"] { --bg-primary: #f8fafc; --bg-secondary: #ffffff; --bg-tertiary: #f1f5f9; --bg-elevated: #ffffff; --bg-hover: #f1f5f9; --bg-active: #e2e8f0; --border-default: #e2e8f0; --border-muted: #f1f5f9; --border-subtle: #f8fafc; --text-primary: #1e293b; --text-secondary: #64748b; --text-tertiary: #94a3b8; --text-inverse: #28303c; --text-link: #1a9650; --accent: #1a9650; --accent-hover: #158043; --accent-muted: rgba(33, 186, 97, 0.12); --accent-subtle: rgba(33, 186, 97, 0.06); --status-up-bg: rgba(34, 197, 94, 0.08); --status-down-bg: rgba(239, 68, 68, 0.08); --status-stale-bg: rgba(245, 158, 11, 0.08); --status-unknown-bg: rgba(107, 114, 128, 0.08); --severity-critical-bg: rgba(239, 68, 68, 0.08); --severity-warning-bg: rgba(245, 158, 11, 0.08); --severity-info-bg: rgba(6, 182, 212, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); } /* --- Typography --- */ /* Proxima Nova and Como are loaded via Adobe Typekit in the HTML */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-400.79936b18df9f.woff2") format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-500.b1c8a895f5fd.woff2") format('woff2'); } body { font-family: 'proxima-nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--text-primary); background-color: var(--bg-primary); } h1, h2, h3, h4, h5, h6 { font-family: 'proxima-nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 700; line-height: 1.25; } h1 { font-size: 1.75rem; } h2 { font-size: 1.375rem; } h3 { font-size: 1.125rem; } h4 { font-size: 1rem; } code, pre, .mono { font-family: 'IBM Plex Mono', 'Menlo', 'Consolas', monospace; } .text-sm { font-size: 0.8125rem; } .text-xs { font-size: 0.75rem; } .text-lg { font-size: 1.125rem; } .text-secondary { color: var(--text-secondary); } .text-tertiary { color: var(--text-tertiary); } .text-accent { color: var(--accent); } .text-mono { font-family: 'IBM Plex Mono', monospace; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } /* --- Utility classes --- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .gap-xs { gap: var(--spacing-xs); } .gap-sm { gap: var(--spacing-sm); } .gap-md { gap: var(--spacing-md); } .gap-lg { gap: var(--spacing-lg); } .flex-1 { flex: 1; } .flex-wrap { flex-wrap: wrap; } .flex-shrink-0 { flex-shrink: 0; } .mt-xs { margin-top: var(--spacing-xs); } .mt-sm { margin-top: var(--spacing-sm); } .mt-md { margin-top: var(--spacing-md); } .mt-lg { margin-top: var(--spacing-lg); } .mb-sm { margin-bottom: var(--spacing-sm); } .mb-md { margin-bottom: var(--spacing-md); } .mb-lg { margin-bottom: var(--spacing-lg); } /* htmx loading indicator */ .htmx-indicator { display: none; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; } /* Spinner */ @keyframes spin { to { transform: rotate(360deg); } } .spinner { width: 16px; height: 16px; border: 2px solid var(--border-default); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.6s linear infinite; } .spinner-sm { width: 12px; height: 12px; } /* Pulse animation for live status dots */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .animate-pulse { animation: pulse 2s ease-in-out infinite; }