/* ============================================ Blogur Light / Dark Theme ============================================ Controlled by Default (no attribute) = light. ============================================ */ /* ---------- Light mode (defaults) ---------- */ :root { --bg-body: #f8f9fa; --bg-card: #ffffff; --bg-input: #ffffff; --bg-hover: #f5f5f7; --bg-modal: #ffffff; --bg-dropdown: #ffffff; --text-primary: #212529; --text-secondary: #6c757d; --text-muted: #adb5bd; --border-color: #dee2e6; --border-light: #e9ecef; --shadow-color: rgba(0,0,0,.08); --shadow-heavy: rgba(0,0,0,.15); --code-bg: #f1f3f5; --table-stripe: rgba(0,0,0,.02); --alert-bg: #f8f9fa; --input-border: #ced4da; --input-focus-border: #86b7fe; --badge-muted-bg: #e9ecef; --badge-muted-color: #495057; --link-color: #1e3c72; /* Sidebar */ --sidebar-bg: #f1f1f2; --sidebar-border: #e0e0e0; --sidebar-text: #161823; --sidebar-text-secondary: rgba(22,24,35,.75); --sidebar-text-muted: rgba(22,24,35,.5); --sidebar-hover: rgba(22,24,35,.06); --sidebar-input-bg: #f3f4f6; --sidebar-input-border: #d1d5db; --sidebar-input-color: #161823; --sidebar-divider: rgba(22,24,35,.12); --sidebar-scrollbar: #ccc; /* Feed / video area */ --feed-bg: #f1f1f2; /* Action rail (right side of video) */ --action-color: #161823; --action-muted: rgba(22,24,35,.5); --scroll-arrow-bg: rgba(0,0,0,.06); --scroll-arrow-border: rgba(0,0,0,.12); --scroll-arrow-color: #161823; } /* ---------- Dark mode ---------- */ [data-theme="dark"] { --bg-body: #0f0f0f; --bg-card: #1a1a1a; --bg-input: #1e1e1e; --bg-hover: #252525; --bg-modal: #1a1a1a; --bg-dropdown: #1a1a1a; --text-primary: #e0e0e0; --text-secondary: #a0a0a0; --text-muted: #666; --border-color: #2a2a2a; --border-light: #222; --shadow-color: rgba(0,0,0,.3); --shadow-heavy: rgba(0,0,0,.5); --code-bg: #1e1e1e; --table-stripe: rgba(255,255,255,.02); --alert-bg: #1a1a1a; --input-border: #333; --input-focus-border: #4a7ab5; --badge-muted-bg: #2a2a2a; --badge-muted-color: #ccc; --link-color: #5b9bd5; /* Sidebar */ --sidebar-bg: #121212; --sidebar-border: rgba(255,255,255,.12); --sidebar-text: rgba(255,255,255,.9); --sidebar-text-secondary: rgba(255,255,255,.75); --sidebar-text-muted: rgba(255,255,255,.5); --sidebar-hover: rgba(255,255,255,.1); --sidebar-input-bg: #1e1e1e; --sidebar-input-border: #2a2a2a; --sidebar-input-color: #fff; --sidebar-divider: rgba(255,255,255,.12); --sidebar-scrollbar: #333; /* Feed / video area */ --feed-bg: #000000; /* Action rail (right side of video) */ --action-color: #fff; --action-muted: rgba(255,255,255,.5); --scroll-arrow-bg: rgba(255,255,255,.1); --scroll-arrow-border: rgba(255,255,255,.2); --scroll-arrow-color: #fff; } /* ---------- Global overrides ---------- */ body { background: var(--bg-body) !important; color: var(--text-primary); } /* Cards, containers */ [data-theme="dark"] .card, [data-theme="dark"] .list-group-item, [data-theme="dark"] .accordion-item { background: var(--bg-card) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } [data-theme="dark"] .card-header, [data-theme="dark"] .card-footer { background: var(--bg-hover) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } [data-theme="dark"] .card-title, [data-theme="dark"] .card-text { color: var(--text-primary) !important; } /* Text */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6, [data-theme="dark"] .h1, [data-theme="dark"] .h2, [data-theme="dark"] .h3, [data-theme="dark"] .h4, [data-theme="dark"] .h5, [data-theme="dark"] .h6 { color: var(--text-primary) !important; } [data-theme="dark"] p, [data-theme="dark"] span:not(.badge), [data-theme="dark"] label, [data-theme="dark"] small { color: var(--text-primary); } [data-theme="dark"] .text-muted { color: var(--text-secondary) !important; } [data-theme="dark"] .text-dark { color: var(--text-primary) !important; } [data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.sidebar-section-link):not(.mobile-menu-link):not(.overlay-username):not(.advertiser-chip) { color: var(--link-color); } /* Forms */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select, [data-theme="dark"] textarea.form-control { background-color: var(--bg-input) !important; border-color: var(--input-border) !important; color: var(--text-primary) !important; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { border-color: var(--input-focus-border) !important; box-shadow: 0 0 0 .25rem rgba(74,122,181,.25) !important; } [data-theme="dark"] .form-control::placeholder { color: var(--text-muted) !important; } [data-theme="dark"] .input-group-text { background: var(--bg-hover) !important; border-color: var(--input-border) !important; color: var(--text-secondary) !important; } /* Tables */ [data-theme="dark"] .table { color: var(--text-primary) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .table > :not(caption) > * > * { background-color: var(--bg-card) !important; border-bottom-color: var(--border-color) !important; color: var(--text-primary) !important; } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--bg-hover) !important; } [data-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: var(--bg-hover) !important; } [data-theme="dark"] .table thead th { background: var(--bg-hover) !important; border-color: var(--border-color) !important; } /* Modals */ [data-theme="dark"] .modal-content { background: var(--bg-modal) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } [data-theme="dark"] .modal-header { border-color: var(--border-color) !important; } [data-theme="dark"] .modal-footer { border-color: var(--border-color) !important; } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* Dropdowns */ [data-theme="dark"] .dropdown-menu { background: var(--bg-dropdown) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .dropdown-item { color: var(--text-primary) !important; } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background: var(--bg-hover) !important; color: var(--text-primary) !important; } [data-theme="dark"] .dropdown-divider { border-color: var(--border-color) !important; } /* Borders, separators */ [data-theme="dark"] .border, [data-theme="dark"] .border-top, [data-theme="dark"] .border-bottom, [data-theme="dark"] .border-start, [data-theme="dark"] .border-end { border-color: var(--border-color) !important; } [data-theme="dark"] hr { border-color: var(--border-color); opacity: .5; } /* Alerts */ [data-theme="dark"] .alert-info { background: rgba(51,154,240,.12) !important; border-color: rgba(51,154,240,.25) !important; color: #6db3f2 !important; } [data-theme="dark"] .alert-success { background: rgba(81,207,102,.12) !important; border-color: rgba(81,207,102,.25) !important; color: #6fdb8a !important; } [data-theme="dark"] .alert-warning { background: rgba(255,212,59,.12) !important; border-color: rgba(255,212,59,.25) !important; color: #ffd43b !important; } [data-theme="dark"] .alert-danger { background: rgba(255,107,107,.12) !important; border-color: rgba(255,107,107,.25) !important; color: #ff8a8a !important; } /* Badges */ [data-theme="dark"] .badge.bg-light { background: var(--badge-muted-bg) !important; color: var(--badge-muted-color) !important; } /* Breadcrumb */ [data-theme="dark"] .breadcrumb { background: var(--bg-card); } [data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); } /* Pagination */ [data-theme="dark"] .page-link { background: var(--bg-card) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } [data-theme="dark"] .page-link:hover { background: var(--bg-hover) !important; } [data-theme="dark"] .page-item.disabled .page-link { background: var(--bg-body) !important; color: var(--text-muted) !important; } /* Tabs / Nav pills */ [data-theme="dark"] .nav-tabs { border-color: var(--border-color) !important; } [data-theme="dark"] .nav-tabs .nav-link { color: var(--text-secondary) !important; } [data-theme="dark"] .nav-tabs .nav-link.active { background: var(--bg-card) !important; border-color: var(--border-color) var(--border-color) var(--bg-card) !important; color: var(--text-primary) !important; } /* Toast */ [data-theme="dark"] .toast { background: var(--bg-card) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } /* Specific page overrides */ /* Notification chips (header.php) */ [data-theme="dark"] .notif-chip { background: var(--badge-muted-bg); color: var(--badge-muted-color); } [data-theme="dark"] .notif-chip:hover { background: var(--bg-hover); color: var(--text-primary); } /* View-all anchors */ [data-theme="dark"] .view-all-anchor:hover { background: var(--bg-hover) !important; color: var(--text-primary) !important; } /* Profile menu, notif menu */ [data-theme="dark"] .notif-menu, [data-theme="dark"] .profile-menu { background: var(--bg-dropdown) !important; box-shadow: 0 14px 30px var(--shadow-heavy) !important; } /* Container backgrounds that use bg-white or bg-light */ [data-theme="dark"] .bg-white { background: var(--bg-card) !important; } [data-theme="dark"] .bg-light { background: var(--bg-hover) !important; } /* Shadow */ [data-theme="dark"] .shadow, [data-theme="dark"] .shadow-sm, [data-theme="dark"] .shadow-lg { box-shadow: 0 .5rem 1rem var(--shadow-color) !important; } /* Scrollbar in dark mode */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-body); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #444; } /* ---- Logo swap for light/dark ---- */ [data-theme="light"] .logo-dark { display: none !important; } [data-theme="light"] .logo-light { display: inline-block !important; } [data-theme="dark"] .logo-light { display: none !important; } [data-theme="dark"] .logo-dark { display: inline-block !important; } /* ---- Theme toggle button ---- */ .theme-toggle { display: flex; align-items: center; gap: 16px; width: calc(100% - 16px); margin: 0 8px; padding: 10px 12px; background: transparent; border: none; border-radius: 8px; color: var(--sidebar-text); font-weight: 700; font-size: 1rem; cursor: pointer; transition: background .2s; } .theme-toggle:hover { background: var(--sidebar-hover); } .theme-toggle i { font-size: 1.65rem; width: 26px; text-align: center; } /* Navbar theme toggle (header.php - top navbar) */ .navbar-theme-toggle { background: none; border: none; color: rgba(255,255,255,.85); padding: .5rem .75rem; cursor: pointer; transition: opacity .2s; display: flex; align-items: center; } .navbar-theme-toggle:hover { color: #fff; opacity: 1; } .navbar-theme-toggle i { font-size: 1.125rem; } /* Mobile theme toggle in drawer */ .mobile-theme-toggle { display: flex; align-items: center; gap: 1rem; width: 100%; padding: 0.75rem 1rem; background: transparent; border: none; color: var(--sidebar-text); font-size: 0.95rem; cursor: pointer; transition: background 0.2s; text-align: left; } .mobile-theme-toggle:hover { background: var(--sidebar-hover); } .mobile-theme-toggle i { font-size: 1.2rem; width: 24px; text-align: center; }