/* * Template site preview overrides * * These rules only apply after template-preview-nav.js adds * template-site-preview-active to the element. */ /* Main background */ html.template-site-preview-active .canvasWrap, html.template-site-preview-active .webbloxBody, html.template-site-preview-active .pageWrap { background-color: var(--preview-background-color) !important; } /* Body text */ html.template-site-preview-active body, html.template-site-preview-active .storePreview, html.template-site-preview-active .pageWrap, html.template-site-preview-active .pageWrap p, html.template-site-preview-active .pageWrap span, html.template-site-preview-active .pageWrap label, html.template-site-preview-active .pageWrap h1, html.template-site-preview-active .pageWrap h2, html.template-site-preview-active .pageWrap h3, html.template-site-preview-active .pageWrap h4, html.template-site-preview-active .pageWrap h5, html.template-site-preview-active .pageWrap h6 { color: var(--preview-body-text-color) !important; } /* Body links */ html.template-site-preview-active .pageWrap a:not(.btn), html.template-site-preview-active .webbloxBody a:not(.btn), html.template-site-preview-active .page-link, html.template-site-preview-active .pagination .page-item span { color: var(--preview-body-links-color) !important; } /* Top navigation */ html.template-site-preview-active .topNav, html.template-site-preview-active .webbloxTopNav { background: var(--preview-topnav-background-color) !important; color: var(--preview-topnav-text-color) !important; } html.template-site-preview-active .topNav a, html.template-site-preview-active .topNav p, html.template-site-preview-active .topNav span, html.template-site-preview-active .topNav i, html.template-site-preview-active .webbloxTopNav a, html.template-site-preview-active .webbloxTopNav p, html.template-site-preview-active .webbloxTopNav span, html.template-site-preview-active .webbloxTopNav i, html.template-site-preview-active .webbloxTopNav .navbar-nav a { color: var(--preview-topnav-text-color) !important; } html.template-site-preview-active .bg-primary, html.template-site-preview-active .gridHeader, html.template-site-preview-active .responsiveTable .gridHeader { background: var(--preview-topnav-background-color) !important; color: var(--preview-topnav-text-color) !important; } /* Header */ html.template-site-preview-active #header, html.template-site-preview-active #header .navbar, html.template-site-preview-active .webbloxHeader { background: var(--preview-header-background-color) !important; color: var(--preview-header-text-color) !important; } html.template-site-preview-active #header, html.template-site-preview-active #header a, html.template-site-preview-active #header span, html.template-site-preview-active #header p, html.template-site-preview-active #header label, html.template-site-preview-active #header i, html.template-site-preview-active #header button, html.template-site-preview-active #header .mainMenu > ul > li > a, html.template-site-preview-active #header .mainMenu > ul > li.active > a, html.template-site-preview-active #header .menuOpen span, html.template-site-preview-active #header .circle-btn, html.template-site-preview-active #header .circle-btn i, html.template-site-preview-active #header .userTools .cartValue, html.template-site-preview-active #header .userTools .cartValue span, html.template-site-preview-active #header .userTools .cartValue i, html.template-site-preview-active #header .cartTool .cartValue, html.template-site-preview-active #header .cartTool .cartValue span, html.template-site-preview-active #header .cartTool .cartValue i { color: var(--preview-header-text-color) !important; } html.template-site-preview-active #header .circle-btn, html.template-site-preview-active #header .userDetails, html.template-site-preview-active #header .userDetails .userAvatar, html.template-site-preview-active #header .userTools .cartValue, html.template-site-preview-active #header .cartTool .cartValue, html.template-site-preview-active #header .mainMenu > ul > li.active > a { border-color: var(--preview-header-text-color) !important; } html.template-site-preview-active #header .menuOpen span::after { border-color: var(--preview-header-text-color) !important; } /* Horizontal navigation */ html.template-site-preview-active .horzNav .mainMenu > ul > li > a, html.template-site-preview-active .horzNav .mainMenu > ul > li.active > a, html.template-site-preview-active .horzNav .mainMenu > ul > li > ul > li > a, html.template-site-preview-active .horzNav .mainMenu > ul > li > ul > li.hasChild i, html.template-site-preview-active .horzNav .mainMenu > ul > li > ul > li ul li a { color: var(--preview-header-text-color) !important; } html.template-site-preview-active .horzNav .mainMenu > ul > li.active > a { border-color: var(--preview-header-text-color) !important; } /* Flyout background */ html.template-site-preview-active #header .boxMenu, html.template-site-preview-active #header .toolDropdownInner, html.template-site-preview-active .canvasMenu, html.template-site-preview-active .canvasNav { background: var(--preview-flyout-background-color) !important; color: var(--preview-flyout-text-color) !important; } /* Flyout text */ html.template-site-preview-active #header .boxMenu, html.template-site-preview-active #header .boxMenu *, html.template-site-preview-active #header .toolDropdownInner, html.template-site-preview-active #header .toolDropdownInner *, html.template-site-preview-active #header .boxMenu a, html.template-site-preview-active #header .mainMenu > ul > li > ul > li > a, html.template-site-preview-active #header .mainMenu > ul > li > ul > li.hasChild i, html.template-site-preview-active #header .mainMenu > ul > li > ul > li ul li a, html.template-site-preview-active #header .toolDropdownInner a, html.template-site-preview-active .canvasMenu, html.template-site-preview-active .canvasMenu a, html.template-site-preview-active .canvasMenu span, html.template-site-preview-active .canvasMenu p, html.template-site-preview-active .canvasMenu b, html.template-site-preview-active .canvasMenu i, html.template-site-preview-active .canvasNav, html.template-site-preview-active .canvasNav .navTitle, html.template-site-preview-active .canvasNav ul li a, html.template-site-preview-active .canvasNav ul li.hasChild .openSubMenu, html.template-site-preview-active .canvasMenu .userDetails .userInfo .userInfoName, html.template-site-preview-active .canvasMenu .userDetails .userInfo .userInfoPoints, html.template-site-preview-active .canvasMenu .userDetails .userInfo .userInfoPoints a { color: var(--preview-flyout-text-color) !important; } /* * This must appear after the general header border rules. */ html.template-site-preview-active #header .toolDropdown .toolDropdownInner .userDetails .userAvatar { color: var(--preview-flyout-text-color) !important; border-color: var(--preview-flyout-text-color) !important; } html.template-site-preview-active #header .toolDropdown .toolDropdownInner .userDetails .userAvatar i { color: var(--preview-flyout-text-color) !important; } /* Banner */ html.template-site-preview-active .headerBanner, html.template-site-preview-active .webbloxBanner, html.template-site-preview-active .heroSlider { background: var(--preview-banner-background-color) !important; } /* Page title */ html.template-site-preview-active .jumbotron, html.template-site-preview-active .webbloxHeaderTitle { background: var(--preview-title-background-color) !important; color: var(--preview-title-text-color) !important; } html.template-site-preview-active .jumbotron, html.template-site-preview-active .jumbotron h1, html.template-site-preview-active .jumbotron h2, html.template-site-preview-active .jumbotron h3, html.template-site-preview-active .jumbotron h4, html.template-site-preview-active .jumbotron h5, html.template-site-preview-active .jumbotron h6, html.template-site-preview-active .jumbotron p, html.template-site-preview-active .jumbotron span, html.template-site-preview-active .jumbotron i, html.template-site-preview-active .jumbotron a, html.template-site-preview-active .jumbotron .breadcrumb, html.template-site-preview-active .jumbotron .breadcrumb-item, html.template-site-preview-active .jumbotron .breadcrumb-item a, html.template-site-preview-active .jumbotron .breadcrumb-item.active, html.template-site-preview-active .jumbotron .breadcrumb-item + .breadcrumb-item::before, html.template-site-preview-active .webbloxHeaderTitle, html.template-site-preview-active .webbloxHeaderTitle h1, html.template-site-preview-active .webbloxHeaderTitle h2, html.template-site-preview-active .webbloxHeaderTitle h3, html.template-site-preview-active .webbloxHeaderTitle p, html.template-site-preview-active .webbloxHeaderTitle span, html.template-site-preview-active .webbloxHeaderTitle i, html.template-site-preview-active .webbloxHeaderTitle a { color: var(--preview-title-text-color) !important; } /* Primary buttons */ html.template-site-preview-active .btn.btn-primary, html.template-site-preview-active button.btn-primary, html.template-site-preview-active a.btn-primary, html.template-site-preview-active input.btn-primary, html.template-site-preview-active .webbloxBody .btn, html.template-site-preview-active .webbloxBody .btn.btn-primary { background-color: var(--preview-button-color, #0084b9) !important; border-color: var(--preview-button-color, #0084b9) !important; color: #ffffff !important; } /* Active, hover and focused primary buttons */ html.template-site-preview-active .btn.btn-primary:hover, html.template-site-preview-active .btn.btn-primary:focus, html.template-site-preview-active .btn.btn-primary:active, html.template-site-preview-active .btn.btn-primary.active, html.template-site-preview-active .btn.btn-primary:not(:disabled):not(.disabled):active, html.template-site-preview-active button.btn-primary:hover, html.template-site-preview-active button.btn-primary:focus, html.template-site-preview-active button.btn-primary:active, html.template-site-preview-active a.btn-primary:hover, html.template-site-preview-active a.btn-primary:focus, html.template-site-preview-active a.btn-primary:active, html.template-site-preview-active input.btn-primary:hover, html.template-site-preview-active input.btn-primary:focus, html.template-site-preview-active input.btn-primary:active, html.template-site-preview-active .webbloxBody .btn:hover, html.template-site-preview-active .webbloxBody .btn:focus, html.template-site-preview-active .webbloxBody .btn:active, html.template-site-preview-active .webbloxBody .btn.btn-primary:hover, html.template-site-preview-active .webbloxBody .btn.btn-primary:focus, html.template-site-preview-active .webbloxBody .btn.btn-primary:active { background-color: var(--preview-active-button-color, #0084b9) !important; border-color: var(--preview-active-button-color, #0084b9) !important; color: #ffffff !important; } /* Body-text-dependent elements */ html.template-site-preview-active .priceRange #amount, html.template-site-preview-active .pageWrap .owl-carousel .owl-nav button, html.template-site-preview-active .cartArticle .card-header .productQty b, html.template-site-preview-active .text-default, html.template-site-preview-active .text-default p, html.template-site-preview-active .text-default label { color: var(--preview-body-text-color) !important; } html.template-site-preview-active .filterWrap .filterAccordion .filterBox .plusToggle, html.template-site-preview-active .filterWrap .filterAccordion .filterBox .plusToggle::after, html.template-site-preview-active .priceRange .ui-slider .ui-widget-header { background: var(--preview-body-text-color) !important; } html.template-site-preview-active .custom-control-label::before, html.template-site-preview-active .priceRange .ui-slider .ui-slider-handle { border-color: var(--preview-body-text-color) !important; } /* Filter title */ html.template-site-preview-active .filterWrap .filterAccordion .filterTitle, html.template-site-preview-active .filterWrap .filterAccordion .filterTitle a { background: var(--preview-header-background-color) !important; color: var(--preview-header-text-color) !important; } /* Social buttons */ html.template-site-preview-active .social-button, html.template-site-preview-active .social-button.light-social { background: var(--preview-body-links-color) !important; } /* Footer */ html.template-site-preview-active #footer, html.template-site-preview-active .webbloxFooter { background: var(--preview-footer-background-color) !important; color: var(--preview-footer-text-color) !important; } html.template-site-preview-active #footer, html.template-site-preview-active #footer a, html.template-site-preview-active #footer p, html.template-site-preview-active #footer span, html.template-site-preview-active #footer i, html.template-site-preview-active #footer li, html.template-site-preview-active #footer h1, html.template-site-preview-active #footer h2, html.template-site-preview-active #footer h3, html.template-site-preview-active #footer h4, html.template-site-preview-active #footer h5, html.template-site-preview-active #footer h6, html.template-site-preview-active .webbloxFooter, html.template-site-preview-active .webbloxFooter a, html.template-site-preview-active .webbloxFooter p, html.template-site-preview-active .webbloxFooter span, html.template-site-preview-active .webbloxFooter i, html.template-site-preview-active .webbloxFooter li, html.template-site-preview-active .webbloxFooter h1, html.template-site-preview-active .webbloxFooter h2, html.template-site-preview-active .webbloxFooter h3, html.template-site-preview-active .webbloxFooter h4, html.template-site-preview-active .webbloxFooter h5, html.template-site-preview-active .webbloxFooter h6 { color: var(--preview-footer-text-color) !important; } /* Countdown timer */ html.template-site-preview-active #timer, html.template-site-preview-active .timer { background-color: var(--preview-countdown-background-color) !important; color: var(--preview-countdown-text-color) !important; } html.template-site-preview-active #timer *, html.template-site-preview-active .timer * { color: var(--preview-countdown-text-color) !important; } /* Fundraiser banner */ html.template-site-preview-active #fundraiserBanner { background-color: var(--preview-fundraiser-primary-color) !important; color: var(--preview-fundraiser-secondary-color) !important; } html.template-site-preview-active #fundraiserBanner .fundraiser-name, html.template-site-preview-active #fundraiserBanner .raised-goal, html.template-site-preview-active #fundraiserBanner .raised-goal-2, html.template-site-preview-active #fundraiserBanner .total-raised, html.template-site-preview-active #fundraiserBanner .goal-display, html.template-site-preview-active #fundraiserBanner .fund-link, html.template-site-preview-active #fundraiserBanner #fundraiserLink, html.template-site-preview-active #fundraiserBanner #fundraiserLink span { color: var(--preview-fundraiser-secondary-color) !important; } /* Fundraiser Details link */ html.template-site-preview-active #fundraiserBanner #fundraiserLink, html.template-site-preview-active #fundraiserBanner #fundraiserLink:link, html.template-site-preview-active #fundraiserBanner #fundraiserLink:visited, html.template-site-preview-active #fundraiserBanner #fundraiserLink:hover, html.template-site-preview-active #fundraiserBanner #fundraiserLink:focus, html.template-site-preview-active #fundraiserBanner #fundraiserLink:active, html.template-site-preview-active #fundraiserBanner #fundraiserLink span { color: var(--preview-fundraiser-secondary-color) !important; background: transparent !important; text-decoration: underline !important; } /* Thermometer track */ html.template-site-preview-active #fundraiserBanner #thermometerSecondaryColor, html.template-site-preview-active #fundraiserBanner .thermometer { background-color: var(--preview-fundraiser-secondary-color) !important; } /* Thermometer progress */ html.template-site-preview-active #fundraiserBanner #thermometerPrimaryColor, html.template-site-preview-active #fundraiserBanner .thermometerBar { background-color: var(--preview-fundraiser-primary-color) !important; } /* * Xpress buttons keep the current preview button color * for hover, focus and active states. */ html.template-site-preview-active .xPressTheme .btn.btn-primary:not(:disabled):not(.disabled):hover, html.template-site-preview-active .xPressTheme .btn.btn-primary:not(:disabled):not(.disabled):focus, html.template-site-preview-active .xPressTheme .btn.btn-primary:not(:disabled):not(.disabled):active, html.template-site-preview-active .xPressTheme .btn.btn-primary:not(:disabled):not(.disabled).active { background: var(--preview-button-color, #0084b9) !important; border-color: var(--preview-button-color, #0084b9) !important; color: #ffffff !important; }