/* =================================== DARK MODE - ThePriceMonkey Activado con clase .dark-mode en =================================== */ /* --- Global --- */ body.dark-mode { background-color: #1a1a2e; color: #e0e0e0; } body.dark-mode a { color: #4da8da; } body.dark-mode a:hover, body.dark-mode a:active { color: #7cc4e8; } body.dark-mode a:focus { color: #4da8da; } body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4 { color: #e0e0e0; } /* --- Navbar --- */ body.dark-mode .navbar { background-color: #0a1628; } body.dark-mode .navbar .main-navigation li a:hover, body.dark-mode .navbar .main-navigation li a:focus { background-color: #162040; } body.dark-mode .navbar .main-navigation li ul.account-menu.dropdown-menu { background-color: #0a1628; border-color: #162040; } body.dark-mode .navbar .main-navigation li ul.account-menu.dropdown-menu li a:hover { background-color: #162040; } body.dark-mode .navbar .main-navigation li ul.account-menu.dropdown-menu li.divider { background-color: #162040; } body.dark-mode .navbar .search-form input.form-control { background-color: #16213e; color: #e0e0e0; border-color: #2a2a4a; } /* --- Footer --- */ body.dark-mode #main-footer { background-color: #0a1628; } body.dark-mode #main-footer .bottom-menu li a:hover { background-color: #162040; } body.dark-mode #main-footer .contact li a .footer-logo { fill: #4da8da; } /* --- Cards de producto (mini) --- */ body.dark-mode .item-list li.item { background-color: #16213e; border-color: #2a2a4a; } body.dark-mode .item-list li.item.mini { border-color: #2a2a4a; } body.dark-mode .item-list li.item.mini .item-name { color: #ffffff; border-top-color: #2a2a4a; } body.dark-mode .item-list li.item.mini .item-brand { color: #b8c0cc; } body.dark-mode .item-list li.item.mini .image-container { margin-top: 12px; } body.dark-mode .item-list li.item.mini .item-price-block { border-top-color: #2a2a4a; } body.dark-mode .item-list li.item.mini .price { color: #4da8da; } body.dark-mode .item-list li.item.mini .price.no-disponible { color: #e74c3c; } body.dark-mode .item-list li.item.mini .capa_premium { background-color: #16213e; border-color: #2a2a4a; } /* --- Search banner --- */ body.dark-mode .search-banner { background-color: #0a1628; } body.dark-mode .search-banner .container .row.search-box .search-form input { background-color: #16213e; color: #e0e0e0; opacity: 1; border-radius: 8px 0 0 8px; } body.dark-mode .search-banner .container .row.search-box .search-form button { border-radius: 0 8px 8px 0; } body.dark-mode .search-banner .container .row h2.lined span { background-color: #0a1628; } body.dark-mode .search-banner .container .row.category-box ul li { background-color: rgba(22, 33, 62, 0.9); } body.dark-mode .search-banner .container .row.category-box ul li:hover { background-color: #FCA43E; } /* --- Offer/Index banner --- */ body.dark-mode .banner-container.index-banner { background-color: #0f0f1e; } /* --- Page titles con línea --- */ body.dark-mode .main-body h1.page-list-title span, body.dark-mode .main-body h1.user-page-title span, body.dark-mode .main-body h2.page-list-title span { background-color: #1a1a2e; } body.dark-mode .main-body h1.page-list-title:before, body.dark-mode .main-body h1.user-page-title:before, body.dark-mode .main-body h2.page-list-title:before { background-color: #2a2a4a; } /* --- Paneles (panel-default) --- */ body.dark-mode .panel-default { background-color: transparent; } body.dark-mode .panel-default .panel-heading { background-color: transparent; } body.dark-mode .panel-default .panel-heading h4.lined:before { background-color: #2a2a4a; } body.dark-mode .panel-default .panel-heading h4.lined span { background-color: #1a1a2e; color: #e0e0e0; } /* --- Paneles de precio (item detail) --- */ body.dark-mode .item-view .item-body .price-panels .panel .panel-heading { color: #e0e0e0; } body.dark-mode .item-view .item-body .price-panels .panel.panel-primary .panel-heading { background-color: #005a8e; } body.dark-mode .item-view .item-body .price-panels .panel.panel-danger .panel-heading { background-color: #8b2220; color: #f0c0c0; } body.dark-mode .item-view .item-body .price-panels .panel.panel-success .panel-heading { background-color: #2d6b2d; color: #c0f0c0; } body.dark-mode .item-view .item-body .price-panels .panel .panel-body { background-color: #16213e; color: #e0e0e0; } body.dark-mode .item-view .item-body .price-panels .panel.panel-danger .panel-body { background-color: #2a1520; color: #e8a0a0; } body.dark-mode .item-view .item-body .price-panels .panel.panel-success .panel-body { background-color: #152a18; color: #a0e0a0; } /* --- Paneles de precio (user lists) --- */ body.dark-mode #user-lists-page .main-body .alerts-container .item-row .panel-top, body.dark-mode #user-lists-page .main-body .list-container .item-row .panel-top { border-color: #007DC3; } body.dark-mode #user-lists-page .main-body .alerts-container .item-row .panel-top .price-panels .panel .panel-body, body.dark-mode #user-lists-page .main-body .list-container .item-row .panel-top .price-panels .panel .panel-body { background-color: #16213e; color: #e0e0e0; } body.dark-mode #user-lists-page .main-body .alerts-container .item-row .panel-top .price-panels .panel.panel-danger .panel-heading, body.dark-mode #user-lists-page .main-body .list-container .item-row .panel-top .price-panels .panel.panel-danger .panel-heading { background-color: #8b2220; color: #f0c0c0; } body.dark-mode #user-lists-page .main-body .alerts-container .item-row .panel-top .price-panels .panel.panel-danger .panel-body, body.dark-mode #user-lists-page .main-body .list-container .item-row .panel-top .price-panels .panel.panel-danger .panel-body { background-color: #2a1520; color: #e8a0a0; } body.dark-mode #user-lists-page .main-body .alerts-container .item-row .panel-top .price-panels .panel.panel-success .panel-heading, body.dark-mode #user-lists-page .main-body .list-container .item-row .panel-top .price-panels .panel.panel-success .panel-heading { background-color: #2d6b2d; color: #c0f0c0; } body.dark-mode #user-lists-page .main-body .alerts-container .item-row .panel-top .price-panels .panel.panel-success .panel-body, body.dark-mode #user-lists-page .main-body .list-container .item-row .panel-top .price-panels .panel.panel-success .panel-body { background-color: #152a18; color: #a0e0a0; } body.dark-mode #user-lists-page .main-body .alerts-container .item-row, body.dark-mode #user-lists-page .main-body .list-container .item-row { border-bottom-color: #2a2a4a; } body.dark-mode #user-lists-page .main-body .alerts-container h3, body.dark-mode #user-lists-page .main-body .list-container h3 { border-bottom-color: #2a2a4a; } body.dark-mode #user-lists-page .main-body .alerts-container .list-header, body.dark-mode #user-lists-page .main-body .list-container .list-header { border-bottom-color: #2a2a4a; } /* --- Average price box --- */ body.dark-mode .item-view .item-body .average-price-box.info { background-color: #0a3a5e; } /* --- Tablas --- */ body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) { background-color: #16213e; } body.dark-mode .table-striped > tbody > tr:nth-of-type(even) { background-color: #1a1a2e; } body.dark-mode .table > thead > tr > th, body.dark-mode .table > tbody > tr > td { border-color: #2a2a4a; color: #e0e0e0; } body.dark-mode .table > thead > tr > th { color: #a0a0a0; } /* --- Formularios --- */ body.dark-mode .form-control { background-color: #16213e; border-color: #2a2a4a; color: #e0e0e0; } body.dark-mode .form-control:focus { border-color: #007DC3; box-shadow: 0 0 0 2px rgba(0, 125, 195, 0.25); } body.dark-mode .input-group-addon { background-color: #0f1628; border-color: #2a2a4a; color: #a0a0a0; } body.dark-mode .alert-form-panel .alert-form .form-group label { color: #c0c0c0; } body.dark-mode .help-block { color: #a0a0a0; } /* --- Botones --- */ body.dark-mode .buy-link { color: #ffffff; background-color: #fb9116; border-bottom-color: #c26903; } body.dark-mode .buy-link:hover { color: #ffffff; background-color: #ea7f04; border-color: #b36103; } body.dark-mode .action-button { background-color: #2a2a4a; color: #e0e0e0; border-bottom-color: #1a1a2e; } body.dark-mode .action-button:hover { background-color: #3a3a5a; color: #e0e0e0; border-color: #2a2a4a; } body.dark-mode .btn-default { background-color: #2a2a4a; border-color: #3a3a5a; color: #e0e0e0; } body.dark-mode .btn-default:hover, body.dark-mode .btn-default:focus { background-color: #3a3a5a; border-color: #4a4a6a; color: #e0e0e0; } /* --- Modales (remodal) --- */ body.dark-mode .remodal.generic, body.dark-mode .remodal[data-remodal-id="login"] { background-color: #16213e; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); } body.dark-mode .remodal.generic #remodal-content .remodal-title, body.dark-mode .remodal[data-remodal-id="login"] #remodal-content .remodal-title { color: #e0e0e0; } body.dark-mode .remodal.generic #remodal-content .remodal-desc, body.dark-mode .remodal[data-remodal-id="login"] #remodal-content .remodal-desc { color: #a0a0a0; } body.dark-mode .remodal.generic #remodal-content .remodal-form label, body.dark-mode .remodal[data-remodal-id="login"] #remodal-content .remodal-form label { color: #c0c0c0; } body.dark-mode .remodal.generic #remodal-content .remodal-form input, body.dark-mode .remodal[data-remodal-id="login"] #remodal-content .remodal-form input { background-color: #1a1a2e; border-color: #2a2a4a; color: #e0e0e0; } body.dark-mode .remodal.generic #remodal-content .remodal-form input:focus, body.dark-mode .remodal[data-remodal-id="login"] #remodal-content .remodal-form input:focus { border-color: #007DC3; box-shadow: 0 0 0 2px rgba(0, 125, 195, 0.3); } body.dark-mode .remodal.generic #remodal-content ul.remodal-list, body.dark-mode .remodal[data-remodal-id="login"] #remodal-content ul.remodal-list { background-color: #1a1a2e; } body.dark-mode .remodal.generic #remodal-content ul.remodal-list li, body.dark-mode .remodal[data-remodal-id="login"] #remodal-content ul.remodal-list li { color: #c0c0c0; } body.dark-mode .remodal.generic #remodal-content #login-sent strong, body.dark-mode .remodal[data-remodal-id="login"] #remodal-content #login-sent strong { color: #e0e0e0; } body.dark-mode .remodal.generic #remodal-content #login-sent p, body.dark-mode .remodal[data-remodal-id="login"] #remodal-content #login-sent p { color: #a0a0a0; } body.dark-mode .remodal[data-remodal-id="anadir"] { background-color: #16213e; } body.dark-mode .remodal[data-remodal-id="anadir"] h4 { color: #e0e0e0; } body.dark-mode .remodal[data-remodal-id="share-list"] { background-color: #16213e; } body.dark-mode .remodal[data-remodal-id="share-list"] .share-button-div span, body.dark-mode .remodal[data-remodal-id="share-list"] .share-button-div a { color: #4da8da; } /* --- Remodal overlay --- */ body.dark-mode .remodal-overlay { background-color: rgba(0, 0, 0, 0.7); } /* --- Categorías --- */ body.dark-mode .categories-list li.category a { color: #a0a0a0; } body.dark-mode .categories-menu ul { background-color: #16213e; border-color: #2a2a4a; } body.dark-mode .categories-menu ul li { border-bottom-color: #2a2a4a; } body.dark-mode .categories-menu ul li a { color: #4da8da; } /* --- Marcas --- */ body.dark-mode #brands-page .index-anchors ul li { color: #a0a0a0; } /* --- Top page --- */ body.dark-mode #top-page #toggle-menu-top { color: #a0a0a0; } body.dark-mode #top-page #top-menu label { color: #a0a0a0; } /* --- Paginación --- */ body.dark-mode .product-list .pager .page-legend { color: #a0a0a0; } /* --- Order links --- */ body.dark-mode .order-links a { color: #a0a0a0; } body.dark-mode .order-links a.active { color: #4da8da; } body.dark-mode .order-links a:hover { color: #7cc4e8; } /* --- Flash messages --- */ body.dark-mode .header-message.bg-danger { background-color: #2a1520; } body.dark-mode .header-message.bg-success { background-color: #152a18; } /* --- Add product bookmark --- */ body.dark-mode #add-product-bookmark { background-color: #16213e; border-color: #2a2a4a; } body.dark-mode #add-product-bookmark:hover { background-color: #1e2a4a; } /* --- No results --- */ body.dark-mode .no-results { color: #a0a0a0; } /* --- Search container --- */ body.dark-mode .search-container .row.search-box h4 { color: #a0a0a0; } /* --- Item detail page --- */ body.dark-mode .item-view h1.item-title { color: #e0e0e0; } body.dark-mode .item-view .brand-categories { color: #a0a0a0; } body.dark-mode .item-view .item-gallery .images-gallery ul li { border-color: #2a2a4a; } body.dark-mode .item-view .item-gallery .images-gallery ul li.active { border-color: #4da8da; } body.dark-mode .item-view .dropdown-listas .dropdown-toggle { background-color: #0a3a5e; } body.dark-mode .item-view .dropdown-listas .dropdown-toggle:hover, body.dark-mode .item-view .dropdown-listas .dropdown-toggle:active, body.dark-mode .item-view .dropdown-listas .dropdown-toggle:focus { background-color: #0a2a4a; } body.dark-mode .item-view .dropdown-listas .dropdown-menu { background-color: #0a3a5e; } body.dark-mode .item-view .dropdown-listas .dropdown-menu li { background-color: #0a3a5e; } body.dark-mode .item-view .dropdown-listas .dropdown-menu li a:hover { background-color: #0a2a4a; } body.dark-mode .item-view .dropdown-listas .dropdown-menu li.divider { background-color: #162040; } body.dark-mode .item-view .item-body .last-update-message { color: #a0a0a0; } body.dark-mode .item-view .item-body .item-features ul { color: #c0c0c0; } /* --- Shipping info panel --- */ body.dark-mode .shipping-info.panel.panel-default { background-color: #16213e; border-color: #2a2a4a; } /* --- Item stores table --- */ body.dark-mode .item-stores table { color: #e0e0e0; } /* --- Account page --- */ body.dark-mode #account-page .main-body .user-data .form-group label { color: #c0c0c0; } body.dark-mode #account-page .main-body .anadir-marcador ul.pasos-marcador li { color: #c0c0c0; } /* --- Filter page (mobile) --- */ body.dark-mode #filter-div { background-color: #0a1628; } body.dark-mode .cd-filter { background-color: #0a3a5e; } body.dark-mode .cd-filter:hover { background-color: #0a2a4a; } /* --- Select2 (dropdown filters) --- */ body.dark-mode .select2-container--default .select2-selection--single { background-color: #16213e; border-color: #2a2a4a; } body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered { color: #e0e0e0; } body.dark-mode .select2-dropdown { background-color: #16213e; border-color: #2a2a4a; } body.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #007DC3; } body.dark-mode .select2-container--default .select2-search--dropdown .select2-search__field { background-color: #1a1a2e; border-color: #2a2a4a; color: #e0e0e0; } /* --- C3 charts --- */ body.dark-mode .c3 text { fill: #a0a0a0; } body.dark-mode .c3 .c3-axis path, body.dark-mode .c3 .c3-axis line { stroke: #2a2a4a; } body.dark-mode .c3-tooltip th { background-color: #0a1628; color: #e0e0e0; } body.dark-mode .c3-tooltip td { background-color: #16213e; color: #e0e0e0; border-color: #2a2a4a; } /* --- Bootstrap overrides --- */ body.dark-mode .well { background-color: #16213e; border-color: #2a2a4a; } body.dark-mode .panel-body { color: #e0e0e0; } body.dark-mode .breadcrumb { background-color: #16213e; } body.dark-mode .breadcrumb > li + li::before { color: #a0a0a0; } /* --- Toggle button --- */ #dark-mode-toggle { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: white; background: transparent; border: none; font-size: 1.2em; cursor: pointer; padding: 5px 8px; opacity: 0.8; transition: opacity 0.2s; z-index: 10; } #dark-mode-toggle:hover { opacity: 1; } /* --- Login button rounding --- */ .navbar .main-navigation li a.highlight { border-radius: 6px; } /* --- Mobile navbar override --- */ @media (max-width: 767px) { #dark-mode-toggle { top: 20px; right: 10px; transform: none; } body.dark-mode .navbar { background-color: #0a1628; } body.dark-mode .navbar #user-menu-section.navbar-collapse.navbar-right ul.account-menu li.divider { background-color: #162040; } }