/* ============================================================ Bukhari-Pedia — dark theme ------------------------------------------------------------ Loaded on every page from layouts/app.blade.php and activated by the `dark` class on (set before paint by the inline script in , toggled by #darkModeBtn, stored in localStorage under `bp-theme`). Everything is scoped under `html.dark`, so the light theme is left untouched. Most sections already drive their colours through --bp-* custom properties declared on their own root (#bp-header, #bp-landing, ...); because those declarations sit ON the element they beat anything inherited from , so the overrides below are re-declared per root with a higher specificity selector. Only values hard-coded in the page stylesheets are patched individually. ============================================================ */ html.dark{ color-scheme:dark; --bpd-bg:#0f1416; --bpd-bg-2:#131a1e; --bpd-surface:#182126; --bpd-surface-2:#1f2a2f; --bpd-border:#2b383d; --bpd-text:#dde6e8; --bpd-text-2:#c2cfd2; --bpd-muted:#93a3a7; --bpd-teal:#2fd0d4; --bpd-teal-soft:#7fdfe1; --bpd-teal-deep:#0d5f62; --bpd-gold:#dcb948; --bpd-gold-soft:#efdca4; --bpd-shadow-sm:0 2px 10px rgba(0,0,0,.45); --bpd-shadow-md:0 14px 36px rgba(0,0,0,.55); --bpd-shadow-lg:0 24px 60px rgba(0,0,0,.65); } /* ------------------------------------------------------------ 1. base ------------------------------------------------------------ */ html.dark body{background:var(--bpd-bg);color:var(--bpd-text);} html.dark body.boxed div.body{background-color:var(--bpd-bg);} /* the layout declares `body, a, h1..., td {color:#626262}` for the light theme; without this the whole site keeps dark-grey text on dark. */ html.dark body,html.dark a, html.dark h1,html.dark h2,html.dark h3,html.dark h4,html.dark h5,html.dark h6, html.dark .h1,html.dark .h2,html.dark .h3,html.dark .h4,html.dark .h5,html.dark .h6, html.dark p,html.dark ol,html.dark ul,html.dark li,html.dark label, html.dark table,html.dark tr,html.dark th,html.dark td{color:var(--bpd-text);} html.dark hr{border-color:var(--bpd-border);} html.dark ::selection{background:var(--bpd-gold);color:#101417;} html.dark ::placeholder{color:var(--bpd-muted);opacity:1;} html.dark ::-webkit-scrollbar{width:11px;height:11px;} html.dark ::-webkit-scrollbar-track{background:var(--bpd-bg-2);} html.dark ::-webkit-scrollbar-thumb{background:#33444a;border-radius:8px;} html.dark ::-webkit-scrollbar-thumb:hover{background:#41565d;} /* ------------------------------------------------------------ 2. theme toggle button ------------------------------------------------------------ */ html.dark #bp-header #darkModeBtn{ background:var(--bpd-surface-2); border-color:rgba(220,185,72,.55); color:var(--bpd-gold-soft); } html.dark #bp-header #darkModeBtn:hover{ background:var(--bpd-gold); border-color:var(--bpd-gold); color:#101417; } /* ------------------------------------------------------------ 3. header ------------------------------------------------------------ */ html.dark #bp-header{ --bp-cream:#131b1f; --bp-cream-2:#0e1417; --bp-teal:#2fd0d4; --bp-teal-dark:#0d3134; --bp-teal-deep:#0b2b2e; --bp-ink:#dde6e8; --bp-gold:#dcb948; --bp-gold-lt:#efdca4; --bp-gold-dk:#d3b355; } html.dark #bp-header .bp-navbar{ border-top-color:var(--bpd-gold); box-shadow:0 3px 14px rgba(0,0,0,.6); } html.dark #bp-header .bp-banner::before{opacity:.07;} /* the two logos are teal artwork dimmed for the cream banner — lift them */ html.dark #bp-header .bp-logo img, html.dark #bp-header .bp-mini-logo img{filter:brightness(1.3) saturate(1.1);} html.dark #bp-header .bp-logo:hover img{filter:brightness(1.5) saturate(1.15);} /* the sponsor artwork ships on an opaque white plate — keep the plate light */ html.dark #bp-header .bp-sponsor{ background:#eef1f1; border-color:rgba(220,185,72,.5); box-shadow:0 6px 16px rgba(0,0,0,.5); } html.dark #bp-header .bp-quote p{color:var(--bpd-text-2);} html.dark #bp-header .bp-quote cite{color:var(--bpd-gold-soft);} /* --bp-teal-deep stays dark so the panel gradients keep working; the places where it is used as a *text* colour need a light value instead */ html.dark #bp-header .bp-top-links a:hover, html.dark #bp-header .bp-menu > li > a:hover, html.dark #bp-header .bp-dd-menu li a:hover{color:var(--bpd-teal-soft);} html.dark #bp-header .bp-top-links a:hover{background:rgba(220,185,72,.16);} html.dark #bp-header .bp-dd-menu{ background:var(--bpd-surface); border-top-color:var(--bpd-gold); box-shadow:0 22px 48px rgba(0,0,0,.7); } html.dark #bp-header .bp-dd-menu li a:hover{background:rgba(47,208,212,.12);} html.dark #bp-header .bp-drawer{box-shadow:0 0 60px rgba(0,0,0,.8);} html.dark #bp-header .bp-drawer-bd{background:rgba(0,0,0,.7);} /* ------------------------------------------------------------ 4. footer ------------------------------------------------------------ */ html.dark #bp-footer{background:#0b1215;color:var(--bpd-text);} html.dark #bp-footer::before{opacity:.05;} html.dark #bp-footer h6{color:var(--bpd-gold-soft);} html.dark #bp-footer h6::after{background:var(--bpd-gold);} html.dark #bp-footer p{color:var(--bpd-text-2);} html.dark #bp-footer .bp-visitors{color:var(--bpd-teal);text-shadow:none;} html.dark #bp-footer .bp-f-btns a{ background:var(--bpd-surface-2);color:var(--bpd-teal); box-shadow:0 5px 14px rgba(0,0,0,.5); } html.dark #bp-footer .bp-f-btns a:hover{background:var(--bpd-gold);color:#101417;} html.dark #bp-footer .bp-newsletter{box-shadow:0 10px 26px rgba(0,0,0,.55);} html.dark #bp-footer .bp-newsletter input{ background:var(--bpd-surface-2);color:var(--bpd-text); } html.dark #bp-footer .bp-newsletter button{ background:linear-gradient(135deg,#c2a238,#8b6f1a);color:#14110a; } html.dark #bp-footer .bp-f-bottom{ border-top-color:var(--bpd-border);color:var(--bpd-muted); } html.dark #bp-footer .bp-f-bottom a{color:var(--bpd-gold-soft);} /* back-to-top pill (rendered outside every section root) */ html.dark .bp-to-top{ background:var(--bpd-surface-2); color:var(--bpd-gold-soft); border:1px solid var(--bpd-border); } /* ------------------------------------------------------------ 5. landing (home + CMS pages, both use #bp-landing) ------------------------------------------------------------ */ html.dark #bp-landing{ --bp-teal:#2fd0d4; --bp-teal-deep:#35bfc3; --bp-ink:#dde6e8; --bp-gold:#dcb948; --bp-gold-soft:#efdca4; --bp-paper:#1b2429; --bp-muted:#93a3a7; --bp-shadow-sm:var(--bpd-shadow-sm); --bp-shadow-md:var(--bpd-shadow-md); --bp-shadow-lg:var(--bpd-shadow-lg); background:var(--bpd-bg); } /* --bp-teal-deep above is light because it is mostly a text colour here; the three places it is a gradient stop under white text stay dark. */ html.dark #bp-landing .bp-step-badge, html.dark #bp-landing .bp-feature-box .bp-fi{ background:linear-gradient(135deg,#12787b,#083b3e);color:#eaf6f6; } html.dark #bp-landing .bp-acc-head .bp-medal{ background:radial-gradient(circle at 35% 30%,#0d8f92,#062f31);color:#eaf6f6; } html.dark #bp-landing .bp-acc-item.bp-open .bp-medal{ background:radial-gradient(circle at 35% 30%,#c9a63c,#7d631a); border-color:var(--bpd-gold-soft); } html.dark #bp-landing .bp-hero{ background-image:url("/assets/porto/img/slides/slide-dark.png"); } html.dark #bp-landing .bp-pattern-bg{ background-image:url("/assets/porto/img/bg/02-dark.png"); } html.dark #bp-landing .bp-about{ background-image:url("/assets/porto/img/bg/01-dark.png"); } /* the wave under the hero is painted with a light-grey gradient that matches the top edge of bg/02.jpg; 02-dark.png is a flat near-black instead */ html.dark #bp-landing .bp-hero-wave path{fill:#121212;} html.dark #bp-landing .bp-about-card{ background:rgba(19,26,30,.94); box-shadow:0 30px 70px rgba(0,0,0,.7); } html.dark #bp-landing .bp-about-card p{color:var(--bpd-text-2);} html.dark #bp-landing .bp-journey-card, html.dark #bp-landing .bp-feature-box, html.dark #bp-landing .bp-acc-item, html.dark #bp-landing .bp-sponsors{ background:var(--bpd-surface); border-color:var(--bpd-border); } html.dark #bp-landing .bp-journey-card p, html.dark #bp-landing .bp-feature-box p, html.dark #bp-landing .bp-acc-body .bp-inner{color:var(--bpd-text-2);} html.dark #bp-landing .bp-books-section{background:var(--bpd-bg-2);} html.dark #bp-landing .bp-sponsors a:hover{background:var(--bpd-surface-2);} html.dark #bp-landing .bp-hero-sub{color:#e6efef;} html.dark #bp-landing .bp-word-rotate{ color:var(--bpd-gold-soft);border-bottom-color:var(--bpd-gold-soft); } html.dark .bp-lightbox-close{background:rgba(255,255,255,.14);color:#fff;} /* ------------------------------------------------------------ 6. reading view (#bp-book) ------------------------------------------------------------ */ html.dark #bp-book{ --bp-teal:#2fd0d4; --bp-teal-deep:#41c9cd; --bp-teal-dark:#0d3134; --bp-ink:#dde6e8; --bp-gold:#dcb948; --bp-gold-lt:#efdca4; --bp-gold-dk:#d3b355; --bp-muted:#93a3a7; --bp-line:rgba(47,208,212,.18); background:var(--bpd-bg); } html.dark #bp-book .portlet.light{ background:var(--bpd-surface); border-color:var(--bpd-border); box-shadow:0 18px 50px rgba(0,0,0,.6); } html.dark #bp-book #div_book_tree_scroll, html.dark #bp-book #div_book_content_scroller, html.dark #bp-book #container_book_details_1 > div:last-child, html.dark #bp-book #container_book_details_2 > div:last-child{ background:var(--bpd-bg-2); border-color:var(--bpd-border); } html.dark #bp-book #div_book_content_scroller{background:var(--bpd-surface-2);} html.dark #bp-book .div_book_content, html.dark #bp-book .div_book_details{color:var(--bpd-text);} html.dark #bp-book .div_book_content h1,html.dark #bp-book .div_book_details h1, html.dark #bp-book .div_book_content h2,html.dark #bp-book .div_book_details h2{ color:var(--bpd-teal-soft); border-bottom-color:rgba(220,185,72,.45); } html.dark #bp-book .btn.btn-circle.btn-icon-only{ background:var(--bpd-surface-2) !important; border-color:rgba(47,208,212,.4) !important; color:var(--bpd-teal-soft) !important; } html.dark #bp-book .btn.btn-circle.btn-icon-only i{color:var(--bpd-teal-soft) !important;} html.dark #bp-book .btn-group.btn-details > a.btn, html.dark #bp-book #a_rwah{ background:rgba(220,185,72,.14) !important; border-color:rgba(220,185,72,.45) !important; color:var(--bpd-gold-soft) !important; } html.dark #bp-book a.bg-grey{ background:#232d31 !important;color:#63757a !important; border-color:#2f3d42 !important; } html.dark #bp-book a.bg-grey i{color:#63757a !important;} html.dark #bp-book #btn_prev_entry, html.dark #bp-book #btn_next_entry{ background:var(--bpd-surface-2) !important; color:var(--bpd-teal-soft) !important; border-color:rgba(47,208,212,.4) !important; } html.dark #bp-book input[type="text"].form-control, html.dark #bp-book #txt_scripts_pointer_1, html.dark #bp-book #txt_scripts_pointer_2{ background:var(--bpd-surface-2) !important; color:var(--bpd-text) !important; border-color:rgba(47,208,212,.32) !important; } html.dark #bp-book input[type="text"].form-control:focus{ background:#26343a !important;border-color:var(--bpd-teal) !important; box-shadow:0 0 0 4px rgba(47,208,212,.14); } html.dark #bp-book .portlet-title .actions .dropdown-menu{ background:var(--bpd-surface); border-top-color:var(--bpd-gold); box-shadow:0 22px 48px rgba(0,0,0,.7); } html.dark #bp-book .portlet-title .actions .dropdown-menu li > a{color:var(--bpd-text) !important;} html.dark #bp-book .portlet-title .actions .dropdown-menu li > a:hover{ background:rgba(47,208,212,.14) !important;color:var(--bpd-teal-soft) !important; } html.dark #bp-book .jstree-anchor{color:#b9c6c9 !important;} html.dark #bp-book .jstree-hovered{background:rgba(220,185,72,.16) !important;} html.dark #bp-book .jstree-clicked{ background:rgba(47,208,212,.2) !important;color:var(--bpd-teal-soft) !important; } html.dark #bp-book .search_result_item:hover{background:rgba(47,208,212,.09);} html.dark #bp-book mark{background:rgba(220,185,72,.4);color:#fff5d8;} html.dark #bp-book .div_book_details_controls{ background:rgba(47,208,212,.07);border-color:var(--bpd-border); } html.dark #bp-book #h2_node_title{ background:rgba(220,185,72,.14); border-color:rgba(220,185,72,.38); color:var(--bpd-gold-soft) !important; } /* manuscript scans and PDFs are bright white sheets — take the glare off */ html.dark #bp-book .img_script, html.dark #bp-book .iframe_book_pdf{filter:brightness(.86) contrast(1.04);} /* narrator highlighting: the light-theme colours (#0000cc, #cc0000) are unreadable on a dark background */ html.dark .mark_rawi{color:#5ce65c;} html.dark .mark_current_rawi, html.dark .mark_current_rawi>.mark_rawi, html.dark .mark_current_rawi>.mark_rawi>.mark_rawi{color:#ff7b7b !important;} html.dark .mark_previous_rawi, html.dark .mark_previous_rawi>.mark_rawi, html.dark .mark_previous_rawi>.mark_rawi>.mark_rawi, html.dark .mark_previous_rawi>.mark_rawi>.mark_rawi>.mark_rawi, html.dark .mark_previous_rawi>.mark_rawi>.mark_rawi>.mark_rawi>.mark_rawi{color:#7fa8ff !important;} html.dark .mark_next_rawi, html.dark .mark_next_rawi>.mark_rawi, html.dark .mark_next_rawi>.mark_rawi>.mark_rawi, html.dark .mark_next_rawi>.mark_rawi>.mark_rawi>.mark_rawi, html.dark .mark_next_rawi>.mark_rawi>.mark_rawi>.mark_rawi>.mark_rawi{color:#3ad8dd !important;} /* ------------------------------------------------------------ 7. library / news / contact / reviews / testimonials / 404 (same design language, one root id each) ------------------------------------------------------------ */ html.dark #bp-lib, html.dark #bp-news, html.dark #bp-contact, html.dark #bp-rv, html.dark #bp-tm, html.dark #bp-404{ --bp-teal:#2fd0d4; --bp-teal-deep:#35bfc3; --bp-ink:#dde6e8; --bp-gold:#dcb948; --bp-gold-soft:#efdca4; --bp-muted:#93a3a7; background:var(--bpd-bg); } html.dark #bp-lib .bp-l-hero, html.dark #bp-news .bp-n-hero, html.dark #bp-contact .bp-c-hero, html.dark #bp-rv .bp-r-hero, html.dark #bp-tm .bp-t-hero{ background-image:url("/assets/porto/img/slides/slide-dark.png"); } html.dark #bp-lib .portlet.light, html.dark #bp-news .bp-n-card, html.dark #bp-news .bp-n-empty, html.dark #bp-contact .bp-c-card, html.dark #bp-rv .bp-r-card, html.dark #bp-rv .bp-r-empty, html.dark #bp-tm .bp-t-card, html.dark #bp-tm .bp-t-empty, html.dark #bp-404 .bp-e-card{ background:var(--bpd-surface); border-color:var(--bpd-border); box-shadow:var(--bpd-shadow-md); } html.dark #bp-news .bp-n-card::before{background:var(--bpd-surface);} /* the wave that closes each hero band is painted with the light page background (#f6f5f2); matched by its viewBox, which is unique to it */ html.dark #bp-lib svg[viewBox="0 0 1440 52"] path, html.dark #bp-news svg[viewBox="0 0 1440 52"] path, html.dark #bp-contact svg[viewBox="0 0 1440 52"] path, html.dark #bp-rv svg[viewBox="0 0 1440 52"] path, html.dark #bp-tm svg[viewBox="0 0 1440 52"] path{fill:var(--bpd-bg);} html.dark #bp-lib #select-category, html.dark #bp-lib .dataTables_filter input, html.dark #bp-contact .form-control{ background-color:var(--bpd-surface-2); color:var(--bpd-text); border-color:rgba(47,208,212,.32); } html.dark #bp-lib #select-category:focus, html.dark #bp-lib .dataTables_filter input:focus, html.dark #bp-contact .form-control:focus{background-color:#26343a;} html.dark #bp-lib .actions #btn_fullscreen{ background:var(--bpd-surface-2) !important;color:var(--bpd-teal-soft) !important; } html.dark #bp-lib #table_entries.table-striped>tbody>tr:nth-of-type(odd){background:var(--bpd-bg-2);} html.dark #bp-lib #table_entries.table-striped>tbody>tr:nth-of-type(even){background:var(--bpd-surface);} html.dark #bp-lib #table_entries>tbody>tr:hover{background:rgba(47,208,212,.1);} html.dark #bp-lib #table_entries>tbody>tr>td{border-color:var(--bpd-border);color:var(--bpd-text);} html.dark #bp-lib .dataTables_scrollBody::-webkit-scrollbar-track{background:var(--bpd-bg-2);} html.dark #bp-contact .alert-warning{background:#3a2220;border-color:#7d423c;color:#f0b8b2;} html.dark #bp-contact .alert-success{background:#16301f;border-color:#3d6b4c;color:#a9dcbd;} html.dark #bp-contact .has-error .form-control{background:#3a2220;border-color:#c0564f;} /* ------------------------------------------------------------ 8. survey (.bpsv-* is not scoped to a root id) ------------------------------------------------------------ */ html.dark .bpsv, html.dark .bpsv-thanks{ --bp-teal:#2fd0d4; --bp-teal-deep:#35bfc3; --bp-gold:#dcb948; --bp-gold-soft:#efdca4; --bp-ink:#dde6e8; --bp-muted:#93a3a7; --bp-line:rgba(47,208,212,.2); background:var(--bpd-bg); } html.dark .bpsv-hero{ background:linear-gradient(160deg,#062e30,#0a4143 55%,#073a3c); } html.dark .bpsv-hero::before{opacity:.07;} html.dark .bpsv-hero-badge{background:rgba(47,208,212,.18);color:var(--bpd-teal-soft);} html.dark .bpsv-thanks-badge{ background:linear-gradient(135deg,#12787b,#083b3e); border-color:rgba(220,185,72,.45); } html.dark .bpsv-card, html.dark .bpsv-thanks-card{ background:var(--bpd-surface); box-shadow:var(--bpd-shadow-md); } html.dark .bpsv-input{ background:var(--bpd-surface-2);color:var(--bpd-text); border-color:rgba(47,208,212,.3); } html.dark .bpsv-input:focus{background:#26343a;} html.dark .bpsv-pills label, html.dark .bpsv-checks label{background:var(--bpd-surface-2);color:var(--bpd-text);} html.dark .bpsv-pills label:hover, html.dark .bpsv-checks label:hover{background:#26343a;} html.dark .bpsv-checks label::before{background:var(--bpd-surface-2);border-color:rgba(47,208,212,.45);} html.dark .bpsv-rate, html.dark .bpsv-rate.is-set{background:var(--bpd-surface-2);} html.dark .bpsv-star{color:#42545a;} html.dark .bpsv-note{background:rgba(47,208,212,.08);} html.dark .bpsv-alert-danger{background:#3a2220;border-color:#7d423c;color:#f0b8b2;} html.dark .bpsv-alert-info{background:#16301f;border-color:#3d6b4c;color:#a9dcbd;} html.dark .bpsv-btn-ghost:hover{background:var(--bpd-surface-2);} /* ------------------------------------------------------------ 9. shared Bootstrap / Metronic chrome (search, rawi, news detail, modals, bootbox alerts …) ------------------------------------------------------------ */ html.dark .portlet.light, html.dark .portlet > .portlet-body, html.dark .panel, html.dark .well, html.dark .modal-content, html.dark .dropdown-menu, html.dark .popover{ background-color:var(--bpd-surface); color:var(--bpd-text); border-color:var(--bpd-border); } html.dark .portlet.light > .portlet-title, html.dark .panel-heading, html.dark .modal-header, html.dark .modal-footer{border-color:var(--bpd-border);} html.dark .portlet.light > .portlet-title > .caption, html.dark .portlet.light > .portlet-title > .caption > i{color:var(--bpd-teal-soft);} html.dark .dropdown-menu > li > a{color:var(--bpd-text);} html.dark .dropdown-menu > li > a:hover, html.dark .dropdown-menu > li > a:focus{background-color:rgba(47,208,212,.14);color:var(--bpd-teal-soft);} html.dark .dropdown-menu .divider{background-color:var(--bpd-border);} html.dark .form-control, html.dark input[type="text"], html.dark input[type="email"], html.dark input[type="password"], html.dark input[type="search"], html.dark input[type="number"], html.dark textarea, html.dark select{ background-color:var(--bpd-surface-2); color:var(--bpd-text); border-color:var(--bpd-border); } html.dark .form-control:focus{border-color:var(--bpd-teal);box-shadow:none;} html.dark .input-group-addon{ background-color:var(--bpd-bg-2);color:var(--bpd-muted);border-color:var(--bpd-border); } html.dark .table, html.dark .table > thead > tr > th, html.dark .table > tbody > tr > td, html.dark .table > tfoot > tr > td{ color:var(--bpd-text);border-color:var(--bpd-border); } html.dark .table-striped > tbody > tr:nth-of-type(odd){background-color:var(--bpd-bg-2);} html.dark .table-hover > tbody > tr:hover{background-color:rgba(47,208,212,.1);} html.dark .table > tbody > tr.active > td, html.dark .table > tbody > tr > td.active{background-color:rgba(47,208,212,.18);} html.dark .nav-tabs{border-bottom-color:var(--bpd-border);} html.dark .nav-tabs > li > a{color:var(--bpd-muted);} html.dark .nav-tabs > li > a:hover{background-color:var(--bpd-surface-2);border-color:var(--bpd-border);} html.dark .nav-tabs > li.active > a, html.dark .nav-tabs > li.active > a:hover, html.dark .nav-tabs > li.active > a:focus{ background-color:var(--bpd-surface);color:var(--bpd-teal-soft); border-color:var(--bpd-border);border-bottom-color:transparent; } html.dark .nav-pills > li > a{color:var(--bpd-text);} html.dark .nav > li > a:hover,html.dark .nav > li > a:focus{background-color:var(--bpd-surface-2);} html.dark .pagination > li > a, html.dark .pagination > li > span{ background-color:var(--bpd-surface);color:var(--bpd-text);border-color:var(--bpd-border); } html.dark .pagination > li > a:hover{background-color:var(--bpd-surface-2);} html.dark .pagination > .active > a, html.dark .pagination > .active > span{ background-color:var(--bpd-teal-deep);border-color:var(--bpd-teal-deep);color:#eaf6f6; } html.dark .pagination > .disabled > span, html.dark .pagination > .disabled > a{background-color:var(--bpd-bg-2);color:#5d6d72;} html.dark .list-group-item{ background-color:var(--bpd-surface);color:var(--bpd-text);border-color:var(--bpd-border); } html.dark .modal-backdrop.in{opacity:.75;} html.dark .close{color:var(--bpd-text);opacity:.7;text-shadow:none;} html.dark .close:hover{color:var(--bpd-gold-soft);opacity:1;} html.dark .bootbox .modal-body{color:var(--bpd-text);} html.dark .scroller{background:transparent;} html.dark div.slimScrollRail{background:rgba(47,208,212,.14) !important;}