/* Theme Name: Hello Elementor Child Theme URI: https://elementor.com/ Description: Child theme voor Hello Elementor - Levono Raamdecoratie Author: WEBZIES Author URI: https://webzies.nl/ Template: hello-elementor Version: 1.0.0 Text Domain: hello-elementor-child */ /* ========================================================== LEVONO BASIS ========================================================== */ :root { --levono-orange: #FF4B0B; --levono-orange-selection: #FF4B0B; --levono-dark: #161C22; --levono-navy: #1D2558; /* Kleurbolletjes */ --levono-swatch-size: 34px; --levono-swatch-gap: 8px; } /* ========================================================== ADVANCED PRODUCT FIELDS ALGEMENE RESET ========================================================== */ .wapf-field-container, .wapf-field-container * { box-sizing: border-box; } /* Geen automatische hoofdletters */ .wapf-field-container label, .wapf-field-container label *, .wapf-field-container .wapf-swatch, .wapf-field-container .wapf-swatch *, .wapf-field-container .wapf-swatch-label, .wapf-field-container .wapf-swatch-label *, .wapf-field-container .wapf-image-swatch, .wapf-field-container .wapf-image-swatch * { text-transform: none !important; letter-spacing: normal !important; } /* ========================================================== KLEURVELD d0beb41 = kleurveld houten jaloezieën ========================================================== */ /* * Desktop: * exact 8 kleuren per rij */ .levono-wapf-color-field .wapf-swatch-wrapper, .wapf-field-container:has(input[data-field-id="d0beb41"]) .wapf-swatch-wrapper { display: grid !important; grid-template-columns: repeat( 8, var(--levono-swatch-size) ) !important; grid-auto-columns: var(--levono-swatch-size) !important; grid-auto-rows: var(--levono-swatch-size) !important; gap: var(--levono-swatch-gap) !important; align-items: center !important; justify-content: start !important; width: max-content !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } /* ========================================================== KLEUR SWATCH WRAPPER ========================================================== */ .levono-wapf-color-field .wapf-swatch--image, .levono-wapf-color-field .wapf-swatch--color, .levono-wapf-color-field .wapf-swatch, .wapf-field-container:has(input[data-field-id="d0beb41"]) .wapf-swatch--image, .wapf-field-container:has(input[data-field-id="d0beb41"]) .wapf-swatch--color, .wapf-field-container:has(input[data-field-id="d0beb41"]) .wapf-swatch { width: var(--levono-swatch-size) !important; min-width: var(--levono-swatch-size) !important; max-width: var(--levono-swatch-size) !important; height: var(--levono-swatch-size) !important; min-height: var(--levono-swatch-size) !important; max-height: var(--levono-swatch-size) !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; box-shadow: none !important; outline: none !important; overflow: visible !important; } /* ========================================================== KLEUR AFBEELDING ========================================================== */ .levono-wapf-color-field .wapf-swatch--image label > div:first-of-type, .levono-wapf-color-field .wapf-swatch--image img, .wapf-field-container:has(input[data-field-id="d0beb41"]) .wapf-swatch--image label > div:first-of-type, .wapf-field-container:has(input[data-field-id="d0beb41"]) .wapf-swatch--image img { width: var(--levono-swatch-size) !important; height: var(--levono-swatch-size) !important; min-width: var(--levono-swatch-size) !important; min-height: var(--levono-swatch-size) !important; max-width: var(--levono-swatch-size) !important; max-height: var(--levono-swatch-size) !important; border-radius: 50% !important; object-fit: cover !important; margin: 0 !important; padding: 0 !important; } /* ========================================================== NORMALE COLOR SWATCH ========================================================== */ .levono-wapf-color-field .wapf-swatch--color label > div:first-of-type, .levono-wapf-color-field .wapf-swatch--color .wapf-color, .wapf-field-container:has(input[data-field-id="d0beb41"]) .wapf-swatch--color label > div:first-of-type, .wapf-field-container:has(input[data-field-id="d0beb41"]) .wapf-swatch--color .wapf-color { width: var(--levono-swatch-size) !important; height: var(--levono-swatch-size) !important; min-width: var(--levono-swatch-size) !important; min-height: var(--levono-swatch-size) !important; max-width: var(--levono-swatch-size) !important; max-height: var(--levono-swatch-size) !important; border-radius: 50% !important; margin: 0 !important; } /* ========================================================== NIET GESELECTEERDE KLEUREN Geen grijze rand ========================================================== */ .levono-wapf-color-field .wapf-swatch--image:not(.wapf-checked) label > div:first-of-type, .levono-wapf-color-field .wapf-swatch--color:not(.wapf-checked) label > div:first-of-type, .wapf-field-container:has(input[data-field-id="d0beb41"]) .wapf-swatch--image:not(.wapf-checked) label > div:first-of-type, .wapf-field-container:has(input[data-field-id="d0beb41"]) .wapf-swatch--color:not(.wapf-checked) label > div:first-of-type { border-color: transparent !important; outline: none !important; box-shadow: none !important; } /* ========================================================== GESELECTEERDE KLEUR Witte tussenrand + oranje Levono ring ========================================================== */ .wapf-field-container:has(input[data-field-id="d0beb41"]) .wapf-swatch--image.wapf-checked label > div:first-of-type, .wapf-field-container:has(input[data-field-id="d0beb41"]) .wapf-swatch--color.wapf-checked label > div:first-of-type, .levono-wapf-color-field .wapf-swatch--image.wapf-checked label > div:first-of-type, .levono-wapf-color-field .wapf-swatch--color.wapf-checked label > div:first-of-type { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--levono-orange-selection) !important; } /* * Extra selectors voor andere WAPF selectie states. */ .levono-wapf-color-field .wapf-swatch.selected label > div:first-of-type, .levono-wapf-color-field .wapf-swatch.checked label > div:first-of-type, .wapf-field-container:has(input[data-field-id="d0beb41"]) .wapf-swatch.selected label > div:first-of-type, .wapf-field-container:has(input[data-field-id="d0beb41"]) .wapf-swatch.checked label > div:first-of-type { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--levono-orange-selection) !important; } /* ========================================================== GROTE KLEUR PREVIEW / TOOLTIP UITSCHAKELEN ========================================================== */ .levono-wapf-color-field .wapf-tt-content, .levono-wapf-color-field .wapf-ttp, .levono-wapf-color-field .wapf-tt-wrap > .wapf-tt-content, .wapf-field-container:has(input[data-field-id="d0beb41"]) .wapf-tt-content, .wapf-field-container:has(input[data-field-id="d0beb41"]) .wapf-ttp, .wapf-field-container:has(input[data-field-id="d0beb41"]) .wapf-tt-wrap > .wapf-tt-content { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* ========================================================== OVERIGE IMAGE SWATCHES Bediening, plaatsing, etc. Deze NIET rond maken ========================================================== */ .wapf-field-container:not(.levono-wapf-color-field) .wapf-image-swatch img, .wapf-field-container:not(.levono-wapf-color-field) .wapf-swatch--image img { border-radius: 0 !important; } /* ========================================================== IMAGE SWATCHES Geen globale kleur styling erop toepassen ========================================================== */ .wapf-field-container:not(.levono-wapf-color-field) .wapf-image-swatch, .wapf-field-container:not(.levono-wapf-color-field) .wapf-swatch--image { background: transparent; } /* ========================================================== TEXT SWATCH Bijvoorbeeld elektrische bediening ========================================================== */ .levono-wapf-text-swatch-field .wapf-swatch, .levono-wapf-text-swatch-field .wapf-swatch-label, .levono-wapf-text-swatch-field .wapf-image-swatch { border-radius: 4px !important; text-transform: none !important; letter-spacing: normal !important; } /* Geselecteerde text swatch */ .levono-wapf-text-swatch-field .wapf-swatch.selected, .levono-wapf-text-swatch-field .wapf-swatch.wapf-checked, .levono-wapf-text-swatch-field .wapf-swatch.checked, .levono-wapf-text-swatch-field input:checked + .wapf-swatch, .levono-wapf-text-swatch-field input:checked + label { background: #293044 !important; border-color: #293044 !important; color: #ffffff !important; box-shadow: none !important; } .levono-wapf-text-swatch-field .wapf-swatch.selected *, .levono-wapf-text-swatch-field .wapf-swatch.wapf-checked *, .levono-wapf-text-swatch-field .wapf-swatch.checked *, .levono-wapf-text-swatch-field input:checked + .wapf-swatch *, .levono-wapf-text-swatch-field input:checked + label * { color: #ffffff !important; } /* ========================================================== INFO ICONEN ========================================================== */ .levono-option-info { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 18px !important; height: 18px !important; min-width: 18px !important; margin-left: 6px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: #293044 !important; color: #ffffff !important; font-size: 11px !important; line-height: 18px !important; font-weight: 700 !important; text-align: center !important; cursor: pointer !important; vertical-align: middle !important; box-shadow: none !important; } /* ========================================================== WOOCOMMERCE MELDING NOG EEN JALOEZIE SAMENSTELLEN ========================================================== */ .woocommerce-message .levono-configure-another-button, .woocommerce-notices-wrapper .levono-configure-another-button { margin-left: 8px !important; background: #FF4B0B !important; border-color: #FF4B0B !important; color: #ffffff !important; font-weight: 600 !important; text-decoration: none !important; box-shadow: none !important; } /* Hover */ .woocommerce-message .levono-configure-another-button:hover, .woocommerce-message .levono-configure-another-button:focus, .woocommerce-notices-wrapper .levono-configure-another-button:hover, .woocommerce-notices-wrapper .levono-configure-another-button:focus { background: #df3f08 !important; border-color: #df3f08 !important; color: #ffffff !important; } /* ========================================================== WOOCOMMERCE PRIMAIRE KNOPPEN ========================================================== */ .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt { background-color: var(--levono-orange) !important; border-color: var(--levono-orange) !important; color: #ffffff !important; } .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover { background-color: #df3f08 !important; border-color: #df3f08 !important; color: #ffffff !important; } /* ========================================================== MOBIEL 4 KLEUREN PER RIJ ========================================================== */ @media (max-width: 767px) { .levono-wapf-color-field .wapf-swatch-wrapper, .wapf-field-container:has(input[data-field-id="d0beb41"]) .wapf-swatch-wrapper { grid-template-columns: repeat( 4, var(--levono-swatch-size) ) !important; grid-auto-columns: var(--levono-swatch-size) !important; gap: var(--levono-swatch-gap) !important; width: max-content !important; max-width: 100% !important; } } /* ========================================================== EINDE LEVONO CHILD THEME CSS ========================================================== */