← All changes
|
includes/page-form-builder/_src/builder-form-page.css
+369
-123
11.4.1
→
11.9
View file →
| @@ -1,4 +1,4 @@ | ||
| 1 | 1 | /* ================================================================================================== */ |
| 2 | 2 | /* Booking Form Builder (BFB) – Page UI */ |
| 3 | 3 | /* Help: High-level page layout wrappers, container scaffolding, basic spacing */ |
| 4 | 4 | /* ================================================================================================== */ |
| @@ -70,28 +70,28 @@ | ||
| 70 | 70 | border: 0; |
| 71 | 71 | box-shadow: rgba(2, 12, 36, .06) 0 0 28px; |
| 72 | 72 | min-height: 35px; /* match controls min-height */ |
| 73 | 73 | } |
| 74 | -.wpbc_bfb__panel--preview h3 button { | |
| 75 | - cursor: pointer; | |
| 76 | -} | |
| 77 | -.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 h3.wpbc_bfb__page_number, | |
| 78 | -.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 h3.wpbc_bfb__page_number button, | |
| 79 | -.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 h3.wpbc_bfb__page_number .menu_icon, | |
| 80 | -.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 h3.wpbc_bfb__page_number *, | |
| 81 | -.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 .wpbc_bfb__overlay-controls, | |
| 82 | -.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 .wpbc_bfb__overlay-controls button, | |
| 83 | -.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 .wpbc_bfb__overlay-controls .menu_icon, | |
| 84 | -.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 .wpbc_bfb__overlay-controls .wpbc_bfb__drag-handle, | |
| 85 | -.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 .wpbc_bfb__overlay-controls .wpbc_icn_drag_indicator, | |
| 86 | -.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 .wpbc_bfb__overlay-controls * { | |
| 87 | - color: #1d2327 !important; | |
| 88 | -} | |
| 89 | -/* Section container within a page (holds sections/columns) */ | |
| 90 | -.wpbc_bfb__form_preview_section_container:empty { | |
| 91 | - min-height: 100px; | |
| 92 | -} | |
| 74 | +.wpbc_bfb__panel--preview h3 button { | |
| 75 | + cursor: pointer; | |
| 76 | +} | |
| 77 | +.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 h3.wpbc_bfb__page_number, | |
| 78 | +.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 h3.wpbc_bfb__page_number button, | |
| 79 | +.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 h3.wpbc_bfb__page_number .menu_icon, | |
| 80 | +.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 h3.wpbc_bfb__page_number *, | |
| 81 | +.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 .wpbc_bfb__overlay-controls, | |
| 82 | +.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 .wpbc_bfb__overlay-controls button, | |
| 83 | +.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 .wpbc_bfb__overlay-controls .menu_icon, | |
| 84 | +.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 .wpbc_bfb__overlay-controls .wpbc_bfb__drag-handle, | |
| 85 | +.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 .wpbc_bfb__overlay-controls .wpbc_icn_drag_indicator, | |
| 86 | +.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 .wpbc_bfb__overlay-controls * { | |
| 87 | + color: #1d2327 !important; | |
| 88 | +} | |
| 89 | +/* Section container within a page (holds sections/columns) */ | |
| 93 | 90 | .wpbc_bfb__form_preview_section_container:empty { |
| 91 | + min-height: 100px; | |
| 92 | +} | |
| 93 | +.wpbc_bfb__form_preview_section_container:empty { | |
| 94 | 94 | display: flex; |
| 95 | 95 | flex-flow: column nowrap; |
| 96 | 96 | align-items: center; |
| 97 | 97 | justify-content: center; |
| @@ -246,10 +246,13 @@ | ||
| 246 | 246 | .wpbc_bfb__dragging, |
| 247 | 247 | .wpbc_bfb__section .wpbc_bfb__column:empty, |
| 248 | 248 | .wpbc_bfb__section:hover .wpbc_bfb__column { |
| 249 | 249 | border: 1px solid #b0c2d9; |
| 250 | - align-content:center; | |
| 251 | 250 | } |
| 251 | +/* Keep populated columns anchored at the top when drag outlines become visible. */ | |
| 252 | +.wpbc_bfb__dragging { | |
| 253 | + align-content: flex-start; | |
| 254 | +} | |
| 252 | 255 | |
| 253 | 256 | /* Empty column hint */ |
| 254 | 257 | .wpbc_bfb__column:empty { |
| 255 | 258 | display: flex; |
| @@ -462,16 +465,8 @@ | ||
| 462 | 465 | /* Drag & Drop States (SortableJS) */ |
| 463 | 466 | /* Help: Visuals for ghost/placeholder/highlight during dragging */ |
| 464 | 467 | /* ================================================================================================== */ |
| 465 | 468 | |
| 466 | -.wpbc_bfb__drag-ghost .wpbc_bfb__column { | |
| 467 | - border: 2px dashed #9af !important; | |
| 468 | - border-radius: 6px; | |
| 469 | -} | |
| 470 | -.wpbc_bfb__section.wpbc_bfb__drag-ghost .wpbc_bfb__column { | |
| 471 | - transform: scale(0.95); | |
| 472 | - transition: transform 0.15s ease; | |
| 473 | -} | |
| 474 | 469 | .wpbc_bfb__drag-active { |
| 475 | 470 | opacity: 1 !important; |
| 476 | 471 | } |
| 477 | 472 | .wpbc_bfb__highlight { |
| @@ -477,12 +472,70 @@ | ||
| 477 | 472 | .wpbc_bfb__highlight { |
| 478 | 473 | border: var( --wpbc-bfb-accent-color, #327ab4 ) 2px dashed !important; |
| 479 | 474 | } |
| 480 | 475 | |
| 481 | -/* Keep sizes stable so lists don’t jump */ | |
| 476 | +/* | |
| 477 | + * Freeze rows and drop containers at their pre-drag border-box height. | |
| 478 | + * The insertion marker can then change DOM ownership without changing the | |
| 479 | + * destination geometry or triggering browser scroll anchoring. | |
| 480 | + */ | |
| 481 | +.wpbc_bfb__drag-geometry-lock { | |
| 482 | + box-sizing: border-box !important; | |
| 483 | + height: var( --wpbc-bfb-drag-locked-block-size ) !important; | |
| 484 | + min-height: var( --wpbc-bfb-drag-locked-block-size ) !important; | |
| 485 | + max-height: var( --wpbc-bfb-drag-locked-block-size ) !important; | |
| 486 | + overflow-anchor: none; | |
| 487 | +} | |
| 488 | + | |
| 489 | +/* Preserve the exact source footprint while the real node moves through the canvas. */ | |
| 490 | +.wpbc_bfb__drag-source-spacer { | |
| 491 | + box-sizing: border-box; | |
| 492 | + display: block; | |
| 493 | + flex: 0 0 var( --wpbc-bfb-drag-source-inline-size, 100% ); | |
| 494 | + width: var( --wpbc-bfb-drag-source-inline-size, 100% ); | |
| 495 | + max-width: 100%; | |
| 496 | + height: var( --wpbc-bfb-drag-source-block-size, 1px ); | |
| 497 | + min-height: var( --wpbc-bfb-drag-source-block-size, 1px ); | |
| 498 | + margin: 0; | |
| 499 | + padding: 0; | |
| 500 | + border: 1px dashed rgba(50, 122, 180, 0.35); | |
| 501 | + border-radius: 4px; | |
| 502 | + background: rgba(50, 122, 180, 0.035); | |
| 503 | + overflow: hidden; | |
| 504 | + pointer-events: auto; | |
| 505 | +} | |
| 506 | + | |
| 507 | +/* The real Sortable node is an in-flow insertion line, not a full-height ghost. */ | |
| 508 | +.wpbc_bfb__drag-ghost.wpbc_bfb__drop-indicator { | |
| 509 | + box-sizing: border-box !important; | |
| 510 | + display: block !important; | |
| 511 | + position: relative !important; | |
| 512 | + flex: 0 0 100% !important; | |
| 513 | + width: 100% !important; | |
| 514 | + max-width: 100% !important; | |
| 515 | + height: 6px !important; | |
| 516 | + min-height: 6px !important; | |
| 517 | + max-height: 6px !important; | |
| 518 | + margin: 2px 0 !important; | |
| 519 | + padding: 0 !important; | |
| 520 | + border: 0 !important; | |
| 521 | + border-radius: 3px !important; | |
| 522 | + outline: 0 !important; | |
| 523 | + background: var( --wpbc-bfb-accent-color, #327ab4 ) !important; | |
| 524 | + box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9) !important; | |
| 525 | + opacity: 1 !important; | |
| 526 | + overflow: hidden !important; | |
| 527 | + pointer-events: none !important; | |
| 528 | + transform: none !important; | |
| 529 | + transition: none !important; | |
| 530 | +} | |
| 531 | +.wpbc_bfb__drag-ghost.wpbc_bfb__drop-indicator > * { | |
| 532 | + display: none !important; | |
| 533 | +} | |
| 534 | + | |
| 535 | +/* Default ghost state before the stable insertion-line class is applied. */ | |
| 482 | 536 | .wpbc_bfb__drag-ghost { |
| 483 | 537 | opacity: .9 !important; |
| 484 | - min-height: 20px; | |
| 485 | 538 | width: 100%; |
| 486 | 539 | box-sizing: border-box; |
| 487 | 540 | } |
| 488 | 541 | |
| @@ -501,8 +554,9 @@ | ||
| 501 | 554 | pointer-events: none; |
| 502 | 555 | } |
| 503 | 556 | .wpbc_bfb__simple_list_fallback { |
| 504 | 557 | opacity: 0.85; |
| 558 | + padding: 10px !important; | |
| 505 | 559 | } |
| 506 | 560 | /* ================================================================================================== */ |
| 507 | 561 | /* Booking Form (Client) Overrides */ |
| 508 | 562 | /* Help: Make embedded client form respect builder widths & max-widths */ |
| @@ -593,8 +647,22 @@ | ||
| 593 | 647 | opacity: 0.95; |
| 594 | 648 | border: 1px solid var( --wpbc-bfb-accent-color, #327ab4 ); |
| 595 | 649 | } |
| 596 | 650 | |
| 651 | +/* Keep Builder-only drag and settings controls inside columns that establish an overflow clipping context. */ | |
| 652 | +.wpbc_bfb__column:is([style*="--wpbc-bfb-col-overflow:"], [style*="--wpbc-bfb-col-overflow-x:"], [style*="--wpbc-bfb-col-overflow-y:"]) | |
| 653 | + .wpbc_bfb__field > .wpbc_bfb__overlay-controls { | |
| 654 | + left: auto; | |
| 655 | + right: 2px; | |
| 656 | + top: 2px; | |
| 657 | + transform: none; | |
| 658 | +} | |
| 659 | +.wpbc_bfb__column:is([style*="--wpbc-bfb-col-overflow:"], [style*="--wpbc-bfb-col-overflow-x:"], [style*="--wpbc-bfb-col-overflow-y:"]) | |
| 660 | + .wpbc_bfb__section > .wpbc_bfb__overlay-controls { | |
| 661 | + top: 2px; | |
| 662 | + transform: translate(-50%, 0); | |
| 663 | +} | |
| 664 | + | |
| 597 | 665 | /* Buttons inside the overlay */ |
| 598 | 666 | .wpbc_bfb__pages_panel .wpbc_bfb__panel .wpbc_bfb__overlay-controls > * { |
| 599 | 667 | padding: 10px; |
| 600 | 668 | display: flex; |
| @@ -622,8 +690,44 @@ | ||
| 622 | 690 | } |
| 623 | 691 | .wpbc_bfb__overlay-controls button:hover { |
| 624 | 692 | opacity: 1; |
| 625 | 693 | } |
| 694 | +.wpbc_bfb__overlay-controls .wpbc_bfb__settings-btn { | |
| 695 | + transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, opacity 0.15s ease; | |
| 696 | +} | |
| 697 | +/* Ovveride and compensate padding of 10px in .wpbc_bfb__pages_panel .wpbc_bfb__panel .wpbc_bfb__overlay-controls > * */ | |
| 698 | +.wpbc_bfb__pages_panel .wpbc_bfb__panel .wpbc_bfb__overlay-controls .wpbc_bfb__settings-btn { | |
| 699 | + padding: 6px; | |
| 700 | + margin: 4px; | |
| 701 | + border-radius: 4px; | |
| 702 | +} | |
| 703 | +.wpbc_bfb__overlay-controls .wpbc_bfb__settings-btn:hover, | |
| 704 | +.wpbc_bfb__overlay-controls .wpbc_bfb__settings-btn:focus-visible { | |
| 705 | + background: #eef5ff; | |
| 706 | + border-color: var( --wpbc-bfb-accent-color, #327ab4 ); | |
| 707 | + color: var( --wpbc-bfb-accent-color, #327ab4 ); | |
| 708 | + opacity: 1; | |
| 709 | +} | |
| 710 | +.wpbc_bfb__overlay-controls .wpbc_bfb__settings-btn:hover .menu_icon, | |
| 711 | +.wpbc_bfb__overlay-controls .wpbc_bfb__settings-btn:focus-visible .menu_icon { | |
| 712 | + color: var( --wpbc-bfb-accent-color, #327ab4 ) !important; | |
| 713 | +} | |
| 714 | +.wpbc_bfb__overlay-controls .wpbc_bfb__settings-btn:focus-visible { | |
| 715 | + outline: 2px solid var( --wpbc-bfb-accent-color, #327ab4 ); | |
| 716 | + outline-offset: 2px; | |
| 717 | +} | |
| 718 | +.wpbc_bfb__overlay-controls .wpbc_bfb__settings-btn[aria-pressed="true"] { | |
| 719 | + background: var( --wpbc-bfb-accent-color, #327ab4 ); | |
| 720 | + border-color: var( --wpbc-bfb-accent-color, #327ab4 ); | |
| 721 | + box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.35 ); | |
| 722 | + color: #fff !important; | |
| 723 | + opacity: 1; | |
| 724 | +} | |
| 725 | +.wpbc_bfb__overlay-controls .wpbc_bfb__settings-btn[aria-pressed="true"] .menu_icon, | |
| 726 | +.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 .wpbc_bfb__overlay-controls .wpbc_bfb__settings-btn[aria-pressed="true"], | |
| 727 | +.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 .wpbc_bfb__overlay-controls .wpbc_bfb__settings-btn[aria-pressed="true"] .menu_icon { | |
| 728 | + color: #fff !important; | |
| 729 | +} | |
| 626 | 730 | .wpbc_bfb__overlay-controls button:last-child { |
| 627 | 731 | font-size: 8px; |
| 628 | 732 | font-weight: 600; |
| 629 | 733 | } |
| @@ -718,9 +822,9 @@ | ||
| 718 | 822 | html:not(.wpbc_bfb__dnd-active) .wpbc_bfb__section.is-selected .wpbc_bfb__column.is-selected-column { |
| 719 | 823 | background: repeating-linear-gradient(-45deg,#3874e921 1px 2px,#fff 3px 5px); |
| 720 | 824 | } |
| 721 | 825 | html:not(.wpbc_bfb__dnd-active) .wpbc_theme_dark_1 .wpbc_bfb__section.is-selected .wpbc_bfb__column { |
| 722 | - background: repeating-linear-gradient(-45deg,#626262 1px 4px,#4c4c4c 5px 7px); | |
| 826 | + background: repeating-linear-gradient(-45deg,#383a3d 1px 4px,#4c4c4c 5px 7px); | |
| 723 | 827 | } |
| 724 | 828 | html:not(.wpbc_bfb__dnd-active) .wpbc_theme_dark_1 .wpbc_bfb__section.is-selected .wpbc_bfb__column.is-selected-column { |
| 725 | 829 | background: repeating-linear-gradient(-45deg,#3c3d73 1px 4px,#4c4c4c 5px 7px); |
| 726 | 830 | } |
| @@ -784,14 +888,14 @@ | ||
| 784 | 888 | opacity: 1; |
| 785 | 889 | z-index: 999999; |
| 786 | 890 | pointer-events: none; /* don't accidentally interact with it */ |
| 787 | 891 | transition: none !important; /* avoid jank while mirror follows the cursor */ |
| 788 | - padding: 10px !important; | |
| 789 | - height: auto !important; | |
| 892 | + box-sizing: border-box !important; | |
| 893 | + padding: 0 !important; | |
| 790 | 894 | } |
| 791 | 895 | |
| 792 | 896 | /* Only when dragging from the Palette. - Under cursor, dragging element from palette. */ |
| 793 | -html.wpbc_bfb__dnd-active .wpbc_bfb__drag-active { | |
| 897 | +html.wpbc_bfb__drag-from-palette .wpbc_bfb__drag-active { | |
| 794 | 898 | max-width: max-content; |
| 795 | 899 | min-width: min-content !important; |
| 796 | 900 | width: 200px !important; |
| 797 | 901 | } |
| @@ -800,9 +904,9 @@ | ||
| 800 | 904 | /* Example: smaller, badge-like; tweak */ |
| 801 | 905 | border: 1px dashed rgba(0, 0, 0, .25); |
| 802 | 906 | background: #f7f7f7; |
| 803 | 907 | border-radius: 8px; |
| 804 | - padding: 6px 10px; | |
| 908 | + padding: 6px 10px !important; | |
| 805 | 909 | max-width: 320px; /* Optional: fixed dimensions for consistency */ |
| 806 | 910 | } |
| 807 | 911 | /* Dim the source tile in the palette while dragging: */ |
| 808 | 912 | .wpbc_bfb__panel_field_types__ul .wpbc_bfb__highlight { /* chosenClass */ |
| @@ -899,8 +1003,158 @@ | ||
| 899 | 1003 | .wpbc_bfb__inspector .wpbc_ui_el__horis_top_bar__wrapper { |
| 900 | 1004 | /*margin: 0;*/ |
| 901 | 1005 | } |
| 902 | 1006 | |
| 1007 | +/* Section column nested controls for spacing, size, and overflow. */ | |
| 1008 | +.wpbc_bfb__column_control_group { | |
| 1009 | + flex: 1 1 100%; | |
| 1010 | + margin: 4px 0 12px; | |
| 1011 | + min-width: 0; | |
| 1012 | + width: 100%; | |
| 1013 | +} | |
| 1014 | +.wpbc_bfb__column_control_heading_row, | |
| 1015 | +.wpbc_bfb__column_control_section_heading { | |
| 1016 | + align-items: center; | |
| 1017 | + display: flex; | |
| 1018 | + flex-flow: row nowrap; | |
| 1019 | + gap: 6px; | |
| 1020 | + justify-content: flex-start; | |
| 1021 | +} | |
| 1022 | +.wpbc_bfb__column_control_heading_row { | |
| 1023 | + margin-bottom: 4px; | |
| 1024 | +} | |
| 1025 | +.wpbc_bfb__column_control_heading { | |
| 1026 | + color: var(--wpbc_ui_horis_top_nav__a_color); | |
| 1027 | + font-size: 14px; | |
| 1028 | + margin: 0; | |
| 1029 | +} | |
| 1030 | +.wpbc_bfb__column_help { | |
| 1031 | + align-items: center; | |
| 1032 | + appearance: none; | |
| 1033 | + background: transparent; | |
| 1034 | + border: 0; | |
| 1035 | + box-shadow: none; | |
| 1036 | + color: var(--wpbc_ui_horis_top_nav__a_color); | |
| 1037 | + cursor: help; | |
| 1038 | + display: inline-flex; | |
| 1039 | + flex: 0 0 auto; | |
| 1040 | + font-size: 15px; | |
| 1041 | + height: 28px; | |
| 1042 | + justify-content: center; | |
| 1043 | + line-height: 1; | |
| 1044 | + margin: 0; | |
| 1045 | + padding: 0; | |
| 1046 | + width: 28px; | |
| 1047 | +} | |
| 1048 | +.wpbc_bfb__column_help:hover, | |
| 1049 | +.wpbc_bfb__column_help:focus-visible { | |
| 1050 | + color: var(--wpbc_ui_horis_top_nav__hover_color); | |
| 1051 | +} | |
| 1052 | +.wpbc_bfb__column_help:focus-visible { | |
| 1053 | + border-radius: 3px; | |
| 1054 | + outline: 2px solid var(--wpbc_ui_horis_top_nav__hover_color); | |
| 1055 | + outline-offset: 1px; | |
| 1056 | +} | |
| 1057 | +.wpbc_bfb__column_control_tablist { | |
| 1058 | + border-bottom: 1px solid var(--wpbc_ui_horis_top_nav__normal_color); | |
| 1059 | + display: grid; | |
| 1060 | + grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| 1061 | + width: 100%; | |
| 1062 | +} | |
| 1063 | +[data-column-control-tabs="size"] > .wpbc_bfb__column_control_tablist { | |
| 1064 | + grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| 1065 | +} | |
| 1066 | +.wpbc_bfb__column_control_tab { | |
| 1067 | + align-items: center; | |
| 1068 | + appearance: none; | |
| 1069 | + background: transparent; | |
| 1070 | + border: 0; | |
| 1071 | + border-bottom: 2px solid transparent; | |
| 1072 | + border-radius: 0; | |
| 1073 | + box-shadow: none; | |
| 1074 | + color: var(--wpbc_ui_horis_top_nav__a_color); | |
| 1075 | + cursor: pointer; | |
| 1076 | + display: inline-flex; | |
| 1077 | + font-weight: 600; | |
| 1078 | + gap: 5px; | |
| 1079 | + justify-content: center; | |
| 1080 | + margin: 0 0 -1px; | |
| 1081 | + min-width: 0; | |
| 1082 | + padding: 9px 4px; | |
| 1083 | +} | |
| 1084 | +.wpbc_bfb__column_control_tab:hover, | |
| 1085 | +.wpbc_bfb__column_control_tab:focus-visible { | |
| 1086 | + border-bottom-color: var(--wpbc_ui_horis_top_nav__hover_color); | |
| 1087 | + color: var(--wpbc_ui_horis_top_nav__hover_color); | |
| 1088 | +} | |
| 1089 | +.wpbc_bfb__column_control_tab:focus-visible { | |
| 1090 | + outline: 2px solid var(--wpbc_ui_horis_top_nav__hover_color); | |
| 1091 | + outline-offset: -2px; | |
| 1092 | +} | |
| 1093 | +.wpbc_bfb__column_control_tab[aria-selected="true"] { | |
| 1094 | + border-bottom-color: var(--wpbc_ui_horis_top_nav__active_color); | |
| 1095 | + color: var(--wpbc_ui_horis_top_nav__active_color); | |
| 1096 | +} | |
| 1097 | +.wpbc_bfb__column_control_tab_marker { | |
| 1098 | + background: currentColor; | |
| 1099 | + border-radius: 50%; | |
| 1100 | + flex: 0 0 6px; | |
| 1101 | + height: 6px; | |
| 1102 | + width: 6px; | |
| 1103 | +} | |
| 1104 | +.wpbc_bfb__column_control_panel { | |
| 1105 | + padding-top: 10px; | |
| 1106 | +} | |
| 1107 | +.wpbc_bfb__column_control_panel > .wpbc_len_group { | |
| 1108 | + width: 100%; | |
| 1109 | +} | |
| 1110 | +.wpbc_bfb__column_control_panel > .wpbc_len_group > .wpbc_inline_inputs { | |
| 1111 | + display: flex; | |
| 1112 | + flex-flow: row nowrap; | |
| 1113 | + gap: 5px; | |
| 1114 | + margin: 5px 0; | |
| 1115 | + width: 100%; | |
| 1116 | +} | |
| 1117 | +.wpbc_bfb__column_panel_reset { | |
| 1118 | + display: flex; | |
| 1119 | + justify-content: center; | |
| 1120 | + margin-top: 5px; | |
| 1121 | + width: 100%; | |
| 1122 | +} | |
| 1123 | +.wpbc_bfb__column_reset_link { | |
| 1124 | + appearance: none; | |
| 1125 | + background: transparent; | |
| 1126 | + border: 0; | |
| 1127 | + box-shadow: none; | |
| 1128 | + color: var(--wpbc-bfb-accent-color, #2271b1); | |
| 1129 | + cursor: pointer; | |
| 1130 | + display: block; | |
| 1131 | + font-size: 12px; | |
| 1132 | + line-height: 1.5; | |
| 1133 | + margin: 5px auto 0; | |
| 1134 | + padding: 2px 5px; | |
| 1135 | + text-decoration: underline; | |
| 1136 | + text-underline-offset: 2px; | |
| 1137 | +} | |
| 1138 | +.wpbc_bfb__column_reset_link:hover, | |
| 1139 | +.wpbc_bfb__column_reset_link:focus-visible { | |
| 1140 | + color: var(--wpbc_ui_horis_top_nav__hover_color); | |
| 1141 | + text-decoration-thickness: 2px; | |
| 1142 | +} | |
| 1143 | +.wpbc_bfb__column_reset_link:focus-visible { | |
| 1144 | + border-radius: 3px; | |
| 1145 | + outline: 2px solid var(--wpbc_ui_horis_top_nav__hover_color); | |
| 1146 | + outline-offset: 1px; | |
| 1147 | +} | |
| 1148 | +.wpbc_bfb__column_reset_all, | |
| 1149 | +.wpbc_bfb__column_reset_all .inspector__control { | |
| 1150 | + display: flex; | |
| 1151 | + justify-content: center; | |
| 1152 | +} | |
| 1153 | +.wpbc_bfb__column_reset_all .inspector__control { | |
| 1154 | + flex: 0 1 auto; | |
| 1155 | +} | |
| 1156 | + | |
| 903 | 1157 | .inspector__row { |
| 904 | 1158 | display: flex; |
| 905 | 1159 | flex-flow: row wrap; |
| 906 | 1160 | justify-content: flex-start; |
| @@ -934,74 +1188,74 @@ | ||
| 934 | 1188 | .inspector__select { |
| 935 | 1189 | line-height: 2.4; |
| 936 | 1190 | width: 100%; |
| 937 | 1191 | } |
| 938 | -.inspector__input--readonly { | |
| 939 | - background: #f6f7f7; | |
| 940 | - color: #6c7781; | |
| 941 | - cursor: not-allowed; | |
| 942 | -} | |
| 943 | - | |
| 944 | -.wpbc_bfb_style_choice_grid { | |
| 945 | - display: grid; | |
| 946 | - gap: 8px; | |
| 947 | - grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| 948 | -} | |
| 949 | - | |
| 950 | -.wpbc_bfb_style_choice_grid .wpbc_theme_choice { | |
| 951 | - align-items: flex-start; | |
| 952 | - background: #fff; | |
| 953 | - border: 1px solid #dfe4ea; | |
| 954 | - border-radius: 6px; | |
| 955 | - box-sizing: border-box; | |
| 956 | - cursor: pointer; | |
| 957 | - display: flex; | |
| 958 | - gap: 8px; | |
| 959 | - min-height: 54px; | |
| 960 | - padding: 9px; | |
| 961 | -} | |
| 962 | - | |
| 963 | -.wpbc_bfb_style_choice_grid .wpbc_theme_choice input { | |
| 964 | - height: 1px; | |
| 965 | - margin: 0; | |
| 966 | - opacity: 0; | |
| 967 | - position: absolute; | |
| 968 | - width: 1px; | |
| 969 | -} | |
| 970 | - | |
| 971 | -.wpbc_bfb_style_choice_grid .wpbc_theme_choice.is-selected, | |
| 972 | -.wpbc_bfb_style_choice_grid .wpbc_theme_choice:has(input:checked) { | |
| 973 | - border-color: var(--wpbc-bfb-accent-color, #327ab4); | |
| 974 | - box-shadow: 0 0 0 1px var(--wpbc-bfb-accent-color, #327ab4); | |
| 975 | -} | |
| 976 | - | |
| 977 | -.wpbc_bfb_style_choice_grid .wpbc_theme_choice_swatch { | |
| 978 | - border: 1px solid #cbd5e1; | |
| 979 | - border-radius: 6px; | |
| 980 | - box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.45); | |
| 981 | - flex: 0 0 auto; | |
| 982 | - height: 24px; | |
| 983 | - width: 24px; | |
| 984 | -} | |
| 985 | - | |
| 986 | -.wpbc_bfb_style_choice_grid .wpbc_theme_choice_swatch_light_bordered { background: #fff; border-color: #aeb8c4; } | |
| 987 | -.wpbc_bfb_style_choice_grid .wpbc_theme_choice_swatch_light_none { background: linear-gradient(135deg, #fff 0%, #fff 50%, #eef2f6 50%, #eef2f6 100%); border-color: transparent; box-shadow: inset 0 0 0 1px #d9e1ea; } | |
| 988 | -.wpbc_bfb_style_choice_grid .wpbc_theme_choice_swatch_light_soft { background: #f8fafc; border-color: #d8dee6; } | |
| 989 | -.wpbc_bfb_style_choice_grid .wpbc_theme_choice_swatch_dark_bordered { background: #111827; border-color: #334155; } | |
| 990 | -.wpbc_bfb_style_choice_grid .wpbc_theme_choice_swatch_dark_none { background: linear-gradient(135deg, #111827 0%, #111827 50%, #334155 50%, #334155 100%); border-color: transparent; box-shadow: inset 0 0 0 1px #475569; } | |
| 991 | -.wpbc_bfb_style_choice_grid .wpbc_theme_choice_swatch_dark_soft { background: #1f2937; border-color: #475569; } | |
| 992 | -.wpbc_bfb_style_choice_grid .wpbc_theme_choice_swatch_custom { background: linear-gradient(135deg, #fff 0%, #fff 30%, #2271b1 30%, #2271b1 62%, #111827 62%, #111827 100%); border-color: #8aa6c3; } | |
| 993 | - | |
| 994 | -.wpbc_bfb_style_choice_grid .wpbc_theme_choice_label { | |
| 995 | - color: #1d2327; | |
| 996 | - font-size: 13px; | |
| 997 | - font-weight: 600; | |
| 998 | - line-height: 1.2; | |
| 999 | - overflow-wrap: anywhere; | |
| 1000 | -} | |
| 1001 | -.wpbc_bfb__inspector__empty { | |
| 1002 | - color: #a67345; | |
| 1003 | - font-size: 17px; | |
| 1192 | +.inspector__input--readonly { | |
| 1193 | + background: #f6f7f7; | |
| 1194 | + color: #6c7781; | |
| 1195 | + cursor: not-allowed; | |
| 1196 | +} | |
| 1197 | + | |
| 1198 | +.wpbc_bfb_style_choice_grid { | |
| 1199 | + display: grid; | |
| 1200 | + gap: 8px; | |
| 1201 | + grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| 1202 | +} | |
| 1203 | + | |
| 1204 | +.wpbc_bfb_style_choice_grid .wpbc_theme_choice { | |
| 1205 | + align-items: flex-start; | |
| 1206 | + background: #fff; | |
| 1207 | + border: 1px solid #dfe4ea; | |
| 1208 | + border-radius: 6px; | |
| 1209 | + box-sizing: border-box; | |
| 1210 | + cursor: pointer; | |
| 1211 | + display: flex; | |
| 1212 | + gap: 8px; | |
| 1213 | + min-height: 54px; | |
| 1214 | + padding: 9px; | |
| 1215 | +} | |
| 1216 | + | |
| 1217 | +.wpbc_bfb_style_choice_grid .wpbc_theme_choice input { | |
| 1218 | + height: 1px; | |
| 1219 | + margin: 0; | |
| 1220 | + opacity: 0; | |
| 1221 | + position: absolute; | |
| 1222 | + width: 1px; | |
| 1223 | +} | |
| 1224 | + | |
| 1225 | +.wpbc_bfb_style_choice_grid .wpbc_theme_choice.is-selected, | |
| 1226 | +.wpbc_bfb_style_choice_grid .wpbc_theme_choice:has(input:checked) { | |
| 1227 | + border-color: var(--wpbc-bfb-accent-color, #327ab4); | |
| 1228 | + box-shadow: 0 0 0 1px var(--wpbc-bfb-accent-color, #327ab4); | |
| 1229 | +} | |
| 1230 | + | |
| 1231 | +.wpbc_bfb_style_choice_grid .wpbc_theme_choice_swatch { | |
| 1232 | + border: 1px solid #cbd5e1; | |
| 1233 | + border-radius: 6px; | |
| 1234 | + box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.45); | |
| 1235 | + flex: 0 0 auto; | |
| 1236 | + height: 24px; | |
| 1237 | + width: 24px; | |
| 1238 | +} | |
| 1239 | + | |
| 1240 | +.wpbc_bfb_style_choice_grid .wpbc_theme_choice_swatch_light_bordered { background: #fff; border-color: #aeb8c4; } | |
| 1241 | +.wpbc_bfb_style_choice_grid .wpbc_theme_choice_swatch_light_none { background: linear-gradient(135deg, #fff 0%, #fff 50%, #eef2f6 50%, #eef2f6 100%); border-color: transparent; box-shadow: inset 0 0 0 1px #d9e1ea; } | |
| 1242 | +.wpbc_bfb_style_choice_grid .wpbc_theme_choice_swatch_light_soft { background: #f8fafc; border-color: #d8dee6; } | |
| 1243 | +.wpbc_bfb_style_choice_grid .wpbc_theme_choice_swatch_dark_bordered { background: #111827; border-color: #334155; } | |
| 1244 | +.wpbc_bfb_style_choice_grid .wpbc_theme_choice_swatch_dark_none { background: linear-gradient(135deg, #111827 0%, #111827 50%, #334155 50%, #334155 100%); border-color: transparent; box-shadow: inset 0 0 0 1px #475569; } | |
| 1245 | +.wpbc_bfb_style_choice_grid .wpbc_theme_choice_swatch_dark_soft { background: #1f2937; border-color: #475569; } | |
| 1246 | +.wpbc_bfb_style_choice_grid .wpbc_theme_choice_swatch_custom { background: linear-gradient(135deg, #fff 0%, #fff 30%, #2271b1 30%, #2271b1 62%, #111827 62%, #111827 100%); border-color: #8aa6c3; } | |
| 1247 | + | |
| 1248 | +.wpbc_bfb_style_choice_grid .wpbc_theme_choice_label { | |
| 1249 | + color: #1d2327; | |
| 1250 | + font-size: 13px; | |
| 1251 | + font-weight: 600; | |
| 1252 | + line-height: 1.2; | |
| 1253 | + overflow-wrap: anywhere; | |
| 1254 | +} | |
| 1255 | +.wpbc_bfb__inspector__empty { | |
| 1256 | + color: #a67345; | |
| 1257 | + font-size: 17px; | |
| 1004 | 1258 | padding: 6px; |
| 1005 | 1259 | display: flex; |
| 1006 | 1260 | flex-flow: column; |
| 1007 | 1261 | justify-content: center; |
| @@ -1009,29 +1263,8 @@ | ||
| 1009 | 1263 | align-self: stretch; |
| 1010 | 1264 | min-height: 50px; |
| 1011 | 1265 | font-weight: 600; |
| 1012 | 1266 | } |
| 1013 | -/* Sizes*/ | |
| 1014 | -.inspector__row .inspector__w_10 { flex-basis: 10%; } | |
| 1015 | -.inspector__row .inspector__w_20 { flex-basis: 20%; } | |
| 1016 | -.inspector__row .inspector__w_30 { flex-basis: 30%; } | |
| 1017 | -.inspector__row .inspector__w_40 { flex-basis: 40%; } | |
| 1018 | -.inspector__row .inspector__w_50 { flex-basis: 50%; } | |
| 1019 | -.inspector__row .inspector__w_60 { flex-basis: 60%; } | |
| 1020 | -.inspector__row .inspector__w_70 { flex-basis: 70%; } | |
| 1021 | -.inspector__row .inspector__w_80 { flex-basis: 80%; } | |
| 1022 | -.inspector__row .inspector__w_90 { flex-basis: 90%; } | |
| 1023 | -.inspector__row .inspector__w_100 { flex-basis: 100%; } | |
| 1024 | -.inspector__row .inspector__w_05 { flex-basis: 5%; } | |
| 1025 | -.inspector__row .inspector__w_15 { flex-basis: 15%; } | |
| 1026 | -.inspector__row .inspector__w_25 { flex-basis: 25%; } | |
| 1027 | -.inspector__row .inspector__w_35 { flex-basis: 35%; } | |
| 1028 | -.inspector__row .inspector__w_45 { flex-basis: 45%; } | |
| 1029 | -.inspector__row .inspector__w_55 { flex-basis: 55%; } | |
| 1030 | -.inspector__row .inspector__w_65 { flex-basis: 65%; } | |
| 1031 | -.inspector__row .inspector__w_75 { flex-basis: 75%; } | |
| 1032 | -.inspector__row .inspector__w_85 { flex-basis: 85%; } | |
| 1033 | -.inspector__row .inspector__w_95 { flex-basis: 95%; } | |
| 1034 | 1267 | |
| 1035 | 1268 | .inspector__row .wpbc_inline_inputs { |
| 1036 | 1269 | display: flex; |
| 1037 | 1270 | flex-flow: row nowrap; |
| @@ -1195,8 +1428,11 @@ | ||
| 1195 | 1428 | opacity: 0; |
| 1196 | 1429 | animation: .48s ease-out both wpbc-bfb-ping |
| 1197 | 1430 | } |
| 1198 | 1431 | @media (prefers-reduced-motion: reduce) { |
| 1432 | + .wpbc_bfb__overlay-controls .wpbc_bfb__settings-btn { | |
| 1433 | + transition: none; | |
| 1434 | + } | |
| 1199 | 1435 | .wpbc_bfb__highlight-pulse { |
| 1200 | 1436 | animation: none; |
| 1201 | 1437 | outline: 3px solid var(--wpbc-bfb-pulse-color); |
| 1202 | 1438 | outline-offset: 8px |
| @@ -1415,8 +1651,11 @@ | ||
| 1415 | 1651 | font-size: 10px; |
| 1416 | 1652 | font-weight: 400; |
| 1417 | 1653 | margin-inline-start: 1em; |
| 1418 | 1654 | align-items: center; |
| 1655 | + white-space: nowrap; | |
| 1656 | + max-width: 10em; | |
| 1657 | + overflow: hidden; | |
| 1419 | 1658 | } |
| 1420 | 1659 | .wpbc_bfb__live_status__builder { color: #619d40; } |
| 1421 | 1660 | .wpbc_bfb__live_status__advanced { color: #b97131; } |
| 1422 | 1661 | /* == Top Toolbar - Form Name|Title. ============================================================================== */ |
| @@ -1692,9 +1931,10 @@ | ||
| 1692 | 1931 | height: 50px; |
| 1693 | 1932 | object-fit: cover; |
| 1694 | 1933 | border-radius: 3px; |
| 1695 | 1934 | border: 0; |
| 1696 | - background: #fff | |
| 1935 | + background: #fff; | |
| 1936 | + object-position: 0% 30%; | |
| 1697 | 1937 | } |
| 1698 | 1938 | .wpbc_bfb__load_form_item_text { |
| 1699 | 1939 | flex: 1 1 auto; |
| 1700 | 1940 | min-width: 0; |
| @@ -1891,5 +2131,11 @@ | ||
| 1891 | 2131 | width: 100%; |
| 1892 | 2132 | min-height: 350px; |
| 1893 | 2133 | font-family: monospace; |
| 1894 | 2134 | font-size: 12px; |
| 2135 | +} | |
| 2136 | + | |
| 2137 | +/* Prevent showing some messages in the WP Booking Calendar > Settings > Forms Builder page: */ | |
| 2138 | +.wpbc_admin_page__tab__builder_booking_form .wpbc_header_news, | |
| 2139 | +.wpbc_admin_page__tab__builder_booking_form div.wpbc_inner_message.wpbc_booking_modes_quickstart_notice { | |
| 2140 | + display:none; | |
| 1895 | 2141 | } |