/* ================================================================ Femto Scientific — Theme System (dark / light mode) Scope: portal and admin surfaces only (not public store pages) Mechanism: data-theme="dark" | "light" on ================================================================ */ /* ── Theme toggle icon visibility ───────────────────────────── */ /* In light mode: show moon (click = go dark) */ /* In dark mode: show sun (click = go light) */ .icon-sun { display: none; } [data-theme="dark"] .icon-moon { display: none; } [data-theme="dark"] .icon-sun { display: inline-block; } /* ── Theme toggle button (portal topbar) ────────────────────── */ .theme-toggle-btn { border: none; background: transparent; cursor: pointer; padding: 0; font-size: 15px; line-height: 1; } .icon-btn.theme-toggle-btn { color: #555D67; } [data-theme="dark"] .icon-btn.theme-toggle-btn { color: #A0A8B4; } /* ================================================================ PORTAL / ADMIN DARK MODE CSS variable overrides — the bulk of components recolor for free ================================================================ */ [data-theme="dark"] { --bg: #0D0F12; --surface: #161920; --text: #E2E5EA; --muted: #8B92A0; --muted-2: #5A6270; --line: #252930; --line-strong: #2F333C; --red-soft: #2D0B12; --green-soft: #082215; --amber-soft: #221403; --blue-soft: #0C1A33; --purple-soft: #160F26; --shadow-sm: 0 6px 18px rgba(0,0,0,.35); --shadow: 0 18px 48px rgba(0,0,0,.55); /* ink/ink-2 used for headings — lighten them */ --ink: #E2E5EA; --ink-2: #C8CDD6; } /* ── Topbar ─────────────────────────────────────────────────── */ [data-theme="dark"] .topbar { background: rgba(22,25,32,.95); } [data-theme="dark"] .org-switcher { background: var(--surface); } [data-theme="dark"] .mobile-menu { background: rgba(255,255,255,.07); } [data-theme="dark"] .global-search { background: var(--surface); } [data-theme="dark"] .icon-btn { background: var(--surface); color: #A0A8B4; } [data-theme="dark"] .icon-btn .indicator { border-color: var(--surface); } /* ── Client sidebar nav (not admin — admin stays dark always) ── */ [data-theme="dark"] .sidebar:not(.admin) { background: var(--surface); } [data-theme="dark"] .sidebar:not(.admin) .nav-item { color: #8B92A0; } [data-theme="dark"] .sidebar:not(.admin) .nav-item:hover { color: var(--text); background: rgba(255,255,255,.06); } [data-theme="dark"] .sidebar:not(.admin) .nav-sub-item { color: #6A7180; } [data-theme="dark"] .sidebar:not(.admin) .nav-sub-item:hover { color: var(--text); background: rgba(255,255,255,.06); } [data-theme="dark"] .sidebar:not(.admin) .nav-item .nav-count { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.06); } [data-theme="dark"] .sidebar:not(.admin) .sidebar-help { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); } [data-theme="dark"] .sidebar:not(.admin) .sidebar-help strong { color: var(--text); } [data-theme="dark"] .sidebar:not(.admin) .sidebar-help p { color: var(--muted); } [data-theme="dark"] .sidebar:not(.admin) .brand-area { border-bottom-color: var(--line); } [data-theme="dark"] .sidebar:not(.admin) .workspace-tag { color: var(--muted-2); } [data-theme="dark"] .sidebar:not(.admin) .user-copy strong { color: var(--text); } [data-theme="dark"] .sidebar:not(.admin) .user-copy span { color: var(--muted); } [data-theme="dark"] .sidebar:not(.admin) .sidebar-user { border-top-color: var(--line); } /* ── Buttons ─────────────────────────────────────────────────── */ [data-theme="dark"] .btn-secondary, [data-theme="dark"] .app-shell .btn-secondary { background: var(--surface); color: var(--text); } [data-theme="dark"] .btn-quiet { background: rgba(255,255,255,.08); color: var(--muted); } [data-theme="dark"] .portal-btn--outline { background: var(--surface); } /* ── Filter / toolbar controls ──────────────────────────────── */ [data-theme="dark"] .filter-control { background: var(--surface); color: var(--muted); } /* ── Tables ─────────────────────────────────────────────────── */ [data-theme="dark"] .app-shell th { background: var(--surface); color: var(--muted-2); } [data-theme="dark"] .app-shell td { color: var(--text); } [data-theme="dark"] .portal-table thead tr, [data-theme="dark"] .asset-table thead tr { background: var(--surface); } [data-theme="dark"] .portal-table tbody tr:hover, [data-theme="dark"] .asset-table tbody tr:hover { background: rgba(255,255,255,.03); } [data-theme="dark"] .portal-table tbody tr, [data-theme="dark"] .asset-table tbody tr { border-bottom-color: var(--line); } /* ── Forms ───────────────────────────────────────────────────── */ [data-theme="dark"] .portal-field input.form-control, [data-theme="dark"] .portal-field .form-control, [data-theme="dark"] .portal-field textarea.form-control { background: var(--surface); color: var(--text); border-color: var(--line-strong); } [data-theme="dark"] .portal-field input.form-control:disabled, [data-theme="dark"] .portal-field .form-control:disabled { background: rgba(255,255,255,.04); color: var(--muted); } /* ── Sections / cards ───────────────────────────────────────── */ [data-theme="dark"] .portal-section__header { background: rgba(255,255,255,.03); } [data-theme="dark"] .quick-action { background: var(--surface); } [data-theme="dark"] .pipeline-stage { background: rgba(255,255,255,.03); } [data-theme="dark"] .asset-icon { background: rgba(255,255,255,.05); } [data-theme="dark"] .page-controls button { background: var(--surface); color: var(--muted); } [data-theme="dark"] .schedule-board > :nth-child(-n+6) { background: rgba(255,255,255,.03); } /* ── Notification dropdown ─────────────────────────────────── */ [data-theme="dark"] .notif-dropdown { background: var(--surface); border-color: var(--line); } [data-theme="dark"] .notif-dropdown__header { border-bottom-color: var(--line); } [data-theme="dark"] .notif-dropdown__header-title { color: var(--text); } [data-theme="dark"] .notif-item { color: var(--muted); border-bottom-color: var(--line); } [data-theme="dark"] .notif-item:hover { background: rgba(255,255,255,.04); } [data-theme="dark"] .notif-item--unread { background: rgba(227,24,55,.06); } [data-theme="dark"] .notif-item__title { color: var(--text); } [data-theme="dark"] .notif-item__body { color: var(--muted); } [data-theme="dark"] .notif-item__time { color: var(--muted-2); } [data-theme="dark"] .notif-dropdown__footer { border-top-color: var(--line); } [data-theme="dark"] .notif-empty { color: var(--muted); } /* ── Toast notifications ─────────────────────────────────────── */ [data-theme="dark"] .toast-notify { background: rgba(22,25,32,.97); border-color: var(--line); } /* ── Role note banner ────────────────────────────────────────── */ [data-theme="dark"] .role-note { background: rgba(47,103,199,.1); border-color: rgba(47,103,199,.2); color: #A8BDE8; } [data-theme="dark"] .role-note strong { color: #C5D5F5; } [data-theme="dark"] .topbar .env-tag { background: rgba(58,125,231,.18); border-color: rgba(58,125,231,.4); color: #BFD9FF; } /* ── Progress bars ──────────────────────────────────────────── */ [data-theme="dark"] .progress { background: rgba(255,255,255,.1); } /* ── Score ring ─────────────────────────────────────────────── */ [data-theme="dark"] .score-ring { background: conic-gradient(var(--red) 0 var(--score), #252930 var(--score) 100%); } [data-theme="dark"] .score-ring::before { background: var(--bg); } /* ── Bar chart empty bars ───────────────────────────────────── */ [data-theme="dark"] .bar { background: rgba(255,255,255,.12); } /* ── Chart grid lines ──────────────────────────────────────── */ [data-theme="dark"] .chart-axis { stroke: #252930; } [data-theme="dark"] .chart-line-secondary { stroke: #4A505A; } [data-theme="dark"] .chart-legend .gray i { background: #4A505A; } /* ── Gray status pill ──────────────────────────────────────── */ [data-theme="dark"] .status.gray { background: rgba(255,255,255,.08); color: #8B92A0; } /* ── Timeline track grid lines ──────────────────────────────── */ [data-theme="dark"] .timeline-track { background-image: linear-gradient(to right, transparent calc(12.5% - 1px), #252930 calc(12.5% - 1px), #252930 12.5%, transparent 12.5%); } /* ── Bootstrap overrides (within app-shell) ─────────────────── */ [data-theme="dark"] .app-shell .form-control, [data-theme="dark"] .app-shell .form-select { background-color: var(--surface); color: var(--text); border-color: var(--line-strong); } [data-theme="dark"] .app-shell .form-control::placeholder { color: var(--muted-2); } [data-theme="dark"] .app-shell .modal-content, [data-theme="dark"] .app-shell .legacy-modal-content { background: var(--surface); color: var(--text); border-color: var(--line); } [data-theme="dark"] .app-shell .modal-header, [data-theme="dark"] .app-shell .modal-footer { border-color: var(--line); } [data-theme="dark"] .app-shell .dropdown-menu { background: var(--surface); border-color: var(--line); } [data-theme="dark"] .app-shell .dropdown-item { color: var(--text); } [data-theme="dark"] .app-shell .dropdown-item:hover { background: rgba(255,255,255,.06); color: var(--text); } [data-theme="dark"] .app-shell .table { color: var(--text); border-color: var(--line); } /* ── Internal Calendar Platform (calendar.css) ───────────────── Most calendar colors alias the shared tokens above and recolor automatically; only the calendar-local alpha tints need explicit dark values. .cal-toast intentionally stays a dark chip in both themes (snackbar convention). */ [data-theme="dark"] { --cal-today-bg: rgba(227,24,55, 0.14); --cal-hover-bg: rgba(255,255,255, 0.06); --cal-invalid-bg: rgba(227,24,55, 0.16); } [data-theme="dark"] .cal-loading-overlay { background: rgba(0,0,0,0.55); } [data-theme="dark"] .cal-event:hover, [data-theme="dark"] .cal-event--timed:hover { filter: brightness(1.12); }