| @@ -48,20 +48,11 @@ | ||
| 48 | 48 | .wpbc_modal__import_google_calendar__section .booking_gcal_events_until_offset, |
| 49 | 49 | .wpbc_modal__import_google_calendar__section #booking_gcal_events_from, |
| 50 | 50 | .wpbc_modal__import_google_calendar__section .booking_gcal_events_from_offset { |
| 51 | 51 | float:left; |
| 52 | - margin:5px 0 0 0 !important; | |
| 53 | 52 | } |
| 54 | -.wpbc_modal__import_google_calendar__section .booking_gcal_events_from_offset label, | |
| 55 | -.wpbc_modal__import_google_calendar__section .booking_gcal_events_until_offset label { | |
| 56 | - margin: 0 10px; | |
| 57 | - float:left; | |
| 58 | - line-height: 29px; | |
| 59 | -} | |
| 60 | -.wpbc_modal__import_google_calendar__section input[type=text], | |
| 61 | -.wpbc_modal__import_google_calendar__section select { | |
| 62 | - height:28px; | |
| 63 | -} | |
| 53 | + | |
| 54 | + | |
| 64 | 55 | .wpbc_modal__import_google_calendar__section th { |
| 65 | 56 | vertical-align: middle; |
| 66 | 57 | } |
| 67 | 58 | .wpbc_modal__import_google_calendar__section th, |
| @@ -67,24 +58,33 @@ | ||
| 67 | 58 | .wpbc_modal__import_google_calendar__section th, |
| 68 | 59 | .wpbc_modal__import_google_calendar__section td { |
| 69 | 60 | border:none; |
| 70 | 61 | } |
| 71 | -.wpbc_modal__import_google_calendar__section label { | |
| 72 | - line-height: 28px; | |
| 73 | - margin: 0; | |
| 74 | - vertical-align: middle; | |
| 75 | -} | |
| 62 | + | |
| 76 | 63 | .wpbc_modal__import_google_calendar__section #booking_gcal_events_from_offset_type, |
| 77 | 64 | .wpbc_modal__import_google_calendar__section #booking_gcal_events_until_offset_type { |
| 78 | 65 | vertical-align: initial; |
| 79 | 66 | } |
| 80 | 67 | |
| 81 | - | |
| 82 | -@media (max-width: 782px) { | |
| 83 | - .wpdevelop .modal-dialog{ | |
| 84 | - margin: 60px 10px 10px; | |
| 85 | - } | |
| 86 | - | |
| 68 | +.wpdevelop .modal-dialog .modal-content { | |
| 69 | + overflow: auto; | |
| 70 | + border-radius: 3px; | |
| 71 | +} | |
| 72 | +.wpbc_popup_modal .modal-dialog.modal-lg { | |
| 73 | + width: 98%; | |
| 74 | + width: calc(100vw - 20px); | |
| 75 | + margin: 10px auto; | |
| 76 | +} | |
| 77 | +@media (max-width: 782px) { | |
| 78 | + .wpdevelop .modal-dialog { | |
| 79 | + margin: 15px; | |
| 80 | + } | |
| 81 | + .wpdevelop .modal-header { | |
| 82 | + border-radius: 10px 10px 0 0; | |
| 83 | + } | |
| 84 | + .wpdevelop .modal { | |
| 85 | + overflow: auto; | |
| 86 | + } | |
| 87 | 87 | /* Import Google Events Dialog*/ |
| 88 | 88 | .wpbc_modal__import_google_calendar__section .modal-dialog.modal-lg { |
| 89 | 89 | width: auto; |
| 90 | 90 | } |
| @@ -189,9 +189,9 @@ | ||
| 189 | 189 | left: 0; |
| 190 | 190 | position: fixed; |
| 191 | 191 | right: 0; |
| 192 | 192 | top: 0; |
| 193 | - z-index: 1040; | |
| 193 | + z-index: 111040; | |
| 194 | 194 | } |
| 195 | 195 | .wp-admin .modal-backdrop.fade { |
| 196 | 196 | opacity: 0; |
| 197 | 197 | } |
| @@ -239,9 +239,9 @@ | ||
| 239 | 239 | justify-content: flex-start; |
| 240 | 240 | align-items: center; |
| 241 | 241 | } |
| 242 | 242 | .wpbc_popup_modal td fieldset .wpbc_ui__toggle { |
| 243 | - flex:0; | |
| 243 | + flex:0 1 auto; | |
| 244 | 244 | } |
| 245 | 245 | .wpbc_popup_modal td fieldset span.description { |
| 246 | 246 | flex: 1; |
| 247 | 247 | margin: 3px 0 0.5em; |
| @@ -260,8 +260,42 @@ | ||
| 260 | 260 | align-items: flex-start; |
| 261 | 261 | margin-top: 4px; |
| 262 | 262 | } |
| 263 | 263 | /* ------------------------------------------------------------------ */ |
| 264 | +.modal-title { | |
| 265 | + flex: 1; | |
| 266 | + text-align: left; | |
| 267 | +} | |
| 268 | +.wpdevelop .modal-footer, | |
| 269 | +.wpdevelop .modal-header { | |
| 270 | + padding: 15px; | |
| 271 | + text-align: right; | |
| 272 | + border-top: 1px solid #e5e5e5; | |
| 273 | + display: flex; | |
| 274 | + flex-flow: row wrap; | |
| 275 | + justify-content: flex-end; | |
| 276 | + align-items: center; | |
| 277 | + gap: 5px; | |
| 278 | +} | |
| 279 | +.wpdevelop .modal-header { | |
| 280 | + justify-content: flex-start; | |
| 281 | + font-size: 14px; | |
| 282 | +} | |
| 283 | +.wpdevelop .modal-header .close { | |
| 284 | + order: 100; | |
| 285 | + margin-left: auto; | |
| 286 | +} | |
| 287 | +.wpbc_modal__add_booking__header_main .modal-title { | |
| 288 | + flex: 1 1 auto; | |
| 289 | + font-weight: 550; | |
| 290 | + text-align: left; | |
| 291 | +} | |
| 292 | +.wpbc_modal__add_booking__header_main { | |
| 293 | + flex: 1 1 auto; | |
| 294 | +} | |
| 295 | +.modal-footer .wpbc_ui__toggle { | |
| 296 | + align-items: center; | |
| 297 | +} | |
| 264 | 298 | .wpbc_popup_modal .modal-footer a.button, |
| 265 | 299 | .wpbc_popup_modal .modal-footer a.button:hover, |
| 266 | 300 | .wpbc_popup_modal .modal-footer a.button:active, |
| 267 | 301 | .wpbc_popup_modal .modal-footer a.button:focus { |
| @@ -363,9 +397,9 @@ | ||
| 363 | 397 | margin: 5px auto; |
| 364 | 398 | } |
| 365 | 399 | @media (max-width: 782px) { |
| 366 | 400 | .wpbc_popup_modal .modal-dialog.modal-lg { |
| 367 | - width: 97%; | |
| 401 | + width: 98%; | |
| 368 | 402 | } |
| 369 | 403 | } |
| 370 | 404 | /* Show over top toolbar - dashboard*/ |
| 371 | 405 | .wpbc_popup_modal { |
| @@ -374,14 +408,155 @@ | ||
| 374 | 408 | /* Header border radius*/ |
| 375 | 409 | .wpbc_popup_modal .modal-dialog.modal-lg .modal-header { |
| 376 | 410 | border-radius: 6px 6px 0 0; |
| 377 | 411 | } |
| 412 | + | |
| 413 | +/* Add/Edit Booking modal: keep header/footer visible while the booking form scrolls. */ | |
| 414 | +.wpbc_modal__add_booking__section .modal-dialog.modal-lg { | |
| 415 | + height: calc(100vh - 20px); | |
| 416 | +} | |
| 417 | +.wpbc_modal__add_booking__section .modal-content { | |
| 418 | + display: flex; | |
| 419 | + flex-direction: column; | |
| 420 | + max-height: 100%; | |
| 421 | + overflow: hidden; | |
| 422 | +} | |
| 423 | +.wpbc_modal__add_booking__section .modal-header, | |
| 424 | +.wpbc_modal__add_booking__section .modal-footer { | |
| 425 | + flex: 0 0 auto; | |
| 426 | +} | |
| 427 | +.wpbc_modal__add_booking__section .modal-body { | |
| 428 | + flex: 1 1 auto; | |
| 429 | + min-height: 0; | |
| 430 | + overflow-y: auto; | |
| 431 | +} | |
| 432 | +.wpbc_modal__add_booking__footer_time_override { | |
| 433 | + flex: 1 1 auto; | |
| 434 | + display: flex; | |
| 435 | + justify-content: flex-start; | |
| 436 | + min-width: 280px; | |
| 437 | +} | |
| 438 | +.wpbc_modal__add_booking__footer_time_override:empty { | |
| 439 | + display: none; | |
| 440 | + flex: 0 0 auto; | |
| 441 | + min-width: 0; | |
| 442 | +} | |
| 443 | +.wpbc_modal__add_booking__header_main { | |
| 444 | + display: flex; | |
| 445 | + flex-wrap: wrap; | |
| 446 | + gap: 10px 18px; | |
| 447 | + align-items: center; | |
| 448 | + margin-right: 32px; | |
| 449 | +} | |
| 450 | +.wpbc_modal__add_booking__header_main .modal-title { | |
| 451 | + flex: 0 0 auto; | |
| 452 | + margin: 0; | |
| 453 | +} | |
| 454 | +.wpbc_modal__add_booking__controls { | |
| 455 | + display: inline-flex; | |
| 456 | + flex: 1 1 auto; | |
| 457 | + flex-wrap: wrap; | |
| 458 | + gap: 8px 12px; | |
| 459 | + align-items: center; | |
| 460 | + min-width: 240px; | |
| 461 | +} | |
| 462 | +.wpbc_modal__add_booking__control, | |
| 463 | +label.wpbc_modal__add_booking__control { | |
| 464 | + display: inline-flex; | |
| 465 | + align-items: center; | |
| 466 | + gap: 6px; | |
| 467 | + margin: 0; | |
| 468 | + white-space: nowrap; | |
| 469 | +} | |
| 470 | +.wpbc_modal__add_booking__control select { | |
| 471 | + width: auto; | |
| 472 | + min-width: 160px; | |
| 473 | + max-width: 260px; | |
| 474 | +} | |
| 475 | +.wpbc_modal__add_booking__edit_form_link, | |
| 476 | +.wpbc_modal__add_booking__edit_form_link:hover, | |
| 477 | +.wpbc_modal__add_booking__edit_form_link:focus { | |
| 478 | + display: inline-flex; | |
| 479 | + align-items: center; | |
| 480 | + gap: 4px; | |
| 481 | + text-decoration: none; | |
| 482 | + white-space: nowrap; | |
| 483 | + box-shadow: none; | |
| 484 | +} | |
| 485 | +.wpbc_add_booking_modal__time_override { | |
| 486 | + display: flex; | |
| 487 | + flex: 1 1 auto; | |
| 488 | + flex-wrap: wrap; | |
| 489 | + align-items: center; | |
| 490 | + justify-content: flex-start; | |
| 491 | + gap: 8px 12px; | |
| 492 | + margin: 0; | |
| 493 | + padding: 7px 10px; | |
| 494 | + border: 1px solid #dcdcde; | |
| 495 | + background: #f6f7f7; | |
| 496 | + border-left: 4px solid var(--wp-admin-theme-color, #2271b1); | |
| 497 | + border-radius: 4px; | |
| 498 | + text-align: left; | |
| 499 | +} | |
| 500 | +.wpbc_add_booking_modal__time_override_toggle { | |
| 501 | + display: inline-flex; | |
| 502 | + align-items: center; | |
| 503 | + margin: 0; | |
| 504 | +} | |
| 505 | +.wpbc_add_booking_modal__time_override_fields { | |
| 506 | + display: flex; | |
| 507 | + flex-wrap: wrap; | |
| 508 | + gap: 6px; | |
| 509 | + align-items: center; | |
| 510 | +} | |
| 511 | +.wpbc_add_booking_modal__time_override_fields label { | |
| 512 | + display: flex; | |
| 513 | + flex-direction: row; | |
| 514 | + align-items: center; | |
| 515 | + gap: 4px; | |
| 516 | + margin: 0; | |
| 517 | + color: #50575e; | |
| 518 | + font-size: 12px; | |
| 519 | + font-weight: 600; | |
| 520 | +} | |
| 521 | +.wpbc_add_booking_modal__time_override_fields input[type="text"] { | |
| 522 | + width: 72px; | |
| 523 | + min-height: 30px; | |
| 524 | + text-align: center; | |
| 525 | +} | |
| 526 | +.wpbc_add_booking_modal__time_override_note { | |
| 527 | + flex: 1 1 180px; | |
| 528 | + margin: 0; | |
| 529 | + color: #646970; | |
| 530 | + font-size: 12px; | |
| 531 | +} | |
| 532 | +.wpbc_add_booking_modal__time_override:not(.is-enabled) { | |
| 533 | + border-left-color: #8c8f94; | |
| 534 | + opacity: 0.82; | |
| 535 | +} | |
| 536 | +.wpbc_add_booking_modal__time_field_overridden { | |
| 537 | + opacity: 0.65; | |
| 538 | +} | |
| 539 | +@media (max-width: 782px) { | |
| 540 | + .wpbc_modal__add_booking__section .modal-dialog.modal-lg { | |
| 541 | + height: calc(100vh - 30px); | |
| 542 | + } | |
| 543 | + .wpbc_modal__add_booking__header_main { | |
| 544 | + align-items: flex-start; | |
| 545 | + } | |
| 546 | + .wpbc_modal__add_booking__controls, | |
| 547 | + .wpbc_modal__add_booking__control, | |
| 548 | + .wpbc_modal__add_booking__control select, | |
| 549 | + .wpbc_modal__add_booking__edit_form_link { | |
| 550 | + width: 100%; | |
| 551 | + } | |
| 552 | +} | |
| 378 | 553 | /* Shortcode Text field */ |
| 379 | 554 | .wpbc_field_help_panel_background.wpbc_field_help_panel_field .put-in, |
| 380 | 555 | .wpbc_popup_modal .put-in { |
| 381 | 556 | cursor: text; |
| 382 | 557 | font-weight: 600; |
| 383 | - /*background: #1E7BC7;*/ | |
| 558 | + /*background: var( --wp-admin-theme-color, #1E7BC7 );*/ | |
| 384 | 559 | /*background: #4A8CC2;*/ |
| 385 | 560 | /*border: 1px solid #3C86A7;*/ |
| 386 | 561 | background: #75A249; |
| 387 | 562 | border: 1px solid #75A249; |
| @@ -397,10 +572,9 @@ | ||
| 397 | 572 | } |
| 398 | 573 | /* Border color of active horizontal tab */ |
| 399 | 574 | .modal-body .wpbc_settings_flex_container .wpdvlp-top-tabs .nav-tab-active, |
| 400 | 575 | .modal-body .wpbc_settings_flex_container .wpdvlp-top-tabs a.nav-tab-active:hover { |
| 401 | - border-bottom-color: #9c9c9c; | |
| 402 | - border-bottom-color: #cb8c8c; | |
| 576 | + border-bottom-color: var(--wpbc_admin-active-tab-color, #707980); | |
| 403 | 577 | } |
| 404 | 578 | /* ------------------------------------------------------------------------------------------------------------------ */ |
| 405 | 579 | /* Vertical Navigation Panel */ |
| 406 | 580 | /* ------------------------------------------------------------------------------------------------------------------ */ |
| @@ -452,8 +626,85 @@ | ||
| 452 | 626 | .wpbc_sc_container__shortcode_section__general , |
| 453 | 627 | .wpbc_sc_container__shortcode_section__search_filters{ |
| 454 | 628 | display:block; |
| 455 | 629 | } |
| 630 | + | |
| 631 | +/* Modern workflow shortcode descriptions belong below their controls. */ | |
| 632 | +#wpbc_sc_container__shortcode_booking_appointment .form-table td fieldset > span.description, | |
| 633 | +#wpbc_sc_container__shortcode_booking_resource_selector .form-table td fieldset > span.description { | |
| 634 | + flex: 100%; | |
| 635 | + padding: 5px 0; | |
| 636 | + line-height: 1.74; | |
| 637 | + font-size: 13px; | |
| 638 | +} | |
| 639 | + | |
| 640 | +/* Keep the shortcode popup frame fixed and scroll only its active configuration section. */ | |
| 641 | +@media (min-width: 783px) { | |
| 642 | + #wpbc_tiny_modal.wpbc_shortcode_config__scroll_mode { | |
| 643 | + overflow-y: hidden !important; | |
| 644 | + } | |
| 645 | + #wpbc_tiny_modal.wpbc_shortcode_config__scroll_mode .modal-dialog.modal-lg { | |
| 646 | + height: calc(100vh - 10px); | |
| 647 | + } | |
| 648 | + #wpbc_tiny_modal.wpbc_shortcode_config__scroll_mode .modal-content { | |
| 649 | + display: flex; | |
| 650 | + flex-direction: column; | |
| 651 | + height: 100%; | |
| 652 | + overflow: hidden; | |
| 653 | + } | |
| 654 | + #wpbc_tiny_modal.wpbc_shortcode_config__scroll_mode .modal-header, | |
| 655 | + #wpbc_tiny_modal.wpbc_shortcode_config__scroll_mode .modal-footer { | |
| 656 | + flex: 0 0 auto; | |
| 657 | + } | |
| 658 | + #wpbc_tiny_modal.wpbc_shortcode_config__scroll_mode .modal-body { | |
| 659 | + flex: 1 1 auto; | |
| 660 | + min-height: 0; | |
| 661 | + overflow: hidden; | |
| 662 | + } | |
| 663 | + #wpbc_tiny_modal.wpbc_shortcode_config__scroll_mode .modal-body > .wpbc_settings_flex_container { | |
| 664 | + height: 100%; | |
| 665 | + min-height: 0; | |
| 666 | + flex-wrap: nowrap; | |
| 667 | + align-items: stretch; | |
| 668 | + overflow: hidden; | |
| 669 | + } | |
| 670 | + #wpbc_tiny_modal.wpbc_shortcode_config__scroll_mode .wpbc_settings_flex_container_left { | |
| 671 | + min-height: 0; | |
| 672 | + max-height: 100%; | |
| 673 | + } | |
| 674 | + #wpbc_tiny_modal.wpbc_shortcode_config__scroll_mode .wpbc_settings_flex_container_right { | |
| 675 | + display: flex; | |
| 676 | + flex-direction: column; | |
| 677 | + min-width: 0; | |
| 678 | + min-height: 0; | |
| 679 | + height: 100%; | |
| 680 | + max-height: 100%; | |
| 681 | + overflow: hidden; | |
| 682 | + } | |
| 683 | + #wpbc_tiny_modal.wpbc_shortcode_config__scroll_mode .wpbc_sc_container__all_shortcodes { | |
| 684 | + flex: 1 1 auto; | |
| 685 | + min-height: 0; | |
| 686 | + overflow: hidden; | |
| 687 | + box-sizing: border-box; | |
| 688 | + } | |
| 689 | + #wpbc_tiny_modal.wpbc_shortcode_config__scroll_mode .wpbc_sc_container__shortcode_is_active { | |
| 690 | + display: flex !important; | |
| 691 | + flex-direction: column; | |
| 692 | + height: 100%; | |
| 693 | + min-height: 0; | |
| 694 | + } | |
| 695 | + #wpbc_tiny_modal.wpbc_shortcode_config__scroll_mode .wpbc_sc_container__shortcode_is_active > .wpdvlp-tabs-wrapper, | |
| 696 | + #wpbc_tiny_modal.wpbc_shortcode_config__scroll_mode .wpbc_sc_container__shortcode_is_active > .wpbc_shortcode_config_content_toolbar__next_prior { | |
| 697 | + flex: 0 0 auto; | |
| 698 | + } | |
| 699 | + #wpbc_tiny_modal.wpbc_shortcode_config__scroll_mode .wpbc_sc_container__shortcode_is_active > .wpbc_sc_container__shortcode_section { | |
| 700 | + flex: 1 1 auto; | |
| 701 | + min-height: 0; | |
| 702 | + overflow-y: auto; | |
| 703 | + overscroll-behavior: contain; | |
| 704 | + padding-right: 8px; | |
| 705 | + } | |
| 706 | +} | |
| 456 | 707 | /* Hide all sections by default*/ |
| 457 | 708 | .wpbc_sc_container__shortcode_subsection{ |
| 458 | 709 | display:none; |
| 459 | 710 | } |
| @@ -552,9 +803,9 @@ | ||
| 552 | 803 | .wp-core-ui .wpbc_page .button.wpbc_ui_button_danger:hover:not(.inactive), |
| 553 | 804 | .wp-core-ui .wpbc_page .button.wpbc_ui_button_danger.focus:not(.inactive), |
| 554 | 805 | .wp-core-ui .wpbc_page .button.wpbc_ui_button_danger:focus:not(.inactive) { |
| 555 | 806 | background: #e6716f; |
| 556 | - border-color: #d58582; | |
| 807 | + /*border-color: #d58582;*/ | |
| 557 | 808 | color: #fdfdfd; |
| 558 | 809 | text-shadow: none; |
| 559 | 810 | } |
| 560 | 811 | /* :focus ---- */ |
| @@ -559,9 +810,9 @@ | ||
| 559 | 810 | } |
| 560 | 811 | /* :focus ---- */ |
| 561 | 812 | .wp-core-ui .wpbc_page .button.wpbc_ui_button_danger.focus:not(.inactive), |
| 562 | 813 | .wp-core-ui .wpbc_page .button.wpbc_ui_button_danger:focus:not(.inactive) { |
| 563 | - box-shadow:0 0 0 0px #fff, 0 0 2px 1px #a4d7ff; | |
| 814 | + /*box-shadow:0 0 0 0px #fff, 0 0 2px 1px #a4d7ff;*/ | |
| 564 | 815 | } |
| 565 | 816 | /* :active ---- */ |
| 566 | 817 | .wp-core-ui .wpbc_page .button.wpbc_ui_button_danger.active:not(.inactive), |
| 567 | 818 | .wp-core-ui .wpbc_page .button.wpbc_ui_button_danger.active:hover:not(.inactive), |
| @@ -568,9 +819,9 @@ | ||
| 568 | 819 | .wp-core-ui .wpbc_page .button.wpbc_ui_button_danger.active:focus:not(.inactive), |
| 569 | 820 | .wp-core-ui .wpbc_page .button.wpbc_ui_button_danger:active:not(.inactive) { |
| 570 | 821 | background: #ba4c48; |
| 571 | 822 | border-color: #c05d5a; |
| 572 | - box-shadow: inset 0 1px 7px -3px rgba(0, 0, 0, .1); | |
| 823 | + /*box-shadow: inset 0 1px 7px -3px rgba(0, 0, 0, .1);*/ | |
| 573 | 824 | color: #f3f2f2; |
| 574 | 825 | } |
| 575 | 826 | /* :disabled ---- */ |
| 576 | 827 | .wp-core-ui .wpbc_page .button.wpbc_ui_button_danger[disabled], |
| @@ -584,9 +835,8 @@ | ||
| 584 | 835 | text-shadow: none !important; |
| 585 | 836 | cursor: default; |
| 586 | 837 | } |
| 587 | 838 | |
| 588 | - | |
| 589 | 839 | /* ------------------------------------------------------------------------------------------------------------------ */ |
| 590 | 840 | /* Weekdays conditions toolbar */ |
| 591 | 841 | /* ------------------------------------------------------------------------------------------------------------------ */ |
| 592 | 842 | .wpbc_shortcode_config_fields__dates_conditions_toolbar .wpdvlp-sub-tabs{ |
| @@ -633,9 +883,8 @@ | ||
| 633 | 883 | .form-table td fieldset .wpbc_shortcode_config__rules__help_section li { |
| 634 | 884 | line-height: 2.5; |
| 635 | 885 | } |
| 636 | 886 | |
| 637 | - | |
| 638 | 887 | /* ------------------------------------------------------------------------------------------------------------------ */ |
| 639 | 888 | /* Select Day - Weekday */ |
| 640 | 889 | /* ------------------------------------------------------------------------------------------------------------------ */ |
| 641 | 890 | .wpbc_shortcode_config__rules__params_section.wpbc_select_day_weekday{ |
| @@ -670,5 +919,5 @@ | ||
| 670 | 919 | /* Weekdays: checkboxes only */ |
| 671 | 920 | .wpbc_shortcode_config__rules__params_section.wpbc_start_day_season .wpbc_ajx_toolbar.wpbc_buttons_row .ui_container.ui_container_weekdays .ui_group.ui_group_weekdays_checkboxes{ |
| 672 | 921 | /*flex-flow: column wrap;*/ |
| 673 | 922 | max-width: 320px; |
| 674 | - } | |
| 923 | + } | |
