/** * RIVUS360 Core Theme Module - Dark Mode Styles * ============================================== * CSS custom properties for light and dark themes. * Theme is controlled via data-theme attribute on element. */ /* ============================================================================= LIGHT THEME (Default) ============================================================================= */ :root, [data-theme="light"] { /* Background Colors */ --theme-bg-primary: #ffffff; --theme-bg-secondary: #f8f9fa; --theme-bg-tertiary: #e9ecef; --theme-bg-hover: rgba(0, 0, 0, 0.04); --theme-bg-active: rgba(0, 0, 0, 0.08); /* Text Colors - use settings values if available, fallback to defaults */ --theme-text-primary: var(--text-color-light, #212529); --theme-text-secondary: var(--text-muted-light, #6c757d); --theme-text-muted: #9ca3af; --theme-text-inverse: #ffffff; /* Button Colors - from settings */ --theme-btn-save: var(--button-save-light, #28a745); --theme-btn-save-hover: var(--button-save-hover-light, #218838); /* Border Colors */ --theme-border-color: #dee2e6; --theme-border-light: #e9ecef; --theme-border-dark: #ced4da; /* Shadow */ --theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --theme-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); --theme-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.15); /* Sidebar */ --theme-sidebar-bg: #f8f9fa; --theme-sidebar-text: #212529; --theme-sidebar-hover: rgba(0, 0, 0, 0.05); --theme-sidebar-active-bg: var(--backend-primary, #007bff); --theme-sidebar-active-text: #ffffff; /* Cards & Panels */ --theme-card-bg: #ffffff; --theme-card-border: #dee2e6; /* Form Elements */ --theme-input-bg: #ffffff; --theme-input-border: #dee2e6; --theme-input-focus-border: var(--backend-primary, #007bff); --theme-input-placeholder: #9ca3af; /* Tables */ --theme-table-header-bg: #f8f9fa; --theme-table-row-hover: rgba(0, 0, 0, 0.02); --theme-table-border: #dee2e6; /* Messages */ --theme-message-success-bg: #d4edda; --theme-message-success-text: #155724; --theme-message-error-bg: #f8d7da; --theme-message-error-text: #721c24; --theme-message-warning-bg: #fff3cd; --theme-message-warning-text: #856404; --theme-message-info-bg: #d1ecf1; --theme-message-info-text: #0c5460; /* Code/Pre */ --theme-code-bg: #f8f9fa; --theme-code-text: #212529; /* Scrollbar */ --theme-scrollbar-track: #f1f1f1; --theme-scrollbar-thumb: #c1c1c1; --theme-scrollbar-thumb-hover: #a8a8a8; } /* ============================================================================= DARK THEME ============================================================================= */ [data-theme="dark"] { /* Background Colors - Pure Gray Palette */ --theme-bg-primary: #121212; --theme-bg-secondary: #1e1e1e; --theme-bg-tertiary: #2d2d2d; --theme-bg-hover: rgba(255, 255, 255, 0.05); --theme-bg-active: rgba(255, 255, 255, 0.1); /* Text Colors - use settings values if available, fallback to defaults */ --theme-text-primary: var(--text-color-dark, #e4e4e7); --theme-text-secondary: var(--text-muted-dark, #a1a1aa); --theme-text-muted: #71717a; --theme-text-inverse: #121212; /* Button Colors - from settings */ --theme-btn-save: var(--button-save-dark, #22c55e); --theme-btn-save-hover: var(--button-save-hover-dark, #16a34a); /* Border Colors */ --theme-border-color: #3f3f3f; --theme-border-light: #2a2a2a; --theme-border-dark: #4a4a4a; /* Shadow */ --theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --theme-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); --theme-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.6); /* Sidebar */ --theme-sidebar-bg: #1a1a1a; --theme-sidebar-text: #e4e4e7; --theme-sidebar-hover: rgba(255, 255, 255, 0.08); --theme-sidebar-active-bg: var(--backend-primary, #007bff); --theme-sidebar-active-text: #ffffff; /* Cards & Panels */ --theme-card-bg: #1e1e1e; --theme-card-border: #3f3f3f; /* Form Elements */ --theme-input-bg: #2a2a2a; --theme-input-border: #3f3f3f; --theme-input-focus-border: var(--backend-primary, #007bff); --theme-input-placeholder: #71717a; /* Tables */ --theme-table-header-bg: #252525; --theme-table-row-hover: rgba(255, 255, 255, 0.03); --theme-table-border: #3f3f3f; /* Messages */ --theme-message-success-bg: rgba(40, 167, 69, 0.2); --theme-message-success-text: #86efac; --theme-message-error-bg: rgba(220, 53, 69, 0.2); --theme-message-error-text: #fca5a5; --theme-message-warning-bg: rgba(255, 193, 7, 0.2); --theme-message-warning-text: #fde047; --theme-message-info-bg: rgba(23, 162, 184, 0.2); --theme-message-info-text: #67e8f9; /* Code/Pre */ --theme-code-bg: #2a2a2a; --theme-code-text: #e4e4e7; /* Scrollbar */ --theme-scrollbar-track: #1e1e1e; --theme-scrollbar-thumb: #4a4a4a; --theme-scrollbar-thumb-hover: #5a5a5a; /* Override light-colored vars for dark mode */ --light: #2a2a2a; --white: #1e1e1e; --dark: #e4e4e7; --border-color: #3f3f3f; --text-secondary: #a1a1aa; --text-primary: #e4e4e7; } /* ============================================================================= APPLY THEME VARIABLES TO ELEMENTS ============================================================================= */ /* Body */ body { background-color: var(--theme-bg-primary); color: var(--theme-text-primary); } /* Links - Frontend: use --primary, Backend/Dashboard: use --backend-link */ [data-theme="dark"] a { color: var(--primary, #c5023c); } [data-theme="dark"] a:hover { color: var(--primary-dark, #9e0230); } [data-theme="dark"] .dashboard a, [data-theme="dark"] .dashboard__sidebar a { color: var(--backend-link, #60a5fa); } [data-theme="dark"] .dashboard a:hover, [data-theme="dark"] .dashboard__sidebar a:hover { color: var(--backend-primary, #93c5fd); } /* Headers */ [data-theme="dark"] .site-header { background: var(--nav-bg-dark, var(--theme-bg-secondary)); border-bottom-color: var(--theme-border-color); } [data-theme="dark"] .logo { color: var(--nav-logo-dark, var(--theme-text-primary)); } [data-theme="dark"] .nav-link { color: var(--nav-text-dark, var(--theme-text-secondary)); } [data-theme="dark"] .language-btn { color: var(--nav-text-dark, var(--theme-text-primary)); } [data-theme="dark"] .feature-card-link h3 { color: var(--theme-text-primary); } [data-theme="dark"] .feature-card-link p { color: var(--theme-text-secondary); } /* Hero Section - Dark Mode */ [data-theme="dark"] .hero { background: linear-gradient(180deg, #0f1115 0%, #161a21 100%); } [data-theme="dark"] .hero::after { background: var(--theme-bg-primary, #121212); border-top-color: #333333; } [data-theme="dark"] .hero__title-text { color: #ffffff; } [data-theme="dark"] .hero-subtitle { color: #9ca3af; } [data-theme="dark"] .hero__orb--1 { background: radial-gradient(circle, rgba(220, 10, 50, 0.25) 0%, transparent 70%); } [data-theme="dark"] .hero__orb--2 { background: radial-gradient(circle, rgba(230, 40, 70, 0.18) 0%, transparent 70%); } [data-theme="dark"] .hero__orb--3 { background: radial-gradient(circle, rgba(210, 20, 60, 0.14) 0%, transparent 70%); } [data-theme="dark"] .hero__symbol { color: #ffffff; filter: brightness(1.5); } /* Dashboard Layout */ [data-theme="dark"] .dashboard__sidebar { background: var(--theme-sidebar-bg); border-right-color: var(--theme-border-color); } [data-theme="dark"] .dashboard__main { background: var(--theme-bg-primary); } [data-theme="dark"] .dashboard__nav-item { color: var(--theme-sidebar-text); } [data-theme="dark"] .dashboard__nav-item:hover { background: var(--theme-sidebar-hover); } [data-theme="dark"] .dashboard__nav-section-title { color: var(--theme-text-muted); } [data-theme="dark"] .dashboard__footer { background: var(--theme-bg-secondary); border-top-color: var(--theme-border-color); color: var(--theme-text-secondary); } /* Cards & Panels */ [data-theme="dark"] .card, [data-theme="dark"] .sidebar-card, [data-theme="dark"] .profile-section, [data-theme="dark"] .settings-section, [data-theme="dark"] .form-section { background: var(--theme-card-bg); border-color: var(--theme-card-border); } [data-theme="dark"] .card-header, [data-theme="dark"] .sidebar-card-header { background: var(--theme-bg-secondary); border-bottom-color: var(--theme-border-color); } /* Form Elements */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select, [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background-color: var(--theme-input-bg); border-color: var(--theme-input-border); color: var(--theme-text-primary); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus, [data-theme="dark"] input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus { border-color: var(--theme-input-focus-border); background-color: var(--theme-input-bg); color: var(--theme-text-primary); } [data-theme="dark"] .form-control::placeholder, [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--theme-input-placeholder); } [data-theme="dark"] label, [data-theme="dark"] .form-label { color: var(--theme-text-primary); } [data-theme="dark"] .form-help, [data-theme="dark"] .form-switch-info { color: var(--theme-text-secondary); } /* Buttons */ [data-theme="dark"] .btn-outline { background: transparent; border-color: var(--theme-border-color); color: var(--theme-text-primary); } [data-theme="dark"] .btn-outline:hover { background: #ffffff; color: var(--primary, #c5023c); border-color: var(--primary, #c5023c); } [data-theme="dark"] .btn-outline:hover svg { stroke: var(--primary, #c5023c); } [data-theme="dark"] .btn-outline:hover i { color: var(--primary, #c5023c); } [data-theme="dark"] .btn-danger { border-color: var(--backend-danger); color: var(--backend-danger); } /* Tables */ [data-theme="dark"] .data-table th { background: var(--theme-table-header-bg); color: var(--theme-text-secondary); } [data-theme="dark"] .data-table td { border-bottom-color: var(--theme-table-border); } [data-theme="dark"] .data-table tbody tr:hover { background: var(--theme-table-row-hover); } /* Page Header */ [data-theme="dark"] .page-header { background: var(--theme-card-bg); box-shadow: var(--theme-shadow); border-left-color: var(--backend-primary, #007bff); } [data-theme="dark"] .page-header h1 { color: var(--theme-text-primary); } /* Breadcrumb */ [data-theme="dark"] .breadcrumb-nav { background: var(--theme-card-bg); box-shadow: var(--theme-shadow-sm); } [data-theme="dark"] .breadcrumb-item.active { color: var(--theme-text-secondary); } /* Messages */ [data-theme="dark"] .dashboard__messages .message { background: var(--theme-card-bg); } [data-theme="dark"] .dashboard__messages .message-success { background: var(--theme-message-success-bg); color: var(--theme-message-success-text); } [data-theme="dark"] .dashboard__messages .message-error, [data-theme="dark"] .dashboard__messages .message-danger { background: var(--theme-message-error-bg); color: var(--theme-message-error-text); } [data-theme="dark"] .dashboard__messages .message-warning { background: var(--theme-message-warning-bg); color: var(--theme-message-warning-text); } [data-theme="dark"] .dashboard__messages .message-info { background: var(--theme-message-info-bg); color: var(--theme-message-info-text); } /* Dashboard Welcome */ [data-theme="dark"] .dashboard__welcome { background: linear-gradient(135deg, var(--backend-primary, #007bff), var(--backend-primary-dark, #0056b3)); } /* Stat Cards */ [data-theme="dark"] .stat-card { background: var(--theme-card-bg); } /* Quick Actions */ [data-theme="dark"] .quick-action { background: var(--theme-card-bg); border-color: var(--theme-border-color); color: var(--theme-text-primary); } [data-theme="dark"] .quick-action:hover { box-shadow: var(--theme-shadow); border-color: var(--backend-primary, #007bff); } /* Security Items */ [data-theme="dark"] .security-item { background: var(--theme-card-bg); } /* Security Options */ [data-theme="dark"] .security-option { background: var(--theme-card-bg); border-color: var(--theme-border-color); } /* Info Items */ [data-theme="dark"] .info-item { background: var(--theme-card-bg); border-color: var(--theme-border-color); } [data-theme="dark"] .info-label { color: var(--theme-text-secondary); } /* Badges */ [data-theme="dark"] .badge { background: var(--theme-bg-tertiary); color: var(--theme-text-secondary); } /* Status Badges */ [data-theme="dark"] .status-badge--active { background: rgba(40, 167, 69, 0.2); color: #86efac; } [data-theme="dark"] .status-badge--inactive { background: rgba(220, 53, 69, 0.2); color: #fca5a5; } /* Form Switch */ [data-theme="dark"] .form-switch input[type="checkbox"] { background: var(--theme-border-dark); } [data-theme="dark"] .form-group--switch { background: var(--theme-card-bg); border-color: var(--theme-border-color); } /* Custom Select */ [data-theme="dark"] .custom-select-trigger { background: var(--theme-input-bg); border-color: var(--theme-input-border); color: var(--theme-text-primary); } [data-theme="dark"] .custom-select-dropdown { background: var(--theme-card-bg); border-color: var(--theme-border-color); } [data-theme="dark"] .custom-select-option:hover { background: var(--theme-bg-hover); } [data-theme="dark"] .custom-select-option.selected { background: rgba(0, 123, 255, 0.15); } /* Language Dropdown */ [data-theme="dark"] .language-dropdown { background: var(--theme-card-bg); border-color: var(--theme-border-color); } [data-theme="dark"] .language-dropdown-header { border-bottom-color: var(--theme-border-color); color: var(--theme-text-secondary); } [data-theme="dark"] .language-option { color: var(--theme-text-primary); } [data-theme="dark"] .language-option:hover { background: var(--theme-bg-hover); } /* File Upload */ [data-theme="dark"] .file-upload-area { background: var(--theme-card-bg); border-color: var(--theme-border-color); } [data-theme="dark"] .file-upload-area:hover { border-color: var(--backend-primary, #007bff); background: rgba(0, 123, 255, 0.05); } [data-theme="dark"] .file-upload-preview { background: var(--theme-card-bg); border-color: var(--theme-border-color); } /* API Key */ [data-theme="dark"] .api-key-created { background: var(--theme-message-success-bg); border-color: rgba(40, 167, 69, 0.3); } [data-theme="dark"] .api-key-created h3 { color: var(--theme-message-success-text); } [data-theme="dark"] .api-key-display { background: var(--theme-input-bg); } /* Nav Group */ [data-theme="dark"] .dashboard__nav-subitems { background: rgba(255, 255, 255, 0.02); border-left-color: var(--theme-border-color); } [data-theme="dark"] .dashboard__nav-subitem { color: var(--theme-text-secondary); } [data-theme="dark"] .dashboard__nav-subitem:hover { color: var(--theme-text-primary); background: var(--theme-bg-hover); } [data-theme="dark"] .dashboard__nav-subitem--active { color: var(--backend-primary, #60a5fa); border-left-color: var(--backend-primary, #60a5fa); } /* Highlighted Nav (Plugin Store) */ [data-theme="dark"] .dashboard__nav-section--highlight { border-top-color: var(--theme-border-color); } [data-theme="dark"] .dashboard__nav-item--highlight { background: linear-gradient(135deg, rgba(40, 167, 69, 0.12) 0%, rgba(40, 167, 69, 0.06) 100%); } [data-theme="dark"] .dashboard__nav-item--highlight:hover { background: linear-gradient(135deg, rgba(40, 167, 69, 0.2) 0%, rgba(40, 167, 69, 0.1) 100%); } /* Scrollbar Styling */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--theme-scrollbar-track); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--theme-scrollbar-thumb); border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--theme-scrollbar-thumb-hover); } /* ============================================================================= THEME SELECTOR COMPONENT ============================================================================= */ .theme-selector { display: flex; gap: 0.5rem; padding: 0.25rem; background: var(--theme-input-bg); border: 1px solid var(--theme-border-color); border-radius: var(--radius, 8px); } .theme-selector__option { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 1rem; border: none; border-radius: calc(var(--radius, 8px) - 4px); background: transparent; color: var(--theme-text-secondary); cursor: pointer; transition: all 0.2s ease; font-size: 0.875rem; font-weight: 500; } .theme-selector__option:hover { background: var(--theme-bg-hover); color: var(--theme-text-primary); } .theme-selector__option.active { background: var(--backend-primary, #007bff); color: white; } .theme-selector__option svg, .theme-selector__option i { font-size: 1rem; } /* Theme indicator in navbar */ .theme-toggle-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--theme-border-color); border-radius: var(--radius, 8px); background: transparent; color: var(--theme-text-secondary); cursor: pointer; transition: all 0.2s ease; } .theme-toggle-btn:hover { background: var(--theme-bg-hover); color: var(--theme-text-primary); border-color: var(--theme-border-dark); } .theme-toggle-btn svg { width: 20px; height: 20px; } /* Show/hide icons based on theme */ [data-theme="light"] .theme-icon-dark, [data-theme="dark"] .theme-icon-light { display: none; } [data-theme="light"] .theme-icon-light, [data-theme="dark"] .theme-icon-dark { display: block; } /* ============================================================================= CUSTOM BUTTON COLORS FROM SETTINGS ============================================================================= */ /* Save/Success Button - uses colors from site settings */ .btn-success, .btn-save { background-color: var(--theme-btn-save); border-color: var(--theme-btn-save); } .btn-success:hover, .btn-save:hover { background-color: var(--theme-btn-save-hover); border-color: var(--theme-btn-save-hover); } .btn-success:focus, .btn-save:focus { background-color: var(--theme-btn-save-hover); border-color: var(--theme-btn-save-hover); box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25); } /* Dark mode button adjustments */ [data-theme="dark"] .btn-success, [data-theme="dark"] .btn-save { background-color: var(--theme-btn-save); border-color: var(--theme-btn-save); color: #000; } [data-theme="dark"] .btn-success:hover, [data-theme="dark"] .btn-save:hover { background-color: var(--theme-btn-save-hover); border-color: var(--theme-btn-save-hover); } /* Primary Button - ensure white text in dark mode */ [data-theme="dark"] .btn-primary { background-color: var(--backend-primary, #007bff); border-color: var(--backend-primary, #007bff); color: #ffffff !important; } [data-theme="dark"] .btn-primary:hover { background-color: var(--backend-primary-dark, #0056b3); border-color: var(--backend-primary-dark, #0056b3); color: #ffffff !important; } /* ============================================================================= CUSTOM SELECTOR OVERRIDES (Language, Timezone, Date Format) Ensure dark mode styles override component defaults ============================================================================= */ /* Language Selector - Dark Mode Override */ html[data-theme="dark"] .language-selector-display, [data-theme="dark"] .language-selector-display { background: var(--theme-input-bg, #2a2a2a) !important; border-color: var(--theme-input-border, #3f3f3f) !important; color: var(--theme-text-primary, #e4e4e7) !important; } html[data-theme="dark"] .language-selector-dropdown, [data-theme="dark"] .language-selector-dropdown { background: var(--theme-card-bg, #1e1e1e) !important; border-color: var(--theme-border-color, #3f3f3f) !important; } html[data-theme="dark"] .language-option, [data-theme="dark"] .language-option { background: var(--theme-card-bg, #1e1e1e) !important; color: var(--theme-text-primary, #e4e4e7) !important; } html[data-theme="dark"] .language-option:hover, [data-theme="dark"] .language-option:hover { background: var(--theme-bg-hover, rgba(255, 255, 255, 0.05)) !important; } html[data-theme="dark"] .language-selector-search, [data-theme="dark"] .language-selector-search { background: var(--theme-bg-secondary, #1e1e1e) !important; border-bottom-color: var(--theme-border-color, #3f3f3f) !important; } html[data-theme="dark"] .language-selector-search input, [data-theme="dark"] .language-selector-search input { background: var(--theme-input-bg, #2a2a2a) !important; border-color: var(--theme-input-border, #3f3f3f) !important; color: var(--theme-text-primary, #e4e4e7) !important; } html[data-theme="dark"] .language-option-group, [data-theme="dark"] .language-option-group { background: var(--theme-bg-secondary, #1e1e1e) !important; border-bottom-color: var(--theme-border-color, #3f3f3f) !important; color: var(--theme-text-muted, #71717a) !important; } /* Timezone Selector - Dark Mode Override */ html[data-theme="dark"] .timezone-selector-display, [data-theme="dark"] .timezone-selector-display { background: var(--theme-input-bg, #2a2a2a) !important; border-color: var(--theme-input-border, #3f3f3f) !important; color: var(--theme-text-primary, #e4e4e7) !important; } html[data-theme="dark"] .timezone-selector-dropdown, [data-theme="dark"] .timezone-selector-dropdown { background: var(--theme-card-bg, #1e1e1e) !important; border-color: var(--theme-border-color, #3f3f3f) !important; } html[data-theme="dark"] .timezone-option, [data-theme="dark"] .timezone-option { background: var(--theme-card-bg, #1e1e1e) !important; color: var(--theme-text-primary, #e4e4e7) !important; } html[data-theme="dark"] .timezone-option:hover, [data-theme="dark"] .timezone-option:hover { background: var(--theme-bg-hover, rgba(255, 255, 255, 0.05)) !important; } html[data-theme="dark"] .timezone-selector-search, [data-theme="dark"] .timezone-selector-search { background: var(--theme-bg-secondary, #1e1e1e) !important; border-bottom-color: var(--theme-border-color, #3f3f3f) !important; } html[data-theme="dark"] .timezone-selector-search input, [data-theme="dark"] .timezone-selector-search input { background: var(--theme-input-bg, #2a2a2a) !important; border-color: var(--theme-input-border, #3f3f3f) !important; color: var(--theme-text-primary, #e4e4e7) !important; } html[data-theme="dark"] .timezone-option-group, [data-theme="dark"] .timezone-option-group { background: var(--theme-bg-secondary, #1e1e1e) !important; border-bottom-color: var(--theme-border-color, #3f3f3f) !important; color: var(--theme-text-muted, #71717a) !important; } /* Date Format Selector - Dark Mode Override */ html[data-theme="dark"] .dateformat-selector-display, [data-theme="dark"] .dateformat-selector-display { background: var(--theme-input-bg, #2a2a2a) !important; border-color: var(--theme-input-border, #3f3f3f) !important; color: var(--theme-text-primary, #e4e4e7) !important; } html[data-theme="dark"] .dateformat-selector-dropdown, [data-theme="dark"] .dateformat-selector-dropdown { background: var(--theme-card-bg, #1e1e1e) !important; border-color: var(--theme-border-color, #3f3f3f) !important; } html[data-theme="dark"] .dateformat-option, [data-theme="dark"] .dateformat-option { background: var(--theme-card-bg, #1e1e1e) !important; color: var(--theme-text-primary, #e4e4e7) !important; } html[data-theme="dark"] .dateformat-option:hover, [data-theme="dark"] .dateformat-option:hover { background: var(--theme-bg-hover, rgba(255, 255, 255, 0.05)) !important; } /* ============================================================================= PREVENT FLASH OF UNSTYLED CONTENT ============================================================================= */ html:not([data-theme]) { visibility: hidden; } html[data-theme] { visibility: visible; }