/* * night.css - Dark Theme Override * Chef's Restaurant Store * * All selectors prefixed with .king-lnight (class on for dark mode). * * Dark palette * -------------------------------------------------- * Background #0c0b0d * Panel / Card #151419 * Border #24242b * Text primary #8a8997 * Text bright #e2e1e3 * Text dim #646373 * Accent #1DB954 (Spotify green) * Header bg #000000c4 (backdrop-filter) * Input bg #0f0f11 * Sidebar bg #000000c4 (backdrop-filter) * -------------------------------------------------- */ /* ========================================================================== Body ========================================================================== */ .king-lnight body { background-color: #0c0b0d; color: #b0afba; } .king-lnight td { color: #b0afba; } /* ========================================================================== Slider ========================================================================== */ .king-lnight .leo-slider::-webkit-slider-thumb { background-color: #fff; } .king-lnight .leo-slider::-moz-range-thumb { background-color: #fff; } /* ========================================================================== Header ========================================================================== */ .king-lnight .king-header { background-color: #000000c4; box-shadow: inherit; } .king-lnight .header-search-form { background-color: #1a1a22; border: 2px solid #333340; } .king-lnight .header-search-form:focus-within { border-color: #1DB954; background-color: #0f0f11; } .king-lnight .header-search-form .king-search-field { color: #fff; } .king-lnight .header-search-form .king-search-field::placeholder { color: #8a8997; } .king-lnight .header-search-btn { color: #b0afba; } .king-lnight .live-search-results { background: #151419; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); } .king-lnight .live-result-item { color: #e2e1e3; border-bottom-color: #24242b; } .king-lnight .live-result-item:hover { background: #1e1e24; } .king-lnight .live-result-item img { background: #0c0b0d; } .king-lnight .live-no-results { color: #9e9daa; } .king-lnight .king-nav-head-link { color: #ced0d9; } .king-lnight .king-nav-head-list:hover .king-nav-head-link { color: #ced0d9; } .king-lnight .king-nav-head-list .king-nav-head-link:hover { color: #fff; } .king-lnight .king-nav-head-link:after { background-color: #1DB954; } /* ========================================================================== Header Right / Cart ========================================================================== */ .king-lnight .header-right ul li span, .king-lnight .cart-icon { background-color: #151419; color: #fff; } .king-lnight .cart-badge { background-color: #1DB954; color: #fff; } /* ========================================================================== Submit / CTA Buttons ========================================================================== */ .king-lnight .add-to-cart-btn { background-color: #1DB954; color: #fff; } .king-lnight .add-to-cart-btn:hover { background-color: #1ed760; } /* ========================================================================== Search ========================================================================== */ .king-lnight .king-search { background-color: #1a1a1a; border: solid 1px #1a1a1a; } .king-lnight .king-search-field { background-color: #0f0f11; border-color: #24242b; } .king-lnight input[type="text"]:focus { color: #fff; } .king-lnight .search-disc a { color: #fff; } .king-lnight .liveresults a { color: #fff; border-color: #333; } /* ========================================================================== Left Sidebar ========================================================================== */ .king-lnight .leftmenu { backdrop-filter: saturate(180%) blur(20px); background-color: #000000c4; } .king-lnight .king-nav-main-link { color: #b0afba; } .king-lnight .king-nav-main-link i { color: #1DB954; opacity: 0.8; } .king-lnight .king-nav-main-selected { color: #1DB954; } .king-lnight .king-nav-main-selected i { opacity: 1; } .king-lnight .king-nav-main-link:hover { color: #1DB954; } .king-lnight .king-nav-main-link:hover i { opacity: 1; } /* ========================================================================== Dark Mode Toggle ========================================================================== */ .king-lnight .king-nightb { background-color: #151419; color: #646373; } .king-lnight .king-nightb:after { background-color: #000000; } .king-lnight .king-lnight .king-nightb:after { top: 46px; } /* ========================================================================== Left Close Button / Toggle ========================================================================== */ .king-lnight .king-left-close:before, .king-lnight .king-left-close:after { background-color: #fff; } .king-lnight #ltoggle:before, .king-lnight #ltoggle:after { background-color: #fff; } .king-lnight .reglink { color: #fff !important; } /* ========================================================================== Sub Navigation ========================================================================== */ .king-lnight .king-nav-sub-link { background-color: #0c0b0d; color: #fff; } .king-lnight .king-nav-sub-selected, .king-lnight .king-nav-sub-link:hover { background-color: #1DB954; color: #fff; } .king-lnight .leo-nav { background-color: #000000; } .king-lnight .leo-range { color: #fff; } /* ========================================================================== Product Cards ========================================================================== */ .king-lnight .product-card { background-color: #151419; } .king-lnight .product-info h4 { color: #e2e1e3; } .king-lnight .product-info .product-sku { color: #9e9daa; } .king-lnight .product-price { color: #1DB954; } .king-lnight .post-featured-img { background-color: #151419; } .king-lnight .quick-view-btn { border-color: rgba(255, 255, 255, 0.7); background: rgba(0, 0, 0, 0.7); color: #fff; } .king-lnight .quick-view-btn:hover { background: rgba(29, 185, 84, 0.9); border-color: #1DB954; color: #fff; } .king-lnight .quickview-modal { background-color: #151419; } .king-lnight .quickview-image { background-color: #0c0b0d; } .king-lnight .quickview-info h2 { color: #e2e1e3; } .king-lnight .quickview-meta { color: #9e9daa; } .king-lnight .quickview-desc { color: #b0afba; } /* ========================================================================== Hero Section ========================================================================== */ .king-lnight .king-body-search { background-image: linear-gradient(0deg, rgba(12,11,13,0.92), rgba(12,11,13,0.72)), linear-gradient( 180.08deg, rgba(12,11,13,0.12) 33.15%, rgba(12,11,13,0.124) 38.05%, rgba(12,11,13,0.137) 42.93%, rgba(12,11,13,0.158) 47.77%, rgba(12,11,13,0.187) 52.57%, rgba(12,11,13,0.225) 57.31%, rgba(12,11,13,0.27) 61.99%, rgba(12,11,13,0.322) 66.6%, rgba(12,11,13,0.383) 71.14%, rgba(12,11,13,0.45) 75.58%, rgba(12,11,13,0.525) 79.93%, rgba(12,11,13,0.606) 84.17%, rgba(12,11,13,0.695) 88.3%, rgba(12,11,13,0.79) 92.31%, rgba(12,11,13,0.892) 96.19%, #0c0b0d 100% ); } .king-lnight .king-body-search h1 { color: #fff; } .king-lnight .king-body-search h1:before { background-image: linear-gradient(90deg, #1DB954 0, #1ed760); } .king-lnight .head-title { color: #fff; } /* ========================================================================== Footer ========================================================================== */ .king-lnight .checkout-item { border-bottom-color: #24242b; color: #b0afba; } .king-lnight .summary-row { color: #9e9daa; } .king-lnight .summary-total { border-top-color: #24242b; color: #e2e1e3; } .king-lnight .checkout-form-section h3 { color: #e2e1e3; } .king-lnight .king-footer { color: #d7d7d7; background-color: #151419; } .king-lnight .king-footer a { color: #fff; } /* ========================================================================== Forms ========================================================================== */ .king-lnight .king-form-tall-text, .king-lnight .king-form-tall-select { background-color: #0f0f11; border-color: #24242b; color: #fff; } .king-lnight .king-form-tall-text:focus { border-color: #1DB954; } .king-lnight .king-form-tall-label { color: #b0afba; } .king-lnight .king-form-tall-button { background-color: #1DB954; color: #fff; } .king-lnight .king-form-wide-label { color: #b0b7bb; } .king-lnight .king-form-wide-data { color: #fff; } /* ========================================================================== One-page / Inner Content ========================================================================== */ .king-lnight .king-inner { background-color: #151419; box-shadow: 0 1px 6px rgba(0,0,0,0.72); } .king-lnight .king-main.one-page .king-inner { background-color: #0c0b0d; } .king-lnight .usrleft { border-top-color: #24242b; } .king-lnight .king-havatar { background: #24242b; color: #b0afba; } .king-lnight .king-havatar:hover { background: #1DB954; color: #fff; } .king-lnight .king-logo-link strong { color: #e2e1e3; } .king-lnight .entry-content { color: #b0afba; } .king-lnight .product-description { border-top-color: #24242b; } .king-lnight .product-description h3 { color: #e2e1e3; } .king-lnight .king-related { background-color: #151419; } .king-lnight .no-products { color: #646373; } .king-lnight .footer-content p { color: #646373; } /* ========================================================================== Modal ========================================================================== */ .king-lnight .king-modal-content { background-color: #151419; } .king-lnight .king-modal-login { background-color: rgba(0, 0, 0, 0.93); } /* ========================================================================== Dropdown ========================================================================== */ .king-lnight .king-dropdown { background-color: #151515; } .king-lnight .king-dropdown h3 { color: #fff; } .king-lnight .king-dropdown2 { background-color: #151515; } .king-lnight .king-dropdown2 a { color: #646373; } .king-lnight .king-dropdown2 a:hover { background-color: rgb(0 0 0 / 59%); } /* ========================================================================== Category Navigation ========================================================================== */ .king-lnight .king-nav-cat-link { border-color: #202020; color: #d7d7d7; } .king-lnight .king-nav-cat-link:hover { color: #1DB954; } .king-lnight .king-nav-cat-selected { color: #1DB954; } .king-lnight .king-nav-cat-all a { background-color: #1a1a1a; border-color: #202020; color: #fff; } /* ========================================================================== Tags ========================================================================== */ .king-lnight .disc-tags { color: #fff; background-color: #19171d; } /* ========================================================================== Order Table / Cart ========================================================================== */ .king-lnight .order-table th { background-color: #151419; color: #e2e1e3; } .king-lnight .order-table td { border-color: #24242b; color: #b0afba; } .king-lnight .cart-summary { background-color: #151419; } .king-lnight .cart-product-cell img { background: #0c0b0d; } .king-lnight .cart-product-cell small { color: #646373; } .king-lnight .cart-remove-btn { color: #646373; } .king-lnight .cart-remove-btn:hover { color: #dc3545; background: rgba(220, 53, 69, 0.12); } .king-lnight .continue-shopping { color: #646373; } .king-lnight .continue-shopping:hover { color: #1DB954; } /* ========================================================================== Product Detail ========================================================================== */ .king-lnight .product-detail-info h1 { color: #e2e1e3; } .king-lnight .product-detail-info .product-meta { color: #9e9daa; } .king-lnight .product-detail-info .product-meta strong { color: #e2e1e3; } .king-lnight .product-gallery img { background-color: #151419; } /* ========================================================================== Qty Selector ========================================================================== */ .king-lnight .qty-selector { border-color: #24242b; } .king-lnight .qty-selector button { color: #fff; } .king-lnight .qty-selector input { color: #fff; background-color: transparent; } /* ========================================================================== Admin ========================================================================== */ .king-lnight .admin-table th { background-color: #151419; color: #e2e1e3; } .king-lnight .admin-table td { border-color: #24242b; color: #b0afba; } .king-lnight .admin-table tr:hover { background-color: #1a1a1f; } .king-lnight .admin-card { background-color: #151419; box-shadow: 0 1px 6px rgba(0,0,0,0.72); } .king-lnight .admin-stat h2 { color: #1DB954; } .king-lnight .admin-stat p { color: #b0afba; } /* ========================================================================== Load More / IAS ========================================================================== */ .king-lnight .load-nomore { background-color: #363239; color: #8a8997; } /* ========================================================================== User / Account ========================================================================== */ .king-lnight .account-section .king-inner { background-color: #151419; box-shadow: 0 1px 6px rgba(0,0,0,0.72); } .king-lnight .account-section .king-inner h3 { color: #e2e1e3; } .king-lnight .king-nav-user-item a:hover { background-color: #000000; color: #fff; } .king-lnight .king-nav-headmenu-list li a { color: #d7d7d7; } .king-lnight .king-mega-menu { background-color: #151419; } /* ========================================================================== Breadcrumb ========================================================================== */ .king-lnight .breadcrumb a { color: #9e9daa; } .king-lnight .breadcrumb a:hover { color: #1DB954; } .king-lnight .breadcrumb { color: #9e9daa; } /* ========================================================================== Nothumb ========================================================================== */ .king-lnight .king-nothumb { background: #000; } /* ========================================================================== Scrollbar ========================================================================== */ .king-lnight .kingscroll::-webkit-scrollbar-thumb:hover { background-color: #1DB954; } /* ========================================================================== Checkbox Toggle ========================================================================== */ .king-lnight .checkbox .slider { background-color: #7a787b; } .king-lnight .checkbox input:checked + .slider { background-color: #1DB954; } /* ========================================================================== Widget / Sidebar ========================================================================== */ .king-lnight .widget-title { background-color: #151419; color: #fff; } /* ========================================================================== Error ========================================================================== */ .king-lnight .king-error { background-color: rgb(0 0 0 / 82%); } /* ========================================================================== Related Products ========================================================================== */ .king-lnight .king-related { background-color: #151419; } .king-lnight .king-related h3 { color: #fff; } /* ========================================================================== Payment Methods ========================================================================== */ .king-lnight .payment-option { border-color: #24242b; background-color: #151419; } .king-lnight .payment-option:hover { border-color: #1DB954; } .king-lnight .payment-option.selected, .king-lnight .payment-option:has(input:checked) { border-color: #1DB954; background: rgba(29, 185, 84, 0.1); } .king-lnight .payment-option-content strong { color: #e2e1e3; } .king-lnight .payment-option-content p { color: #8a8997; } /* ========================================================================== Reorder Section ========================================================================== */ .king-lnight .reorder-section-header h3 { color: #e2e1e3; } .king-lnight .reorder-card { background-color: #151419; box-shadow: 0 1px 6px rgba(0,0,0,0.72); } .king-lnight .reorder-card-image { background: #0c0b0d; } .king-lnight .reorder-card-name { color: #e2e1e3; } .king-lnight .reorder-card-name:hover { color: #1DB954; } .king-lnight .reorder-grid::-webkit-scrollbar-thumb { background: #363239; } /* ========================================================================== Logo Swap for Dark Mode ========================================================================== */ .king-lnight .king-logo .king-logon { display: block; } .king-lnight .king-logo .king-logol { display: none; }