/* ============================================================================= RPG World Theme System Theme hierarchy (lowest to highest priority): 1. System preference detection (fallback: dark mode) 2. User site-wide preference 3. Campaign theme override 4. Character sheet theme override Usage: Add theme class to element (e.g., ) ============================================================================= */ /* ============================================================================= CSS Custom Properties (Variables) - Base Definitions ============================================================================= */ :root { /* Transition for smooth theme switching */ --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* Font Stack */ --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-monospace: "Cascadia Code", "Fira Code", Consolas, "Courier New", monospace; /* Border Radius */ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 1rem; --radius-xl: 1.5rem; /* Shadows */ --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 15px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15); } /* ============================================================================= Light Theme ============================================================================= */ .theme-light, [data-theme="light"] { /* Background Colors */ --bg-primary: #ffffff; --bg-secondary: #f8f9fa; --bg-tertiary: #e9ecef; --bg-elevated: #ffffff; --bg-overlay: rgba(0, 0, 0, 0.5); /* Text Colors */ --text-primary: #212529; --text-secondary: #6c757d; --text-muted: #6c757d; --text-inverse: #ffffff; /* Brand Colors */ --brand-primary: #7c3aed; /* Purple - primary brand color */ --brand-primary-hover: #6d28d9; --brand-secondary: #059669; /* Green - secondary accent */ --brand-secondary-hover: #047857; /* Status Colors */ --status-success: #198754; --status-success-bg: #d1e7dd; --status-success-text: #0a3622; --status-warning: #ffc107; --status-warning-bg: #fff3cd; --status-warning-text: #664d03; --status-danger: #dc3545; --status-danger-bg: #f8d7da; --status-danger-text: #58151c; --status-info: #0dcaf0; --status-info-bg: #cff4fc; --status-info-text: #055160; /* Border Colors */ --border-light: #dee2e6; --border-medium: #ced4da; --border-dark: #adb5bd; /* Interactive Elements */ --btn-primary-bg: var(--brand-primary); --btn-primary-text: #ffffff; --btn-primary-hover: var(--brand-primary-hover); --btn-secondary-bg: #6c757d; --btn-secondary-text: #ffffff; --btn-secondary-hover: #5a6268; /* Form Elements */ --input-bg: #ffffff; --input-border: #ced4da; --input-focus-border: var(--brand-primary); --input-focus-shadow: rgba(124, 58, 237, 0.25); --input-group-bg: #e9ecef; /* Card Styles */ --card-bg: #ffffff; --card-border: #dee2e6; --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* Navigation */ --nav-bg: #ffffff; --nav-text: #212529; --nav-hover-bg: #f8f9fa; --nav-active-bg: var(--brand-primary); --nav-active-text: #ffffff; --nav-border: #dee2e6; /* List Groups */ --list-group-bg: #ffffff; --list-group-border: #dee2e6; --list-group-hover: #f8f9fa; /* Character Sheet Specific */ --sheet-bg: #ffffff; --sheet-header-bg: var(--brand-primary); --sheet-header-text: #ffffff; --sheet-section-bg: #f8f9fa; --sheet-stat-box-bg: #ffffff; --sheet-stat-box-border: #ced4da; /* Tables */ --table-header-bg: #f8f9fa; --table-row-hover: #f8f9fa; --table-border: #dee2e6; /* Horizontal Rules */ --hr-color: #dee2e6; } /* ============================================================================= Dark Theme ============================================================================= */ .theme-dark, [data-theme="dark"] { /* Background Colors */ --bg-primary: #1a1a2e; --bg-secondary: #16213e; --bg-tertiary: #0f3460; --bg-elevated: #1f2937; --bg-overlay: rgba(0, 0, 0, 0.7); /* Text Colors */ --text-primary: #f3f4f6; --text-secondary: #9ca3af; --text-muted: #9ca3af; --text-inverse: #1a1a2e; /* Brand Colors */ --brand-primary: #a78bfa; /* Lighter purple for dark mode */ --brand-primary-hover: #c4b5fd; --brand-secondary: #34d399; /* Lighter green for dark mode */ --brand-secondary-hover: #6ee7b7; /* Status Colors */ --status-success: #34d399; --status-success-bg: #064e3b; --status-success-text: #6ee7b7; --status-warning: #fbbf24; --status-warning-bg: #78350f; --status-warning-text: #fde68a; --status-danger: #f87171; --status-danger-bg: #7f1d1d; --status-danger-text: #fca5a5; --status-info: #60a5fa; --status-info-bg: #1e3a5f; --status-info-text: #93c5fd; /* Border Colors */ --border-light: #374151; --border-medium: #4b5563; --border-dark: #6b7280; /* Interactive Elements */ --btn-primary-bg: var(--brand-primary); --btn-primary-text: #1a1a2e; --btn-primary-hover: var(--brand-primary-hover); --btn-secondary-bg: #4b5563; --btn-secondary-text: #f3f4f6; --btn-secondary-hover: #6b7280; /* Form Elements */ --input-bg: #374151; --input-border: #4b5563; --input-focus-border: var(--brand-primary); --input-focus-shadow: rgba(167, 139, 250, 0.25); --input-group-bg: #4b5563; /* Card Styles */ --card-bg: #1f2937; --card-border: var(--border-light); --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Navigation */ --nav-bg: #16213e; --nav-text: var(--text-primary); --nav-hover-bg: var(--bg-tertiary); --nav-active-bg: var(--brand-primary); --nav-active-text: #1a1a2e; /* List Groups */ --list-group-bg: var(--bg-elevated); --list-group-border: var(--border-light); --list-group-hover: var(--bg-tertiary); /* Character Sheet Specific */ --sheet-bg: #1f2937; --sheet-header-bg: #0f3460; --sheet-header-text: #f3f4f6; --sheet-section-bg: #16213e; --sheet-stat-box-bg: #1f2937; --sheet-stat-box-border: var(--border-medium); /* Tables */ --table-header-bg: var(--bg-secondary); --table-row-hover: var(--bg-tertiary); --table-border: var(--border-light); /* Horizontal Rules */ --hr-color: var(--border-medium); } /* ============================================================================= High Contrast Theme (Accessibility) ============================================================================= */ .theme-high-contrast, [data-theme="high-contrast"] { /* Background Colors */ --bg-primary: #000000; --bg-secondary: #1a1a1a; --bg-tertiary: #333333; --bg-elevated: #1a1a1a; --bg-overlay: rgba(0, 0, 0, 0.9); /* Text Colors - Maximum contrast */ --text-primary: #ffffff; --text-secondary: #e0e0e0; --text-muted: #b0b0b0; --text-inverse: #000000; /* Brand Colors - High visibility */ --brand-primary: #ffff00; /* Yellow for high visibility */ --brand-primary-hover: #ffff66; --brand-secondary: #00ffff; /* Cyan for secondary */ --brand-secondary-hover: #66ffff; /* Status Colors - High contrast versions */ --status-success: #00ff00; --status-success-bg: #003300; --status-success-text: #00ff00; --status-warning: #ffff00; --status-warning-bg: #333300; --status-warning-text: #ffff00; --status-danger: #ff0000; --status-danger-bg: #330000; --status-danger-text: #ff6666; --status-info: #00ffff; --status-info-bg: #003333; --status-info-text: #00ffff; /* Border Colors - Visible borders */ --border-light: #666666; --border-medium: #999999; --border-dark: #cccccc; /* Interactive Elements */ --btn-primary-bg: var(--brand-primary); --btn-primary-text: #000000; --btn-primary-hover: var(--brand-primary-hover); --btn-secondary-bg: #ffffff; --btn-secondary-text: #000000; --btn-secondary-hover: #e0e0e0; /* Form Elements */ --input-bg: #000000; --input-border: #ffffff; --input-focus-border: var(--brand-primary); --input-focus-shadow: rgba(255, 255, 0, 0.5); --input-group-bg: #333333; /* Card Styles */ --card-bg: #1a1a1a; --card-border: #ffffff; --card-shadow: none; /* Navigation */ --nav-bg: #000000; --nav-text: #ffffff; --nav-hover-bg: #333333; --nav-active-bg: var(--brand-primary); --nav-active-text: #000000; /* List Groups */ --list-group-bg: #1a1a1a; --list-group-border: #ffffff; --list-group-hover: #333333; /* Character Sheet Specific */ --sheet-bg: #000000; --sheet-header-bg: #333333; --sheet-header-text: #ffffff; --sheet-section-bg: #1a1a1a; --sheet-stat-box-bg: #000000; --sheet-stat-box-border: #ffffff; /* Tables */ --table-header-bg: #333333; --table-row-hover: #444444; --table-border: #ffffff; /* Horizontal Rules */ --hr-color: #ffffff; } /* ============================================================================= System Theme (Auto-detect with Dark fallback) ============================================================================= */ .theme-system, [data-theme="system"] { /* Default to dark theme variables */ --bg-primary: #1a1a2e; --bg-secondary: #16213e; --bg-tertiary: #0f3460; --bg-elevated: #1f2937; --bg-overlay: rgba(0, 0, 0, 0.7); --text-primary: #f3f4f6; --text-secondary: #9ca3af; --text-muted: #9ca3af; --text-inverse: #1a1a2e; --brand-primary: #a78bfa; --brand-primary-hover: #c4b5fd; --brand-secondary: #34d399; --brand-secondary-hover: #6ee7b7; --status-success: #34d399; --status-success-bg: #064e3b; --status-success-text: #6ee7b7; --status-warning: #fbbf24; --status-warning-bg: #78350f; --status-warning-text: #fde68a; --status-danger: #f87171; --status-danger-bg: #7f1d1d; --status-danger-text: #fca5a5; --status-info: #60a5fa; --status-info-bg: #1e3a5f; --status-info-text: #93c5fd; --border-light: #374151; --border-medium: #4b5563; --border-dark: #6b7280; --btn-primary-bg: var(--brand-primary); --btn-primary-text: #1a1a2e; --btn-primary-hover: var(--brand-primary-hover); --btn-secondary-bg: #4b5563; --btn-secondary-text: #f3f4f6; --btn-secondary-hover: #6b7280; --input-bg: #374151; --input-border: #4b5563; --input-focus-border: var(--brand-primary); --input-focus-shadow: rgba(167, 139, 250, 0.25); --input-group-bg: #4b5563; --card-bg: #1f2937; --card-border: var(--border-light); --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); --nav-bg: #16213e; --nav-text: var(--text-primary); --nav-hover-bg: var(--bg-tertiary); --nav-active-bg: var(--brand-primary); --nav-active-text: #1a1a2e; --list-group-bg: var(--bg-elevated); --list-group-border: var(--border-light); --list-group-hover: var(--bg-tertiary); --table-header-bg: var(--bg-secondary); --table-row-hover: var(--bg-tertiary); --table-border: var(--border-light); --hr-color: var(--border-medium); } /* Auto-detect system preference */ @media (prefers-color-scheme: light) { .theme-system, [data-theme="system"] { /* Inherit all light theme variables */ --bg-primary: #ffffff; --bg-secondary: #f8f9fa; --bg-tertiary: #e9ecef; --bg-elevated: #ffffff; --bg-overlay: rgba(0, 0, 0, 0.5); --text-primary: #212529; --text-secondary: #6c757d; --text-muted: #6c757d; --text-inverse: #ffffff; --brand-primary: #7c3aed; --brand-primary-hover: #6d28d9; --brand-secondary: #059669; --brand-secondary-hover: #047857; --status-success: #198754; --status-success-bg: #d1e7dd; --status-success-text: #0a3622; --status-warning: #ffc107; --status-warning-bg: #fff3cd; --status-warning-text: #664d03; --status-danger: #dc3545; --status-danger-bg: #f8d7da; --status-danger-text: #58151c; --status-info: #0dcaf0; --status-info-bg: #cff4fc; --status-info-text: #055160; --border-light: #dee2e6; --border-medium: #ced4da; --border-dark: #adb5bd; --btn-primary-bg: var(--brand-primary); --btn-primary-text: #ffffff; --btn-primary-hover: var(--brand-primary-hover); --btn-secondary-bg: #6c757d; --btn-secondary-text: #ffffff; --btn-secondary-hover: #5a6268; --input-bg: #ffffff; --input-border: #ced4da; --input-focus-border: var(--brand-primary); --input-focus-shadow: rgba(124, 58, 237, 0.25); --input-group-bg: #e9ecef; --card-bg: #ffffff; --card-border: #dee2e6; --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); --nav-bg: #ffffff; --nav-text: #212529; --nav-hover-bg: #f8f9fa; --nav-active-bg: var(--brand-primary); --nav-active-text: #ffffff; --nav-border: #dee2e6; --list-group-bg: #ffffff; --list-group-border: #dee2e6; --list-group-hover: #f8f9fa; --table-header-bg: #f8f9fa; --table-row-hover: #f8f9fa; --table-border: #dee2e6; --hr-color: #dee2e6; } } @media (prefers-color-scheme: dark) { .theme-system, [data-theme="system"] { /* Inherit all dark theme variables */ --bg-primary: #1a1a2e; --bg-secondary: #16213e; --bg-tertiary: #0f3460; --bg-elevated: #1f2937; --bg-overlay: rgba(0, 0, 0, 0.7); --text-primary: #f3f4f6; --text-secondary: #9ca3af; --text-muted: #9ca3af; --text-inverse: #1a1a2e; --brand-primary: #a78bfa; --brand-primary-hover: #c4b5fd; --brand-secondary: #34d399; --brand-secondary-hover: #6ee7b7; --status-success: #34d399; --status-success-bg: #064e3b; --status-success-text: #6ee7b7; --status-warning: #fbbf24; --status-warning-bg: #78350f; --status-warning-text: #fde68a; --status-danger: #f87171; --status-danger-bg: #7f1d1d; --status-danger-text: #fca5a5; --status-info: #60a5fa; --status-info-bg: #1e3a5f; --status-info-text: #93c5fd; --border-light: #374151; --border-medium: #4b5563; --border-dark: #6b7280; --btn-primary-bg: var(--brand-primary); --btn-primary-text: #1a1a2e; --btn-primary-hover: var(--brand-primary-hover); --btn-secondary-bg: #4b5563; --btn-secondary-text: #f3f4f6; --btn-secondary-hover: #6b7280; --input-bg: #374151; --input-border: #4b5563; --input-focus-border: var(--brand-primary); --input-focus-shadow: rgba(167, 139, 250, 0.25); --input-group-bg: #4b5563; --card-bg: #1f2937; --card-border: var(--border-light); --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); --nav-bg: #16213e; --nav-text: var(--text-primary); --nav-hover-bg: var(--bg-tertiary); --nav-active-bg: var(--brand-primary); --nav-active-text: #1a1a2e; --list-group-bg: var(--bg-elevated); --list-group-border: var(--border-light); --list-group-hover: var(--bg-tertiary); --table-header-bg: var(--bg-secondary); --table-row-hover: var(--bg-tertiary); --table-border: var(--border-light); --hr-color: var(--border-medium); } } /* ============================================================================= Base Element Styles Using Theme Variables ============================================================================= */ /* Apply transitions for smooth theme switching (only on interactive elements) */ .btn, .nav-link { transition: var(--theme-transition); } /* Body */ body { background-color: var(--bg-primary) !important; color: var(--text-primary) !important; font-family: var(--font-primary); } /* Headings */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--text-primary); } /* Paragraphs and general text */ p { color: var(--text-primary); } /* Labels */ label, .form-label { color: var(--text-primary) !important; } /* Form text (helper text) */ .form-text { color: var(--text-muted) !important; } /* Form check labels */ .form-check-label { color: var(--text-primary) !important; } /* Links */ a { color: var(--brand-primary); } a:hover { color: var(--brand-primary-hover); } /* Horizontal rules */ hr { border-color: var(--hr-color) !important; opacity: 1; } /* ============================================================================= Cards ============================================================================= */ .card { background-color: var(--card-bg) !important; border-color: var(--card-border) !important; box-shadow: var(--card-shadow); color: var(--text-primary); } .card-header { background-color: var(--bg-secondary) !important; border-bottom-color: var(--card-border) !important; color: var(--text-primary) !important; } .card-body { color: var(--text-primary); } .card-footer { background-color: var(--bg-secondary) !important; border-top-color: var(--card-border) !important; } .card-title { color: var(--text-primary); } .card-text { color: var(--text-primary); } /* Card header with Bootstrap bg-* classes */ .card-header.bg-primary { background-color: var(--brand-primary) !important; color: var(--btn-primary-text) !important; } .card-header.bg-success { background-color: var(--status-success) !important; color: #ffffff !important; } .card-header.bg-danger { background-color: var(--status-danger) !important; color: #ffffff !important; } .card-header.bg-info { background-color: var(--status-info) !important; color: #000000 !important; } .card-header.bg-warning { background-color: var(--status-warning) !important; color: #000000 !important; } .card-header.bg-secondary { background-color: var(--btn-secondary-bg) !important; color: var(--btn-secondary-text) !important; } /* Ensure text-white class works on colored headers */ .card-header.text-white { color: #ffffff !important; } .card-header.text-dark { color: #212529 !important; } /* ============================================================================= Forms ============================================================================= */ .form-control, .form-select { background-color: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--text-primary) !important; } .form-control:focus, .form-select:focus { border-color: var(--input-focus-border) !important; box-shadow: 0 0 0 0.25rem var(--input-focus-shadow) !important; background-color: var(--input-bg) !important; color: var(--text-primary) !important; } .form-control::placeholder { color: var(--text-muted) !important; opacity: 1; } .form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--bg-secondary) !important; color: var(--text-muted) !important; opacity: 1; } /* Input groups */ .input-group-text { background-color: var(--input-group-bg) !important; border-color: var(--input-border) !important; color: var(--text-primary) !important; } /* Form check inputs (checkboxes, radios) */ .form-check-input { background-color: var(--input-bg); border-color: var(--input-border); } .form-check-input:checked { background-color: var(--brand-primary); border-color: var(--brand-primary); } .form-check-input:focus { border-color: var(--input-focus-border); box-shadow: 0 0 0 0.25rem var(--input-focus-shadow); } /* Validation states */ .form-control.is-invalid, .form-select.is-invalid { border-color: var(--status-danger) !important; } .form-control.is-valid, .form-select.is-valid { border-color: var(--status-success) !important; } .invalid-feedback, .text-danger { color: var(--status-danger) !important; } .valid-feedback { color: var(--status-success) !important; } /* ============================================================================= Buttons ============================================================================= */ .btn-primary { background-color: var(--btn-primary-bg) !important; border-color: var(--btn-primary-bg) !important; color: var(--btn-primary-text) !important; } .btn-primary:hover, .btn-primary:focus { background-color: var(--btn-primary-hover) !important; border-color: var(--btn-primary-hover) !important; color: var(--btn-primary-text) !important; } .btn-secondary { background-color: var(--btn-secondary-bg) !important; border-color: var(--btn-secondary-bg) !important; color: var(--btn-secondary-text) !important; } .btn-secondary:hover, .btn-secondary:focus { background-color: var(--btn-secondary-hover) !important; border-color: var(--btn-secondary-hover) !important; color: var(--btn-secondary-text) !important; } .btn-outline-primary { color: var(--brand-primary) !important; border-color: var(--brand-primary) !important; background-color: transparent !important; } .btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--brand-primary) !important; border-color: var(--brand-primary) !important; color: var(--btn-primary-text) !important; } .btn-outline-secondary { color: var(--text-secondary) !important; border-color: var(--border-medium) !important; background-color: transparent !important; } .btn-outline-secondary:hover, .btn-outline-secondary:focus { background-color: var(--btn-secondary-bg) !important; border-color: var(--btn-secondary-bg) !important; color: var(--btn-secondary-text) !important; } .btn-outline-danger { color: var(--status-danger) !important; border-color: var(--status-danger) !important; background-color: transparent !important; } .btn-outline-danger:hover, .btn-outline-danger:focus { background-color: var(--status-danger) !important; border-color: var(--status-danger) !important; color: var(--text-inverse) !important; } .btn-success { background-color: var(--status-success) !important; border-color: var(--status-success) !important; } .btn-danger { background-color: var(--status-danger) !important; border-color: var(--status-danger) !important; } .btn-warning { background-color: var(--status-warning) !important; border-color: var(--status-warning) !important; } .btn-info { background-color: var(--status-info) !important; border-color: var(--status-info) !important; } /* Close button */ .btn-close { filter: var(--btn-close-filter, none); } .theme-dark .btn-close, .theme-high-contrast .btn-close, [data-theme="dark"] .btn-close, [data-theme="high-contrast"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } @media (prefers-color-scheme: dark) { .theme-system .btn-close, [data-theme="system"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } } /* ============================================================================= Tables ============================================================================= */ .table { color: var(--text-primary) !important; --bs-table-bg: transparent; --bs-table-color: var(--text-primary); } .table thead th { background-color: var(--table-header-bg) !important; border-bottom-color: var(--table-border) !important; color: var(--text-primary) !important; } .table tbody tr:hover { background-color: var(--table-row-hover) !important; } .table td, .table th { border-color: var(--table-border) !important; color: var(--text-primary); } .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--bg-secondary) !important; --bs-table-accent-bg: var(--bg-secondary); } /* ============================================================================= Navigation ============================================================================= */ .navbar { background-color: var(--nav-bg) !important; border-bottom: 1px solid var(--border-light); } .navbar-brand { color: var(--nav-text) !important; } .nav-link { color: var(--nav-text) !important; } .nav-link:hover { background-color: var(--nav-hover-bg); color: var(--nav-text) !important; } .nav-link.active { background-color: var(--nav-active-bg) !important; color: var(--nav-active-text) !important; } /* Navbar toggler */ .navbar-toggler { border-color: var(--border-medium) !important; } .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; } .theme-light .navbar-toggler-icon, [data-theme="light"] .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; } @media (prefers-color-scheme: light) { .theme-system .navbar-toggler-icon, [data-theme="system"] .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; } } /* ============================================================================= Dropdowns ============================================================================= */ .dropdown-menu { background-color: var(--bg-elevated) !important; border-color: var(--border-medium) !important; box-shadow: var(--shadow-lg); } .dropdown-item, .dropdown-menu button.dropdown-item, .dropdown-menu a.dropdown-item { color: var(--text-primary) !important; background-color: transparent !important; border: none !important; width: 100%; text-align: left; padding: 0.5rem 1rem; } .dropdown-item:hover, .dropdown-item:focus, .dropdown-menu button.dropdown-item:hover, .dropdown-menu button.dropdown-item:focus, .dropdown-menu a.dropdown-item:hover, .dropdown-menu a.dropdown-item:focus { background-color: var(--bg-tertiary) !important; color: var(--text-primary) !important; } .dropdown-item:active, .dropdown-menu button.dropdown-item:active, .dropdown-menu a.dropdown-item:active { background-color: var(--brand-primary) !important; color: var(--btn-primary-text) !important; } .dropdown-divider { border-color: var(--border-light) !important; opacity: 1; } .dropdown-header { color: var(--text-secondary) !important; } /* Navbar dropdown specific overrides */ .navbar .dropdown-menu { background-color: var(--bg-elevated) !important; border: 1px solid var(--border-medium) !important; } .navbar .dropdown-menu .dropdown-item, .navbar .dropdown-menu button.dropdown-item { color: var(--text-primary) !important; background-color: transparent !important; } .navbar .dropdown-menu .dropdown-item:hover, .navbar .dropdown-menu .dropdown-item:focus, .navbar .dropdown-menu button.dropdown-item:hover, .navbar .dropdown-menu button.dropdown-item:focus { background-color: var(--bg-tertiary) !important; color: var(--text-primary) !important; } /* Theme picker dropdown - ensure visibility in all themes */ .theme-light .navbar .dropdown-menu, [data-theme="light"] .navbar .dropdown-menu { background-color: #ffffff !important; border-color: #dee2e6 !important; } .theme-light .navbar .dropdown-menu .dropdown-item, .theme-light .navbar .dropdown-menu button.dropdown-item, [data-theme="light"] .navbar .dropdown-menu .dropdown-item, [data-theme="light"] .navbar .dropdown-menu button.dropdown-item { color: #212529 !important; } .theme-light .navbar .dropdown-menu .dropdown-item:hover, .theme-light .navbar .dropdown-menu button.dropdown-item:hover, [data-theme="light"] .navbar .dropdown-menu .dropdown-item:hover, [data-theme="light"] .navbar .dropdown-menu button.dropdown-item:hover { background-color: #f8f9fa !important; color: #212529 !important; } .theme-dark .navbar .dropdown-menu, [data-theme="dark"] .navbar .dropdown-menu { background-color: #1f2937 !important; border-color: #374151 !important; } .theme-dark .navbar .dropdown-menu .dropdown-item, .theme-dark .navbar .dropdown-menu button.dropdown-item, [data-theme="dark"] .navbar .dropdown-menu .dropdown-item, [data-theme="dark"] .navbar .dropdown-menu button.dropdown-item { color: #f3f4f6 !important; } .theme-dark .navbar .dropdown-menu .dropdown-item:hover, .theme-dark .navbar .dropdown-menu button.dropdown-item:hover, [data-theme="dark"] .navbar .dropdown-menu .dropdown-item:hover, [data-theme="dark"] .navbar .dropdown-menu button.dropdown-item:hover { background-color: #374151 !important; color: #ffffff !important; } .theme-high-contrast .navbar .dropdown-menu, [data-theme="high-contrast"] .navbar .dropdown-menu { background-color: #000000 !important; border-color: #ffffff !important; } .theme-high-contrast .navbar .dropdown-menu .dropdown-item, .theme-high-contrast .navbar .dropdown-menu button.dropdown-item, [data-theme="high-contrast"] .navbar .dropdown-menu .dropdown-item, [data-theme="high-contrast"] .navbar .dropdown-menu button.dropdown-item { color: #ffffff !important; } .theme-high-contrast .navbar .dropdown-menu .dropdown-item:hover, .theme-high-contrast .navbar .dropdown-menu button.dropdown-item:hover, [data-theme="high-contrast"] .navbar .dropdown-menu .dropdown-item:hover, [data-theme="high-contrast"] .navbar .dropdown-menu button.dropdown-item:hover { background-color: #ffff00 !important; color: #000000 !important; } /* System theme - respect OS preference */ @media (prefers-color-scheme: light) { .theme-system .navbar .dropdown-menu, [data-theme="system"] .navbar .dropdown-menu { background-color: #ffffff !important; border-color: #dee2e6 !important; } .theme-system .navbar .dropdown-menu .dropdown-item, .theme-system .navbar .dropdown-menu button.dropdown-item, [data-theme="system"] .navbar .dropdown-menu .dropdown-item, [data-theme="system"] .navbar .dropdown-menu button.dropdown-item { color: #212529 !important; } .theme-system .navbar .dropdown-menu .dropdown-item:hover, .theme-system .navbar .dropdown-menu button.dropdown-item:hover, [data-theme="system"] .navbar .dropdown-menu .dropdown-item:hover, [data-theme="system"] .navbar .dropdown-menu button.dropdown-item:hover { background-color: #f8f9fa !important; color: #212529 !important; } } @media (prefers-color-scheme: dark) { .theme-system .navbar .dropdown-menu, [data-theme="system"] .navbar .dropdown-menu { background-color: #1f2937 !important; border-color: #374151 !important; } .theme-system .navbar .dropdown-menu .dropdown-item, .theme-system .navbar .dropdown-menu button.dropdown-item, [data-theme="system"] .navbar .dropdown-menu .dropdown-item, [data-theme="system"] .navbar .dropdown-menu button.dropdown-item { color: #f3f4f6 !important; } .theme-system .navbar .dropdown-menu .dropdown-item:hover, .theme-system .navbar .dropdown-menu button.dropdown-item:hover, [data-theme="system"] .navbar .dropdown-menu .dropdown-item:hover, [data-theme="system"] .navbar .dropdown-menu button.dropdown-item:hover { background-color: #374151 !important; color: #ffffff !important; } } /* ============================================================================= Modals ============================================================================= */ .modal-content { background-color: var(--bg-elevated) !important; border-color: var(--border-medium) !important; color: var(--text-primary); } .modal-header { border-bottom-color: var(--border-light) !important; color: var(--text-primary); } .modal-header .modal-title { color: var(--text-primary); } .modal-body { color: var(--text-primary); } .modal-footer { border-top-color: var(--border-light) !important; } /* ============================================================================= Alerts ============================================================================= */ .alert-success { background-color: var(--status-success-bg) !important; border-color: var(--status-success) !important; color: var(--status-success-text) !important; } .alert-warning { background-color: var(--status-warning-bg) !important; border-color: var(--status-warning) !important; color: var(--status-warning-text) !important; } .alert-danger { background-color: var(--status-danger-bg) !important; border-color: var(--status-danger) !important; color: var(--status-danger-text) !important; } .alert-info { background-color: var(--status-info-bg) !important; border-color: var(--status-info) !important; color: var(--status-info-text) !important; } .alert a { color: inherit; font-weight: 600; } /* ============================================================================= Badges ============================================================================= */ .badge.bg-primary { background-color: var(--brand-primary) !important; color: var(--btn-primary-text) !important; } .badge.bg-secondary { background-color: var(--btn-secondary-bg) !important; color: var(--btn-secondary-text) !important; } .badge.bg-success { background-color: var(--status-success) !important; } .badge.bg-danger { background-color: var(--status-danger) !important; } .badge.bg-warning { background-color: var(--status-warning) !important; } .badge.bg-info { background-color: var(--status-info) !important; } /* ============================================================================= List Groups ============================================================================= */ .list-group-item { background-color: var(--list-group-bg) !important; border-color: var(--list-group-border) !important; color: var(--text-primary) !important; } .list-group-item:hover { background-color: var(--list-group-hover) !important; } .list-group-item.active { background-color: var(--brand-primary) !important; border-color: var(--brand-primary) !important; color: var(--btn-primary-text) !important; } .list-group-item-action:hover, .list-group-item-action:focus { background-color: var(--list-group-hover) !important; color: var(--text-primary) !important; } .list-group-flush > .list-group-item { border-left: 0; border-right: 0; } /* ============================================================================= Text Utilities ============================================================================= */ .text-muted { color: var(--text-muted) !important; } .text-secondary { color: var(--text-secondary) !important; } .text-primary { color: var(--brand-primary) !important; } .text-success { color: var(--status-success) !important; } .text-danger { color: var(--status-danger) !important; } .text-warning { color: var(--status-warning) !important; } .text-info { color: var(--status-info) !important; } /* ============================================================================= Border Utilities ============================================================================= */ .border { border-color: var(--border-medium) !important; } .border-top, .border-bottom, .border-start, .border-end { border-color: var(--border-medium) !important; } .border-primary { border-color: var(--brand-primary) !important; } .border-secondary { border-color: var(--btn-secondary-bg) !important; } .border-success { border-color: var(--status-success) !important; } .border-danger { border-color: var(--status-danger) !important; } .border-warning { border-color: var(--status-warning) !important; } .border-info { border-color: var(--status-info) !important; } /* ============================================================================= Background Utilities ============================================================================= */ .bg-light { background-color: var(--bg-secondary) !important; } .bg-dark { background-color: var(--bg-tertiary) !important; } .bg-body { background-color: var(--bg-primary) !important; } /* ============================================================================= Pagination ============================================================================= */ .page-link { background-color: var(--card-bg) !important; border-color: var(--border-medium) !important; color: var(--brand-primary) !important; } .page-link:hover { background-color: var(--bg-tertiary) !important; color: var(--brand-primary-hover) !important; } .page-item.active .page-link { background-color: var(--brand-primary) !important; border-color: var(--brand-primary) !important; color: var(--btn-primary-text) !important; } .page-item.disabled .page-link { background-color: var(--bg-secondary) !important; color: var(--text-muted) !important; } /* ============================================================================= Breadcrumbs ============================================================================= */ .breadcrumb { background-color: var(--bg-secondary); } .breadcrumb-item a { color: var(--brand-primary); } .breadcrumb-item.active { color: var(--text-secondary); } .breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); } /* ============================================================================= Progress Bars ============================================================================= */ .progress { background-color: var(--bg-tertiary) !important; } .progress-bar { background-color: var(--brand-primary) !important; } /* ============================================================================= Tooltips & Popovers ============================================================================= */ .tooltip-inner { background-color: var(--bg-tertiary); color: var(--text-primary); } .popover { background-color: var(--bg-elevated); border-color: var(--border-medium); } .popover-header { background-color: var(--bg-secondary); border-bottom-color: var(--border-light); color: var(--text-primary); } .popover-body { color: var(--text-primary); } /* ============================================================================= Accordion ============================================================================= */ .accordion-item { background-color: var(--card-bg) !important; border-color: var(--border-medium) !important; } .accordion-button { background-color: var(--card-bg) !important; color: var(--text-primary) !important; } .accordion-button:not(.collapsed) { background-color: var(--bg-secondary) !important; color: var(--brand-primary) !important; } .accordion-button:focus { border-color: var(--input-focus-border) !important; box-shadow: 0 0 0 0.25rem var(--input-focus-shadow) !important; } .accordion-body { background-color: var(--card-bg); color: var(--text-primary); } /* ============================================================================= Footer ============================================================================= */ .site-footer { background-color: var(--bg-secondary); border-top: 1px solid var(--border-light); color: var(--text-secondary); } .site-footer a { color: var(--text-secondary); } .site-footer a:hover { color: var(--brand-primary); } /* ============================================================================= Miscellaneous ============================================================================= */ /* Code elements */ code { color: var(--status-danger); background-color: var(--bg-secondary); padding: 0.125rem 0.25rem; border-radius: var(--radius-sm); } pre { background-color: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-medium); border-radius: var(--radius-md); padding: 1rem; } pre code { background-color: transparent; padding: 0; } /* Blockquotes */ blockquote { border-left: 4px solid var(--brand-primary); padding-left: 1rem; color: var(--text-secondary); } /* Selection */ ::selection { background-color: var(--brand-primary); color: var(--btn-primary-text); } /* Scrollbars (WebKit) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-secondary); } ::-webkit-scrollbar-thumb { background: var(--border-dark); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* ============================================================================= Theme Switcher Component Styles ============================================================================= */ .theme-switcher { display: flex; gap: 0.5rem; } .theme-switcher .btn { padding: 0.5rem; line-height: 1; } .theme-switcher .btn.active { background-color: var(--brand-primary); color: var(--btn-primary-text); } /* ============================================================================= Print Styles - Remove theme colors for printing ============================================================================= */ @media print { * { background-color: white !important; color: black !important; box-shadow: none !important; } }