← All changes | includes/page-form-builder/_src/builder-form-page.css +283 -37 11.5 → 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;
		@@ -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	}