/* ========================================================================== NebulaSSH theme tokens -------------------------------------------------------------------------- Every surface, border, text and accent colour in the app resolves through one of these custom properties. The dark set on :root is the historical NebulaSSH palette, so nothing changes visually until a theme is chosen. html[data-theme="light"] swaps the same names for their light values. The active theme is persisted in the `nssh_theme` cookie and stamped onto server-side by _Layout.cshtml, so pages paint in the right theme on the very first frame (no flash). ========================================================================== */ :root, html[data-theme="dark"] { color-scheme: dark; --nx-bg: #0a0e1a; --nx-bg-2: #0f172a; --nx-input-bg: #0f1225; --nx-surface: #111827; --nx-surface-2: #1a1f35; --nx-surface-3: #1e293b; --nx-surface-4: #1b2138; --nx-elev: #232a47; --nx-term-bg: #0d0d1a; --nx-border: #2a3050; --nx-border-2: #334155; --nx-border-3: #4a5080; --nx-text: #e2e8f0; --nx-text-soft: #cbd5e1; --nx-text-2: #94a3b8; --nx-text-3: #64748b; --nx-text-4: #475569; --nx-text-hi: #ffffff; --nx-primary: #6366f1; --nx-primary-2: #4f46e5; --nx-primary-3: #5b5ef0; --nx-indigo: #818cf8; --nx-indigo-2: #a5b4fc; --nx-indigo-3: #c7d2fe; --nx-violet: #a78bfa; --nx-violet-2: #8b5cf6; --nx-violet-3: #c4b5fd; --nx-purple: #a855f7; --nx-green: #22c55e; --nx-green-2: #4ade80; --nx-emerald: #10b981; --nx-emerald-2: #34d399; --nx-red: #ef4444; --nx-red-2: #f87171; --nx-red-3: #fca5a5; --nx-red-dk: #dc2626; --nx-amber: #eab308; --nx-amber-2: #f59e0b; --nx-amber-3: #fbbf24; --nx-amber-4: #fef08a; --nx-orange: #f97316; --nx-orange-2: #fb923c; --nx-blue: #3b82f6; --nx-blue-2: #93c5fd; --nx-sky: #38bdf8; --nx-cyan: #06b6d4; --nx-cyan-2: #22d3ee; --nx-teal: #2dd4bf; --nx-teal-2: #14b8a6; --nx-pink: #ec4899; --nx-pink-2: #f472b6; --nx-primary-hover: #7c7ff5; --nx-info-bg: #1e3a5f; --nx-code-key: #dcdcaa; --nx-code-ok: #0dbc79; --nx-code-err: #f14c4c; --nx-code-type: #4ec9b0; --nx-ov-002: rgba(255,255,255,0.02); --nx-ov-003: rgba(255,255,255,0.03); --nx-ov-004: rgba(255,255,255,0.04); --nx-ov-005: rgba(255,255,255,0.05); --nx-ov-006: rgba(255,255,255,0.06); --nx-ov-007: rgba(255,255,255,0.07); --nx-ov-008: rgba(255,255,255,0.08); --nx-ov-01: rgba(255,255,255,0.1); --nx-ov-012: rgba(255,255,255,0.12); --nx-ov-015: rgba(255,255,255,0.15); --nx-ov-02: rgba(255,255,255,0.2); --nx-ov-025: rgba(255,255,255,0.25); --nx-ov-03: rgba(255,255,255,0.3); --nx-ov-04: rgba(255,255,255,0.4); --nx-ov-05: rgba(255,255,255,0.5); --nx-ov-06: rgba(255,255,255,0.6); --nx-ov-07: rgba(255,255,255,0.7); --nx-ov-08: rgba(255,255,255,0.8); --nx-ov-09: rgba(255,255,255,0.9); --nx-sh-005: rgba(0,0,0,0.05); --nx-sh-008: rgba(0,0,0,0.08); --nx-sh-01: rgba(0,0,0,0.1); --nx-sh-012: rgba(0,0,0,0.12); --nx-sh-015: rgba(0,0,0,0.15); --nx-sh-02: rgba(0,0,0,0.2); --nx-sh-025: rgba(0,0,0,0.25); --nx-sh-03: rgba(0,0,0,0.3); --nx-sh-035: rgba(0,0,0,0.35); --nx-sh-04: rgba(0,0,0,0.4); --nx-sh-045: rgba(0,0,0,0.45); --nx-sh-05: rgba(0,0,0,0.5); --nx-sh-055: rgba(0,0,0,0.55); --nx-sh-06: rgba(0,0,0,0.6); --nx-sh-065: rgba(0,0,0,0.65); --nx-sh-07: rgba(0,0,0,0.7); --nx-sh-075: rgba(0,0,0,0.75); --nx-sh-08: rgba(0,0,0,0.8); --nx-sh-085: rgba(0,0,0,0.85); --nx-sh-09: rgba(0,0,0,0.9); } html[data-theme="light"] { color-scheme: light; --nx-bg: #f2f4f9; --nx-bg-2: #e9edf5; --nx-input-bg: #ffffff; --nx-surface: #ffffff; --nx-surface-2: #ffffff; --nx-surface-3: #eef1f7; --nx-surface-4: #f4f6fb; --nx-elev: #e4e9f2; --nx-term-bg: #ffffff; --nx-border: #dce1eb; --nx-border-2: #c6cede; --nx-border-3: #aab4c8; --nx-text: #111827; --nx-text-soft: #25324a; --nx-text-2: #4b5675; --nx-text-3: #697588; --nx-text-4: #8792a6; --nx-text-hi: #0b1120; --nx-primary: #4f46e5; --nx-primary-2: #4338ca; --nx-primary-3: #4338ca; --nx-indigo: #4f46e5; --nx-indigo-2: #4338ca; --nx-indigo-3: #4338ca; --nx-violet: #7c3aed; --nx-violet-2: #7c3aed; --nx-violet-3: #6d28d9; --nx-purple: #9333ea; --nx-green: #15a34a; --nx-green-2: #15803d; --nx-emerald: #059669; --nx-emerald-2: #059669; --nx-red: #dc2626; --nx-red-2: #dc2626; --nx-red-3: #b91c1c; --nx-red-dk: #b91c1c; --nx-amber: #a16207; --nx-amber-2: #b45309; --nx-amber-3: #b45309; --nx-amber-4: #854d0e; --nx-orange: #ea580c; --nx-orange-2: #ea580c; --nx-blue: #2563eb; --nx-blue-2: #1d4ed8; --nx-sky: #0284c7; --nx-cyan: #0891b2; --nx-cyan-2: #0891b2; --nx-teal: #0d9488; --nx-teal-2: #0d9488; --nx-pink: #db2777; --nx-pink-2: #db2777; --nx-primary-hover: #4338ca; --nx-info-bg: #dbeafe; --nx-code-key: #8a7f1f; --nx-code-ok: #0a8f5c; --nx-code-err: #c62828; --nx-code-type: #0f766e; --nx-ov-002: rgba(15,23,42,0.025); --nx-ov-003: rgba(15,23,42,0.035); --nx-ov-004: rgba(15,23,42,0.04); --nx-ov-005: rgba(15,23,42,0.05); --nx-ov-006: rgba(15,23,42,0.055); --nx-ov-007: rgba(15,23,42,0.06); --nx-ov-008: rgba(15,23,42,0.065); --nx-ov-01: rgba(15,23,42,0.08); --nx-ov-012: rgba(15,23,42,0.09); --nx-ov-015: rgba(15,23,42,0.11); --nx-ov-02: rgba(15,23,42,0.16); --nx-ov-025: rgba(15,23,42,0.2); --nx-ov-03: rgba(15,23,42,0.35); --nx-ov-04: rgba(15,23,42,0.45); --nx-ov-05: rgba(15,23,42,0.55); --nx-ov-06: rgba(15,23,42,0.62); --nx-ov-07: rgba(15,23,42,0.7); --nx-ov-08: rgba(15,23,42,0.78); --nx-ov-09: rgba(15,23,42,0.86); --nx-sh-005: rgba(15,23,42,0.04); --nx-sh-008: rgba(15,23,42,0.05); --nx-sh-01: rgba(15,23,42,0.06); --nx-sh-012: rgba(15,23,42,0.06); --nx-sh-015: rgba(15,23,42,0.07); --nx-sh-02: rgba(15,23,42,0.08); --nx-sh-025: rgba(15,23,42,0.09); --nx-sh-03: rgba(15,23,42,0.1); --nx-sh-035: rgba(15,23,42,0.11); --nx-sh-04: rgba(15,23,42,0.12); --nx-sh-045: rgba(15,23,42,0.13); --nx-sh-05: rgba(15,23,42,0.28); --nx-sh-055: rgba(15,23,42,0.3); --nx-sh-06: rgba(15,23,42,0.34); --nx-sh-065: rgba(15,23,42,0.36); --nx-sh-07: rgba(15,23,42,0.4); --nx-sh-075: rgba(15,23,42,0.42); --nx-sh-08: rgba(15,23,42,0.45); --nx-sh-085: rgba(15,23,42,0.48); --nx-sh-09: rgba(15,23,42,0.5); } /* Bridge into Tabler/Bootstrap so their own components inherit the theme */ :root, html[data-theme="dark"], html[data-theme="light"] { --tblr-heading-color: var(--nx-text); --tblr-emphasis-color: var(--nx-text); --tblr-secondary-color: var(--nx-text-2); --bs-heading-color: var(--nx-text); --bs-emphasis-color: var(--nx-text); } .empty-title, .empty-header { color: var(--nx-text); } .empty-subtitle { color: var(--nx-text-2); } /* ========================================================================== Light-mode structural corrections Rules that cannot be expressed as a token swap: hard-coded white text on what is now a light surface, inverted icons, Tabler's own dark defaults. ========================================================================== */ html[data-theme="light"] body, html[data-theme="light"] html { background: var(--nx-bg) !important; background-color: var(--nx-bg) !important; color: var(--nx-text); } /* Tabler variables --------------------------------------------------------- */ html[data-theme="light"] { --tblr-body-bg: var(--nx-bg); --tblr-body-color: var(--nx-text); --tblr-border-color: var(--nx-border); } /* Utility text classes that assume a dark backdrop ------------------------- */ html[data-theme="light"] .text-white, html[data-theme="light"] .navbar-vertical .text-white, html[data-theme="light"] a.text-white { color: var(--nx-text) !important; } html[data-theme="light"] .text-white-50 { color: var(--nx-text-3) !important; } html[data-theme="light"] .text-muted { color: var(--nx-text-3) !important; } /* Bootstrap close buttons ship as a white SVG for dark UIs ------------------ */ html[data-theme="light"] .btn-close, html[data-theme="light"] .modal-header .btn-close { filter: none !important; opacity: 0.6; } html[data-theme="dark"] .btn-close { filter: invert(1) brightness(0.85); } /* Dropdowns --------------------------------------------------------------- */ html[data-theme="light"] .dropdown-menu, html[data-theme="light"] .dropdown-menu-dark { background: var(--nx-surface-2); border: 1px solid var(--nx-border); color: var(--nx-text); box-shadow: 0 8px 24px var(--nx-sh-01); } html[data-theme="light"] .dropdown-menu-dark .dropdown-item, html[data-theme="light"] .dropdown-item { color: var(--nx-text-2); } html[data-theme="light"] .dropdown-menu-dark .dropdown-item:hover, html[data-theme="light"] .dropdown-item:hover { background: var(--nx-ov-005); color: var(--nx-text); } html[data-theme="light"] .dropdown-divider { border-color: var(--nx-border) !important; } /* Form controls ----------------------------------------------------------- */ html[data-theme="light"] .form-select option { background: var(--nx-surface-2); color: var(--nx-text); } html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator, html[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator { filter: none; } /* Scrollbars -------------------------------------------------------------- */ html[data-theme="light"] * { scrollbar-color: rgba(71, 85, 105, 0.4) transparent; } html[data-theme="light"] *::-webkit-scrollbar-thumb { background-color: rgba(71, 85, 105, 0.35); } html[data-theme="light"] *::-webkit-scrollbar-thumb:hover { background-color: rgba(71, 85, 105, 0.55); } /* Terminal surface -------------------------------------------------------- */ html[data-theme="light"] .xterm .xterm-viewport, html[data-theme="light"] .terminal-body, html[data-theme="light"] .xterm-screen { background-color: var(--nx-term-bg); } html[data-theme="light"] .xterm { color: var(--nx-text); } /* Selection --------------------------------------------------------------- */ html[data-theme="light"] ::selection { background: rgba(79, 70, 229, 0.18); color: var(--nx-text); } /* ========================================================================== Theme toggle control A two-segment pill: sun = light, moon = dark. Small enough to sit in the sidebar brand row next to the help icon, and used again on the login page. ========================================================================== */ .nx-theme-toggle { display: inline-flex; align-items: center; gap: 1px; padding: 2px; border-radius: 999px; background: var(--nx-ov-006); border: 1px solid var(--nx-border); flex: 0 0 auto; line-height: 1; } .nx-theme-toggle button { appearance: none; -webkit-appearance: none; border: none; background: transparent; color: var(--nx-text-3); width: 20px; height: 18px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; cursor: pointer; padding: 0; transition: background 0.18s ease, color 0.18s ease; } .nx-theme-toggle button:hover { color: var(--nx-text); } .nx-theme-toggle button[aria-pressed="true"] { background: var(--nx-primary); color: #fff; box-shadow: 0 1px 4px rgba(99, 102, 241, 0.45); } .nx-theme-toggle button:focus-visible { outline: 2px solid var(--nx-primary); outline-offset: 1px; } /* Floating variant used on the login screen */ .nx-theme-toggle-floating { position: fixed; top: 16px; right: 16px; z-index: 1200; background: var(--nx-surface-2); box-shadow: 0 4px 16px var(--nx-sh-03); } @media (max-width: 575.98px) { .nx-theme-toggle-floating { top: 10px; right: 10px; } }