/* * ARTEMIS user dashboard — theme system. * * Two palettes: dark (default) + light. Switched via [data-theme] on : * → dark palette (default if no attribute) * → light palette * * 'system' is resolved client-side by theme.js (reads prefers-color-scheme * and sets data-theme accordingly). * * This file MUST be loaded AFTER dash.css/app.css so its variables win. * It also overrides legacy hardcoded color fragments by name. */ :root, :root[data-theme="dark"] { --primary: #c7172b; --primary-dark: #9c0f1f; --primary-fg: #ffffff; --bg: #0f0f1a; --bg-card: #1a1a2e; --bg-card-alt: #232342; --bg-input: #232342; --bg-hover: #2a2a44; --text: #f0f0f5; --text-muted: #a5a5b8; --text-mute: #6a6a85; --border: #2c2c4a; --border-strong: #3d3d63; --paywall-bg: #2a1d12; --paywall-border: #92400e; --paywall-fg: #fed7aa; --paywall-heading: #fb923c; --info-bg: #0c2942; --info-fg: #93c5fd; --success-bg: #0d2f23; --success-fg: #6ee7b7; --warn-bg: #2a1d12; --warn-fg: #fdba74; --error-bg: #3a0d15; --error-fg: #fca5a5; --shadow: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-strong: 0 8px 24px rgba(0, 0, 0, 0.6); } :root[data-theme="light"] { --primary: #c7172b; --primary-dark: #9c0f1f; --primary-fg: #ffffff; --bg: #f8fafc; --bg-card: #ffffff; --bg-card-alt: #f1f5f9; --bg-input: #ffffff; --bg-hover: #f1f5f9; --text: #0f172a; --text-muted: #64748b; --text-mute: #94a3b8; --border: #e2e8f0; --border-strong: #cbd5e1; --paywall-bg: #fff7ed; --paywall-border: #fdba74; --paywall-fg: #7c2d12; --paywall-heading: #9a3412; --info-bg: #dbeafe; --info-fg: #1e40af; --success-bg: #d1fae5; --success-fg: #047857; --warn-bg: #fef3c7; --warn-fg: #92400e; --error-bg: #fee2e2; --error-fg: #991b1b; --shadow: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-strong: 0 8px 24px rgba(0, 0, 0, 0.12); } /* Smooth transition between themes (~150ms) — only on color-related props. */ html { color-scheme: light dark; } body, .card, .app-card, .paywall, input, select, textarea, button, a { transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } /* ─── overrides for pages that hardcoded white backgrounds ──────────────── */ .app-card { background: var(--bg-card) !important; color: var(--text) !important; border-color: var(--border) !important; } .app-card.disabled-card { background: var(--bg-card-alt) !important; } .app-card h3 { color: var(--text) !important; } .app-card p { color: var(--text) !important; } .app-card p.muted { color: var(--text-muted) !important; } .app-card a:not(.btn-primary):not(.btn-secondary) { color: var(--primary) !important; } .paywall { background: var(--paywall-bg) !important; border-color: var(--paywall-border) !important; color: var(--paywall-fg) !important; } .paywall h3 { color: var(--paywall-heading) !important; } .paywall p { color: var(--paywall-fg) !important; } .paywall p.muted { color: var(--paywall-fg) !important; opacity: 0.85; } /* signup / login / forgot-password card backgrounds */ .shell { background: var(--bg) !important; } .shell .card { background: var(--bg-card) !important; color: var(--text) !important; } .shell .card h2 { color: var(--text) !important; } .shell .card p { color: var(--text-muted) !important; } .shell .card .muted { color: var(--text-muted) !important; } .shell .card label { color: var(--text) !important; } .shell .card .hint { color: var(--text-muted) !important; } /* Inputs/selects/textareas EVERYWHERE — must follow the theme. Without this, dash.css inputs render with their own --bg-input default on dashboard pages (webhooks, settings, monitors, etc.) and the placeholder text becomes unreadable in light mode. */ input[type=text], input[type=email], input[type=password], input[type=tel], input[type=url], input[type=number], input[type=search], select, textarea { background: var(--bg-input) !important; color: var(--text) !important; border: 1px solid var(--border) !important; } input::placeholder, textarea::placeholder { color: var(--text-mute) !important; opacity: 1; } /* Selects need the option list themed too on light mode */ select option { background: var(--bg-card); color: var(--text); } /* token + table chrome on dashboard pages */ .token-row, .token-card { background: var(--bg-card) !important; border-color: var(--border) !important; } .token-meta { color: var(--text-muted) !important; } /* badge variants pinned to semantic colors */ .badge-soon { background: var(--warn-bg) !important; color: var(--warn-fg) !important; } /* ─── Theme toggle button ───────────────────────────────────────────────── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--text); font-size: 12px; cursor: pointer; user-select: none; } .theme-toggle:hover { background: var(--bg-hover); } .theme-toggle .icon { font-size: 14px; line-height: 1; } .theme-toggle .label { font-weight: 500; } [data-theme="light"] .theme-toggle .icon-sun { display: inline; } [data-theme="light"] .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-moon { display: inline; } /* ─── Responsive: tablet + mobile ───────────────────────────────────────── */ /* Hamburger button — only visible on mobile */ .mobile-menu-btn { display: none; position: fixed; top: 12px; left: 12px; z-index: 1001; width: 40px; height: 40px; border-radius: 6px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; box-shadow: var(--shadow); } /* Backdrop behind sidebar when open on mobile */ .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 999; } .sidebar-backdrop.open { display: block; } @media (max-width: 768px) { .mobile-menu-btn { display: flex; align-items: center; justify-content: center; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 1000; transform: translateX(-100%); transition: transform 0.25s ease; width: 240px; box-shadow: var(--shadow-strong); } .sidebar.open { transform: translateX(0); } .main { padding: 56px 16px 24px !important; } .main h2 { font-size: 22px; } /* Tables → scroll horizontally rather than overflow */ .card table { display: block; overflow-x: auto; white-space: nowrap; } .card { padding: 14px 14px !important; } } @media (max-width: 1024px) and (min-width: 769px) { .sidebar { width: 180px; padding: 18px 12px; } .main { padding: 22px 24px; } }