/** * Theme Variables - FFXP-53: Dark Mode Support * * CSS Custom Properties for light/dark theme support. * Apply [data-theme="dark"] to element to enable dark mode. */ /* ============================================ Light Theme (Default) ============================================ */ :root { /* Primary Colors */ --color-primary: #538d83; --color-primary-hover: #467a71; --color-primary-light: rgba(83, 141, 131, 0.1); /* Accent Colors */ --color-accent: #3498db; --color-accent-hover: #2980b9; /* Status Colors */ --color-success: #2ecc71; --color-success-bg: rgba(46, 204, 113, 0.1); --color-warning: #f39c12; --color-warning-bg: rgba(243, 156, 18, 0.1); --color-error: #e74c3c; --color-error-bg: rgba(231, 76, 60, 0.1); --color-info: #3498db; --color-info-bg: rgba(52, 152, 219, 0.1); /* Background Colors */ --bg-body: linear-gradient(to bottom, #f8fafc 0%, white 100%); --bg-primary: #ffffff; --bg-secondary: #f8fafc; --bg-tertiary: #f1f5f9; --bg-elevated: #ffffff; /* Menu/Navigation Backgrounds */ --bg-menubar: rgba(15, 23, 42, 0.95); --bg-taskbar: #34495e; --bg-start-menu: #ffffff; --bg-start-header: #3498db; /* Window Colors */ --bg-window: #ffffff; --bg-window-header: #538d83; --window-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); --window-shadow-active: 0 15px 50px rgba(0, 0, 0, 0.4); --window-border: rgba(226, 232, 240, 0.8); /* Text Colors */ --text-primary: #1e293b; --text-secondary: #64748b; --text-tertiary: #94a3b8; --text-inverse: #ffffff; --text-muted: #9ca3af; /* Border Colors */ --border-primary: #e2e8f0; --border-secondary: #cbd5e1; --border-focus: #538d83; /* Input/Form Colors */ --input-bg: #ffffff; --input-border: #cbd5e1; --input-focus-shadow: 0 0 0 3px rgba(83, 141, 131, 0.1); /* Table Colors */ --table-header-bg: #f8fafc; --table-row-hover: #f1f5f9; --table-row-alt: #fafafa; --table-border: #e2e8f0; /* Scrollbar Colors */ --scrollbar-track: #f1f5f9; --scrollbar-thumb: #cbd5e1; --scrollbar-thumb-hover: #94a3b8; /* Overlay/Backdrop */ --overlay-bg: rgba(0, 0, 0, 0.5); --backdrop-blur: blur(10px); /* Misc */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15); } /* ============================================ Dark Theme ============================================ */ [data-theme="dark"] { /* Primary Colors - slightly lighter for dark mode */ --color-primary: #6ba89e; --color-primary-hover: #7dbcb1; --color-primary-light: rgba(107, 168, 158, 0.15); /* Accent Colors */ --color-accent: #5dade2; --color-accent-hover: #7ec8e3; /* Status Colors - adjusted for dark backgrounds */ --color-success: #58d68d; --color-success-bg: rgba(88, 214, 141, 0.15); --color-warning: #f5b041; --color-warning-bg: rgba(245, 176, 65, 0.15); --color-error: #ec7063; --color-error-bg: rgba(236, 112, 99, 0.15); --color-info: #5dade2; --color-info-bg: rgba(93, 173, 226, 0.15); /* Background Colors */ --bg-body: linear-gradient(to bottom, #0f172a 0%, #1e293b 100%); --bg-primary: #1e293b; --bg-secondary: #0f172a; --bg-tertiary: #334155; --bg-elevated: #1e293b; /* Menu/Navigation Backgrounds */ --bg-menubar: rgba(15, 23, 42, 0.98); --bg-taskbar: #0f172a; --bg-start-menu: #1e293b; --bg-start-header: #334155; /* Window Colors */ --bg-window: #1e293b; --bg-window-header: #334155; --window-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); --window-shadow-active: 0 15px 50px rgba(0, 0, 0, 0.7); --window-border: rgba(71, 85, 105, 0.5); /* Text Colors */ --text-primary: #f1f5f9; --text-secondary: #94a3b8; --text-tertiary: #64748b; --text-inverse: #0f172a; --text-muted: #6b7280; /* Border Colors */ --border-primary: #334155; --border-secondary: #475569; --border-focus: #6ba89e; /* Input/Form Colors */ --input-bg: #0f172a; --input-border: #475569; --input-focus-shadow: 0 0 0 3px rgba(107, 168, 158, 0.2); /* Table Colors */ --table-header-bg: #0f172a; --table-row-hover: #334155; --table-row-alt: rgba(51, 65, 85, 0.3); --table-border: #334155; /* Scrollbar Colors */ --scrollbar-track: #1e293b; --scrollbar-thumb: #475569; --scrollbar-thumb-hover: #64748b; /* Overlay/Backdrop */ --overlay-bg: rgba(0, 0, 0, 0.7); /* Misc */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5); } /* ============================================ Apply Theme Variables to Elements ============================================ */ /* Body */ body { background: var(--bg-body); color: var(--text-primary); } /* Windows */ .window { background: var(--bg-window); box-shadow: var(--window-shadow); border-color: var(--window-border); } .window.active { box-shadow: var(--window-shadow-active); } .window-header { background: var(--bg-window-header); } .window-content { background: var(--bg-window); color: var(--text-primary); } /* Start Menu */ .start-menu { background: var(--bg-start-menu); } .start-header { background: var(--bg-start-header); } .start-menu-item:hover { background: var(--bg-tertiary); } .start-footer { border-color: var(--border-primary); } /* User Menu */ .user-menu { background: var(--bg-start-menu); } .user-menu-item { color: var(--text-primary); } .user-menu-item:hover { background: var(--bg-tertiary); } /* Forms */ .form-label { color: var(--text-secondary); } .form-input, .form-select { background: var(--input-bg); border-color: var(--input-border); color: var(--text-primary); } .form-input:focus, .form-select:focus { border-color: var(--border-focus); box-shadow: var(--input-focus-shadow); } .form-input::placeholder { color: var(--text-muted); } /* Tables */ .data-table th { background: var(--table-header-bg); color: var(--text-primary); border-color: var(--table-border); } .data-table td { border-color: var(--table-border); color: var(--text-primary); } .data-table tr:hover { background: var(--table-row-hover); } .data-table tr:nth-child(even) { background: var(--table-row-alt); } /* Buttons */ .btn-primary { background: var(--color-primary); color: var(--text-inverse); } .btn-primary:hover { background: var(--color-primary-hover); } .btn-secondary { background: var(--bg-tertiary); color: var(--text-primary); border-color: var(--border-secondary); } /* Cards and Panels */ .card, .panel { background: var(--bg-elevated); border-color: var(--border-primary); } /* Scrollbar Styling */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* ============================================ Theme Toggle Button Styles ============================================ */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; background: transparent; color: var(--text-inverse); cursor: pointer; border-radius: 8px; transition: background 0.2s, transform 0.2s; font-size: 18px; } .theme-toggle:hover { background: rgba(255, 255, 255, 0.1); transform: scale(1.1); } .theme-toggle:active { transform: scale(0.95); } /* Sun icon for dark mode, moon for light mode */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* Smooth transition for theme changes */ html { transition: background 0.3s ease; } html * { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.15s ease, box-shadow 0.3s ease; } /* Disable transitions during theme load to prevent flash */ html.theme-loading, html.theme-loading * { transition: none !important; } /* ============================================ Login Screen Theme Support ============================================ */ .login-box { background: var(--bg-elevated); border-color: var(--border-primary); } .login-box h2 { color: var(--text-primary); } .login-box .form-group label { color: var(--text-secondary); } .login-box .form-group input, .login-box .form-group select { background: var(--input-bg); border-color: var(--input-border); color: var(--text-primary); } .login-box .form-group input:focus, .login-box .form-group select:focus { border-color: var(--border-focus); box-shadow: var(--input-focus-shadow); } .login-box .form-group input::placeholder { color: var(--text-muted); } .login-btn { background: var(--color-primary); } .login-btn:hover { background: var(--color-primary-hover); } .sso-login-btn { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border-primary); } .sso-login-btn:hover { background: var(--bg-secondary); border-color: var(--border-secondary); } /* SSO Notice box */ #sso-notice { background: var(--bg-secondary) !important; } #sso-notice p { color: var(--text-secondary) !important; } /* Test login section */ #test-login-section { border-color: var(--border-primary) !important; } #test-login-section p { color: var(--text-muted) !important; } /* ============================================ Notification Theme Support ============================================ */ .notification { background: var(--bg-elevated); border-color: var(--border-primary); color: var(--text-primary); } .notification.success { background: var(--color-success-bg); border-color: var(--color-success); } .notification.error { background: var(--color-error-bg); border-color: var(--color-error); } .notification.warning { background: var(--color-warning-bg); border-color: var(--color-warning); } .notification.info { background: var(--color-info-bg); border-color: var(--color-info); } /* ============================================ Modal/Dialog Theme Support ============================================ */ .modal-overlay { background: var(--overlay-bg); } .modal-content { background: var(--bg-elevated); border-color: var(--border-primary); color: var(--text-primary); } .modal-header { background: var(--bg-window-header); color: var(--text-inverse); } /* ============================================ Chip/Badge Theme Support ============================================ */ .chip { background: var(--bg-tertiary); color: var(--text-primary); border-color: var(--border-primary); } .chip.success { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success); } .chip.error { background: var(--color-error-bg); color: var(--color-error); border-color: var(--color-error); } .chip.warning { background: var(--color-warning-bg); color: var(--color-warning); border-color: var(--color-warning); } .chip.info { background: var(--color-info-bg); color: var(--color-info); border-color: var(--color-info); }