| @@ -1,4 +1,4 @@ | ||
| 1 | 1 | /* ------------------------------------------------------------------------------------------------------------------ */ |
| 2 | 2 | /* Hide Top Menu bar for Submenu items, if we do not use the left navigation menu */ |
| 3 | 3 | .wpbc_top_tabs_sub_menu { |
| 4 | 4 | display: none; |
| @@ -114,26 +114,172 @@ | ||
| 114 | 114 | } |
| 115 | 115 | .wpbc__container_place__footer_buttons .wpbc__form__div { |
| 116 | 116 | width:100%; |
| 117 | 117 | } |
| 118 | -/* Fix buttons position text*/ | |
| 119 | -.wpbc_setup_wizard_page__section_footer .wpbc_container.wpbc_container_booking_form .wpbc_button_light, | |
| 120 | -.wpbc_setup_wizard_page__section_footer .wpbc_container .wpbc_button_light{ | |
| 121 | - padding: 0 1em; | |
| 122 | - line-height: 2.21; | |
| 123 | - align-items: first baseline; | |
| 118 | +/* Keep native WordPress buttons aligned without replacing the active admin color scheme. */ | |
| 119 | +.wpbc_setup_wizard_page__section_footer .wpbc_container .button{ | |
| 120 | + display: inline-flex; | |
| 121 | + align-items: center; | |
| 122 | + justify-content: center; | |
| 124 | 123 | } |
| 125 | 124 | /* required for rotating around center dot */ |
| 126 | -.wpbc_setup_wizard_page__section_footer .wpbc_container .wpbc_button_light .wpbc_spin{ | |
| 125 | +.wpbc_setup_wizard_page__section_footer .wpbc_container .button .wpbc_spin{ | |
| 127 | 126 | line-height: 50%; |
| 128 | 127 | align-self: center; |
| 129 | 128 | } |
| 129 | + | |
| 130 | +/* Keep full-screen wizard navigation visible while the current step scrolls. */ | |
| 131 | +body.wpbc_admin_full_screen .wpbc_ajx_page__container { | |
| 132 | + padding-bottom: 50px; | |
| 133 | +} | |
| 134 | +body.wpbc_admin_full_screen .wpbc_setup_wizard_page__section_footer { | |
| 135 | + position: fixed; | |
| 136 | + z-index: 100001; | |
| 137 | + right: 0; | |
| 138 | + bottom: 0; | |
| 139 | + left: 0; | |
| 140 | + box-sizing: border-box; | |
| 141 | + width: auto; | |
| 142 | + margin: 0; | |
| 143 | + padding: 12px 7.5vw; | |
| 144 | + background: #fff; | |
| 145 | + border-top: 1px solid #dcdcde; | |
| 146 | + box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.08); | |
| 147 | +} | |
| 148 | +body.wpbc_admin_full_screen .wpbc_setup_wizard_page__section_footer .wpbc__container_place__footer_buttons { | |
| 149 | + margin-top: 0; | |
| 150 | +} | |
| 151 | +body.wpbc_admin_full_screen .wpbc_setup_wizard_page__section_footer .wpbc__form__div > hr { | |
| 152 | + display: none; | |
| 153 | +} | |
| 154 | +.wpbc__row.wpbc_setup_wizard_page__section_footer .wpbc_container { | |
| 155 | + justify-content: flex-end; | |
| 156 | + align-self: center; | |
| 157 | +} | |
| 158 | +body.wpbc_admin_full_screen .wpbc_setup_wizard_page__section_footer div.wpbc__field { | |
| 159 | + margin: 0; | |
| 160 | +} | |
| 161 | +/* Keep wizard-level actions on the left and step navigation on the right in every full-screen step. */ | |
| 162 | +body.wpbc_admin_full_screen .wpbc_setup_wizard_navigation_row { | |
| 163 | + width: 100%; | |
| 164 | + align-items: center; | |
| 165 | + gap: 16px; | |
| 166 | +} | |
| 167 | +body.wpbc_admin_full_screen .wpbc_setup_wizard_navigation_links { | |
| 168 | + flex: 1 1 280px; | |
| 169 | + display: flex; | |
| 170 | + align-items: center; | |
| 171 | +} | |
| 172 | +body.wpbc_admin_full_screen .wpbc_setup_wizard_navigation_actions { | |
| 173 | + flex: 0 0 auto; | |
| 174 | + display: flex; | |
| 175 | + align-items: center; | |
| 176 | + justify-content: flex-end; | |
| 177 | + margin-left: auto; | |
| 178 | +} | |
| 179 | +body.wpbc_admin_full_screen .wpbc_setup_wizard_navigation_links .wpbc_exit_link_small { | |
| 180 | + margin: 0; | |
| 181 | + flex-flow: row wrap; | |
| 182 | + justify-content: flex-start; | |
| 183 | + align-items: center; | |
| 184 | + gap: 6px 18px; | |
| 185 | +} | |
| 186 | +body.wpbc_admin_full_screen .wpbc_setup_wizard_navigation_links .wpbc_exit_link_small a { | |
| 187 | + margin: 0; | |
| 188 | + font-size: 12px; | |
| 189 | +} | |
| 190 | +body.wpbc_admin_full_screen .wpbc_setup_wizard_page__section_footer .button { | |
| 191 | + display: inline-flex; | |
| 192 | + align-items: center; | |
| 193 | + justify-content: center; | |
| 194 | + min-height: 40px; | |
| 195 | + padding: 0 16px; | |
| 196 | + font-size: 14px; | |
| 197 | + font-weight: 400; | |
| 198 | + line-height: 2.71428571; | |
| 199 | +} | |
| 200 | +body.wpbc_admin_full_screen .wpbc_setup_wizard_page__section_footer #btn__toolbar__buttons_prior { | |
| 201 | + margin-left: auto !important; | |
| 202 | + margin-right: 10px !important; | |
| 203 | +} | |
| 204 | +body.wpbc_admin_full_screen .wpbc_setup_wizard_page__section_footer #btn__toolbar__buttons_next { | |
| 205 | + margin: 0 !important; | |
| 206 | +} | |
| 130 | 207 | @media screen and (max-width: 782px) { |
| 131 | 208 | .wpbc__container_place__footer_buttons.wpbc_container.wpbc_container_booking_form { |
| 132 | 209 | flex: 1 1 100%; |
| 133 | 210 | } |
| 211 | + body.wpbc_admin_full_screen .wpbc_setup_wizard_page__section_footer { | |
| 212 | + max-height: 45vh; | |
| 213 | + overflow-y: auto; | |
| 214 | + padding: 10px 12px max(10px, env(safe-area-inset-bottom)); | |
| 215 | + } | |
| 216 | + body.wpbc_admin_full_screen .wpbc_setup_wizard_page__section_footer .button { | |
| 217 | + min-height: 40px; | |
| 218 | + padding: 0 12px; | |
| 219 | + font-size: 13px; | |
| 220 | + } | |
| 221 | + body.wpbc_admin_full_screen .wpbc_setup_wizard_navigation_row { | |
| 222 | + gap: 8px; | |
| 223 | + } | |
| 224 | + body.wpbc_admin_full_screen .wpbc_setup_wizard_navigation_links, | |
| 225 | + body.wpbc_admin_full_screen .wpbc_setup_wizard_navigation_actions { | |
| 226 | + flex: 1 1 100%; | |
| 227 | + } | |
| 134 | 228 | } |
| 135 | 229 | |
| 230 | +.wpbc_setup_wizard_page_note { | |
| 231 | + font-size: 11px; | |
| 232 | + line-height: 2; | |
| 233 | +} | |
| 234 | +.wpbc__row.wpbc_setup_wizard_accept_send_row { | |
| 235 | + max-width: 100%; | |
| 236 | + align-items: flex-start; | |
| 237 | +} | |
| 238 | +.wpbc__row.wpbc_setup_wizard_accept_send_row .wpbc__field.wpbc_setup_wizard_accept_send_actions .wpbc_exit_link_small a{ | |
| 239 | + font-size: 11px; | |
| 240 | +} | |
| 241 | +.wpbc_setup_wizard_accept_send_row > .wpbc__field:first-child { | |
| 242 | + flex: 1 1 440px; | |
| 243 | +} | |
| 244 | +.wpbc_setup_wizard_accept_send_row .wpbc_setup_wizard_accept_send_actions { | |
| 245 | + flex: 1 1 50% !important; | |
| 246 | + margin: 0; | |
| 247 | +} | |
| 248 | +.wpbc_setup_wizard_accept_send_row .wpbc_setup_wizard_accept_send_actions .wpbc_exit_link_small { | |
| 249 | + margin: 0; | |
| 250 | + padding: 0; | |
| 251 | + flex-flow: row wrap; | |
| 252 | + gap: 10px; | |
| 253 | + justify-content: flex-end; | |
| 254 | + align-items: flex-start; | |
| 255 | +} | |
| 256 | +.wpbc_setup_wizard_page_container .wpbc_container_booking_form .wpbc__field .wpbc_ui_radio_choice label:not(.wpbc_static_text):hover { | |
| 257 | + display: inline; | |
| 258 | + | |
| 259 | +} | |
| 260 | + | |
| 261 | +.wpbc_setup_wizard_accept_send_row .wpdev-list-item { | |
| 262 | + display: flex; | |
| 263 | + align-items: flex-start; | |
| 264 | +} | |
| 265 | +.wpbc_setup_wizard_accept_send_row .wpdev-checkbox { | |
| 266 | + margin-top: 3px !important; | |
| 267 | +} | |
| 268 | +div.wpbc_container.wpbc_form .wpbc_setup_wizard_accept_send_row .wpdev-list-item { | |
| 269 | + display:flex; | |
| 270 | + flex-flow: row nowrap; | |
| 271 | + align-items: flex-start; | |
| 272 | + justify-content: flex-start | |
| 273 | +} | |
| 274 | +div.wpbc_container.wpbc_form .wpbc_setup_wizard_accept_send_row .wpdev-list-item > input[type="checkbox"] + .wpdev-list-item-label, | |
| 275 | +div.wpbc_container.wpbc_form .wpbc_setup_wizard_accept_send_row label.wpdev-list-item-label { | |
| 276 | + margin: 0; | |
| 277 | + font-size: 11px; | |
| 278 | + font-weight: 400; | |
| 279 | + line-height: 2; | |
| 280 | +} | |
| 281 | + | |
| 136 | 282 | /* Small links at the bottom of the wizard */ |
| 137 | 283 | .wpbc_exit_link_small { |
| 138 | 284 | width:100%; |
| 139 | 285 | display: flex; |
| @@ -138,9 +284,9 @@ | ||
| 138 | 284 | width:100%; |
| 139 | 285 | display: flex; |
| 140 | 286 | flex-flow: column wrap; |
| 141 | 287 | justify-content: center; |
| 142 | - align-items: center; | |
| 288 | + align-items: flex-start; | |
| 143 | 289 | } |
| 144 | 290 | .wpbc_exit_link_small a { |
| 145 | 291 | font-size:14px; |
| 146 | 292 | color:#888; |
| @@ -185,8 +331,12 @@ | ||
| 185 | 331 | } |
| 186 | 332 | div.wpbc_container.wpbc_form .wpbc_swp_section label { |
| 187 | 333 | margin: 15px 0 8px; |
| 188 | 334 | } |
| 335 | +.wpbc_swp_section__welcome .wpbc_container_booking_form .wpbc__field label:not(.wpbc_static_text), | |
| 336 | +.wpbc_swp_section__welcome .wpbc_container_booking_form .wpbc__field label:not(.wpbc_static_text):hover { | |
| 337 | + display: inline-flex; | |
| 338 | +} | |
| 189 | 339 | /* ------------------------------------------------------------------------------------------------------------------ */ |
| 190 | 340 | /* TODO: delete this */ |
| 191 | 341 | |
| 192 | 342 | /* ------------------------------------------------------------------------------------------------------------------ */ |
| @@ -304,11 +454,81 @@ | ||
| 304 | 454 | |
| 305 | 455 | /* ------------------------------------------------------------------------------------------------------------------ */ |
| 306 | 456 | /* == Section for Appointment type selection at Step #4 == */ |
| 307 | 457 | /* ------------------------------------------------------------------------------------------------------------------ */ |
| 308 | -.wpbc_container_booking_form .wpbc__field .wpbc_ui_booking_timeslot_picker__get_on_off__div { | |
| 309 | - padding-left: 15px; | |
| 458 | +.wpbc_swp_section__bookings_types { | |
| 459 | + width: 100%; | |
| 310 | 460 | } |
| 461 | +.wpbc_setup_wizard_page_container .wpbc_swp_section__bookings_types { | |
| 462 | + max-width: 960px; | |
| 463 | +} | |
| 464 | +.wpbc_setup_mode_choices { | |
| 465 | + gap: 16px; | |
| 466 | +} | |
| 467 | +.wpbc_setup_mode_choice { | |
| 468 | + display: flex; | |
| 469 | + flex: 1 1 260px; | |
| 470 | + max-width: 300px; | |
| 471 | +} | |
| 472 | +.wpbc_setup_mode_choice > .wpbc_ui_radio_container { | |
| 473 | + width: 100%; | |
| 474 | + max-width: none; | |
| 475 | + margin: 10px 0; | |
| 476 | +} | |
| 477 | +.wpbc_setup_preferences_heading_row { | |
| 478 | + margin-top: 28px; | |
| 479 | +} | |
| 480 | +.wpbc_swp_section h2.wpbc_setup_preferences_heading { | |
| 481 | + width: 100%; | |
| 482 | + margin-bottom: 0; | |
| 483 | + font-size: 24px; | |
| 484 | + font-weight: 600; | |
| 485 | +} | |
| 486 | +.wpbc_setup_booking_type_choices { | |
| 487 | + gap: 16px; | |
| 488 | +} | |
| 489 | +.wpbc_setup_booking_type_choice { | |
| 490 | + display: flex; | |
| 491 | + flex: 1 1 420px; | |
| 492 | + max-width: 440px; | |
| 493 | +} | |
| 494 | +.wpbc_setup_booking_type_choice > .wpbc_ui_radio_container { | |
| 495 | + width: 100%; | |
| 496 | + max-width: none; | |
| 497 | + margin: 10px 0; | |
| 498 | +} | |
| 499 | +.wpbc_setup_appointment_mode_configuration { | |
| 500 | + display: flex; | |
| 501 | + justify-content: center; | |
| 502 | + width: 100%; | |
| 503 | +} | |
| 504 | +.wpbc_setup_appointment_summary_plate { | |
| 505 | + width: 100%; | |
| 506 | + max-width: 440px; | |
| 507 | + margin: 10px 0; | |
| 508 | + background: #fff; | |
| 509 | + border-radius: 4px; | |
| 510 | + box-shadow: 0 0 0 2px var(--wp-admin-theme-color, #007cba); | |
| 511 | +} | |
| 512 | +.wpbc_setup_appointment_summary_copy { | |
| 513 | + padding: 16px; | |
| 514 | +} | |
| 515 | +.wpbc_setup_appointment_summary_copy strong { | |
| 516 | + font-size: 15px; | |
| 517 | +} | |
| 518 | +.wpbc_setup_appointment_summary_copy p { | |
| 519 | + margin: 8px 0 0; | |
| 520 | +} | |
| 521 | +.wpbc_setup_appointment_summary_plate .booking_timeslot_picker__get_on_off { | |
| 522 | + padding-top: 16px; | |
| 523 | + border-top: 1px solid #e8e8e8; | |
| 524 | +} | |
| 525 | +.wpbc_setup_appointment_summary_plate .booking_timeslot_picker__get_on_off select { | |
| 526 | + width: 100%; | |
| 527 | +} | |
| 528 | +.wpbc_container_booking_form .wpbc__field .wpbc_ui_booking_timeslot_picker__get_on_off__div { | |
| 529 | + padding-left: 15px; | |
| 530 | +} | |
| 311 | 531 | |
| 312 | 532 | .wpbc_container_booking_form .wpbc__field .booking_appointments_type__get_on_off label.wpbc-form-radio, |
| 313 | 533 | .wpbc_container_booking_form .wpbc__field .booking_appointments_type__get_on_off label.wpbc-form-radio:hover{ |
| 314 | 534 | flex-flow: row nowrap; |
