/* ========================================================================== Theme Toggle - Light Mode Overrides Default theme is dark. When data-theme="light" is set on , these overrides apply. ========================================================================== */ /* ---------- Smooth transitions for all themed elements ---------- */ body, .navbar, .card, .dropdown-menu, .form-control, .modal-content, .mini-navbar, footer, .discord-fab { transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* ---------- Theme toggle button ---------- */ .theme-toggle-btn { background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; transition: all 0.3s ease; padding: 0; line-height: 1; } .theme-toggle-btn:hover { background: rgba(255, 255, 255, 0.15); transform: rotate(20deg) scale(1.1); } .theme-toggle-btn:active { transform: rotate(20deg) scale(0.95); } /* Hide the inactive icon */ .theme-toggle-btn .bi-sun-fill { display: none; } .theme-toggle-btn .bi-moon-fill { display: inline; } /* ========================================================================== LIGHT MODE OVERRIDES ========================================================================== */ html[data-theme="light"] body { background: #f5f5f5 !important; color: #141414 !important; } /* ---------- Navbar ---------- */ html[data-theme="light"] .navbar { background: #fff !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } html[data-theme="light"] .navbar .nav-link { color: #333 !important; } html[data-theme="light"] .navbar .nav-link:hover, html[data-theme="light"] .navbar .nav-link:focus { color: #e50914 !important; } html[data-theme="light"] .navbar .navbar-brand span { color: #e50914 !important; } html[data-theme="light"] .navbar-toggler { border-color: rgba(0, 0, 0, 0.3) !important; } html[data-theme="light"] .navbar-toggler-icon { filter: invert(1); } /* ---------- Theme toggle button in light mode ---------- */ html[data-theme="light"] .theme-toggle-btn { border-color: rgba(0, 0, 0, 0.2); color: #333; } html[data-theme="light"] .theme-toggle-btn:hover { background: rgba(0, 0, 0, 0.08); } html[data-theme="light"] .theme-toggle-btn .bi-sun-fill { display: inline; } html[data-theme="light"] .theme-toggle-btn .bi-moon-fill { display: none; } /* ---------- Cards ---------- */ html[data-theme="light"] .card { background: #fff !important; border: 1px solid #e0e0e0 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } html[data-theme="light"] .card .card-title, html[data-theme="light"] .card .card-text { color: #141414 !important; } /* ---------- Dropdown menus ---------- */ html[data-theme="light"] .dropdown-menu { background: #fff !important; border-color: #e0e0e0 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); } html[data-theme="light"] .dropdown-item { color: #333 !important; } html[data-theme="light"] .dropdown-item:hover, html[data-theme="light"] .dropdown-item:focus { background: #f0f0f0 !important; color: #141414 !important; } html[data-theme="light"] .dropdown-divider { border-color: #e0e0e0 !important; } /* ---------- Text utilities ---------- */ html[data-theme="light"] .text-white { color: #141414 !important; } html[data-theme="light"] .text-white-50 { color: #666 !important; } /* Preserve white text on netflix-red buttons */ html[data-theme="light"] .btn-netflix, html[data-theme="light"] .btn-netflix:hover { color: #fff !important; } /* Preserve badge text colors */ html[data-theme="light"] .badge.bg-warning { color: #141414 !important; } /* ---------- Form controls ---------- */ html[data-theme="light"] .form-control { background: #fff !important; border-color: #ccc !important; color: #333 !important; } html[data-theme="light"] .form-control::placeholder { color: #999 !important; } html[data-theme="light"] .form-control:focus { border-color: #e50914 !important; box-shadow: 0 0 0 0.2rem rgba(229, 9, 20, 0.15) !important; } html[data-theme="light"] .input-group .form-control { border-color: #ccc !important; } /* ---------- Search bar ---------- */ html[data-theme="light"] .navbar .input-group .form-control { background: #f0f0f0 !important; border-color: #ddd !important; color: #333 !important; } /* ---------- Footer ---------- */ html[data-theme="light"] footer { background: #e8e8e8 !important; border-top-color: #ddd !important; } html[data-theme="light"] footer h5, html[data-theme="light"] footer h6 { color: #141414 !important; } html[data-theme="light"] footer .text-white-50 { color: #555 !important; } html[data-theme="light"] footer .text-white { color: #141414 !important; } html[data-theme="light"] footer hr { border-color: #ccc !important; } html[data-theme="light"] footer .btn-outline-light { color: #333 !important; border-color: #999 !important; } html[data-theme="light"] footer .btn-outline-light:hover { background: #333 !important; color: #fff !important; } /* ---------- Mini navbar ---------- */ html[data-theme="light"] .mini-navbar { background: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 100%) !important; border-bottom-color: #ccc !important; } html[data-theme="light"] .mini-navbar .mini-nav-divider { color: #bbb !important; } /* ---------- Modal ---------- */ html[data-theme="light"] .modal-content { background: #fff !important; color: #141414 !important; } /* ---------- Alerts ---------- */ html[data-theme="light"] .alert { color: #141414; } /* ---------- Tables ---------- */ html[data-theme="light"] .table { color: #141414 !important; } /* ---------- Discord FAB ---------- */ html[data-theme="light"] .discord-fab { background: linear-gradient(135deg, #fff 0%, #f0f0f0 100%) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 2px rgba(88, 101, 242, 0.2) !important; } /* ---------- General background helpers ---------- */ html[data-theme="light"] .bg-dark { background-color: #f5f5f5 !important; } /* ---------- Pagination ---------- */ html[data-theme="light"] .page-link { background-color: #fff !important; border-color: #ddd !important; color: #333 !important; } html[data-theme="light"] .page-item.active .page-link { background-color: #e50914 !important; border-color: #e50914 !important; color: #fff !important; } /* ---------- Breadcrumb ---------- */ html[data-theme="light"] .breadcrumb-item a { color: #e50914 !important; } html[data-theme="light"] .breadcrumb-item.active { color: #666 !important; } /* ---------- Inline style overrides for dropdown items ---------- The navbar has inline onmouseover/onmouseout styles. Light mode needs CSS-level overrides for the default state. ---------- */ html[data-theme="light"] .dropdown-menu .dropdown-item.text-white { color: #333 !important; } html[data-theme="light"] .dropdown-menu .dropdown-item.text-warning { color: #b45309 !important; } html[data-theme="light"] .dropdown-menu .dropdown-item.text-danger { color: #dc2626 !important; } /* ---------- Inline style overrides ---------- Many elements use hardcoded dark inline styles. We override the most common patterns here. ---------- */ /* Override inline background: #181818, #1a1a1a, #2f2f2f, #2d2d2d, #2a2a2a, #1f1f1f, #141414, #000 */ html[data-theme="light"] [style*="background: #181818"], html[data-theme="light"] [style*="background:#181818"], html[data-theme="light"] [style*="background: #1a1a1a"], html[data-theme="light"] [style*="background:#1a1a1a"], html[data-theme="light"] [style*="background: #1f1f1f"], html[data-theme="light"] [style*="background: #2a2a2a"], html[data-theme="light"] [style*="background: #2d2d2d"], html[data-theme="light"] [style*="background: #141414"] { background: #fff !important; } html[data-theme="light"] [style*="background: #2f2f2f"], html[data-theme="light"] [style*="background:#2f2f2f"] { background: #f0f0f0 !important; } /* Override inline border-color: #404040 */ html[data-theme="light"] [style*="border-color: #404040"], html[data-theme="light"] [style*="border-color:#404040"], html[data-theme="light"] [style*="border: 1px solid #404040"], html[data-theme="light"] [style*="border: 2px solid #404040"] { border-color: #ddd !important; } /* Override inline color: white / color: #fff / color: #999 / color: #666 */ html[data-theme="light"] [style*="color: white"] { color: #141414 !important; } html[data-theme="light"] [style*="color: #fff"], html[data-theme="light"] [style*="color:#fff"] { color: #141414 !important; } html[data-theme="light"] [style*="color: #999"], html[data-theme="light"] [style*="color:#999"] { color: #666 !important; } html[data-theme="light"] [style*="color: #666"], html[data-theme="light"] [style*="color:#666"] { color: #555 !important; } html[data-theme="light"] [style*="color: #404040"], html[data-theme="light"] [style*="color:#404040"] { color: #ccc !important; } /* Override inline border-color on dividers */ html[data-theme="light"] .dropdown-divider[style*="#404040"], html[data-theme="light"] hr[style*="#404040"] { border-color: #ddd !important; } /* Mini navbar inline gradient */ html[data-theme="light"] [style*="background: linear-gradient(90deg, #1a1a1a"] { background: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 100%) !important; } /* Mini nav link colors - keep them visible */ html[data-theme="light"] .mini-nav-link { filter: brightness(0.7) saturate(1.3); } /* Card body text in light mode */ html[data-theme="light"] .card-body h5, html[data-theme="light"] .card-body h6, html[data-theme="light"] .card-body p, html[data-theme="light"] .card-body small, html[data-theme="light"] .card-body span, html[data-theme="light"] .card-body a:not(.btn) { color: #141414 !important; } /* Preserve specific accent colors in card body */ html[data-theme="light"] .card-body .text-warning, html[data-theme="light"] .card-body .text-danger, html[data-theme="light"] .card-body .text-success, html[data-theme="light"] .card-body .text-info, html[data-theme="light"] .card-body .text-primary { color: inherit !important; } /* Text muted should remain visible but subdued */ html[data-theme="light"] .text-muted { color: #666 !important; } /* Text light */ html[data-theme="light"] .text-light { color: #333 !important; } /* List group items */ html[data-theme="light"] .list-group-item { background: #fff !important; border-color: #e0e0e0 !important; color: #141414 !important; } html[data-theme="light"] .list-group-item-action:hover { background: #f5f5f5 !important; } /* Badges */ html[data-theme="light"] .badge.bg-dark { background-color: #e0e0e0 !important; color: #333 !important; } html[data-theme="light"] .badge.bg-secondary { background-color: #6c757d !important; color: #fff !important; } /* Buttons outline */ html[data-theme="light"] .btn-outline-light { color: #333 !important; border-color: #999 !important; } html[data-theme="light"] .btn-outline-light:hover { background: #333 !important; color: #fff !important; } html[data-theme="light"] .btn-outline-secondary { color: #555 !important; border-color: #aaa !important; } /* Form select */ html[data-theme="light"] .form-select { background-color: #fff !important; border-color: #ccc !important; color: #333 !important; } /* Video card titles & text on browse/home pages */ html[data-theme="light"] .card-title { color: #141414 !important; } /* Carousel text */ html[data-theme="light"] .carousel-caption h2, html[data-theme="light"] .carousel-caption h3, html[data-theme="light"] .carousel-caption p { color: #fff !important; text-shadow: 0 1px 4px rgba(0,0,0,0.8) !important; } /* Hero section - keep dark for contrast with poster images */ html[data-theme="light"] .carousel, html[data-theme="light"] .carousel-item { background: #141414 !important; } /* Category section headers */ html[data-theme="light"] h4.text-white, html[data-theme="light"] h3.text-white, html[data-theme="light"] h2.text-white { color: #141414 !important; } /* Onmouseover hover states for dropdown - JS sets #2f2f2f inline */ html[data-theme="light"] .dropdown-item[style*="background: transparent"], html[data-theme="light"] .dropdown-item[style*="background:transparent"] { background: transparent !important; } /* Input group text */ html[data-theme="light"] .input-group-text { background: #f0f0f0 !important; border-color: #ccc !important; color: #555 !important; } /* Offcanvas / Sidebar */ html[data-theme="light"] .offcanvas { background: #fff !important; color: #141414 !important; } /* Border secondary */ html[data-theme="light"] .border-secondary { border-color: #ddd !important; } /* Bg-secondary */ html[data-theme="light"] .bg-secondary { background-color: #e8e8e8 !important; } /* Video player area - keep dark */ html[data-theme="light"] .video-player-container, html[data-theme="light"] .ratio, html[data-theme="light"] [style*="background: #000"] { background: #000 !important; } /* ---------- Keep certain elements unchanged ---------- */ html[data-theme="light"] .btn-netflix { background: #e50914 !important; color: #fff !important; } html[data-theme="light"] .btn-netflix:hover { background: #f40612 !important; color: #fff !important; } /* Keep poster/image areas dark */ html[data-theme="light"] .card .position-relative[style*="background: #2f2f2f"] { background: #e0e0e0 !important; } /* Select element */ html[data-theme="light"] select.form-control, html[data-theme="light"] select.form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important; } /* Link colors */ html[data-theme="light"] a.text-white:not(.btn) { color: #141414 !important; } html[data-theme="light"] a.text-white:not(.btn):hover { color: #e50914 !important; } /* ========================================================================== Component CSS Overrides These override hardcoded colors in component CSS files ========================================================================== */ /* ---------- Video Card (video-card.css) ---------- */ html[data-theme="light"] .movie-card a { color: #141414 !important; } html[data-theme="light"] .movie-info p { color: #141414 !important; } html[data-theme="light"] .no-poster { background: #e0e0e0 !important; color: #999 !important; } /* Keep badges white on colored backgrounds */ html[data-theme="light"] .video-type-badge { color: #fff !important; } /* ---------- Carousel (carousel.css) ---------- */ html[data-theme="light"] .carousel-section h4, html[data-theme="light"] .carousel-section h5, html[data-theme="light"] .carousel-section .section-title { color: #141414 !important; } html[data-theme="light"] .carousel-nav-btn { color: #333 !important; background: rgba(0, 0, 0, 0.05) !important; } html[data-theme="light"] .carousel-nav-btn:hover { background: rgba(0, 0, 0, 0.1) !important; } /* ---------- Hero Carousel - keep dark for poster contrast ---------- */ html[data-theme="light"] .hero-carousel, html[data-theme="light"] .hero-carousel .carousel-item { background: #141414 !important; } html[data-theme="light"] .hero-carousel .carousel-caption, html[data-theme="light"] .hero-carousel .carousel-caption h2, html[data-theme="light"] .hero-carousel .carousel-caption p, html[data-theme="light"] .hero-carousel .hero-title, html[data-theme="light"] .hero-carousel .hero-description { color: #fff !important; } /* ---------- Pagination (pagination.css) ---------- */ html[data-theme="light"] .pagination .page-link { background: #fff !important; border-color: #ddd !important; color: #333 !important; } html[data-theme="light"] .pagination .page-link:hover { background: #f0f0f0 !important; color: #141414 !important; } html[data-theme="light"] .pagination .page-item.active .page-link { background: #e50914 !important; border-color: #e50914 !important; color: #fff !important; } html[data-theme="light"] .pagination .page-item.disabled .page-link { background: #f5f5f5 !important; color: #aaa !important; } /* ---------- Video Detail (video-detail.css) ---------- */ html[data-theme="light"] .episode-list-container, html[data-theme="light"] .episode-card { background: #fff !important; border-color: #e0e0e0 !important; } html[data-theme="light"] .episode-card:hover { background: #f5f5f5 !important; } html[data-theme="light"] .episode-card .episode-title, html[data-theme="light"] .episode-card .episode-number, html[data-theme="light"] .season-select, html[data-theme="light"] .provider-tab, html[data-theme="light"] .comment-body, html[data-theme="light"] .comment-author { color: #141414 !important; } html[data-theme="light"] .episode-card .episode-meta { color: #666 !important; } html[data-theme="light"] .season-select { background: #f0f0f0 !important; border-color: #ddd !important; } html[data-theme="light"] .provider-tab { background: #f0f0f0 !important; border-color: #ddd !important; } html[data-theme="light"] .provider-tab.active, html[data-theme="light"] .provider-tab:hover { background: #e50914 !important; color: #fff !important; } /* ---------- Video Player - keep dark (watching area) ---------- */ html[data-theme="light"] .video-player-wrapper, html[data-theme="light"] .player-container, html[data-theme="light"] .ratio-16x9 { background: #000 !important; } /* ---------- Sidebar ad area ---------- */ html[data-theme="light"] .sidebar-ad { background: #f5f5f5 !important; border-color: #e0e0e0 !important; } /* ---------- Global: all headings and paragraphs ---------- */ html[data-theme="light"] h1:not(.hero-title), html[data-theme="light"] h2:not(.hero-title), html[data-theme="light"] h3, html[data-theme="light"] h4, html[data-theme="light"] h5, html[data-theme="light"] h6 { color: #141414 !important; } html[data-theme="light"] p { color: #333 !important; } html[data-theme="light"] small { color: #555 !important; } /* Preserve small with specific color classes */ html[data-theme="light"] small.text-warning { color: #b45309 !important; } html[data-theme="light"] small.text-danger { color: #dc2626 !important; } html[data-theme="light"] small.text-muted { color: #888 !important; } /* ---------- Generic anchor colors ---------- */ html[data-theme="light"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge):not(.discord-fab):not(.mini-nav-link):not(.video-preview-trigger) { color: #333; } html[data-theme="light"] a:not(.btn):not(.nav-link):not(.dropdown-item):hover { color: #e50914; } /* ---------- Supporter badge ---------- */ html[data-theme="light"] .supporter-badge { background: #f0f0f0 !important; } html[data-theme="light"] .supporter-badge .text-white { color: #141414 !important; } /* ---------- Close button ---------- */ html[data-theme="light"] .btn-close-white { filter: invert(1); } /* ---------- Border color general ---------- */ html[data-theme="light"] [style*="border: 1px solid #333"] { border-color: #e0e0e0 !important; } html[data-theme="light"] [style*="border-bottom: 1px solid #404040"] { border-bottom-color: #ddd !important; } /* ---------- Strong/bold text ---------- */ html[data-theme="light"] strong { color: #141414 !important; } /* ---------- Code/pre ---------- */ html[data-theme="light"] code, html[data-theme="light"] pre { background: #f0f0f0 !important; color: #333 !important; } /* ---------- fw-bold and fw-semibold text ---------- */ html[data-theme="light"] .fw-bold, html[data-theme="light"] .fw-semibold { color: #141414 !important; } /* Preserve colored bold */ html[data-theme="light"] .text-danger.fw-bold, html[data-theme="light"] .text-warning.fw-bold, html[data-theme="light"] .text-success.fw-bold { color: inherit !important; }