/* * Sturnus Ratings — Dark Mode * Applied when * All palette overrides are scoped to html[data-theme="dark"] * so light mode is unchanged. */ /* ===== Dark palette ===== */ html[data-theme="dark"] { --bg: #0f0f11; --bg-secondary: #1a1a1f; --fg: #e8e8ec; --card: #1e1e24; --card-fg: #e8e8ec; --primary: #e8e8ec; --primary-fg: #0f0f11; --accent: #5e6ad2; --accent-hover: #6e7ae2; --accent-fg: #ffffff; --muted: #1a1a1f; --muted-fg: #8b8b9a; --border: rgba(255,255,255,0.08); --input-border: rgba(255,255,255,0.12); --ring: #5e6ad2; color-scheme: dark; /* Shadows */ --shadow-card: 0 1px 3px 0 rgba(0,0,0,0.4), 0 1px 2px -1px rgba(0,0,0,0.3); --shadow-elevated: 0 4px 24px rgba(0,0,0,0.4); --shadow-glow: 0 0 20px rgba(94,106,210,0.2); } /* ===== Navbar ===== */ html[data-theme="dark"] .navbar, html[data-theme="dark"] .top-bar { background-color: rgba(15, 15, 17, 0.98) !important; border-bottom-color: var(--border); } html[data-theme="dark"] .mobile-nav-collapse.show { background-color: var(--card); border-top: 1px solid var(--border); } /* ===== Inputs, selects, textareas ===== */ html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html[data-theme="dark"] select, html[data-theme="dark"] textarea { background-color: var(--card) !important; color: var(--fg) !important; border-color: var(--input-border) !important; color-scheme: dark; } html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus { border-color: var(--accent) !important; outline: none; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--muted-fg); } /* ===== Shared modals in base.html (hardcoded #fff) ===== */ html[data-theme="dark"] #srModal > div, html[data-theme="dark"] #srConfirm > div { background: var(--card); color: var(--fg); box-shadow: var(--shadow-elevated); } html[data-theme="dark"] #srModalOk, html[data-theme="dark"] #srConfirmOk { background: var(--accent); border: none; } html[data-theme="dark"] #srConfirmCancel { background: var(--muted); color: var(--fg); border: 1px solid var(--border); } /* ===== Tables — override inline border:#ddd on td/th ===== */ html[data-theme="dark"] td, html[data-theme="dark"] th { border-color: var(--border) !important; color: var(--fg); } /* Stale Last Results cells have light-pink bg (#ffe0e0); force black text so it stays legible in dark mode */ html[data-theme="dark"] td.stale-quarter { color: #000000 !important; } /* Dividend Income scrollable container (inline border:1px solid #ddd on a div) */ html[data-theme="dark"] #div_detail_wrap { border-color: var(--border) !important; } html[data-theme="dark"] table tbody tr { background-color: var(--card); } html[data-theme="dark"] table tbody tr:hover { background-color: var(--muted); } html[data-theme="dark"] table thead th { background-color: var(--muted); color: var(--fg); } /* ===== Admin dashboard — hardcoded revenue card colors ===== */ html[data-theme="dark"] .revenue-cards > div { background: var(--muted) !important; border-color: var(--border) !important; } html[data-theme="dark"] .revenue-cards > div > div:first-child { color: var(--muted-fg) !important; } html[data-theme="dark"] .revenue-cards > div > div:last-child { color: var(--fg) !important; } /* Pricing grid inputs (hardcoded border #dee2e6) */ html[data-theme="dark"] .pricing-settings input { border-color: var(--input-border) !important; } html[data-theme="dark"] .pricing-settings > div { color: var(--muted-fg) !important; } /* ===== Company-details section background ===== */ html[data-theme="dark"] .company-details, html[data-theme="dark"] .dashboard, html[data-theme="dark"] section { background-color: transparent; color: var(--fg); } /* ===== Bootstrap overrides ===== */ html[data-theme="dark"] .form-select, html[data-theme="dark"] .form-control { background-color: var(--card); color: var(--fg); border-color: var(--input-border); } html[data-theme="dark"] .form-check-input { background-color: var(--card); border-color: var(--input-border); } /* ===== Dropdown menu ===== */ html[data-theme="dark"] .dropdown-menu { background-color: var(--card); border-color: var(--border); } html[data-theme="dark"] .dropdown-item { color: var(--fg); } html[data-theme="dark"] .dropdown-item:hover { background-color: var(--muted); color: var(--accent); } /* ===== Flash messages ===== */ html[data-theme="dark"] .flash-messages .error { background-color: rgba(220,38,38,0.15); border-color: rgba(220,38,38,0.3); } html[data-theme="dark"] .flash-messages .success { background-color: rgba(41,163,97,0.15); border-color: rgba(41,163,97,0.3); } /* ===== Login/register wrapper ===== */ html[data-theme="dark"] .login-wrapper { background: var(--card); border-color: var(--border); } html[data-theme="dark"] .login-wrapper .input-field input { background: var(--card); border-color: var(--input-border); color: var(--fg); } html[data-theme="dark"] .login-wrapper input:focus ~ label, html[data-theme="dark"] .login-wrapper input:valid ~ label { background: var(--card); } /* ===== Footer ===== */ html[data-theme="dark"] .footer_base { background-color: #0a0a0d; } /* ===== Scrollbars ===== */ html[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg); } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 4px; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--border); } /* ===== Toast messages ===== */ html[data-theme="dark"] .sr-toast.success { background: #1a6b3f; } html[data-theme="dark"] .sr-toast.error { background: #8b1a1a; } /* ===== AI reports section headings ===== */ html[data-theme="dark"] .ai-section-label { color: var(--primary-fg); } /* ===== Evaluation tab — Conclusion content ===== */ /* Overrides inline color styles that may be baked into stored HTML content */ html[data-theme="dark"] .eval-conclusion, html[data-theme="dark"] .eval-conclusion * { color: var(--fg) !important; } /* ===== User container (admin/users page) ===== */ html[data-theme="dark"] .user-container { background: var(--card); border-color: var(--border); } /* =========================== * Theme Toggle Switch Widget * =========================== */ .theme-toggle-wrap { display: inline-flex; align-items: center; gap: 8px; } .theme-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; } .theme-switch input { opacity: 0; width: 0; height: 0; position: absolute; } .theme-slider { position: absolute; inset: 0; background: var(--muted); border: 1px solid var(--border); border-radius: 22px; cursor: pointer; transition: background 0.2s, border-color 0.2s; } .theme-slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; background: var(--muted-fg); border-radius: 50%; transition: transform 0.2s, background 0.2s; } .theme-switch input:checked + .theme-slider { background: var(--primary); border-color: var(--accent); } .theme-switch input:checked + .theme-slider::before { transform: translateX(18px); background: var(--accent); } .theme-switch:focus-within .theme-slider { box-shadow: 0 0 0 2px rgba(94,106,210,0.3); }