/* ??????????????????????????????????????????????????????????? UDM Dark Mode — Admin Panel & Public Website Activated via data-bs-theme="dark" on ??????????????????????????????????????????????????????????? */ /* ?? CSS Variables for Dark Mode ?? */ [data-bs-theme="dark"] { --udm-dark-bg: #121212; --udm-dark-surface: #1e1e1e; --udm-dark-surface-2: #252525; --udm-dark-surface-3: #2c2c2c; --udm-dark-border: #333; --udm-dark-text: #e0e0e0; --udm-dark-text-muted: #999; --udm-dark-input-bg: #2a2a2a; --udm-dark-input-border: #444; color-scheme: dark; } /* ??????????????????????????????????????? SHARED (Admin + Public) ??????????????????????????????????????? */ /* Toggle button styling */ .udm-darkmode-toggle { background: none; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; cursor: pointer; transition: all 0.25s ease; color: #555; position: relative; overflow: hidden; } .udm-darkmode-toggle:hover { background: rgba(254, 0, 2, 0.08); border-color: rgba(254, 0, 2, 0.2); color: #DC0002; } [data-bs-theme="dark"] .udm-darkmode-toggle { border-color: rgba(255,205,0,0.2); color: #ffcd00; } [data-bs-theme="dark"] .udm-darkmode-toggle:hover { background: rgba(255, 205, 0, 0.1); border-color: rgba(255,205,0,0.4); } /* Icon switch */ .udm-darkmode-toggle .ri-moon-line { display: inline; } .udm-darkmode-toggle .ri-sun-line { display: none; } [data-bs-theme="dark"] .udm-darkmode-toggle .ri-moon-line { display: none; } [data-bs-theme="dark"] .udm-darkmode-toggle .ri-sun-line { display: inline; } /* ??????????????????????????????????????? ADMIN PANEL DARK MODE ??????????????????????????????????????? */ /* Top navbar */ [data-bs-theme="dark"] #page-topbar { background: var(--udm-dark-surface) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.3); } [data-bs-theme="dark"] .page-title { color: var(--udm-dark-text) !important; } [data-bs-theme="dark"] .header-item { color: var(--udm-dark-text) !important; } /* Page content */ [data-bs-theme="dark"] .page-content { background: var(--udm-dark-bg) !important; } [data-bs-theme="dark"] .main-content { background: var(--udm-dark-bg) !important; } /* Cards */ [data-bs-theme="dark"] .card { background: var(--udm-dark-surface) !important; box-shadow: 0 1px 6px rgba(0,0,0,0.2) !important; } [data-bs-theme="dark"] .card-header { background: var(--udm-dark-surface) !important; border-bottom-color: var(--udm-dark-border) !important; } [data-bs-theme="dark"] .card-title { color: var(--udm-dark-text) !important; } [data-bs-theme="dark"] .card-body { color: var(--udm-dark-text); } /* Tables */ [data-bs-theme="dark"] .table { color: var(--udm-dark-text) !important; } [data-bs-theme="dark"] .table thead th { background: #1a1a1a !important; color: #e0e0e0 !important; border-color: var(--udm-dark-border) !important; } [data-bs-theme="dark"] .table tbody td { border-bottom-color: var(--udm-dark-border) !important; color: var(--udm-dark-text) !important; } [data-bs-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: var(--udm-dark-surface-2) !important; } [data-bs-theme="dark"] .table tbody tr:hover { background-color: var(--udm-dark-surface-3) !important; } /* DataTables */ [data-bs-theme="dark"] .dataTables_wrapper .dataTables_info, [data-bs-theme="dark"] .dataTables_wrapper .dataTables_length, [data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter, [data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate { color: var(--udm-dark-text-muted) !important; } [data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select, [data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input { background: var(--udm-dark-input-bg) !important; border-color: var(--udm-dark-input-border) !important; color: var(--udm-dark-text) !important; } [data-bs-theme="dark"] .page-item .page-link { background: var(--udm-dark-surface-2) !important; border-color: var(--udm-dark-border) !important; color: var(--udm-dark-text) !important; } [data-bs-theme="dark"] .page-item.active .page-link { background: #DC0002 !important; border-color: #DC0002 !important; color: #fff !important; } /* Form controls */ [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: var(--udm-dark-input-bg) !important; border-color: var(--udm-dark-input-border) !important; color: var(--udm-dark-text) !important; } [data-bs-theme="dark"] .form-control::placeholder { color: #777 !important; } [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { border-color: #DC0002 !important; box-shadow: 0 0 0 0.15rem rgba(254, 0, 2, 0.25) !important; } [data-bs-theme="dark"] .form-control.bg-light, [data-bs-theme="dark"] .form-control[readonly] { background-color: var(--udm-dark-surface-3) !important; } [data-bs-theme="dark"] label, [data-bs-theme="dark"] .form-label, [data-bs-theme="dark"] .col-form-label-sm { color: var(--udm-dark-text-muted) !important; } /* Select2 */ [data-bs-theme="dark"] .select2-container--default .select2-selection--single { background-color: var(--udm-dark-input-bg) !important; border-color: var(--udm-dark-input-border) !important; } [data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--udm-dark-text) !important; } [data-bs-theme="dark"] .select2-container--default .select2-results__option { background: var(--udm-dark-surface) !important; color: var(--udm-dark-text) !important; } [data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted { background: #DC0002 !important; color: #fff !important; } [data-bs-theme="dark"] .select2-dropdown { background: var(--udm-dark-surface) !important; border-color: var(--udm-dark-input-border) !important; } [data-bs-theme="dark"] .select2-search__field { background: var(--udm-dark-input-bg) !important; color: var(--udm-dark-text) !important; border-color: var(--udm-dark-input-border) !important; } /* Breadcrumbs */ [data-bs-theme="dark"] .breadcrumb { background: var(--udm-dark-surface) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important; } [data-bs-theme="dark"] .breadcrumb-item.active { color: var(--udm-dark-text-muted) !important; } /* Modals */ [data-bs-theme="dark"] .modal-content { background: var(--udm-dark-surface) !important; } [data-bs-theme="dark"] .modal-header { background: #111 !important; } [data-bs-theme="dark"] .modal-footer { background: var(--udm-dark-surface-2) !important; border-top-color: var(--udm-dark-border) !important; } [data-bs-theme="dark"] .modal-body { color: var(--udm-dark-text) !important; } /* Dropdowns */ [data-bs-theme="dark"] .dropdown-menu { background: var(--udm-dark-surface) !important; border-color: var(--udm-dark-border) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important; } [data-bs-theme="dark"] .dropdown-item { color: var(--udm-dark-text) !important; } [data-bs-theme="dark"] .dropdown-item:hover { background: var(--udm-dark-surface-3) !important; } /* Alerts */ [data-bs-theme="dark"] .alert-info { background-color: rgba(80, 165, 241, 0.12) !important; border-color: rgba(80, 165, 241, 0.2) !important; color: #8ac4f8 !important; } [data-bs-theme="dark"] .alert-warning { background-color: rgba(255, 205, 0, 0.1) !important; border-color: rgba(255, 205, 0, 0.2) !important; color: #ffd740 !important; } [data-bs-theme="dark"] .alert-success { background-color: rgba(40, 167, 69, 0.12) !important; border-color: rgba(40, 167, 69, 0.2) !important; color: #6fcf97 !important; } [data-bs-theme="dark"] .alert-danger { background-color: rgba(254, 0, 2, 0.12) !important; border-color: rgba(254, 0, 2, 0.2) !important; color: #e57373 !important; } /* Filter section */ [data-bs-theme="dark"] .filter-section { background: var(--udm-dark-surface-2) !important; border-color: var(--udm-dark-border) !important; } /* Text utilities */ [data-bs-theme="dark"] .text-dark { color: var(--udm-dark-text) !important; } [data-bs-theme="dark"] .text-muted { color: var(--udm-dark-text-muted) !important; } [data-bs-theme="dark"] .fw-semibold, [data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3, [data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6 { color: var(--udm-dark-text); } /* Background utilities */ [data-bs-theme="dark"] .bg-light { background-color: var(--udm-dark-surface-2) !important; } [data-bs-theme="dark"] .bg-white { background-color: var(--udm-dark-surface) !important; } /* Footer */ [data-bs-theme="dark"] .footer { background: var(--udm-dark-surface) !important; border-top-color: var(--udm-dark-border) !important; color: var(--udm-dark-text-muted) !important; } /* Mini stat cards */ [data-bs-theme="dark"] .mini-stats-wid .card-body { color: var(--udm-dark-text) !important; } /* Notification dropdown */ [data-bs-theme="dark"] .notification-item:hover { background: var(--udm-dark-surface-2) !important; } /* Summernote editor */ [data-bs-theme="dark"] .note-editor { background: var(--udm-dark-input-bg) !important; border-color: var(--udm-dark-input-border) !important; } [data-bs-theme="dark"] .note-editor .note-editing-area .note-editable { background: var(--udm-dark-input-bg) !important; color: var(--udm-dark-text) !important; } [data-bs-theme="dark"] .note-editor .note-toolbar { background: var(--udm-dark-surface-3) !important; border-bottom-color: var(--udm-dark-border) !important; } /* Profile card */ [data-bs-theme="dark"] .profile-card .profile-body { background: var(--udm-dark-surface) !important; } /* Simplebar scrollbar */ [data-bs-theme="dark"] .simplebar-scrollbar::before { background: rgba(255,255,255,0.15) !important; } /* hr */ [data-bs-theme="dark"] hr { border-top-color: var(--udm-dark-border) !important; } /* ??????????????????????????????????????? PUBLIC WEBSITE DARK MODE ??????????????????????????????????????? */ /* Body */ [data-bs-theme="dark"] body { background-color: var(--udm-dark-bg) !important; color: var(--udm-dark-text) !important; } /* Topbar */ [data-bs-theme="dark"] .udm-topbar { background: #0a0a0a !important; } /* Navbar */ [data-bs-theme="dark"] .udm-navbar { background: var(--udm-dark-surface) !important; box-shadow: 0 1px 8px rgba(0,0,0,0.3) !important; } [data-bs-theme="dark"] .udm-navbar.udm-scrolled { background: rgba(30, 30, 30, 0.96) !important; backdrop-filter: blur(16px); } [data-bs-theme="dark"] .udm-navbar .navbar-brand span { color: var(--udm-dark-text) !important; } [data-bs-theme="dark"] .udm-navbar .nav-link { color: #ccc !important; } [data-bs-theme="dark"] .udm-navbar .nav-link:hover, [data-bs-theme="dark"] .udm-navbar .nav-link.active, [data-bs-theme="dark"] .udm-navbar .nav-link.udm-active { color: #ffcd00 !important; } [data-bs-theme="dark"] .udm-navbar .dropdown-menu { background: var(--udm-dark-surface) !important; border-top-color: #DC0002 !important; box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important; } [data-bs-theme="dark"] .udm-navbar .dropdown-item { color: var(--udm-dark-text) !important; } [data-bs-theme="dark"] .udm-navbar .dropdown-item:hover { background: linear-gradient(90deg, rgba(254,0,2,0.15), transparent) !important; color: #ffcd00 !important; } [data-bs-theme="dark"] .udm-navbar .dropdown-item .dropdown-desc { color: #666 !important; } [data-bs-theme="dark"] .udm-navbar .dropdown-divider { border-color: var(--udm-dark-border) !important; } /* Mobile collapsed menu */ @media (max-width: 991.98px) { [data-bs-theme="dark"] .udm-navbar .navbar-collapse { background: var(--udm-dark-surface-2) !important; border-color: var(--udm-dark-border) !important; } [data-bs-theme="dark"] .udm-navbar .nav-link:hover { background: rgba(254,0,2,0.1) !important; } [data-bs-theme="dark"] .udm-navbar .dropdown-menu { background: var(--udm-dark-surface-3) !important; } [data-bs-theme="dark"] .udm-navbar .nav-cta-group { border-top-color: var(--udm-dark-border) !important; } } /* Hamburger icon */ [data-bs-theme="dark"] .navbar-toggler-icon, [data-bs-theme="dark"] .navbar-toggler-icon::before, [data-bs-theme="dark"] .navbar-toggler-icon::after { background: var(--udm-dark-text) !important; } /* Sections */ [data-bs-theme="dark"] .udm-section { background: var(--udm-dark-bg); } [data-bs-theme="dark"] .udm-bg-light { background: var(--udm-dark-surface) !important; } [data-bs-theme="dark"] .udm-section-title { color: var(--udm-dark-text) !important; } /* Cards (public) */ [data-bs-theme="dark"] .udm-card { background: var(--udm-dark-surface) !important; box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important; } [data-bs-theme="dark"] .udm-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important; } /* Page header sections (Contact, Blog, etc.) */ [data-bs-theme="dark"] section[style*="background:#f1f4f9"], [data-bs-theme="dark"] section[style*="background: #f1f4f9"] { background: var(--udm-dark-surface) !important; } /* Nav pills on public pages */ [data-bs-theme="dark"] .nav-pills .nav-link { color: var(--udm-dark-text-muted) !important; } [data-bs-theme="dark"] .nav-pills .nav-link:hover { color: #DC0002 !important; } [data-bs-theme="dark"] .nav-pills .nav-link.active { color: #fff !important; } /* Blog cards etc */ [data-bs-theme="dark"] .card-body p, [data-bs-theme="dark"] .card-body span { color: var(--udm-dark-text-muted); } /* Page loader overlay */ [data-bs-theme="dark"] .udm-page-loader { background: rgba(18, 18, 18, 0.95) !important; } /* Tab content */ [data-bs-theme="dark"] .tab-content .tab-pane p { color: var(--udm-dark-text-muted) !important; } /* ?? About page: Our Journey section ?? */ [data-bs-theme="dark"] .udm-journey-section { background: var(--udm-dark-surface) !important; } [data-bs-theme="dark"] .history-card { background: var(--udm-dark-surface-2) !important; border-color: var(--udm-dark-border) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.2) !important; } [data-bs-theme="dark"] .history-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important; } [data-bs-theme="dark"] .history-card-title { color: var(--udm-dark-text) !important; } [data-bs-theme="dark"] .journey-stat-box { background: var(--udm-dark-surface-2) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.15) !important; } [data-bs-theme="dark"] .udm-timeline-content { background: var(--udm-dark-surface-2) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.15) !important; } /* Stat number boxes on About page */ [data-bs-theme="dark"] div[style*="background:#000000"], [data-bs-theme="dark"] div[style*="background: #000000"] { border: 1px solid var(--udm-dark-border); } /* Form on contact/donate pages */ [data-bs-theme="dark"] .form-control-sm, [data-bs-theme="dark"] .form-select-sm { background-color: var(--udm-dark-input-bg) !important; border-color: var(--udm-dark-input-border) !important; color: var(--udm-dark-text) !important; } /* Input group text */ [data-bs-theme="dark"] .input-group-text { background-color: var(--udm-dark-surface-3) !important; border-color: var(--udm-dark-input-border) !important; color: var(--udm-dark-text-muted) !important; } /* Smooth transition when toggling */ html { transition: background-color 0.3s ease, color 0.3s ease; } body, .card, .udm-navbar, #page-topbar, .page-content, .main-content, .form-control, .form-select, .dropdown-menu, .modal-content, .breadcrumb, .table, .footer, .udm-card, .filter-section, .alert, .udm-section { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* ?? Register layout specific ?? */ [data-bs-theme="dark"] .reg-card { background: var(--udm-dark-surface) !important; } [data-bs-theme="dark"] .reg-card .card-body { background: var(--udm-dark-surface) !important; } [data-bs-theme="dark"] nav.navbar.sticky-top { background: var(--udm-dark-surface) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; } [data-bs-theme="dark"] nav.navbar.sticky-top .navbar-brand span { color: var(--udm-dark-text) !important; } [data-bs-theme="dark"] nav.navbar.sticky-top .btn[style*="border:1px solid #ddd"] { border-color: var(--udm-dark-border) !important; color: var(--udm-dark-text) !important; } [data-bs-theme="dark"] footer.border-top { background: var(--udm-dark-surface) !important; border-top-color: var(--udm-dark-border) !important; color: var(--udm-dark-text-muted) !important; } /* Login page */ [data-bs-theme="dark"] .login-card, [data-bs-theme="dark"] .auth-card { background: var(--udm-dark-surface) !important; } [data-bs-theme="dark"] .login-body { background: var(--udm-dark-surface) !important; } [data-bs-theme="dark"] .login-body .form-label { color: var(--udm-dark-text-muted) !important; } [data-bs-theme="dark"] .login-body .form-control { background-color: var(--udm-dark-input-bg) !important; border-color: var(--udm-dark-input-border) !important; color: var(--udm-dark-text) !important; } [data-bs-theme="dark"] .login-body .input-group .btn { background: var(--udm-dark-surface-3) !important; border-color: var(--udm-dark-input-border) !important; color: var(--udm-dark-text-muted) !important; } [data-bs-theme="dark"] .login-footer a { color: var(--udm-dark-text-muted) !important; } [data-bs-theme="dark"] .login-footer a:hover { color: #DC0002 !important; } [data-bs-theme="dark"] .login-divider { color: #555 !important; } [data-bs-theme="dark"] .login-divider::before, [data-bs-theme="dark"] .login-divider::after { background: var(--udm-dark-border) !important; } /* Smooth transition when toggling */ html { transition: background-color 0.3s ease, color 0.3s ease; }