/* ============================================================ Dark Theme — Warm Neutral Dark Applied when is set Design principles: - Surfaces are warm neutral grays (Apple macOS dark) — no blue cast - Three-level depth: #1c1c1e → #252529 → #2e2e32 - All borders unified as rgba(white, 0.08) — no colored borders - Text hierarchy: #f5f5f7 → #e5e5e7 → #8e8e96 - Links use desaturated blue #7b9ed9 — recognizable, not harsh - Primary is near-white #dcdce0 — works for buttons/active on dark bg ============================================================ */ :root.theme-cosmos-dark { color-scheme: dark; /* ── Base ───────────────────────────────────────────────── */ --bs-body-bg: #1c1c1e; --bs-body-bg-rgb: 28, 28, 30; --bs-body-color: #e5e5e7; --bs-body-color-rgb: 229, 229, 231; --bs-border-color: rgba(255, 255, 255, 0.08); /* ── Bootstrap system ───────────────────────────────────── */ --bs-secondary-bg: #252529; --bs-tertiary-bg: #2e2e32; --bs-heading-color: #f5f5f7; --bs-secondary-color: rgba(229, 229, 231, 0.55); --bs-tertiary-color: rgba(229, 229, 231, 0.38); --bs-emphasis-color: #ffffff; --bs-border-color-translucent: rgba(255, 255, 255, 0.05); /* ── Links — neutral light, monochrome ──────────────────── */ --bs-link-color: #d6d6db; --bs-link-hover-color: #f5f5f7; --bs-link-color-rgb: 214, 214, 219; /* ── Primary — light value for dark bg ──────────────────── */ --bs-primary: #dcdce0; --bs-primary-rgb: 220, 220, 224; --bs-primary-text-emphasis: #f5f5f7; --bs-primary-bg-subtle: rgba(220, 220, 224, 0.08); --bs-primary-border-subtle: rgba(220, 220, 224, 0.18); --accent-color: #dcdce0; /* ── Form validation ────────────────────────────────────── */ --bs-form-valid-color: #4ade80; --bs-form-valid-border-color: #4ade80; --bs-form-invalid-color: #f87171; --bs-form-invalid-border-color: #f87171; /* ── Row / grid ─────────────────────────────────────────── */ --s-group-row-bg: rgba(255, 255, 255, 0.02); --s-alt-row-bg: rgba(255, 255, 255, 0.015); --s-row-bg-hover: rgba(255, 255, 255, 0.05); /* ── Cards ──────────────────────────────────────────────── */ --s-card-solid-bg: #252529; --s-card-bg: #252529; --s-card-border: rgba(255, 255, 255, 0.08); --s-card-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.2); --s-card-title: #f5f5f7; --s-bright-rgb: 245, 245, 247; /* ── Category ───────────────────────────────────────────── */ --s-category-title: #8e8e96; --s-category-divider: rgba(255, 255, 255, 0.06); --s-category-border: rgba(255, 255, 255, 0.10); /* ── Column headers ─────────────────────────────────────── */ --s-column-header: #8e8e96; --s-column-header-hover-bg: rgba(255, 255, 255, 0.04); --s-column-header-border: rgba(255, 255, 255, 0.08); --s-column-footer: #c4c4cc; /* ── State ──────────────────────────────────────────────── */ --s-deleted: #6b6b72; --s-disabled: #52525a; --s-inactive: #6b6b72; /* ── Inputs ─────────────────────────────────────────────── */ --s-input-bg: #252529; --s-input-text: #f5f5f7; --s-input-clear: #f87171; --s-input-dirty-bg: #2e2420; --s-input-outline: rgba(255, 255, 255, 0.18); --s-input-outline-error: rgba(248, 113, 113, 0.35); --s-input-readonly-bg: #1c1c1e; /* ── UI elements ────────────────────────────────────────── */ --s-no-results: #8e8e96; --s-modal-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 4px 16px rgba(0,0,0,0.4); --s-pager-icon: #8e8e96; --s-pager-text: #8e8e96; --s-placeholder: #5a5a62; /* ── Scrollbar ──────────────────────────────────────────── */ --s-scroll-thumb: rgba(255, 255, 255, 0.12); --s-scroll-thumb-hover: rgba(255, 255, 255, 0.22); --s-scroll-track: transparent; /* ── Sidebar ────────────────────────────────────────────── */ --s-sidebar-bg: rgba(28, 28, 30, 0.97); --s-sidebar-band-bg: rgba(28, 28, 30, 0.97); --s-sidebar-band-link: rgba(229, 229, 231, 0.45); --s-sidebar-band-link-active: #f5f5f7; --s-sidebar-band-title: #f5f5f7; --s-sidebar-band-title2: #f5f5f7; --s-sidebar-icon: #7b7b84; --s-sidebar-icon-active: #f5f5f7; --s-sidebar-link: #c4c4cc; --s-sidebar-link-active: #f5f5f7; /* ── Cell borders ───────────────────────────────────────── */ --s-cell-border: rgba(255, 255, 255, 0.06); --s-cell-input-border: rgba(255, 255, 255, 0.12); /* ── Sidebar active — neutral fill + near-white text ─────── */ --s-sidebar-active-bg: rgba(255, 255, 255, 0.10); --s-sidebar-active-color: #f5f5f7; /* ── Tabs ───────────────────────────────────────────────── */ --s-tabs-border: rgba(255, 255, 255, 0.08); --s-tabs-border-active: #f5f5f7; --s-tabs-text: #8e8e96; --s-tabs-text-active: #f5f5f7; /* ── Tool icons ─────────────────────────────────────────── */ --s-tool-icon: #7b7b84; /* ── Chips ──────────────────────────────────────────────── */ --s-chip-bg: rgba(255, 255, 255, 0.06); --s-chip-bg-hover: rgba(255, 255, 255, 0.10); /* ── Logo ───────────────────────────────────────────────── */ --s-site-logo-img-url: url(../../assets/images/logo/sps.png); --s-site-logo-img-filter: brightness(0) invert(1); /* ── Shadows ────────────────────────────────────────────── */ --s-shadow-xs: 0 1px 3px rgba(0,0,0,0.25); --s-shadow-sm: 0 2px 8px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.15); --s-shadow-md: 0 4px 16px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.18); --s-shadow-lg: 0 8px 32px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.25); --s-shadow-xl: 0 20px 60px rgba(0,0,0,0.70), 0 4px 16px rgba(0,0,0,0.35); } /* ── Page background ────────────────────────────────────────── */ .theme-cosmos-dark #PageBackground { position: fixed; inset: 0; z-index: -10000; display: block !important; background: #1c1c1e; } /* ── Dark mobile header ─────────────────────────────────────── */ .theme-cosmos-dark .s-mobile-header { background: rgba(28, 28, 30, 0.95); } /* ── Dark sub-menu left border — neutral, not blue */ .theme-cosmos-dark .s-sidebar-menu .s-sidebar-menu { border-left-color: rgba(255, 255, 255, 0.10); } /* ── Checkboxes / radio buttons — visible on dark bg ────────── */ .theme-cosmos-dark .form-check-input { background-color: #2e2e32; border-color: rgba(255, 255, 255, 0.28); } .theme-cosmos-dark .form-check-input:checked, .theme-cosmos-dark input[type=checkbox]:checked, .theme-cosmos-dark input[type=radio]:checked, .theme-cosmos-dark .check-box.checked { background-color: #3a3a3f; border-color: rgba(255, 255, 255, 0.45); filter: invert(1); } .theme-cosmos-dark .form-check-input:focus { border-color: rgba(255, 255, 255, 0.45); box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.08); }