/* * HatchwayOS Light Theme * Activated when is set. * Uses !important on custom properties to beat :root declarations. * Direct element overrides for hardcoded colors in shared-nav. */ /* ── CSS Custom Property Overrides ─────────────────────────────── */ html[data-theme="light"] { --ink: #f0f4f8 !important; --steel: #ffffff !important; --steel-light: #f8fafc !important; --slate: #cbd5e1 !important; --mist: #64748b !important; --cloud: #334155 !important; --white: #0f172a !important; /* Signal/accent colors stay the same — brand blue looks fine on light */ --signal: #184A9E !important; --signal-dim: rgba(24, 74, 158, 0.1) !important; --signal-glow: rgba(24, 74, 158, 0.2) !important; /* Ocean/green/red/purple — keep vivid, just soften dim variants */ --ocean: #0284c7 !important; --ocean-dim: rgba(2, 132, 199, 0.1) !important; --green: #059669 !important; --green-dim: rgba(5, 150, 105, 0.1) !important; --red: #dc2626 !important; --red-dim: rgba(220, 38, 38, 0.1) !important; --purple: #7c3aed !important; --purple-dim: rgba(124, 58, 237, 0.1) !important; } /* ── Main nav bar ────────────────────────────────────────────── */ html[data-theme="light"] #shared-nav { background: rgba(255, 255, 255, 0.97) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important; } html[data-theme="light"] .sn-logo { color: #0f172a !important; } html[data-theme="light"] .sn-link { color: #64748b !important; } html[data-theme="light"] .sn-link:hover { color: #0f172a !important; background: rgba(0, 0, 0, 0.05) !important; } html[data-theme="light"] .sn-link.active { color: #184A9E !important; background: rgba(24, 74, 158, 0.08) !important; } /* Notification button */ html[data-theme="light"] .sn-notif-btn { background: rgba(0, 0, 0, 0.04) !important; border-color: rgba(0, 0, 0, 0.1) !important; color: #64748b !important; } html[data-theme="light"] .sn-notif-btn:hover { background: rgba(0, 0, 0, 0.08) !important; color: #0f172a !important; } /* User button */ html[data-theme="light"] .sn-user-btn { background: rgba(0, 0, 0, 0.04) !important; border-color: rgba(0, 0, 0, 0.1) !important; color: #64748b !important; } html[data-theme="light"] .sn-user-btn:hover, html[data-theme="light"] .sn-user-btn.open { background: rgba(0, 0, 0, 0.08) !important; color: #0f172a !important; } html[data-theme="light"] .sn-chevron { color: #94a3b8 !important; } /* Notification dropdown */ html[data-theme="light"] .sn-notif-dropdown { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.1) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important; } html[data-theme="light"] .sn-notif-header { border-bottom-color: rgba(0, 0, 0, 0.07) !important; color: #0f172a !important; } html[data-theme="light"] .sn-notif-item { border-bottom-color: rgba(0, 0, 0, 0.05) !important; color: #64748b !important; } html[data-theme="light"] .sn-notif-item:hover { background: rgba(0, 0, 0, 0.03) !important; } html[data-theme="light"] .sn-notif-item.unread { color: #334155 !important; background: rgba(24, 74, 158, 0.05) !important; } html[data-theme="light"] .sn-notif-item .sn-notif-time { color: #94a3b8 !important; } html[data-theme="light"] .sn-notif-empty { color: #94a3b8 !important; } html[data-theme="light"] .sn-notif-footer { border-top-color: rgba(0, 0, 0, 0.07) !important; } /* User dropdown */ html[data-theme="light"] .sn-user-dropdown { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.1) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important; } html[data-theme="light"] .sn-dd-section-label { color: #94a3b8 !important; } html[data-theme="light"] .sn-dd-item { color: #4b5563 !important; } html[data-theme="light"] .sn-dd-item:hover { background: rgba(0, 0, 0, 0.05) !important; color: #0f172a !important; } html[data-theme="light"] .sn-dd-item.danger { color: #dc2626 !important; } html[data-theme="light"] .sn-dd-item.danger:hover { background: rgba(220, 38, 38, 0.08) !important; } html[data-theme="light"] .sn-dd-divider { background: rgba(0, 0, 0, 0.07) !important; } /* Dispatch sub-nav */ html[data-theme="light"] #sn-dispatch-sub { background: rgba(240, 244, 248, 0.97) !important; border-bottom-color: rgba(0, 0, 0, 0.07) !important; } html[data-theme="light"] .sn-sub-link { color: #64748b !important; } html[data-theme="light"] .sn-sub-link:hover { color: #0f172a !important; background: rgba(0, 0, 0, 0.05) !important; } html[data-theme="light"] .sn-sub-link.active { color: #184A9E !important; background: rgba(24, 74, 158, 0.08) !important; } /* Change password modal */ html[data-theme="light"] .sn-modal-overlay { background: rgba(0, 0, 0, 0.4) !important; } html[data-theme="light"] .sn-modal { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.1) !important; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15) !important; } html[data-theme="light"] .sn-modal h3 { color: #0f172a !important; } html[data-theme="light"] .sn-modal-field label { color: #64748b !important; } html[data-theme="light"] .sn-modal-field input { background: rgba(0, 0, 0, 0.04) !important; border-color: rgba(0, 0, 0, 0.12) !important; color: #0f172a !important; } html[data-theme="light"] .sn-modal-field input::placeholder { color: #94a3b8 !important; } html[data-theme="light"] .sn-modal-btn.secondary { background: rgba(0, 0, 0, 0.06) !important; color: #64748b !important; } html[data-theme="light"] .sn-modal-btn.secondary:hover { background: rgba(0, 0, 0, 0.1) !important; color: #0f172a !important; } /* ── Generic common element overrides ───────────────────────── */ /* Scrollbars */ html[data-theme="light"] ::-webkit-scrollbar-track { background: #f1f5f9 !important; } html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #cbd5e1 !important; } html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #94a3b8 !important; } /* Table borders commonly used across pages */ html[data-theme="light"] table { border-color: rgba(0, 0, 0, 0.08) !important; } html[data-theme="light"] th, html[data-theme="light"] td { border-color: rgba(0, 0, 0, 0.06) !important; } /* Inputs using CSS vars already (most pages) */ html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea { color-scheme: light; } /* Theme toggle button style */ .sn-theme-toggle { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem 0.7rem; background: none; border: none; color: #94a3b8; font-size: 0.8rem; text-align: left; cursor: pointer; border-radius: 6px; transition: all 0.15s; font-family: 'Poppins', sans-serif; justify-content: space-between; } .sn-theme-toggle:hover { background: rgba(255, 255, 255, 0.06); color: #f8fafc; } html[data-theme="light"] .sn-theme-toggle { color: #4b5563 !important; } html[data-theme="light"] .sn-theme-toggle:hover { background: rgba(0, 0, 0, 0.05) !important; color: #0f172a !important; } .sn-theme-toggle-track { width: 30px; height: 16px; border-radius: 8px; background: rgba(255, 255, 255, 0.15); position: relative; transition: background 0.2s; flex-shrink: 0; } html[data-theme="light"] .sn-theme-toggle-track { background: rgba(0, 0, 0, 0.15) !important; } .sn-theme-toggle-thumb { width: 12px; height: 12px; border-radius: 50%; background: #f8fafc; position: absolute; top: 2px; left: 2px; transition: transform 0.2s, background 0.2s; } html[data-theme="light"] .sn-theme-toggle-thumb { background: #184A9E !important; transform: translateX(14px); }