/* * Dynamic Theme Overrides * This CSS file maps standard Bootstrap classes and custom elements to dynamic CSS variables. * The CSS variables are injected dynamically into the from the database. */ :root { --primary: var(--theme_primary_color); --secondary: var(--theme_secondary_color); --success: var(--theme_success); --danger: var(--theme_danger); --warning: var(--theme_warning); --info: var(--theme_info); } /* ================================ 1. Global Backgrounds & Text ================================ */ body { background-color: var(--theme_body_bg) !important; color: var(--theme_text_color) !important; } .text-dark { --bs-text-opacity: 1; color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important; } .text-primary, .text-primary-custom, a.text-primary:hover { color: var(--theme_primary_color) !important; } .bg-primary, .bg-primary-custom { background-color: var(--theme_primary_color) !important; } .text-secondary { color: var(--theme_secondary_color) !important; } .bg-secondary { background-color: var(--theme_secondary_color) !important; } /* ================================ 2. Header & Footer ================================ */ .top-bar { background-color: var(--theme_topbar_bg) !important; color: var(--theme_topbar_text) !important; } .top-bar a, .top-bar span, .top-bar i { color: var(--theme_topbar_text) !important; } .navbar, header.sticky-header { background-color: var(--theme_header_bg) !important; } .navbar .nav-link, .navbar-brand, header.sticky-header h2, header.sticky-header a { color: var(--theme_header_text) !important; } .navbar .nav-link:hover, header.sticky-header a:hover { color: var(--theme_header_hover) !important; } /* ================================ Search Bar ================================ */ .search-bar-container { background-color: var(--theme_search_bg) !important; border: 2px solid var(--theme_search_border) !important; } .search-bar-container .search-cat-select { color: var(--theme_search_cat_text) !important; background-color: var(--theme_search_cat_bg) !important; } .search-bar-container .search-cat-select option, .search-bar-container .search-cat-select optgroup { background-color: var(--theme_search_cat_bg) !important; color: var(--theme_search_cat_text) !important; } .search-bar-container input.form-control { color: var(--theme_search_text) !important; background-color: var(--theme_search_input_bg) !important; } .search-bar-container input.form-control:hover, .search-bar-container input.form-control:focus { background-color: var(--theme_search_input_bg) !important; box-shadow: none !important; color: var(--theme_search_text) !important; } .search-bar-container input.form-control::placeholder { color: var(--theme_search_text) !important; opacity: 0.7; } .search-bar-container .search-icon-custom i { color: var(--theme_search_icon_color) !important; } .search-bar-container .search-btn-custom { background-color: var(--theme_search_btn_bg) !important; color: var(--theme_search_btn_text) !important; } footer, .footer { background-color: var(--theme_footer_bg) !important; color: var(--theme_footer_text) !important; } footer a, .footer a { color: var(--theme_footer_link) !important; } footer a:hover, .footer a:hover { color: var(--theme_primary_color) !important; } /* ================================ 3. Cards & Containers ================================ */ .card { background-color: var(--theme_card_bg) !important; border-color: var(--theme_card_border) !important; } .card-product { background-color: var(--theme_product_card_bg) !important; border-color: var(--theme_product_card_border) !important; } .card-title, .card h1, .card h2, .card h3, .card h4, .card h5, .card h6, .card-product .title a { color: var(--theme_card_title) !important; } .product-price, .price, .card-product .price { color: var(--theme_card_price) !important; } .card-product .old-price { color: var(--theme_card_old_price) !important; } .card-product .category-badge { color: var(--theme_card_category) !important; } .card:hover { border-color: var(--theme_card_hover_border) !important; } .card-product:hover { border-color: var(--theme_product_card_hover_border) !important; } /* Product Card specific actions */ .discount-badge { background-color: var(--theme_card_discount_bg) !important; color: var(--theme_card_discount_text) !important; } .btn-cart-custom { background-color: var(--theme_card_cart_btn_bg) !important; } .cart-icon-custom { color: var(--theme_card_cart_btn_text) !important; } .btn-action { background-color: var(--theme_card_action_bg) !important; border: none; color: var(--theme_card_action_icon) !important; } .btn-action i, .btn-action svg { color: var(--theme_card_action_icon) !important; } /* ================================ 4. Buttons ================================ */ .btn-primary { background-color: var(--theme_btn_primary_bg) !important; border-color: var(--theme_btn_primary_bg) !important; color: var(--theme_btn_primary_text) !important; } .btn-primary:hover { background-color: var(--theme_btn_primary_hover) !important; border-color: var(--theme_btn_primary_hover) !important; color: var(--theme_btn_primary_text) !important; } .btn-secondary, .btn-light { background-color: var(--theme_btn_secondary_bg) !important; border-color: var(--theme_btn_secondary_bg) !important; color: var(--theme_btn_secondary_text) !important; } .btn-outline-primary { color: var(--theme_primary_color) !important; border-color: var(--theme_primary_color) !important; } .btn-outline-primary:hover { background-color: var(--theme_primary_color) !important; color: var(--theme_btn_primary_text) !important; } /* ================================ 5. Admin / Vendor Sidebar ================================ */ .bg-dark.vh-100.sticky-top, .offcanvas.bg-dark, .admin-sidebar { background: var(--theme_sidebar_bg) !important; } .sidebar-scroll .nav-link { color: var(--theme_sidebar_text) !important; } .sidebar-scroll .nav-link:hover { background-color: var(--theme_sidebar_hover) !important; color: var(--theme_sidebar_active_text) !important; } .sidebar-scroll .nav-link.active-sidebar { background: var(--theme_sidebar_active_bg) !important; color: var(--theme_sidebar_active_text) !important; } /* ================================ 6. Inputs & Forms ================================ */ .form-control, .form-select { background-color: var(--theme_input_bg) !important; border-color: var(--theme_input_border) !important; color: var(--theme_input_text) !important; } .form-control:focus, .form-select:focus { border-color: var(--theme_input_focus) !important; box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25) !important; } /* ================================ 7. Alerts & Badges ================================ */ .text-success { color: var(--theme_success) !important; } .bg-success { background-color: var(--theme_success) !important; } .btn-success { background-color: var(--theme_success) !important; border-color: var(--theme_success) !important; } .text-danger { color: var(--theme_danger) !important; } .bg-danger { background-color: var(--theme_danger) !important; } .btn-danger { background-color: var(--theme_danger) !important; border-color: var(--theme_danger) !important; } .text-warning { color: var(--theme_warning) !important; } .bg-warning { background-color: var(--theme_warning) !important; } .btn-warning { background-color: var(--theme_warning) !important; border-color: var(--theme_warning) !important; } .text-info { color: var(--theme_info) !important; } .bg-info { background-color: var(--theme_info) !important; } .btn-info { background-color: var(--theme_info) !important; border-color: var(--theme_info) !important; } /* ================================ 8. Mobile View (Navigation & Sidebar) ================================ */ .mobile-nav { background-color: var(--theme_header_bg) !important; border-top-color: var(--theme_card_border) !important; } .mobile-nav a.text-dark { color: var(--theme_header_text) !important; } .mobile-nav a i { color: var(--theme_search_icon_color) !important; } .mobile-nav a.active, .mobile-nav a.active i { color: var(--theme_primary_color) !important; } .mobile-nav .badge { background-color: var(--theme_danger) !important; } .mobile-sidebar { background-color: var(--theme_header_bg) !important; } .mobile-sidebar .offcanvas-header { background-color: var(--theme_primary_color) !important; color: var(--theme_btn_primary_text) !important; } .mobile-sidebar .offcanvas-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } .mobile-sidebar h6, .mobile-sidebar .text-muted { color: var(--theme_footer_text) !important; } .mobile-sidebar .text-dark, .mobile-sidebar a.text-dark { color: var(--theme_header_text) !important; } .mobile-sidebar .bg-light { background-color: var(--theme_body_bg) !important; } .mobile-sidebar .border-bottom { border-color: var(--theme_card_border) !important; } .mobile-sidebar a:hover.text-dark { color: var(--theme_primary_color) !important; } .mobile-sidebar i { /* Keep original colors if specific class is added, otherwise inherit */ }