/* ================================ BOOKCUBICLE NIGHT THEME — Navy Slate All rules scoped to [data-theme="dark"] on ================================ */ /* 1. CSS Custom Property Overrides */ [data-theme="dark"] { --bg-primary: #0f172a; --bg-secondary: #1e293b; --white: #1e293b; --gray-50: #0f172a; --gray-100: #0f172a; --gray-200: #1e293b; --gray-300: #334155; --gray-400: #64748b; --gray-500: #94a3b8; --gray-600: #cbd5e1; --gray-700: #f1f5f9; --gray-800: #f8fafc; --gray-900: #ffffff; --shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.35); --shadow-md: 0 4px 6px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.30); --shadow-lg: 0 10px 15px rgba(0,0,0,0.5), 0 4px 6px rgba(0,0,0,0.40); --shadow-xl: 0 20px 25px rgba(0,0,0,0.5), 0 10px 10px rgba(0,0,0,0.40); } /* 2. Base — override Filmoja style.css hardcoded body colours */ [data-theme="dark"] body { background-color: var(--bg-primary); color: var(--gray-500); } /* 3. Bootstrap 5 component overrides */ [data-theme="dark"] .card { background-color: var(--bg-secondary); border-color: var(--gray-300); color: var(--gray-700); } [data-theme="dark"] .card-header, [data-theme="dark"] .card-footer { background-color: var(--gray-100); border-color: var(--gray-300); } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: var(--bg-secondary); border-color: var(--gray-300); color: var(--gray-700); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: var(--bg-secondary); border-color: var(--primary-color); color: var(--gray-700); box-shadow: 0 0 0 0.2rem rgba(236,117,50,0.25); } [data-theme="dark"] .form-control::placeholder { color: var(--gray-400); } [data-theme="dark"] .input-group-text { background-color: var(--gray-100); border-color: var(--gray-300); color: var(--gray-600); } [data-theme="dark"] .dropdown-menu { background-color: var(--bg-secondary); border-color: var(--gray-300); } [data-theme="dark"] .dropdown-item { color: var(--gray-700); } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background-color: var(--gray-200); color: var(--gray-700); } [data-theme="dark"] .dropdown-divider { border-color: var(--gray-300); } [data-theme="dark"] .modal-content { background-color: var(--bg-secondary); border-color: var(--gray-300); } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: var(--gray-300); } [data-theme="dark"] .modal-title { color: var(--gray-700); } [data-theme="dark"] .table { color: var(--gray-700); border-color: var(--gray-300); } [data-theme="dark"] .table-light { background-color: var(--gray-100); color: var(--gray-600); } [data-theme="dark"] .table > thead { background-color: var(--gray-100); border-color: var(--gray-300); } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255,255,255,0.03); color: var(--gray-700); } [data-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: rgba(255,255,255,0.06); } [data-theme="dark"] .alert-info { background-color: rgba(23,162,184,0.15); border-color: rgba(23,162,184,0.30); color: #67d4e0; } [data-theme="dark"] .alert-success { background-color: rgba(40,167,69,0.15); border-color: rgba(40,167,69,0.30); color: #6bcf85; } [data-theme="dark"] .alert-warning { background-color: rgba(255,193,7,0.15); border-color: rgba(255,193,7,0.30); color: #ffd454; } [data-theme="dark"] .alert-danger { background-color: rgba(220,53,69,0.15); border-color: rgba(220,53,69,0.30); color: #f08090; } [data-theme="dark"] .badge.bg-secondary { background-color: var(--gray-400) !important; } [data-theme="dark"] .badge.bg-light { background-color: var(--gray-300) !important; color: var(--gray-700) !important; } [data-theme="dark"] .nav-tabs { border-color: var(--gray-300); } [data-theme="dark"] .nav-tabs .nav-link { color: var(--gray-500) !important; } [data-theme="dark"] .nav-tabs .nav-link:hover { border-color: var(--gray-300); color: var(--gray-600) !important; } [data-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--bg-secondary); border-color: var(--gray-300) var(--gray-300) var(--bg-secondary); color: var(--primary-color) !important; } [data-theme="dark"] .list-group-item { background-color: var(--bg-secondary); border-color: var(--gray-300); color: var(--gray-700); } [data-theme="dark"] .list-group-item.active { background-color: var(--primary-color); border-color: var(--primary-color); } [data-theme="dark"] .page-link { background-color: var(--bg-secondary); border-color: var(--gray-300); color: var(--gray-600); } [data-theme="dark"] .page-link:hover { background-color: var(--gray-200); color: var(--gray-700); } [data-theme="dark"] .page-item.active .page-link { background-color: var(--primary-color); border-color: var(--primary-color); } [data-theme="dark"] .page-item.disabled .page-link { background-color: var(--bg-secondary); color: var(--gray-400); } [data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--gray-400); } [data-theme="dark"] .breadcrumb-item.active { color: var(--gray-500); } [data-theme="dark"] .breadcrumb-item a { color: var(--gray-600); } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* 4. Bootstrap utility overrides */ [data-theme="dark"] .bg-white { background-color: var(--bg-secondary) !important; } [data-theme="dark"] .bg-light { background-color: var(--gray-100) !important; } [data-theme="dark"] .text-dark { color: var(--gray-700) !important; } [data-theme="dark"] .text-muted { color: var(--gray-400) !important; } [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(--gray-300) !important; } /* 5. site.css page layout components */ [data-theme="dark"] .page-header { border-bottom-color: var(--gray-300); } [data-theme="dark"] .page-title { color: var(--gray-700); } /* 6. site.css BookCubicle component overrides */ [data-theme="dark"] .book-card { background-color: var(--bg-secondary); border-color: var(--gray-300); } [data-theme="dark"] .chapter-content-wrapper { background-color: var(--bg-secondary); } /* 7. Filmoja header — already dark, fine-tune text and borders */ [data-theme="dark"] .header-top-area { background-color: #0a0f1e; border-bottom-color: var(--gray-300); } [data-theme="dark"] .main-header-area { background-color: var(--bg-secondary); } /* 7a. Logo frosted-glass backdrop — lifts the dark purple (#3f1a99) off the dark header */ [data-theme="dark"] .site-logo a { background: rgba(255, 255, 255, 0.14); border-radius: 10px; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: inline-flex; align-items: center; transition: background 0.2s ease; } [data-theme="dark"] .site-logo a:hover { background: rgba(255, 255, 255, 0.20); } [data-theme="dark"] .filmoja-header-area.header-scrolled { background-color: var(--bg-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.5); } /* 7b. Main nav links — Filmoja hardcodes color: #13212d (near-black), invisible on dark navy */ [data-theme="dark"] .mainmenu ul>li>a { color: var(--gray-600); } [data-theme="dark"] .mainmenu nav>ul>li>a:hover, [data-theme="dark"] .mainmenu nav>ul>li.active>a, [data-theme="dark"] .mainmenu nav>ul>li:hover>a { color: #ec7532; } /* 7c. Main nav dropdown panels — Filmoja hardcodes background: #fff */ [data-theme="dark"] .mainmenu ul li ul { background-color: var(--bg-secondary); box-shadow: 0 4px 12px rgba(0,0,0,0.5); } [data-theme="dark"] .mainmenu ul li>ul>li { border-top-color: var(--gray-300); } [data-theme="dark"] .mainmenu ul li ul li>a { color: var(--gray-600); } [data-theme="dark"] .mainmenu nav>ul>li:hover>ul li:hover>a { color: #ec7532; } /* 7d. Header search box — Filmoja hardcodes background: #eaeaea and color: #333 */ [data-theme="dark"] .header-main-search form { background-color: var(--bg-primary); border-color: var(--gray-300); } [data-theme="dark"] .header-main-search form:focus-within { border-color: #ec7532; box-shadow: 0 0 0 3px rgba(236, 117, 50, 0.18); } [data-theme="dark"] .header-main-search form input { color: var(--gray-600); } [data-theme="dark"] .header-main-search form input::placeholder { color: var(--gray-400); } [data-theme="dark"] .header-main-search form button { color: var(--gray-500); } /* 8. Header account dropdown (custom site.css styling) */ [data-theme="dark"] .header-top-menu .dropdown-menu { background-color: var(--bg-secondary); border-color: var(--gray-300); color: var(--gray-600); } [data-theme="dark"] .header-top-menu .dropdown-menu li a { color: var(--gray-600); } [data-theme="dark"] .header-top-menu .dropdown-menu li button { color: var(--gray-600); } [data-theme="dark"] .header-top-menu .dropdown-menu li a:hover { background-color: var(--gray-200); color: var(--gray-700); } [data-theme="dark"] .header-top-menu .dropdown-menu li button:hover { background-color: var(--gray-200) !important; color: var(--gray-700); } [data-theme="dark"] .header-top-menu .dropdown-menu li.divider { border-top-color: var(--gray-300); } /* 9. Filmoja footer — already dark, refine */ [data-theme="dark"] .filmoja-footer-area, [data-theme="dark"] footer { background-color: #0a0f1e; } /* 10. Slicknav mobile nav */ [data-theme="dark"] .slicknav_menu, [data-theme="dark"] .slicknav_nav { background-color: var(--bg-secondary); } [data-theme="dark"] .slicknav_nav a { color: var(--gray-600); } [data-theme="dark"] .slicknav_nav a:hover { background-color: var(--gray-200); color: var(--gray-700); } /* 11. Theme toggle pill component (shared between header and reading toolbar) */ .theme-toggle-pill { display: inline-flex; align-items: center; background: transparent; border: 1px solid var(--gray-300); border-radius: 20px; padding: 2px; gap: 0; } [data-theme="dark"] .theme-toggle-pill { background-color: var(--bg-secondary); } .theme-toggle-pill__option { padding: 3px 10px; border-radius: 18px; font-size: 0.75rem; color: var(--gray-600); transition: background-color 0.15s ease, color 0.15s ease; cursor: pointer; user-select: none; border: none; background: none; line-height: 1; } [data-theme="dark"] .theme-toggle-pill__option { color: var(--gray-500); } .theme-toggle-pill__option--active { background-color: var(--primary-color); color: #fff; font-weight: 600; } /* 12. Reading toolbar */ .reading-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; margin-bottom: 1.5rem; border-bottom: 1px solid var(--gray-300); flex-wrap: wrap; gap: 8px; } .reading-toolbar__progress { font-size: 0.8rem; color: var(--gray-500); } .reading-toolbar__controls { display: flex; align-items: center; gap: 10px; } .reading-fontsize-group { display: inline-flex; align-items: center; border: 1px solid var(--gray-300); border-radius: 6px; overflow: hidden; background-color: var(--bg-secondary); } .reading-fontsize-group__btn { background: none; border: none; padding: 4px 10px; color: var(--gray-500); cursor: pointer; transition: background-color 0.15s, color 0.15s; border-right: 1px solid var(--gray-300); line-height: 1; } .reading-fontsize-group__btn:last-child { border-right: none; } .reading-fontsize-group__btn:hover { background-color: var(--gray-200); color: var(--gray-700); } .reading-fontsize-group__btn--active { color: var(--primary-color); font-weight: 600; } /* 13. Chapter content font size variants Targets the
wrapper in Read.cshtml. font-size is inherited by all child text nodes. */ article.reading-text[data-fontsize="sm"] { font-size: 0.95rem; } article.reading-text[data-fontsize="md"] { font-size: 1.125rem; } article.reading-text[data-fontsize="lg"] { font-size: 1.30rem; } /* 14. Global heading contrast fix Filmoja style.css hardcodes color: #111 / #333 on many specific heading selectors — same cascade specificity (0,1,1) as these rules but loaded earlier, so site-night.css wins. Headings become light in night mode. */ [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(--gray-700); } /* Footer headings stay orange — branding works on the already-dark footer bg. Higher specificity (0,2,1) wins over the global (0,1,1) rule above. */ [data-theme="dark"] .filmoja-footer-area h1, [data-theme="dark"] .filmoja-footer-area h2, [data-theme="dark"] .filmoja-footer-area h3, [data-theme="dark"] .filmoja-footer-area h4, [data-theme="dark"] .filmoja-footer-area h5, [data-theme="dark"] .filmoja-footer-area h6, [data-theme="dark"] footer h1, [data-theme="dark"] footer h2, [data-theme="dark"] footer h3, [data-theme="dark"] footer h4, [data-theme="dark"] footer h5, [data-theme="dark"] footer h6 { color: #ec7532; } /* 15. Form labels and login page elements */ [data-theme="dark"] label { color: var(--gray-600); } [data-theme="dark"] .login-box { border-color: var(--gray-300); } [data-theme="dark"] .login-divider::before, [data-theme="dark"] .login-divider::after { border-bottom-color: var(--gray-300); } /* 16. Author nav sidebar */ [data-theme="dark"] .author-nav-menu { background: var(--bg-secondary); border-color: var(--gray-300); } [data-theme="dark"] .author-nav-menu h4 { color: var(--gray-500); } [data-theme="dark"] .author-nav-menu .nav-link { color: #e2e8f0 !important; } [data-theme="dark"] .author-nav-menu .nav-link i { color: #94a3b8 !important; } [data-theme="dark"] .author-nav-menu .nav-link:hover { background-color: var(--gray-300); color: #f8fafc !important; } [data-theme="dark"] .author-nav-menu .nav-link:hover i { color: #f8fafc !important; } [data-theme="dark"] .author-nav-menu .nav-link.active { background: var(--primary-color); color: #fff !important; } [data-theme="dark"] .author-nav-menu .nav-link.active i { color: #fff !important; } /* 17. Custom filter dropdowns Toggle button text is handled by the .form-select override above. The open menu is a plain
, so Bootstrap doesn't touch it — these rules cover it explicitly. Hover flips to gray-300 (#334155) so it goes LIGHTER than the menu bg (#1e293b), not darker. */ [data-theme="dark"] .filter-dropdown-menu { background-color: var(--bg-secondary); border-color: var(--gray-300); } [data-theme="dark"] .filter-dropdown-menu .filter-single-item { color: var(--gray-700); } [data-theme="dark"] .filter-dropdown-menu .filter-single-item:hover { background-color: var(--gray-300); color: var(--gray-800); } [data-theme="dark"] .filter-dropdown-menu .form-check:hover { background-color: var(--gray-300); } [data-theme="dark"] .filter-dropdown-menu .form-check-label { color: var(--gray-700); } /* 18. Pill-tabs — Library, MyPayments, MySubscriptions, Reviews, RecentChapters Must appear AFTER the generic .nav-tabs block above so equal-specificity rules here override it. !important beats style.css ".nav-link { color:#111 !important }". */ [data-theme="dark"] .pill-tabs.nav-tabs { background-color: var(--gray-300); } [data-theme="dark"] .pill-tabs.nav-tabs .nav-link { color: var(--gray-600) !important; } [data-theme="dark"] .pill-tabs.nav-tabs .nav-link:hover { background-color: var(--gray-200); color: var(--gray-700) !important; border: none; } [data-theme="dark"] .pill-tabs.nav-tabs .nav-link.active { background-color: var(--primary-color) !important; color: #fff !important; border-color: transparent !important; box-shadow: var(--shadow-sm); } [data-theme="dark"] .pill-tabs.nav-tabs .nav-link.active:hover { color: #fff !important; } /* 19. Home page genre nav-pills (tv-tab-switch) Active uses style.css's orange underline pattern so leave it alone; only fix the invisible inactive text. */ [data-theme="dark"] .nav-pills .nav-link:not(.active) { color: var(--gray-600) !important; } /* 20. Payment Approvals page — ticket cards, buttons, access badges */ [data-theme="dark"] .approval-ticket { background: var(--gray-200); border-color: var(--gray-300); } [data-theme="dark"] .ticket-reader strong { color: var(--gray-800); } [data-theme="dark"] .ticket-book strong { color: var(--gray-700); } [data-theme="dark"] .ticket-book span:not(.ticket-access-label) { color: var(--gray-500); } [data-theme="dark"] .btn-proof { background: var(--gray-300); border-color: var(--gray-400); color: var(--gray-700); } [data-theme="dark"] .btn-proof:hover { background: var(--gray-400); border-color: var(--gray-500); color: var(--gray-800); } [data-theme="dark"] .btn-proof.no-proof { background: transparent; border-color: var(--gray-400); color: var(--gray-400); } [data-theme="dark"] .btn-approve { background: rgba(5, 150, 105, 0.15); border-color: rgba(5, 150, 105, 0.4); color: #34d399; } [data-theme="dark"] .btn-approve:hover { background: #059669; border-color: #059669; color: #fff; } [data-theme="dark"] .btn-reject { background: rgba(220, 38, 38, 0.12); border-color: rgba(220, 38, 38, 0.35); color: #f87171; } [data-theme="dark"] .btn-reject:hover { background: #dc2626; border-color: #dc2626; color: #fff; } [data-theme="dark"] .approvals-empty { background: var(--gray-200); border-color: var(--gray-300); } [data-theme="dark"] .approvals-empty h3 { color: var(--gray-700); } [data-theme="dark"] .approvals-empty p { color: var(--gray-500); } /* Access badge variants — lighter hues on dark ticket surface */ [data-theme="dark"] .ticket-access-package { background: rgba(99, 102, 241, 0.2); color: #818cf8; } [data-theme="dark"] .ticket-access-chapter { background: rgba(16, 185, 129, 0.2); color: #34d399; } [data-theme="dark"] .ticket-access-fullbook { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }