/* ============================================================ dark-mode.css — Dark Theme Overrides Applied via [data-theme="dark"] on ============================================================ */ /* Variables are already overridden in variables.css [data-theme="dark"] */ /* This file handles component-specific dark adjustments */ [data-theme="dark"] #app-header, [data-theme="dark"] #bottom-nav { background: rgba(26, 26, 46, 0.88); border-color: rgba(255,255,255,0.06); } [data-theme="dark"] .card, [data-theme="dark"] .stat-card { border-color: var(--color-border); } [data-theme="dark"] .form-input { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text-primary); } [data-theme="dark"] .form-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.20); } [data-theme="dark"] .list-item:active { background: var(--color-surface-2); } [data-theme="dark"] .nav-item__indicator { border-color: var(--color-surface); } [data-theme="dark"] .header__notif-badge { border-color: var(--color-surface); } /* Auth page dark */ [data-theme="dark"] .auth-card { background: var(--color-surface); border-color: var(--color-border); } /* Input auto-fill dark fix */ [data-theme="dark"] input:-webkit-autofill, [data-theme="dark"] input:-webkit-autofill:hover, [data-theme="dark"] input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 50px var(--color-surface) inset; -webkit-text-fill-color: var(--color-text-primary); caret-color: var(--color-text-primary); } /* Dark skeleton */ [data-theme="dark"] .skeleton { background: linear-gradient( 90deg, var(--color-surface-2) 25%, var(--color-border) 50%, var(--color-surface-2) 75% ); background-size: 200% 100%; } /* Smooth dark mode transition */ html { transition: background-color var(--transition-slow), color var(--transition-slow); } *, *::before, *::after { transition-property: background-color, border-color, color, box-shadow; transition-duration: 0ms; /* Override for non-theme transitions */ } html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition-duration: 300ms !important; transition-timing-function: ease; }