/* ============================================ SMAN 5 Bulungan - Library Management System Dark Mode Theme Overrides Activated via [data-theme="dark"] on WCAG AA Compliant Color Contrasts ============================================ */ /* ============================================ 1. Smooth Theme Transition ============================================ */ html[data-theme] { transition: background-color 500ms ease, color 500ms ease; } html[data-theme] *, html[data-theme] *::before, html[data-theme] *::after { transition: background-color 500ms ease, color 300ms ease, border-color 300ms ease, box-shadow 300ms ease; } /* ============================================ 2. CSS Variable Overrides ============================================ */ [data-theme="dark"] { /* Backgrounds */ --bg-primary: #0f0f1a; --bg-secondary: #1a1a2e; --bg-tertiary: #16213e; --bg-card: #1e2a3a; --bg-overlay: rgba(0, 0, 0, 0.75); --bg-hover: rgba(255, 255, 255, 0.04); /* Text */ --text-primary: #e4e6eb; --text-secondary: #b0b3b8; --text-muted: #8a8d91; --text-link: #4a9af5; --text-white: #ffffff; /* Accents */ --primary-light: #4a9af5; --accent-dark: #c49400; /* Borders */ --border-color: rgba(255, 255, 255, 0.08); --border-light: rgba(255, 255, 255, 0.04); --border-focus: #4a9af5; /* Shadows (darker, more subtle) */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.25); --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.45), 0 8px 16px rgba(0, 0, 0, 0.3); /* Status Colors (adjusted for dark backgrounds) */ --success-light: rgba(15, 157, 88, 0.15); --danger-light: rgba(234, 67, 53, 0.15); --warning-light: rgba(249, 171, 0, 0.15); --info-light: rgba(66, 133, 244, 0.15); color-scheme: dark; } /* ============================================ 3. Body & Root Elements ============================================ */ [data-theme="dark"] body { background-color: var(--bg-primary); color: var(--text-primary); } [data-theme="dark"] .content-wrapper, [data-theme="dark"] .member-content { background-color: var(--bg-primary); color: var(--text-primary); } /* ============================================ 4. Selection Colors ============================================ */ [data-theme="dark"] ::selection { background-color: rgba(74, 154, 245, 0.4); color: #ffffff; } [data-theme="dark"] ::-moz-selection { background-color: rgba(74, 154, 245, 0.4); color: #ffffff; } /* ============================================ 5. Scrollbar ============================================ */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-primary); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2a3650; border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3a4a6c; } [data-theme="dark"] ::-webkit-scrollbar-corner { background: var(--bg-primary); } /* ============================================ 6. Navbar Overrides ============================================ */ [data-theme="dark"] .sman5-navbar.scrolled { background: rgba(15, 15, 26, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } [data-theme="dark"] .sman5-navbar.scrolled .navbar-brand { color: var(--text-primary); } [data-theme="dark"] .sman5-navbar.scrolled .nav-link { color: var(--text-secondary); } [data-theme="dark"] .sman5-navbar.scrolled .nav-link:hover, [data-theme="dark"] .sman5-navbar.scrolled .nav-link.active { color: var(--primary-light); background: rgba(74, 154, 245, 0.1); } [data-theme="dark"] .sman5-navbar.scrolled .navbar-search input { background: var(--bg-tertiary); border-color: rgba(255, 255, 255, 0.1); color: var(--text-primary); } [data-theme="dark"] .sman5-navbar.scrolled .navbar-search input::placeholder { color: var(--text-muted); } [data-theme="dark"] .sman5-navbar.scrolled .navbar-toggle { color: var(--text-primary); } /* Mobile menu */ [data-theme="dark"] .sman5-navbar .navbar-menu { background: var(--bg-primary); border-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .sman5-navbar .navbar-collapse { background: var(--bg-primary); } /* ============================================ 7. Hero Section Overrides ============================================ */ [data-theme="dark"] .hero-section { background: linear-gradient(135deg, #0a0e1a, #0d1b3e); } [data-theme="dark"] .hero-section::after { background: linear-gradient(to top, var(--bg-primary), transparent); } [data-theme="dark"] .hero-section h1, [data-theme="dark"] .hero-section h2, [data-theme="dark"] .hero-section .hero-title { color: #ffffff; } [data-theme="dark"] .hero-section p, [data-theme="dark"] .hero-section .hero-subtitle { color: var(--text-secondary); } [data-theme="dark"] .hero-search input { background: rgba(255, 255, 255, 0.08); color: var(--text-primary); border: 1px solid rgba(255, 255, 255, 0.12); } [data-theme="dark"] .hero-search input:focus { background: rgba(255, 255, 255, 0.12); border-color: var(--primary-light); box-shadow: 0 0 0 3px rgba(74, 154, 245, 0.15); } [data-theme="dark"] .hero-search input::placeholder { color: var(--text-muted); } /* Quick filter badges in hero */ [data-theme="dark"] .quick-filters .badge, [data-theme="dark"] .quick-filters .btn { background: rgba(255, 255, 255, 0.08); color: var(--text-secondary); border-color: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .quick-filters .badge:hover, [data-theme="dark"] .quick-filters .btn:hover { background: rgba(74, 154, 245, 0.15); color: var(--primary-light); border-color: rgba(74, 154, 245, 0.3); } [data-theme="dark"] .quick-filters .badge.active, [data-theme="dark"] .quick-filters .btn.active { background: rgba(74, 154, 245, 0.2); color: var(--primary-light); border-color: var(--primary-light); } /* ============================================ 8. Card Overrides (All Variants) ============================================ */ /* Category Card */ [data-theme="dark"] .category-card { background: var(--bg-card); border: 1px solid rgba(255, 255, 255, 0.06); color: var(--text-primary); } [data-theme="dark"] .category-card:hover { border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.06); box-shadow: var(--shadow-md); } [data-theme="dark"] .category-card .category-icon { color: #fff; } [data-theme="dark"] .category-card .category-number { color: var(--text-muted); } [data-theme="dark"] .category-count { color: var(--primary-light); } [data-theme="dark"] .category-card .category-name, [data-theme="dark"] .category-card h6 { color: var(--text-primary); } [data-theme="dark"] .category-card:hover .category-name, [data-theme="dark"] .category-card:hover h6 { color: #fff; } [data-theme="dark"] .category-desc { color: var(--text-muted); } /* Collection Card */ [data-theme="dark"] .collection-card { background: var(--bg-card); border-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .collection-card:hover { border-color: rgba(255, 255, 255, 0.15); box-shadow: var(--shadow-md); } [data-theme="dark"] .collection-card .card-cover { background: var(--bg-tertiary); } [data-theme="dark"] .collection-card .card-body { color: var(--text-primary); } [data-theme="dark"] .collection-card .card-title { color: var(--text-primary); } [data-theme="dark"] .collection-card .card-text { color: var(--text-secondary); } /* Book Card */ [data-theme="dark"] .book-card { background: var(--bg-card); border: 1px solid rgba(255, 255, 255, 0.06); } [data-theme="dark"] .book-card:hover { border-color: rgba(255, 255, 255, 0.15); box-shadow: var(--shadow-lg); transform: translateY(-2px); } [data-theme="dark"] .book-card .book-cover, [data-theme="dark"] .book-card .card-cover { background: var(--bg-tertiary); } [data-theme="dark"] .book-card .book-title, [data-theme="dark"] .book-card .card-title { color: var(--text-primary); } [data-theme="dark"] .book-card .book-author, [data-theme="dark"] .book-card .card-text { color: var(--text-secondary); } [data-theme="dark"] .book-card .book-meta { color: var(--text-muted); } [data-theme="dark"] .book-card .book-footer { border-top-color: rgba(255, 255, 255, 0.06); } /* Biblio Card (Search Result Cards) */ [data-theme="dark"] .biblio-card { background: var(--bg-card); border: 1px solid rgba(255, 255, 255, 0.06); } [data-theme="dark"] .biblio-card:hover { border-color: var(--primary-light); box-shadow: var(--shadow-md); } [data-theme="dark"] .biblio-card .biblio-cover { background: var(--bg-tertiary); } [data-theme="dark"] .biblio-card .biblio-title { color: var(--text-primary); } [data-theme="dark"] .biblio-card .biblio-author, [data-theme="dark"] .biblio-card .biblio-info { color: var(--text-secondary); } [data-theme="dark"] .biblio-card .biblio-meta { color: var(--text-muted); } /* Reader Card */ [data-theme="dark"] .reader-card { background: var(--bg-card); border: 1px solid rgba(255, 255, 255, 0.06); } [data-theme="dark"] .reader-card:hover { box-shadow: var(--shadow-md); } [data-theme="dark"] .reader-card .reader-avatar { border-color: var(--bg-tertiary); } [data-theme="dark"] .reader-card .reader-name { color: var(--text-primary); } [data-theme="dark"] .reader-card .reader-info { color: var(--text-secondary); } /* Result Card */ [data-theme="dark"] .result-card { background: var(--bg-card); border-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .result-card:hover { border-color: var(--primary-light); box-shadow: var(--shadow-md); } [data-theme="dark"] .result-card .result-cover { background: var(--bg-tertiary); } [data-theme="dark"] .result-card .result-title { color: var(--text-primary); } [data-theme="dark"] .result-card .result-author, [data-theme="dark"] .result-card .result-info { color: var(--text-secondary); } /* Stat Card */ [data-theme="dark"] .stat-card { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .stat-card:hover { background: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .stat-card .stat-number { color: var(--text-primary); } [data-theme="dark"] .stat-card .stat-label { color: var(--text-secondary); } /* Member Stat Card */ [data-theme="dark"] .member-stat-card { background: var(--bg-card); border-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .member-stat-card:hover { box-shadow: var(--shadow-md); } /* Info Card */ [data-theme="dark"] .info-card { background: var(--bg-card); border: 1px solid rgba(255, 255, 255, 0.06); color: var(--text-primary); } [data-theme="dark"] .info-card:hover { border-color: rgba(255, 255, 255, 0.12); } [data-theme="dark"] .info-card .info-label { color: var(--text-muted); } [data-theme="dark"] .info-card .info-value { color: var(--text-primary); } /* Map Wrapper */ [data-theme="dark"] .map-wrapper { background: var(--bg-card); border: 1px solid rgba(255, 255, 255, 0.06); } /* ============================================ 9. Stats Section Override ============================================ */ [data-theme="dark"] .stats-section { background: linear-gradient(135deg, #0a0e1a, #0d1b3e); } /* ============================================ 10. Reader Podium & Medals ============================================ */ [data-theme="dark"] .reader-podium { background: var(--bg-secondary); border: 1px solid rgba(255, 255, 255, 0.06); } [data-theme="dark"] .reader-podium .podium-step { background: var(--bg-card); } [data-theme="dark"] .reader-podium .medal-badge { box-shadow: var(--shadow-md); } [data-theme="dark"] .reader-podium .medal-badge.gold { background: linear-gradient(135deg, #c49400, #ffd700); color: #1a1a2e; } [data-theme="dark"] .reader-podium .medal-badge.silver { background: linear-gradient(135deg, #8a8a9a, #c0c0c0); color: #1a1a2e; } [data-theme="dark"] .reader-podium .medal-badge.bronze { background: linear-gradient(135deg, #8b5e3c, #cd7f32); color: #1a1a2e; } [data-theme="dark"] .reader-podium .reader-name { color: var(--text-primary); } [data-theme="dark"] .reader-podium .reader-count { color: var(--text-secondary); } /* ============================================ 11. Swiper Overrides ============================================ */ [data-theme="dark"] .collection-section .swiper-button-next, [data-theme="dark"] .collection-section .swiper-button-prev { background: var(--bg-card); color: var(--primary-light); box-shadow: var(--shadow-md); border: 1px solid rgba(255, 255, 255, 0.08); } [data-theme="dark"] .collection-section .swiper-button-next:hover, [data-theme="dark"] .collection-section .swiper-button-prev:hover { background: var(--primary-light); color: #ffffff; border-color: var(--primary-light); } [data-theme="dark"] .swiper-button-next, [data-theme="dark"] .swiper-button-prev { color: var(--primary-light); } [data-theme="dark"] .swiper-pagination-bullet { background: var(--text-muted); opacity: 0.5; } [data-theme="dark"] .swiper-pagination-bullet-active { background: var(--primary-light); opacity: 1; } /* ============================================ 12. Detail Page Overrides ============================================ */ [data-theme="dark"] .detail-main .detail-info-item { background: var(--bg-card); border: 1px solid rgba(255, 255, 255, 0.06); } [data-theme="dark"] .detail-main .detail-info-item .label { color: var(--text-muted); } [data-theme="dark"] .detail-main .detail-info-item .value { color: var(--text-primary); } [data-theme="dark"] .detail-main .detail-cover { background: var(--bg-tertiary); } [data-theme="dark"] .detail-main .detail-title { color: var(--text-primary); } [data-theme="dark"] .detail-main .detail-author { color: var(--text-secondary); } [data-theme="dark"] .detail-tabs .nav-tabs { border-bottom-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .detail-tabs .nav-tabs .nav-link { color: var(--text-secondary); } [data-theme="dark"] .detail-tabs .nav-tabs .nav-link:hover { color: var(--primary-light); border-color: transparent; } [data-theme="dark"] .detail-tabs .nav-tabs .nav-link.active { color: var(--primary-light); border-bottom-color: var(--primary-light); background: transparent; } [data-theme="dark"] .detail-tabs .tab-content { color: var(--text-primary); } /* ============================================ 13. Search Form Inline ============================================ */ [data-theme="dark"] .search-form-inline input, [data-theme="dark"] .search-form-inline select, [data-theme="dark"] .search-form-inline .form-control, [data-theme="dark"] .search-form-inline .form-select { background: var(--bg-card); border-color: rgba(255, 255, 255, 0.1); color: var(--text-primary); } [data-theme="dark"] .search-form-inline input:focus, [data-theme="dark"] .search-form-inline select:focus, [data-theme="dark"] .search-form-inline .form-control:focus, [data-theme="dark"] .search-form-inline .form-select:focus { background: var(--bg-secondary); border-color: var(--primary-light); box-shadow: 0 0 0 3px rgba(74, 154, 245, 0.15); color: var(--text-primary); } [data-theme="dark"] .search-form-inline input::placeholder { color: var(--text-muted); } [data-theme="dark"] .search-form-inline .btn { border-color: rgba(255, 255, 255, 0.1); } /* ============================================ 14. Form Inputs (Global) ============================================ */ [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: var(--bg-tertiary); border-color: rgba(255, 255, 255, 0.1); color: var(--text-primary); } [data-theme="dark"] input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus { border-color: var(--primary-light); background: var(--bg-secondary); box-shadow: 0 0 0 3px rgba(74, 154, 245, 0.15); outline: none; color: var(--text-primary); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--text-muted); } /* Placeholder text for all form elements */ [data-theme="dark"] .form-control::placeholder, [data-theme="dark"] .form-select::placeholder { color: var(--text-muted); } /* ============================================ 15. Tables ============================================ */ [data-theme="dark"] .member-loan-table { background: var(--bg-card); border-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .member-loan-table th { background: var(--bg-tertiary); color: var(--text-muted); border-bottom-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .member-loan-table td { color: var(--text-primary); border-top-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .member-loan-table tr:hover td { background: rgba(255, 255, 255, 0.03); } [data-theme="dark"] table, [data-theme="dark"] .table { color: var(--text-primary); border-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .table thead th { background: var(--bg-tertiary); color: var(--text-secondary); border-bottom-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .table td, [data-theme="dark"] .table th { border-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.02); } [data-theme="dark"] .table-hover > tbody > tr:hover { background-color: rgba(255, 255, 255, 0.04); } /* ============================================ 16. Footer Override ============================================ */ [data-theme="dark"] .sman5-footer { background: #0a0a14; color: var(--text-secondary); } [data-theme="dark"] .sman5-footer h5, [data-theme="dark"] .sman5-footer .footer-title { color: var(--text-primary); } [data-theme="dark"] .sman5-footer a { color: var(--text-secondary); } [data-theme="dark"] .sman5-footer a:hover { color: var(--primary-light); } [data-theme="dark"] .footer-bottom { border-top-color: rgba(255, 255, 255, 0.06); color: var(--text-muted); } /* ============================================ 17. Social Buttons ============================================ */ [data-theme="dark"] .social-btn { background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid rgba(255, 255, 255, 0.08); } [data-theme="dark"] .social-btn:hover { background: var(--primary-light); color: #ffffff; border-color: var(--primary-light); } [data-theme="dark"] .library-info .social-icons a { background: var(--bg-tertiary); color: var(--text-secondary); } [data-theme="dark"] .library-info .social-icons a:hover { background: var(--primary-light); color: #ffffff; } /* ============================================ 18. Section Divider ============================================ */ [data-theme="dark"] .section-divider { border-color: rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .section-divider::before, [data-theme="dark"] .section-divider::after { background: rgba(255, 255, 255, 0.06); } [data-theme="dark"] hr { border-color: rgba(255, 255, 255, 0.08); opacity: 1; } /* ============================================ 19. View Toggle, Pagination, Breadcrumb ============================================ */ /* View Toggle */ [data-theme="dark"] .view-toggle { background: var(--bg-tertiary); border: 1px solid rgba(255, 255, 255, 0.06); } [data-theme="dark"] .view-toggle button { color: var(--text-muted); } [data-theme="dark"] .view-toggle button:hover { color: var(--text-primary); } [data-theme="dark"] .view-toggle button.active { background: var(--bg-card); color: var(--primary-light); box-shadow: var(--shadow-sm); } /* Pagination */ [data-theme="dark"] .pagination-custom a, [data-theme="dark"] .pagination-custom span { background: var(--bg-card); border-color: rgba(255, 255, 255, 0.08); color: var(--text-secondary); } [data-theme="dark"] .pagination-custom a:hover { border-color: var(--primary-light); color: var(--primary-light); background: rgba(74, 154, 245, 0.1); } [data-theme="dark"] .pagination-custom .active { background: var(--primary-light); border-color: var(--primary-light); color: #ffffff; } [data-theme="dark"] .pagination-custom .disabled { opacity: 0.4; color: var(--text-muted); } /* Bootstrap Pagination */ [data-theme="dark"] .page-link { background-color: var(--bg-card); border-color: rgba(255, 255, 255, 0.08); color: var(--text-secondary); } [data-theme="dark"] .page-link:hover { background-color: rgba(74, 154, 245, 0.1); border-color: var(--primary-light); color: var(--primary-light); } [data-theme="dark"] .page-item.active .page-link { background-color: var(--primary-light); border-color: var(--primary-light); color: #ffffff; } [data-theme="dark"] .page-item.disabled .page-link { background-color: var(--bg-tertiary); border-color: rgba(255, 255, 255, 0.04); color: var(--text-muted); } /* Breadcrumb */ [data-theme="dark"] .breadcrumb-custom { color: var(--text-muted); } [data-theme="dark"] .breadcrumb-custom a { color: var(--text-secondary); } [data-theme="dark"] .breadcrumb-custom a:hover { color: var(--primary-light); } [data-theme="dark"] .breadcrumb-custom .current { color: var(--text-primary); } [data-theme="dark"] .breadcrumb { background: transparent; } [data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); } [data-theme="dark"] .breadcrumb-item a { color: var(--text-secondary); } [data-theme="dark"] .breadcrumb-item.active { color: var(--text-primary); } /* ============================================ 20. Skeleton Loading ============================================ */ [data-theme="dark"] .skeleton { background: linear-gradient(90deg, #1a1a2e 25%, #243347 50%, #1a1a2e 75%); background-size: 200% 100%; animation: skeleton-dark 1.5s ease-in-out infinite; } @keyframes skeleton-dark { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ============================================ 21. Badges ============================================ */ [data-theme="dark"] .badge-available { background: rgba(15, 157, 88, 0.2); color: #34d399; } [data-theme="dark"] .badge-unavailable { background: rgba(234, 67, 53, 0.2); color: #f87171; } [data-theme="dark"] .badge-reference { background: rgba(249, 171, 0, 0.2); color: #fbbf24; } /* Bootstrap badge variants */ [data-theme="dark"] .badge.bg-primary { background-color: rgba(74, 154, 245, 0.2) !important; color: #4a9af5; } [data-theme="dark"] .badge.bg-secondary { background-color: rgba(176, 179, 184, 0.15) !important; color: #b0b3b8; } [data-theme="dark"] .badge.bg-success { background-color: rgba(15, 157, 88, 0.2) !important; color: #34d399; } [data-theme="dark"] .badge.bg-danger { background-color: rgba(234, 67, 53, 0.2) !important; color: #f87171; } [data-theme="dark"] .badge.bg-warning { background-color: rgba(249, 171, 0, 0.2) !important; color: #fbbf24; } [data-theme="dark"] .badge.bg-info { background-color: rgba(66, 133, 244, 0.2) !important; color: #60a5fa; } [data-theme="dark"] .badge.bg-light { background-color: var(--bg-tertiary) !important; color: var(--text-secondary); } [data-theme="dark"] .badge.bg-dark { background-color: rgba(255, 255, 255, 0.1) !important; color: var(--text-primary); } /* ============================================ 22. Page Loader ============================================ */ [data-theme="dark"] .page-loader { background: var(--bg-primary); } [data-theme="dark"] .page-loader .loader-spinner { border-color: rgba(255, 255, 255, 0.08); border-top-color: var(--primary-light); } [data-theme="dark"] .page-loader .loader-text { color: var(--text-secondary); } /* ============================================ 23. Bootstrap Button Overrides ============================================ */ [data-theme="dark"] .btn-outline-primary { color: var(--primary-light); border-color: var(--primary-light); } [data-theme="dark"] .btn-outline-primary:hover { background: var(--primary-light); border-color: var(--primary-light); color: #ffffff; } [data-theme="dark"] .btn-outline-secondary { color: var(--text-secondary); border-color: rgba(255, 255, 255, 0.15); } [data-theme="dark"] .btn-outline-secondary:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.25); color: var(--text-primary); } [data-theme="dark"] .btn-outline-custom { color: var(--primary-light); border-color: var(--primary-light); } [data-theme="dark"] .btn-outline-custom:hover { background: var(--primary-light); color: #ffffff; } [data-theme="dark"] .btn-light { background: var(--bg-tertiary); border-color: rgba(255, 255, 255, 0.08); color: var(--text-primary); } [data-theme="dark"] .btn-light:hover { background: var(--bg-card); color: var(--text-primary); } /* ============================================ 24. Bootstrap Dropdown ============================================ */ [data-theme="dark"] .dropdown-menu { background-color: var(--bg-card); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: var(--shadow-lg); } [data-theme="dark"] .dropdown-item { color: var(--text-secondary); } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background-color: rgba(255, 255, 255, 0.06); color: var(--text-primary); } [data-theme="dark"] .dropdown-item.active, [data-theme="dark"] .dropdown-item:active { background-color: rgba(74, 154, 245, 0.15); color: var(--primary-light); } [data-theme="dark"] .dropdown-divider { border-top-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .dropdown-header { color: var(--text-muted); } /* ============================================ 25. Bootstrap Modal ============================================ */ [data-theme="dark"] .modal-content { background-color: var(--bg-secondary); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: var(--shadow-xl); color: var(--text-primary); } [data-theme="dark"] .modal-header { border-bottom-color: rgba(255, 255, 255, 0.08); color: var(--text-primary); } [data-theme="dark"] .modal-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } [data-theme="dark"] .modal-body { color: var(--text-primary); } [data-theme="dark"] .modal-footer { border-top-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .modal-backdrop { background-color: rgba(0, 0, 0, 0.7); } /* ============================================ 26. Bootstrap Generic Card ============================================ */ [data-theme="dark"] .card { background-color: var(--bg-card); border-color: rgba(255, 255, 255, 0.06); color: var(--text-primary); } [data-theme="dark"] .card-header { background-color: var(--bg-tertiary); border-bottom-color: rgba(255, 255, 255, 0.06); color: var(--text-primary); } [data-theme="dark"] .card-footer { background-color: var(--bg-tertiary); border-top-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .card-body { color: var(--text-primary); } /* ============================================ 27. Bootstrap Alerts ============================================ */ [data-theme="dark"] .alert-primary { background-color: rgba(74, 154, 245, 0.12); border-color: rgba(74, 154, 245, 0.2); color: #7ab8ff; } [data-theme="dark"] .alert-secondary { background-color: rgba(176, 179, 184, 0.1); border-color: rgba(176, 179, 184, 0.15); color: #b0b3b8; } [data-theme="dark"] .alert-success { background-color: rgba(15, 157, 88, 0.12); border-color: rgba(15, 157, 88, 0.2); color: #34d399; } [data-theme="dark"] .alert-danger { background-color: rgba(234, 67, 53, 0.12); border-color: rgba(234, 67, 53, 0.2); color: #f87171; } [data-theme="dark"] .alert-warning { background-color: rgba(249, 171, 0, 0.12); border-color: rgba(249, 171, 0, 0.2); color: #fbbf24; } [data-theme="dark"] .alert-info { background-color: rgba(66, 133, 244, 0.12); border-color: rgba(66, 133, 244, 0.2); color: #60a5fa; } [data-theme="dark"] .alert .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* ============================================ 28. Bootstrap Nav Tabs & Pills ============================================ */ [data-theme="dark"] .nav-tabs { border-bottom-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .nav-tabs .nav-link { color: var(--text-secondary); border-color: transparent; } [data-theme="dark"] .nav-tabs .nav-link:hover { border-color: rgba(255, 255, 255, 0.08) rgba(255, 255, 255, 0.08) transparent; color: var(--primary-light); } [data-theme="dark"] .nav-tabs .nav-link.active { color: var(--primary-light); background-color: var(--bg-primary); border-color: rgba(255, 255, 255, 0.08) rgba(255, 255, 255, 0.08) var(--bg-primary); } [data-theme="dark"] .nav-pills .nav-link { color: var(--text-secondary); } [data-theme="dark"] .nav-pills .nav-link:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-primary); } [data-theme="dark"] .nav-pills .nav-link.active { background-color: var(--primary-light); color: #ffffff; } /* ============================================ 29. Bootstrap List Group ============================================ */ [data-theme="dark"] .list-group-item { background-color: var(--bg-card); border-color: rgba(255, 255, 255, 0.06); color: var(--text-primary); } [data-theme="dark"] .list-group-item:hover { background-color: rgba(255, 255, 255, 0.04); } [data-theme="dark"] .list-group-item.active { background-color: var(--primary-light); border-color: var(--primary-light); color: #ffffff; } [data-theme="dark"] .list-group-item.disabled { color: var(--text-muted); background-color: var(--bg-tertiary); } [data-theme="dark"] .list-group-item + .list-group-item { border-top-color: rgba(255, 255, 255, 0.06); } /* ============================================ 30. Bootstrap Form Controls ============================================ */ [data-theme="dark"] .form-control { background-color: var(--bg-tertiary); border-color: rgba(255, 255, 255, 0.1); color: var(--text-primary); } [data-theme="dark"] .form-control:focus { background-color: var(--bg-secondary); border-color: var(--primary-light); box-shadow: 0 0 0 3px rgba(74, 154, 245, 0.15); color: var(--text-primary); } [data-theme="dark"] .form-control:disabled, [data-theme="dark"] .form-control[readonly] { background-color: var(--bg-primary); color: var(--text-muted); opacity: 0.7; } [data-theme="dark"] .form-select { background-color: var(--bg-tertiary); border-color: rgba(255, 255, 255, 0.1); color: var(--text-primary); } [data-theme="dark"] .form-select:focus { background-color: var(--bg-secondary); border-color: var(--primary-light); box-shadow: 0 0 0 3px rgba(74, 154, 245, 0.15); color: var(--text-primary); } [data-theme="dark"] .form-select option { background-color: var(--bg-secondary); color: var(--text-primary); } [data-theme="dark"] .form-check-input { background-color: var(--bg-tertiary); border-color: rgba(255, 255, 255, 0.2); } [data-theme="dark"] .form-check-input:checked { background-color: var(--primary-light); border-color: var(--primary-light); } [data-theme="dark"] .form-check-input:focus { box-shadow: 0 0 0 3px rgba(74, 154, 245, 0.15); border-color: var(--primary-light); } [data-theme="dark"] .form-check-label { color: var(--text-primary); } [data-theme="dark"] .form-label { color: var(--text-secondary); } [data-theme="dark"] .form-text { color: var(--text-muted); } [data-theme="dark"] .input-group-text { background-color: var(--bg-tertiary); border-color: rgba(255, 255, 255, 0.1); color: var(--text-secondary); } /* ============================================ 31. Bootstrap Accordion ============================================ */ [data-theme="dark"] .accordion-item { background-color: var(--bg-card); border-color: rgba(255, 255, 255, 0.06); color: var(--text-primary); } [data-theme="dark"] .accordion-button { background-color: var(--bg-card); color: var(--text-primary); box-shadow: none; } [data-theme="dark"] .accordion-button:not(.collapsed) { background-color: rgba(74, 154, 245, 0.08); color: var(--primary-light); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06); } [data-theme="dark"] .accordion-button::after { filter: invert(1) brightness(2); } [data-theme="dark"] .accordion-button:focus { box-shadow: 0 0 0 3px rgba(74, 154, 245, 0.15); border-color: var(--primary-light); } [data-theme="dark"] .accordion-body { background-color: var(--bg-secondary); color: var(--text-primary); } /* ============================================ 32. Bootstrap Offcanvas ============================================ */ [data-theme="dark"] .offcanvas { background-color: var(--bg-secondary); color: var(--text-primary); border-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .offcanvas-header { border-bottom-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .offcanvas-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } [data-theme="dark"] .offcanvas-title { color: var(--text-primary); } [data-theme="dark"] .offcanvas-backdrop { background-color: rgba(0, 0, 0, 0.6); } /* ============================================ 33. Text Utility Overrides ============================================ */ [data-theme="dark"] .text-dark { color: var(--text-primary) !important; } [data-theme="dark"] .text-muted { color: var(--text-muted) !important; } [data-theme="dark"] .text-body { color: var(--text-primary) !important; } [data-theme="dark"] .text-black-50 { color: var(--text-muted) !important; } [data-theme="dark"] .text-secondary { color: var(--text-secondary) !important; } /* ============================================ 34. Background Utility Overrides ============================================ */ [data-theme="dark"] .bg-white { background-color: var(--bg-card) !important; } [data-theme="dark"] .bg-light { background-color: var(--bg-tertiary) !important; } [data-theme="dark"] .bg-body { background-color: var(--bg-primary) !important; } /* ============================================ 35. Border Color Overrides ============================================ */ [data-theme="dark"] .border { border-color: rgba(255, 255, 255, 0.08) !important; } [data-theme="dark"] .border-top, [data-theme="dark"] .border-bottom, [data-theme="dark"] .border-start, [data-theme="dark"] .border-end { border-color: rgba(255, 255, 255, 0.08) !important; } [data-theme="dark"] .border-light { border-color: rgba(255, 255, 255, 0.06) !important; } [data-theme="dark"] .border-secondary { border-color: rgba(255, 255, 255, 0.12) !important; } /* ============================================ 36. Section Backgrounds ============================================ */ [data-theme="dark"] .categories-section, [data-theme="dark"] .readers-section { background: var(--bg-secondary); } [data-theme="dark"] .collection-section, [data-theme="dark"] .library-info { background: var(--bg-primary); } /* Section headings */ [data-theme="dark"] .section-title, [data-theme="dark"] .section-heading { color: var(--text-primary); } [data-theme="dark"] .section-subtitle, [data-theme="dark"] .section-description { color: var(--text-secondary); } /* ============================================ 37. Image / Cover Placeholders ============================================ */ [data-theme="dark"] .cover-placeholder, [data-theme="dark"] .book-cover-placeholder, [data-theme="dark"] .no-cover { background: var(--bg-tertiary); color: var(--text-muted); } [data-theme="dark"] img.bg-light, [data-theme="dark"] .card-img-top[style*="background"], [data-theme="dark"] .img-placeholder { background-color: var(--bg-tertiary) !important; } /* ============================================ 38. Toast Notification Overrides ============================================ */ [data-theme="dark"] .toast { background-color: var(--bg-card); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: var(--shadow-lg); color: var(--text-primary); } [data-theme="dark"] .toast-header { background-color: var(--bg-tertiary); border-bottom-color: rgba(255, 255, 255, 0.06); color: var(--text-primary); } [data-theme="dark"] .toast-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } [data-theme="dark"] .toast-body { color: var(--text-primary); } /* ============================================ 39. Colorbox / Lightbox Overrides ============================================ */ [data-theme="dark"] #colorbox, [data-theme="dark"] #cboxOverlay { background: rgba(0, 0, 0, 0.85); } [data-theme="dark"] #cboxContent { background: var(--bg-secondary); } [data-theme="dark"] #cboxLoadedContent { background: var(--bg-secondary); color: var(--text-primary); } [data-theme="dark"] #cboxTitle { color: var(--text-secondary); } [data-theme="dark"] #cboxCurrent { color: var(--text-muted); } [data-theme="dark"] #cboxClose, [data-theme="dark"] #cboxNext, [data-theme="dark"] #cboxPrevious { filter: invert(1) brightness(1.5); } /* ============================================ 40. Scroll to Top Button ============================================ */ [data-theme="dark"] .scroll-top { background: var(--bg-card); color: var(--primary-light); box-shadow: var(--shadow-lg); border: 1px solid rgba(255, 255, 255, 0.08); } [data-theme="dark"] .scroll-top:hover { background: var(--primary-light); color: #ffffff; border-color: var(--primary-light); } /* ============================================ 41. Hover State Adjustments ============================================ */ [data-theme="dark"] a:hover { color: var(--primary-light); } [data-theme="dark"] .card:hover { box-shadow: var(--shadow-md); } [data-theme="dark"] .btn:hover { opacity: 0.9; } [data-theme="dark"] .list-group-item:not(.active):hover { background-color: rgba(255, 255, 255, 0.04); } [data-theme="dark"] .dropdown-item:hover { background-color: rgba(255, 255, 255, 0.06); } /* ============================================ 42. Popover & Tooltip ============================================ */ [data-theme="dark"] .popover { background-color: var(--bg-card); border-color: rgba(255, 255, 255, 0.1); box-shadow: var(--shadow-lg); } [data-theme="dark"] .popover-header { background-color: var(--bg-tertiary); border-bottom-color: rgba(255, 255, 255, 0.06); color: var(--text-primary); } [data-theme="dark"] .popover-body { color: var(--text-secondary); } [data-theme="dark"] .bs-popover-top > .popover-arrow::after, [data-theme="dark"] .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after { border-top-color: var(--bg-card); } [data-theme="dark"] .bs-popover-bottom > .popover-arrow::after, [data-theme="dark"] .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after { border-bottom-color: var(--bg-card); } [data-theme="dark"] .tooltip-inner { background-color: var(--bg-card); color: var(--text-primary); border: 1px solid rgba(255, 255, 255, 0.08); } /* ============================================ 43. Progress Bars ============================================ */ [data-theme="dark"] .progress { background-color: var(--bg-tertiary); } [data-theme="dark"] .progress-bar { background-color: var(--primary-light); } /* ============================================ 44. Close Buttons (Global) ============================================ */ [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* ============================================ 45. Miscellaneous Overrides ============================================ */ /* Code blocks */ [data-theme="dark"] code { background: rgba(74, 154, 245, 0.1); color: #e06c75; } [data-theme="dark"] pre { background: var(--bg-tertiary); border: 1px solid rgba(255, 255, 255, 0.06); color: var(--text-primary); } /* Blockquote */ [data-theme="dark"] blockquote { border-left-color: var(--primary-light); color: var(--text-secondary); } /* Mark / Highlight */ [data-theme="dark"] mark, [data-theme="dark"] .mark { background-color: rgba(196, 148, 0, 0.25); color: var(--text-primary); } /* Figure caption */ [data-theme="dark"] figcaption { color: var(--text-muted); } /* Empty states */ [data-theme="dark"] .empty-state, [data-theme="dark"] .no-results { color: var(--text-muted); } [data-theme="dark"] .empty-state i, [data-theme="dark"] .no-results i { color: var(--text-muted); opacity: 0.5; } /* Shadow utility override */ [data-theme="dark"] .shadow, [data-theme="dark"] .shadow-sm, [data-theme="dark"] .shadow-lg { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important; } /* Dividers */ [data-theme="dark"] .dropdown-divider, [data-theme="dark"] .vr { border-color: rgba(255, 255, 255, 0.08); opacity: 1; } /* Spinner */ [data-theme="dark"] .spinner-border { color: var(--primary-light); } [data-theme="dark"] .spinner-grow { color: var(--primary-light); } /* News cards */ [data-theme="dark"] .news-card { background: var(--bg-card); border-color: var(--border-color); } [data-theme="dark"] .news-title a { color: var(--text-primary); } [data-theme="dark"] .news-title a:hover { color: var(--primary-light); } [data-theme="dark"] .news-excerpt { color: var(--text-secondary); }