← All changes
|
includes/page-form-builder/_src/builder-form-page.css
+276
-16
11.8
→
11.9
View file →
| @@ -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 | } |
| @@ -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; |
| @@ -1174,8 +1428,11 @@ | ||
| 1174 | 1428 | opacity: 0; |
| 1175 | 1429 | animation: .48s ease-out both wpbc-bfb-ping |
| 1176 | 1430 | } |
| 1177 | 1431 | @media (prefers-reduced-motion: reduce) { |
| 1432 | + .wpbc_bfb__overlay-controls .wpbc_bfb__settings-btn { | |
| 1433 | + transition: none; | |
| 1434 | + } | |
| 1178 | 1435 | .wpbc_bfb__highlight-pulse { |
| 1179 | 1436 | animation: none; |
| 1180 | 1437 | outline: 3px solid var(--wpbc-bfb-pulse-color); |
| 1181 | 1438 | outline-offset: 8px |
| @@ -1394,8 +1651,11 @@ | ||
| 1394 | 1651 | font-size: 10px; |
| 1395 | 1652 | font-weight: 400; |
| 1396 | 1653 | margin-inline-start: 1em; |
| 1397 | 1654 | align-items: center; |
| 1655 | + white-space: nowrap; | |
| 1656 | + max-width: 10em; | |
| 1657 | + overflow: hidden; | |
| 1398 | 1658 | } |
| 1399 | 1659 | .wpbc_bfb__live_status__builder { color: #619d40; } |
| 1400 | 1660 | .wpbc_bfb__live_status__advanced { color: #b97131; } |
| 1401 | 1661 | /* == Top Toolbar - Form Name|Title. ============================================================================== */ |
| @@ -1877,5 +2137,5 @@ | ||
| 1877 | 2137 | /* Prevent showing some messages in the WP Booking Calendar > Settings > Forms Builder page: */ |
| 1878 | 2138 | .wpbc_admin_page__tab__builder_booking_form .wpbc_header_news, |
| 1879 | 2139 | .wpbc_admin_page__tab__builder_booking_form div.wpbc_inner_message.wpbc_booking_modes_quickstart_notice { |
| 1880 | 2140 | display:none; |
| 1881 | -} | |
| 2141 | +} | |