/* ------------------------------------------------------------------------------------------------------------------ */ /* Automatic time picker skin: inherit colors from the active Booking Form Style. */ /* ------------------------------------------------------------------------------------------------------------------ */ /* * Keep the established time-picker selectors and geometry as the compatibility * base. The declarations below only map their public variables to the semantic * Booking Form Style variables inherited by each individual form. */ @import url("light__24_8.css"); .wpbc_container.wpbc_form .wpbc_times_selector, .wpbc_container.wpbc_container_booking_form .wpbc_times_selector, .wpbc_booking_ui_theme_scope .wpbc_times_selector { --wpbc_timepicker-font-size: var(--wpbc_form-button-size-font-size, 15px); --wpbc_timepicker-bg-color: var(--wpbc_form-field-background-color, #ffffff); --wpbc_timepicker-text-color: var(--wpbc_form-field-text-color, #3c434a); --wpbc_timepicker-border-color: var(--wpbc_form-field-border-color, #cccccc); --wpbc_timepicker-bg-color-opacity: 100%; --wpbc_timepicker-hover-bg-color: var(--wpbc_form-field-background-color, #ffffff); --wpbc_timepicker-hover-text-color: var(--wpbc_form-field-text-color, #3c434a); --wpbc_timepicker-hover-border-color: var(--wpbc_form-accent-color, var(--wpbc_form-field-focus-border-color, #066aab)); --wpbc_timepicker-hover-bg-color-opacity: 100%; --wpbc_timepicker-selected-bg-color: var(--wpbc_form-accent-color, var(--wpbc_form-button-background-color, #066aab)); --wpbc_timepicker-selected-text-color: var(--wpbc_form-accent-contrast-color, var(--wpbc_form-button-text-color, #ffffff)); --wpbc_timepicker-selected-border-color: var(--wpbc_form-accent-color, var(--wpbc_form-button-border-color, #066aab)); --wpbc_timepicker-selected-bg-color-opacity: 100%; --wpbc_timepicker-border-width: var(--wpbc_form-button-border-size, 1px); --wpbc_timepicker-border-radius: var(--wpbc_form-button-border-radius, 4px); } /* Neutralize theme-provided outlines, then use the same two-ring focus treatment as booking-form buttons. */ .wpbc_container.wpbc_form .wpbc_times_selector div:not(.wpbc_time_picker_disabled), .wpbc_container.wpbc_container_booking_form .wpbc_times_selector div:not(.wpbc_time_picker_disabled), .wpbc_booking_ui_theme_scope .wpbc_times_selector div:not(.wpbc_time_picker_disabled) { background: var(--wpbc_timepicker-bg-color); border-color: var(--wpbc_timepicker-border-color); color: var(--wpbc_timepicker-text-color); outline: 2px solid transparent; outline-offset: 2px; transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, color 0.15s ease-in-out; } .wpbc_container.wpbc_form .wpbc_times_selector div:not(.wpbc_time_picker_disabled):hover, .wpbc_container.wpbc_container_booking_form .wpbc_times_selector div:not(.wpbc_time_picker_disabled):hover, .wpbc_booking_ui_theme_scope .wpbc_times_selector div:not(.wpbc_time_picker_disabled):hover, .wpbc_container.wpbc_form .wpbc_times_selector div:not(.wpbc_time_picker_disabled):not(.wpbc_time_selected):focus, .wpbc_container.wpbc_container_booking_form .wpbc_times_selector div:not(.wpbc_time_picker_disabled):not(.wpbc_time_selected):focus, .wpbc_booking_ui_theme_scope .wpbc_times_selector div:not(.wpbc_time_picker_disabled):not(.wpbc_time_selected):focus { background: var(--wpbc_timepicker-hover-bg-color); border-color: var(--wpbc_timepicker-hover-border-color); color: var(--wpbc_timepicker-hover-text-color); } .wpbc_container.wpbc_form .wpbc_times_selector div.wpbc_time_selected, .wpbc_container.wpbc_container_booking_form .wpbc_times_selector div.wpbc_time_selected, .wpbc_booking_ui_theme_scope .wpbc_times_selector div.wpbc_time_selected, .wpbc_container.wpbc_form .wpbc_times_selector div.wpbc_time_selected:hover, .wpbc_container.wpbc_container_booking_form .wpbc_times_selector div.wpbc_time_selected:hover, .wpbc_booking_ui_theme_scope .wpbc_times_selector div.wpbc_time_selected:hover{ background: var(--wpbc_timepicker-selected-bg-color); border-color: var(--wpbc_timepicker-selected-border-color); color: var(--wpbc_timepicker-selected-text-color); } .wpbc_container.wpbc_form .wpbc_times_selector div:not(.wpbc_time_picker_disabled):focus, .wpbc_container.wpbc_container_booking_form .wpbc_times_selector div:not(.wpbc_time_picker_disabled):focus, .wpbc_booking_ui_theme_scope .wpbc_times_selector div:not(.wpbc_time_picker_disabled):focus { box-shadow: 0 0 0 2px var(--wpbc_form-button-focus-inner-color, var(--wpbc_form-field-background-color, #ffffff)); outline-color: var(--wpbc_form-choice-focus-color, var(--wpbc_form-field-focus-border-color, #066aab)); } /* Match the empty result notice to the same form surface instead of forcing a light-only palette. */ .wpbc_container.wpbc_form .wpbc_times_selector span.wpbc_no_time_pickers, .wpbc_container.wpbc_container_booking_form .wpbc_times_selector span.wpbc_no_time_pickers, .wpbc_booking_ui_theme_scope .wpbc_times_selector span.wpbc_no_time_pickers { background: var(--wpbc_form-field-background-color, #f6f6f6); border-color: var(--wpbc_form-field-border-color, #dcdcdc); color: var(--wpbc_form-field-disabled-color, #959595); }