/** * MopPilot Theme System * * Four theme variants: * 1. Default Light (default) - Bootstrap 5 default colors * 2. Default Dark - Dark mode with Bootstrap color scheme * 3. Eco Light - Professional emerald/teal theme * 4. Eco Dark - Premium dark mode with emerald accents * * Usage: Apply data-theme attribute to element * Values: 'light', 'dark', 'eco-light', 'eco-dark' */ /* ============================================ CSS CUSTOM PROPERTIES - ROOT DEFINITIONS ============================================ */ :root { /* Theme transition */ --theme-transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; /* ======================== DEFAULT LIGHT THEME ======================== */ /* Background colors */ --bg-body: #ffffff; --bg-primary: #ffffff; --bg-secondary: #f8f9fa; --bg-tertiary: #e9ecef; --bg-surface: #ffffff; --bg-surface-hover: #f8f9fa; --bg-surface-elevated: #ffffff; /* Text colors */ --text-primary: #212529; --text-secondary: #6c757d; --text-muted: #adb5bd; --text-inverse: #ffffff; --text-link: #0d6efd; --text-link-hover: #0a58ca; /* Border colors */ --border-default: #dee2e6; --border-light: #e9ecef; --border-dark: #ced4da; --border-focus: rgba(13, 110, 253, 0.5); /* Accent colors (Bootstrap defaults) */ --accent-primary: #0d6efd; --accent-primary-hover: #0b5ed7; --accent-primary-active: #0a58ca; --accent-primary-subtle: rgba(13, 110, 253, 0.1); --accent-primary-rgb: 13, 110, 253; --accent-success: #198754; --accent-success-hover: #157347; --accent-success-subtle: rgba(25, 135, 84, 0.1); --accent-danger: #dc3545; --accent-danger-hover: #bb2d3b; --accent-danger-subtle: rgba(220, 53, 69, 0.1); --accent-warning: #ffc107; --accent-warning-hover: #ffca2c; --accent-warning-subtle: rgba(255, 193, 7, 0.1); --accent-info: #0dcaf0; --accent-info-hover: #31d2f2; --accent-info-subtle: rgba(13, 202, 240, 0.1); /* Navbar */ --navbar-bg: var(--accent-primary); --navbar-text: #ffffff; --navbar-hover: rgba(255, 255, 255, 0.1); --navbar-brand: #ffffff; /* Cards */ --card-bg: #ffffff; --card-border: var(--border-default); --card-header-bg: #f8f9fa; --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); --card-shadow-hover: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Forms */ --input-bg: #ffffff; --input-border: #ced4da; --input-text: var(--text-primary); --input-placeholder: var(--text-muted); --input-focus-border: var(--accent-primary); --input-focus-shadow: 0 0 0 0.25rem rgba(var(--accent-primary-rgb), 0.25); --input-disabled-bg: #e9ecef; /* Tables */ --table-bg: transparent; --table-border: var(--border-default); --table-striped-bg: rgba(0, 0, 0, 0.02); --table-hover-bg: rgba(0, 0, 0, 0.04); --table-header-bg: var(--bg-secondary); /* Dropdowns */ --dropdown-bg: #ffffff; --dropdown-border: var(--border-default); --dropdown-text: var(--text-primary); --dropdown-hover-bg: #f8f9fa; --dropdown-divider: var(--border-light); --dropdown-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Modals */ --modal-bg: #ffffff; --modal-border: var(--border-default); --modal-header-bg: var(--bg-secondary); --modal-backdrop: rgba(0, 0, 0, 0.5); /* Buttons */ --btn-secondary-bg: #6c757d; --btn-secondary-border: #6c757d; --btn-light-bg: #f8f9fa; --btn-light-border: #f8f9fa; --btn-light-text: var(--text-primary); /* Badges */ --badge-light-bg: #f8f9fa; --badge-light-text: var(--text-primary); /* List groups */ --list-group-bg: #ffffff; --list-group-border: var(--border-default); --list-group-hover: var(--bg-secondary); --list-group-active-bg: var(--accent-primary); --list-group-active-text: #ffffff; /* Footer */ --footer-bg: var(--bg-secondary); --footer-text: var(--text-muted); /* Scrollbar */ --scrollbar-track: var(--bg-secondary); --scrollbar-thumb: var(--text-muted); --scrollbar-thumb-hover: var(--text-secondary); /* Code */ --code-bg: #f8f9fa; --code-text: #d63384; /* Shadows */ --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175); } /* ======================== DEFAULT DARK THEME ======================== */ [data-theme="dark"] { /* Background colors */ --bg-body: #1a1a2e; --bg-primary: #16213e; --bg-secondary: #0f0f0f; --bg-tertiary: #1e1e3f; --bg-surface: #16213e; --bg-surface-hover: #1e1e3f; --bg-surface-elevated: #1e2a4a; /* Text colors */ --text-primary: #e8e8e8; --text-secondary: #b0b0b0; --text-muted: #9ca3af; --text-inverse: #1a1a2e; --text-link: #6ea8fe; --text-link-hover: #9ec5fe; /* Border colors */ --border-default: #2d2d5a; --border-light: #232346; --border-dark: #3d3d7a; --border-focus: rgba(110, 168, 254, 0.5); /* Accent colors */ --accent-primary: #6ea8fe; --accent-primary-hover: #9ec5fe; --accent-primary-active: #3d8bfd; --accent-primary-subtle: rgba(110, 168, 254, 0.15); --accent-primary-rgb: 110, 168, 254; --accent-success: #75b798; --accent-success-hover: #8ac4a8; --accent-success-subtle: rgba(117, 183, 152, 0.15); --accent-danger: #ea868f; --accent-danger-hover: #f0a3aa; --accent-danger-subtle: rgba(234, 134, 143, 0.15); --accent-warning: #ffda6a; --accent-warning-hover: #ffe484; --accent-warning-subtle: rgba(255, 218, 106, 0.15); --accent-info: #6edff6; --accent-info-hover: #8ee5f8; --accent-info-subtle: rgba(110, 223, 246, 0.15); /* Navbar */ --navbar-bg: #0f0f0f; --navbar-text: #e8e8e8; --navbar-hover: rgba(255, 255, 255, 0.1); --navbar-brand: #e8e8e8; /* Cards */ --card-bg: var(--bg-surface); --card-border: var(--border-default); --card-header-bg: var(--bg-tertiary); --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2); --card-shadow-hover: 0 0.5rem 1rem rgba(0, 0, 0, 0.35); /* Forms */ --input-bg: var(--bg-primary); --input-border: var(--border-default); --input-text: var(--text-primary); --input-placeholder: var(--text-muted); --input-focus-border: var(--accent-primary); --input-focus-shadow: 0 0 0 0.25rem rgba(var(--accent-primary-rgb), 0.25); --input-disabled-bg: var(--bg-secondary); /* Tables */ --table-bg: transparent; --table-border: var(--border-default); --table-striped-bg: rgba(255, 255, 255, 0.02); --table-hover-bg: rgba(255, 255, 255, 0.04); --table-header-bg: var(--bg-tertiary); /* Dropdowns */ --dropdown-bg: var(--bg-surface-elevated); --dropdown-border: var(--border-default); --dropdown-text: var(--text-primary); --dropdown-hover-bg: var(--bg-tertiary); --dropdown-divider: var(--border-default); --dropdown-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.35); /* Modals */ --modal-bg: var(--bg-surface); --modal-border: var(--border-default); --modal-header-bg: var(--bg-tertiary); --modal-backdrop: rgba(0, 0, 0, 0.7); /* Buttons */ --btn-secondary-bg: #4a4a6a; --btn-secondary-border: #5a5a7a; --btn-light-bg: var(--bg-tertiary); --btn-light-border: var(--border-default); --btn-light-text: var(--text-primary); /* Badges */ --badge-light-bg: var(--bg-tertiary); --badge-light-text: var(--text-primary); /* List groups */ --list-group-bg: var(--bg-surface); --list-group-border: var(--border-default); --list-group-hover: var(--bg-tertiary); --list-group-active-bg: var(--accent-primary); --list-group-active-text: var(--text-inverse); /* Footer */ --footer-bg: var(--bg-secondary); --footer-text: var(--text-muted); /* Scrollbar */ --scrollbar-track: var(--bg-primary); --scrollbar-thumb: var(--border-dark); --scrollbar-thumb-hover: var(--text-muted); /* Code */ --code-bg: var(--bg-tertiary); --code-text: #e685b5; /* Shadows */ --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2); --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.35); --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.5); } /* ======================== ECO LIGHT THEME ======================== */ [data-theme="eco-light"] { /* Background colors */ --bg-body: #fafdfb; --bg-primary: #ffffff; --bg-secondary: #f0fdf4; --bg-tertiary: #dcfce7; --bg-surface: #ffffff; --bg-surface-hover: #f0fdf4; --bg-surface-elevated: #ffffff; /* Text colors */ --text-primary: #1f2937; --text-secondary: #4b5563; --text-muted: #9ca3af; --text-inverse: #ffffff; --text-link: #059669; --text-link-hover: #047857; /* Border colors */ --border-default: #d1fae5; --border-light: #ecfdf5; --border-dark: #a7f3d0; --border-focus: rgba(5, 150, 105, 0.5); /* Accent colors (Emerald/Teal) */ --accent-primary: #059669; --accent-primary-hover: #047857; --accent-primary-active: #065f46; --accent-primary-subtle: rgba(5, 150, 105, 0.1); --accent-primary-rgb: 5, 150, 105; --accent-success: #059669; --accent-success-hover: #047857; --accent-success-subtle: rgba(5, 150, 105, 0.1); --accent-danger: #ef4444; --accent-danger-hover: #dc2626; --accent-danger-subtle: rgba(239, 68, 68, 0.1); --accent-warning: #f59e0b; --accent-warning-hover: #d97706; --accent-warning-subtle: rgba(245, 158, 11, 0.1); --accent-info: #06b6d4; --accent-info-hover: #0891b2; --accent-info-subtle: rgba(6, 182, 212, 0.1); /* Navbar */ --navbar-bg: #059669; --navbar-text: #ffffff; --navbar-hover: rgba(255, 255, 255, 0.15); --navbar-brand: #ffffff; /* Cards */ --card-bg: #ffffff; --card-border: #d1fae5; --card-header-bg: #f0fdf4; --card-shadow: 0 0.125rem 0.25rem rgba(5, 150, 105, 0.08); --card-shadow-hover: 0 0.5rem 1rem rgba(5, 150, 105, 0.15); /* Forms */ --input-bg: #ffffff; --input-border: #a7f3d0; --input-text: var(--text-primary); --input-placeholder: var(--text-muted); --input-focus-border: var(--accent-primary); --input-focus-shadow: 0 0 0 0.25rem rgba(var(--accent-primary-rgb), 0.2); --input-disabled-bg: #f0fdf4; /* Tables */ --table-bg: transparent; --table-border: #d1fae5; --table-striped-bg: rgba(5, 150, 105, 0.03); --table-hover-bg: rgba(5, 150, 105, 0.06); --table-header-bg: #f0fdf4; /* Dropdowns */ --dropdown-bg: #ffffff; --dropdown-border: #d1fae5; --dropdown-text: var(--text-primary); --dropdown-hover-bg: #f0fdf4; --dropdown-divider: #d1fae5; --dropdown-shadow: 0 0.5rem 1rem rgba(5, 150, 105, 0.15); /* Modals */ --modal-bg: #ffffff; --modal-border: #d1fae5; --modal-header-bg: #f0fdf4; --modal-backdrop: rgba(0, 0, 0, 0.5); /* Buttons */ --btn-secondary-bg: #6b7280; --btn-secondary-border: #6b7280; --btn-light-bg: #f0fdf4; --btn-light-border: #d1fae5; --btn-light-text: var(--text-primary); /* Badges */ --badge-light-bg: #f0fdf4; --badge-light-text: var(--text-primary); /* List groups */ --list-group-bg: #ffffff; --list-group-border: #d1fae5; --list-group-hover: #f0fdf4; --list-group-active-bg: var(--accent-primary); --list-group-active-text: #ffffff; /* Footer */ --footer-bg: #f0fdf4; --footer-text: var(--text-muted); /* Scrollbar */ --scrollbar-track: #f0fdf4; --scrollbar-thumb: #a7f3d0; --scrollbar-thumb-hover: #6ee7b7; /* Code */ --code-bg: #f0fdf4; --code-text: #059669; /* Shadows */ --shadow-sm: 0 0.125rem 0.25rem rgba(5, 150, 105, 0.08); --shadow-md: 0 0.5rem 1rem rgba(5, 150, 105, 0.12); --shadow-lg: 0 1rem 3rem rgba(5, 150, 105, 0.15); } /* ======================== ECO DARK THEME ======================== */ [data-theme="eco-dark"] { /* Background colors - GitHub-inspired dark */ --bg-body: #0d1117; --bg-primary: #161b22; --bg-secondary: #010409; --bg-tertiary: #21262d; --bg-surface: #161b22; --bg-surface-hover: #21262d; --bg-surface-elevated: #1c2128; /* Text colors */ --text-primary: #c9d1d9; --text-secondary: #9ca3af; --text-muted: #8b949e; --text-inverse: #0d1117; --text-link: #10b981; --text-link-hover: #34d399; /* Border colors */ --border-default: #30363d; --border-light: #21262d; --border-dark: #484f58; --border-focus: rgba(16, 185, 129, 0.5); /* Accent colors (Emerald) */ --accent-primary: #10b981; --accent-primary-hover: #34d399; --accent-primary-active: #059669; --accent-primary-subtle: rgba(16, 185, 129, 0.15); --accent-primary-rgb: 16, 185, 129; --accent-success: #10b981; --accent-success-hover: #34d399; --accent-success-subtle: rgba(16, 185, 129, 0.15); --accent-danger: #f87171; --accent-danger-hover: #fca5a5; --accent-danger-subtle: rgba(248, 113, 113, 0.15); --accent-warning: #fbbf24; --accent-warning-hover: #fcd34d; --accent-warning-subtle: rgba(251, 191, 36, 0.15); --accent-info: #22d3ee; --accent-info-hover: #67e8f9; --accent-info-subtle: rgba(34, 211, 238, 0.15); /* Navbar */ --navbar-bg: #010409; --navbar-text: #c9d1d9; --navbar-hover: rgba(16, 185, 129, 0.15); --navbar-brand: #10b981; /* Cards */ --card-bg: var(--bg-surface); --card-border: var(--border-default); --card-header-bg: var(--bg-tertiary); --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3); --card-shadow-hover: 0 0.5rem 1rem rgba(16, 185, 129, 0.1); /* Forms */ --input-bg: var(--bg-primary); --input-border: var(--border-default); --input-text: var(--text-primary); --input-placeholder: var(--text-muted); --input-focus-border: var(--accent-primary); --input-focus-shadow: 0 0 0 0.25rem rgba(var(--accent-primary-rgb), 0.2); --input-disabled-bg: var(--bg-tertiary); /* Tables */ --table-bg: transparent; --table-border: var(--border-default); --table-striped-bg: rgba(16, 185, 129, 0.03); --table-hover-bg: rgba(16, 185, 129, 0.06); --table-header-bg: var(--bg-tertiary); /* Dropdowns */ --dropdown-bg: var(--bg-surface-elevated); --dropdown-border: var(--border-default); --dropdown-text: var(--text-primary); --dropdown-hover-bg: var(--bg-tertiary); --dropdown-divider: var(--border-default); --dropdown-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4); /* Modals */ --modal-bg: var(--bg-surface); --modal-border: var(--border-default); --modal-header-bg: var(--bg-tertiary); --modal-backdrop: rgba(0, 0, 0, 0.75); /* Buttons */ --btn-secondary-bg: #3d444d; --btn-secondary-border: #484f58; --btn-light-bg: var(--bg-tertiary); --btn-light-border: var(--border-default); --btn-light-text: var(--text-primary); /* Badges */ --badge-light-bg: var(--bg-tertiary); --badge-light-text: var(--text-primary); /* List groups */ --list-group-bg: var(--bg-surface); --list-group-border: var(--border-default); --list-group-hover: var(--bg-tertiary); --list-group-active-bg: var(--accent-primary); --list-group-active-text: var(--text-inverse); /* Footer */ --footer-bg: var(--bg-secondary); --footer-text: var(--text-muted); /* Scrollbar */ --scrollbar-track: var(--bg-primary); --scrollbar-thumb: var(--border-dark); --scrollbar-thumb-hover: var(--text-muted); /* Code */ --code-bg: var(--bg-tertiary); --code-text: #10b981; /* Shadows */ --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3); --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.4); --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.5); } /* ============================================ GLOBAL ELEMENT STYLING ============================================ */ /* Smooth theme transitions */ html, body, .navbar, .card, .modal-content, .dropdown-menu, .list-group-item, .form-control, .form-select, .btn, .table, footer, .bg-light, .bg-white, .bg-primary, .bg-secondary { transition: var(--theme-transition); } /* Body */ body { background-color: var(--bg-body); color: var(--text-primary); } /* Links */ a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item) { color: var(--text-link); } a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):hover { color: var(--text-link-hover); } /* ============================================ BOOTSTRAP COMPONENT OVERRIDES ============================================ */ /* Navbar */ .navbar { background-color: var(--navbar-bg) !important; } .navbar .navbar-brand, .navbar .nav-link, .navbar .navbar-text { color: var(--navbar-text) !important; } .navbar .nav-link:hover, .navbar .nav-link:focus { background-color: var(--navbar-hover); } /* Eco Dark specific: Green brand text */ [data-theme="eco-dark"] .navbar-brand { color: var(--navbar-brand) !important; } /* Cards */ .card { background-color: var(--card-bg); border-color: var(--card-border); box-shadow: var(--card-shadow); } .card:hover { box-shadow: var(--card-shadow-hover); } .card-header { background-color: var(--card-header-bg); border-bottom-color: var(--card-border); color: var(--text-primary); } .card-footer { background-color: var(--card-header-bg); border-top-color: var(--card-border); } .card-body, .card-text { color: var(--text-primary); } /* Forms */ .form-control, .form-select { background-color: var(--input-bg); border-color: var(--input-border); color: var(--input-text); } .form-control::placeholder { color: var(--input-placeholder); } .form-control:focus, .form-select:focus { background-color: var(--input-bg); border-color: var(--input-focus-border); box-shadow: var(--input-focus-shadow); color: var(--input-text); } .form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--input-disabled-bg); color: var(--text-secondary); } .form-label { color: var(--text-primary); } .form-text { color: var(--text-muted); } .form-check-input { background-color: var(--input-bg); border-color: var(--input-border); } .form-check-input:checked { background-color: var(--accent-primary); border-color: var(--accent-primary); } .input-group-text { background-color: var(--bg-tertiary); border-color: var(--input-border); color: var(--text-primary); } /* Tables */ .table { --bs-table-bg: var(--table-bg); --bs-table-border-color: var(--table-border); --bs-table-striped-bg: var(--table-striped-bg); --bs-table-hover-bg: var(--table-hover-bg); color: var(--text-primary); } .table > thead { background-color: var(--table-header-bg); } .table > thead th { color: var(--text-primary); border-bottom-color: var(--table-border); } .table > tbody > tr > td { border-color: var(--table-border); color: var(--text-primary); } .table > tbody > tr { color: var(--text-primary); } /* Dropdowns */ .dropdown-menu { background-color: var(--dropdown-bg); border-color: var(--dropdown-border); box-shadow: var(--dropdown-shadow); } .dropdown-item { color: var(--dropdown-text); } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--dropdown-hover-bg); color: var(--text-primary); } .dropdown-item.active, .dropdown-item:active { background-color: var(--accent-primary); color: var(--text-inverse); } .dropdown-divider { border-color: var(--dropdown-divider); } .dropdown-header { color: var(--text-secondary); } /* Modals */ .modal-content { background-color: var(--modal-bg); border-color: var(--modal-border); } .modal-header { background-color: var(--modal-header-bg); border-bottom-color: var(--modal-border); color: var(--text-primary); } .modal-body { color: var(--text-primary); } .modal-footer { background-color: var(--modal-header-bg); border-top-color: var(--modal-border); } .modal-backdrop { background-color: var(--modal-backdrop); } .btn-close { filter: var(--btn-close-filter, none); } [data-theme="dark"] .btn-close, [data-theme="eco-dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* Buttons */ .btn-primary { --bs-btn-bg: var(--accent-primary); --bs-btn-border-color: var(--accent-primary); --bs-btn-hover-bg: var(--accent-primary-hover); --bs-btn-hover-border-color: var(--accent-primary-hover); --bs-btn-active-bg: var(--accent-primary-active); --bs-btn-active-border-color: var(--accent-primary-active); } .btn-success { --bs-btn-bg: var(--accent-success); --bs-btn-border-color: var(--accent-success); --bs-btn-hover-bg: var(--accent-success-hover); --bs-btn-hover-border-color: var(--accent-success-hover); } .btn-danger { --bs-btn-bg: var(--accent-danger); --bs-btn-border-color: var(--accent-danger); --bs-btn-hover-bg: var(--accent-danger-hover); --bs-btn-hover-border-color: var(--accent-danger-hover); } .btn-warning { --bs-btn-bg: var(--accent-warning); --bs-btn-border-color: var(--accent-warning); --bs-btn-hover-bg: var(--accent-warning-hover); --bs-btn-hover-border-color: var(--accent-warning-hover); } .btn-info { --bs-btn-bg: var(--accent-info); --bs-btn-border-color: var(--accent-info); --bs-btn-hover-bg: var(--accent-info-hover); --bs-btn-hover-border-color: var(--accent-info-hover); } .btn-secondary { --bs-btn-bg: var(--btn-secondary-bg); --bs-btn-border-color: var(--btn-secondary-border); } .btn-light { --bs-btn-bg: var(--btn-light-bg); --bs-btn-border-color: var(--btn-light-border); --bs-btn-color: var(--btn-light-text); } .btn-outline-primary { --bs-btn-color: var(--accent-primary); --bs-btn-border-color: var(--accent-primary); --bs-btn-hover-bg: var(--accent-primary); --bs-btn-hover-border-color: var(--accent-primary); } .btn-outline-success { --bs-btn-color: var(--accent-success); --bs-btn-border-color: var(--accent-success); --bs-btn-hover-bg: var(--accent-success); --bs-btn-hover-border-color: var(--accent-success); } .btn-outline-danger { --bs-btn-color: var(--accent-danger); --bs-btn-border-color: var(--accent-danger); --bs-btn-hover-bg: var(--accent-danger); --bs-btn-hover-border-color: var(--accent-danger); } .btn-outline-secondary { --bs-btn-color: var(--text-secondary); --bs-btn-border-color: var(--border-default); } /* List groups */ .list-group-item { background-color: var(--list-group-bg); border-color: var(--list-group-border); color: var(--text-primary); } .list-group-item:hover { background-color: var(--list-group-hover); } .list-group-item.active { background-color: var(--list-group-active-bg); border-color: var(--list-group-active-bg); color: var(--list-group-active-text); } .list-group-item-action:hover, .list-group-item-action:focus { background-color: var(--list-group-hover); color: var(--text-primary); } /* Badges */ .badge { font-weight: 500; } .badge.bg-primary { background-color: var(--accent-primary) !important; } .badge.bg-success { background-color: var(--accent-success) !important; } .badge.bg-danger { background-color: var(--accent-danger) !important; } .badge.bg-warning { background-color: var(--accent-warning) !important; } .badge.bg-info { background-color: var(--accent-info) !important; } .badge.bg-light { background-color: var(--badge-light-bg) !important; color: var(--badge-light-text) !important; } .badge.bg-secondary { background-color: var(--btn-secondary-bg) !important; } /* Alerts */ .alert-primary { background-color: var(--accent-primary-subtle); border-color: var(--accent-primary); color: var(--accent-primary); } .alert-success { background-color: var(--accent-success-subtle); border-color: var(--accent-success); color: var(--accent-success); } .alert-danger { background-color: var(--accent-danger-subtle); border-color: var(--accent-danger); color: var(--accent-danger); } .alert-warning { background-color: var(--accent-warning-subtle); border-color: var(--accent-warning); color: var(--text-primary); } .alert-info { background-color: var(--accent-info-subtle); border-color: var(--accent-info); color: var(--accent-info); } /* Progress bars */ .progress { background-color: var(--bg-tertiary); } .progress-bar { background-color: var(--accent-primary); } /* Pagination */ .page-link { background-color: var(--bg-surface); border-color: var(--border-default); color: var(--text-link); } .page-link:hover { background-color: var(--bg-surface-hover); border-color: var(--border-default); color: var(--text-link-hover); } .page-item.active .page-link { background-color: var(--accent-primary); border-color: var(--accent-primary); } .page-item.disabled .page-link { background-color: var(--bg-surface); border-color: var(--border-default); color: var(--text-muted); } /* Breadcrumbs */ .breadcrumb { background-color: var(--bg-secondary); } .breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); } .breadcrumb-item.active { color: var(--text-secondary); } /* Tooltips */ .tooltip-inner { background-color: var(--bg-tertiary); color: var(--text-primary); } .bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before { border-top-color: var(--bg-tertiary); } /* Popovers */ .popover { background-color: var(--bg-surface-elevated); border-color: var(--border-default); } .popover-header { background-color: var(--bg-tertiary); border-color: var(--border-default); color: var(--text-primary); } .popover-body { color: var(--text-primary); } /* Accordion */ .accordion-item { background-color: var(--bg-surface); border-color: var(--border-default); } .accordion-button { background-color: var(--bg-surface); color: var(--text-primary); } .accordion-button:not(.collapsed) { background-color: var(--accent-primary-subtle); color: var(--accent-primary); } .accordion-button:focus { border-color: var(--accent-primary); box-shadow: var(--input-focus-shadow); } /* Nav tabs and pills */ .nav-tabs .nav-link { color: var(--text-secondary); border-color: transparent; } .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { border-color: var(--border-default); color: var(--text-primary); } .nav-tabs .nav-link.active { background-color: var(--bg-surface); border-color: var(--border-default) var(--border-default) var(--bg-surface); color: var(--text-primary); } .nav-pills .nav-link { color: var(--text-secondary); } .nav-pills .nav-link:hover { background-color: var(--bg-surface-hover); color: var(--text-primary); } .nav-pills .nav-link.active { background-color: var(--accent-primary); color: var(--text-inverse); } /* Close button */ .btn-close { opacity: 0.75; } /* Footer */ footer, .footer { background-color: var(--footer-bg) !important; color: var(--footer-text); } footer .text-muted, .footer .text-muted { color: var(--footer-text) !important; } /* Background utility classes override */ .bg-light { background-color: var(--bg-secondary) !important; } .bg-white { background-color: var(--bg-surface) !important; } .bg-body { background-color: var(--bg-body) !important; } /* Text utility classes */ .text-muted { color: var(--text-muted) !important; } .text-secondary { color: var(--text-secondary) !important; } .text-primary { color: var(--accent-primary) !important; } .text-success { color: var(--accent-success) !important; } .text-danger { color: var(--accent-danger) !important; } .text-warning { color: var(--accent-warning) !important; } .text-info { color: var(--accent-info) !important; } .text-dark { color: var(--text-primary) !important; } .text-body { color: var(--text-primary) !important; } .text-body-secondary { color: var(--text-secondary) !important; } /* Common text elements - ensure they inherit theme colors */ p, span, label, strong, em, small, h1, h2, h3, h4, h5, h6 { color: inherit; } /* Card text */ .card-text, .card-title { color: var(--text-primary); } /* List groups */ .list-group-item { background-color: var(--bg-surface); border-color: var(--border-default); color: var(--text-primary); } .list-group-item.active { background-color: var(--accent-primary); border-color: var(--accent-primary); color: var(--text-inverse); } /* Border utilities */ .border { border-color: var(--border-default) !important; } .border-top, .border-bottom, .border-start, .border-end { border-color: var(--border-default) !important; } /* Horizontal rule */ hr { border-color: var(--border-default); opacity: 1; } /* Code blocks */ code { background-color: var(--code-bg); color: var(--code-text); padding: 0.125rem 0.375rem; border-radius: 0.25rem; } pre { background-color: var(--code-bg); color: var(--text-primary); padding: 1rem; border-radius: 0.375rem; } pre code { background-color: transparent; padding: 0; } /* Custom scrollbar for webkit browsers */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* ============================================ THEME TOGGLE BUTTON STYLES ============================================ */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: none; background: transparent; color: var(--navbar-text); cursor: pointer; border-radius: 50%; transition: background-color 0.2s ease, transform 0.2s ease; } .theme-toggle:hover { background-color: var(--navbar-hover); transform: scale(1.1); } .theme-toggle:active { transform: scale(0.95); } .theme-toggle .bi { font-size: 1.25rem; transition: transform 0.3s ease; } .theme-toggle:hover .bi { transform: rotate(15deg); } /* Sun/Moon icon animation */ .theme-toggle .bi-sun { transform: rotate(0deg); } .theme-toggle .bi-moon-fill { transform: rotate(-15deg); } [data-theme="dark"] .theme-toggle:hover .bi-sun, [data-theme="eco-dark"] .theme-toggle:hover .bi-sun { transform: rotate(45deg); } /* ============================================ THEME PREVIEW CARDS (Settings Page) ============================================ */ .theme-preview-card { cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; border: 2px solid transparent; border-radius: 0.5rem; overflow: hidden; } .theme-preview-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .theme-preview-card.selected { border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-primary-subtle); } .theme-preview-card .preview-header { padding: 0.75rem 1rem; font-weight: 600; font-size: 0.875rem; } .theme-preview-card .preview-body { padding: 0.75rem 1rem; font-size: 0.75rem; } .theme-preview-card .preview-accent { height: 4px; width: 100%; } /* Light theme preview */ .theme-preview-card.preview-light { background-color: #ffffff; color: #212529; } .theme-preview-card.preview-light .preview-header { background-color: #0d6efd; color: #ffffff; } .theme-preview-card.preview-light .preview-body { background-color: #f8f9fa; } .theme-preview-card.preview-light .preview-accent { background-color: #0d6efd; } /* Dark theme preview */ .theme-preview-card.preview-dark { background-color: #16213e; color: #e8e8e8; } .theme-preview-card.preview-dark .preview-header { background-color: #0f0f0f; color: #e8e8e8; } .theme-preview-card.preview-dark .preview-body { background-color: #1e1e3f; } .theme-preview-card.preview-dark .preview-accent { background-color: #6ea8fe; } /* Eco Light theme preview */ .theme-preview-card.preview-eco-light { background-color: #ffffff; color: #1f2937; } .theme-preview-card.preview-eco-light .preview-header { background-color: #059669; color: #ffffff; } .theme-preview-card.preview-eco-light .preview-body { background-color: #f0fdf4; } .theme-preview-card.preview-eco-light .preview-accent { background-color: #059669; } /* Eco Dark theme preview */ .theme-preview-card.preview-eco-dark { background-color: #161b22; color: #c9d1d9; } .theme-preview-card.preview-eco-dark .preview-header { background-color: #010409; color: #10b981; } .theme-preview-card.preview-eco-dark .preview-body { background-color: #21262d; } .theme-preview-card.preview-eco-dark .preview-accent { background-color: #10b981; } /* Check mark for selected theme */ .theme-preview-card .check-icon { position: absolute; top: 0.5rem; right: 0.5rem; width: 24px; height: 24px; border-radius: 50%; background-color: var(--accent-primary); color: white; display: none; align-items: center; justify-content: center; font-size: 0.875rem; } .theme-preview-card.selected .check-icon { display: flex; } /* ============================================ FULLCALENDAR THEME INTEGRATION ============================================ */ .fc { --fc-page-bg-color: var(--bg-surface); --fc-neutral-bg-color: var(--bg-secondary); --fc-border-color: var(--border-default); --fc-button-bg-color: var(--accent-primary); --fc-button-border-color: var(--accent-primary); --fc-button-hover-bg-color: var(--accent-primary-hover); --fc-button-hover-border-color: var(--accent-primary-hover); --fc-button-active-bg-color: var(--accent-primary-active); --fc-button-active-border-color: var(--accent-primary-active); --fc-event-bg-color: var(--accent-primary); --fc-event-border-color: var(--accent-primary); --fc-today-bg-color: var(--accent-primary-subtle); } .fc .fc-toolbar-title { color: var(--text-primary); } .fc th { color: var(--text-primary); } .fc .fc-daygrid-day-number, .fc .fc-col-header-cell-cushion { color: var(--text-primary); } .fc .fc-daygrid-day.fc-day-today { background-color: var(--accent-primary-subtle); } /* ============================================ RESPONSIVE ADJUSTMENTS ============================================ */ @media (max-width: 768px) { .theme-toggle { width: 36px; height: 36px; } .theme-toggle .bi { font-size: 1.125rem; } .theme-preview-card .preview-header { padding: 0.5rem 0.75rem; } .theme-preview-card .preview-body { padding: 0.5rem 0.75rem; } }