/* Dark theme overlay — activated by adding "theme-dark" to (see control/header.php, which reads the BOOM_PREFIX.'theme' cookie server-side so the very first response already has the right class, no flash-of- wrong-theme JS needed). Purely additive: nothing in style.css/gen.css/ store_redesign.css is touched, this file only overrides what's needed. */ body.theme-dark { --sr-bg: #14151f; --sr-text-dark: #e7e9ee; --sr-text-muted: #98a0b3; --sr-border: rgba(255,255,255,0.08); --sr-shadow-sm: 0 2px 14px rgba(0,0,0,0.35); --sr-shadow-md: 0 10px 30px rgba(0,0,0,0.45); --sr-shadow-lg: 0 20px 45px rgba(0,0,0,0.55); --sr-card-bg: #1e2030; --dm-input-bg: #262838; --dm-dropdown-bg: #1e2030; } body.theme-dark { color: var(--sr-text-dark); } /* style.css's global `h1, h2, h3, h4, h5, h6 { color: #474D58; }` sets its own color DIRECTLY on every heading tag site-wide — since CSS only falls back to an ancestor's inherited color when NOTHING targets the element directly, that rule always wins over body.theme-dark's own `color` above regardless of specificity, on every h1–h6 anywhere that doesn't have a MORE specific override of its own (most don't). This is the root cause behind several individual heading-contrast bugs already fixed one at a time earlier in this file (.crm_body h4, .hosting_info h5, ...) — fixing it at the tag level here catches everywhere else using a bare heading tag that hasn't been found yet. */ body.theme-dark h1, body.theme-dark h2, body.theme-dark h3, body.theme-dark h4, body.theme-dark h5, body.theme-dark h6 { color: var(--sr-text-dark) !important; } /* Vendor template's base wrapper around every page's content (style.css: `.main_content .main_content_iner { background: #F6F7FB; }`) — always light, never overridden before now because every page's own card/box backgrounds sat on top of it and hid it. A page with bare content directly inside it (like the app-plans header text, outside any card) exposes this light strip underneath light-colored dark-mode text, making it unreadable. */ body.theme-dark .main_content .main_content_iner { background: var(--sr-bg) !important; } /* ═══════════════════════════════════════════════════════════ HEADER / NAVBAR ═══════════════════════════════════════════════════════════ */ body.theme-dark .header_iner { background: rgba(20,21,31,.92) !important; } /* line_img.png is a plain raster image (dark line art on a transparent background) — not a font icon, so no CSS color property can touch it. Same filter trick already used for the search button's own icon image inverts it to light lines, visible against the now-dark header. */ body.theme-dark .line_icon img { filter: invert(1) brightness(1.6); } body.theme-dark .serach_field-area .search_field { background: var(--dm-input-bg) !important; } body.theme-dark .search_txt { color: var(--sr-text-dark); } body.theme-dark .serach_field-area .search_inner input::placeholder { color: var(--sr-text-muted) !important; } body.theme-dark .header_iner .page_tittle h3, body.theme-dark .header_iner .notification i { color: var(--sr-text-dark); } body.theme-dark .Menu_NOtification_Wrap { background: var(--dm-dropdown-bg) !important; box-shadow: 0 10px 25px rgba(0,0,0,.5) !important; } body.theme-dark .nofity_footer { background: #1c1d2b !important; } body.theme-dark .profile_author_name h5, body.theme-dark .profile_info_details a { color: var(--sr-text-dark); } body.theme-dark .profile_info .profile_info_iner { background-color: var(--sr-card-bg) !important; } /* ═══════════════════════════════════════════════════════════ SIDEBAR ═══════════════════════════════════════════════════════════ */ body.theme-dark .sidebar { background: #191a26 !important; } body.theme-dark .sidebar .single_sidebar_tittle a { color: var(--sr-text-dark); } body.theme-dark .sidebar .normal_title { background: #1c1d2b !important; border-top-color: var(--sr-border) !important; } body.theme-dark .sidebar .submenu { background: #1c1d2b !important; border-bottom-color: var(--sr-border) !important; } body.theme-dark .sidebar .submenu a { color: var(--sr-text-muted); } body.theme-dark .sidebar #sidebar_menu > li ul li a.category_link:hover, body.theme-dark .sidebar #sidebar_menu > li ul li a.category_link.active { background: rgba(108,92,231,.18) !important; } body.theme-dark .sidebar #sidebar_menu > li ul li a.category_link:hover .submenu_icon, body.theme-dark .sidebar #sidebar_menu > li ul li a.category_link.active .submenu_icon { background: var(--sr-primary); } body.theme-dark .sidebar::-webkit-scrollbar-track { background: #191a26; } body.theme-dark .sidebar::-webkit-scrollbar-thumb { background: #34364a; } /* ═══════════════════════════════════════════════════════════ CARDS / BOXES ═══════════════════════════════════════════════════════════ */ /* Plain Bootstrap .card (e.g. the FAQ/tutorials accordion in store_faq.php) defaults to a white background straight from bootstrap.min.css — nothing local ever overrode it. */ body.theme-dark .card { background-color: var(--sr-card-bg) !important; } /* The FAQ/tutorials accordion's COLLAPSED question rows use their own light-lavender pill style (background:#F5F6FF; color:#415094;) — only the EXPANDED one (background:#884FFB; color:#fff;) already reads fine in dark mode, since that pair was never light-on-light to begin with. */ body.theme-dark .accordion_custom .card .card-header h2 a.collapsed, body.theme-dark .accordion_custom2 .card .card-header h2 a.collapsed { background: var(--dm-input-bg) !important; color: var(--sr-text-dark) !important; } body.theme-dark .accordion_custom .card .card-body p, body.theme-dark .accordion_custom2 .card .card-body p { color: var(--sr-text-muted) !important; } body.theme-dark .white_box, body.theme-dark .white_card, body.theme-dark .store_item .white_card, body.theme-dark .store_item, /* store_redesign.css's own #page_content > [class*="col-"] .white_card rule (also !important) has an ID in it, which beats the class-only selectors above on specificity alone — confirmed live via the browser's own matched-rules list, not a guess. Matching that same ID-bearing shape is the only way to actually out-rank it. */ body.theme-dark #page_content > [class*="col-"] .white_card { background-color: var(--sr-card-bg) !important; } body.theme-dark .white_box_tittle h4 { color: var(--sr-text-dark); } /* .page_left is the shared container behind most admin sub-pages (members, messages, private chats, hosting, categories, settings...) — its hardcoded white background was never touched, so every element inside it using var(--sr-text-dark) (already light in dark mode) turned into near-invisible light-on-white text across nearly every admin page. */ body.theme-dark .page_left { background: var(--sr-card-bg) !important; } body.theme-dark .member_row.member_row_banned { background: rgba(225,112,85,0.08) !important; } body.theme-dark .hosting_admin_card { background: var(--sr-card-bg) !important; } body.theme-dark .hosting_admin_card .hosting_info h5 { color: var(--sr-text-dark) !important; } body.theme-dark .single_crm { background: var(--sr-card-bg) !important; } body.theme-dark .crm_body h4 { color: var(--sr-text-dark) !important; } body.theme-dark .crm_body p { color: var(--sr-text-muted) !important; } body.theme-dark .empty_zone { background: var(--sr-card-bg) !important; } body.theme-dark .empty_zone::before { background: linear-gradient(135deg, rgba(108,92,231,.18), rgba(108,92,231,.1)) !important; } body.theme-dark .sr-modal-desc, body.theme-dark .sr-modal-stats { background: var(--dm-input-bg) !important; } body.theme-dark .owner_chat_attach_menu, body.theme-dark .owner_chat_emoji_picker, body.theme-dark .news_card { background: var(--sr-card-bg) !important; } body.theme-dark .contact_message_row.status_new { background: rgba(108,92,231,.12) !important; } body.theme-dark .cs_modal .modal-body { background: var(--sr-card-bg) !important; } /* #showModal .row.my-4 is a separate, more specific (ID-scoped) rule than .white_card/.modal-content — the add/edit-item forms' Price/Features fields sit inside THIS wrapper, which had its own hardcoded white background untouched by either of those fixes. */ body.theme-dark #showModal .row.my-4 { background: var(--sr-card-bg) !important; } body.theme-dark #showModal .row.my-4 .badge_btn_3 { background: rgba(108,92,231,.18) !important; } body.theme-dark #showModal .row.my-4 .form-control:focus { background: var(--dm-input-bg) !important; } /* Fighting CKEditor's own toolbar/panel backgrounds one selector at a time (see the .ck.ck-content rule below, and the pre-existing #showModal .ck.ck-toolbar rule in store_redesign.css) is fragile — CKEditor themes itself off its OWN CSS custom properties, which its internal styles reference with enough specificity/load-order weight to keep winning against plain external overrides. Setting CKEditor's own variables instead is the properly supported way to reskin it, and fixes every part of the editor (toolbar, dropdowns, panels, inputs) in one place instead of chasing each piece individually. */ body.theme-dark .ck.ck-editor { --ck-color-base-background: var(--dm-input-bg); --ck-color-base-border: var(--sr-border); --ck-color-base-foreground: var(--sr-card-bg); --ck-color-base-text: var(--sr-text-dark); --ck-color-focus-border: var(--sr-primary, #6c5ce7); --ck-color-text: var(--sr-text-dark); --ck-color-toolbar-background: var(--dm-input-bg); --ck-color-toolbar-border: var(--sr-border); --ck-color-button-default-background: transparent; --ck-color-button-default-hover-background: rgba(255,255,255,.08); --ck-color-button-default-active-background: rgba(255,255,255,.12); --ck-color-button-on-background: rgba(108,92,231,.3); --ck-color-button-on-hover-background: rgba(108,92,231,.4); --ck-color-button-on-color: var(--sr-text-dark); --ck-color-dropdown-panel-background: var(--dm-input-bg); --ck-color-dropdown-panel-border: var(--sr-border); --ck-color-panel-background: var(--dm-input-bg); --ck-color-panel-border: var(--sr-border); --ck-color-input-background: var(--dm-input-bg); --ck-color-input-text: var(--sr-text-dark); --ck-color-input-border: var(--sr-border); --ck-color-list-background: var(--dm-input-bg); --ck-color-list-button-hover-background: rgba(255,255,255,.08); } body.theme-dark .ck.ck-content { background: var(--dm-input-bg) !important; color: var(--sr-text-dark) !important; } body.theme-dark .cs_modal .modal-body .chose_thumb_title, body.theme-dark .cs_modal .modal-body .input_wrap label, body.theme-dark .input_wrap label, body.theme-dark .chose_thumb_title { color: var(--sr-text-dark) !important; } /* style.css's own .color_text_3 rule hardcodes a white background (with no !important) alongside a !important black text color — store_redesign.css already overrides the text color per-theme via --sr-text-dark, but never touches that background, so in dark mode the text goes light while its backing box stays white: invisible/illegible product names on every store card. */ body.theme-dark .color_text_3 { background-color: var(--dm-input-bg) !important; } /* ═══════════════════════════════════════════════════════════ CHAT / PRIVATE MESSAGING ═══════════════════════════════════════════════════════════ */ body.theme-dark .messages_list ul li a { background: var(--sr-card-bg) !important; } body.theme-dark .priv_msg_menu_popup { background: var(--sr-card-bg) !important; } body.theme-dark .priv_reply_quote { background: rgba(255,255,255,.06) !important; } body.theme-dark .owner_chat_text_input:focus { background: var(--dm-input-bg) !important; } body.theme-dark .CHAT_MESSAGE_POPUPBOX { background: var(--sr-card-bg) !important; } body.theme-dark .guest_chat_panel { background: var(--sr-card-bg) !important; } /* system/pages/store_cart.php (checkout/payment method chooser) carries its own