← All changes | css/admin/style.css +124 -5 6.4 → 6.0 View file →

		@@ -6,8 +6,21 @@
6	6	display: flex;
7	7	flex-direction: row;
8	8	}
9	9
	10	+#frm_style_sidebar,
	11	+#frm_style_preview {
	12	+ height: calc( 100vh - 95px );
	13	+ box-sizing: border-box;
	14	+ position: relative;
	15	+}
	16	+
	17	+#frm_style_sidebar {
	18	+ vertical-align: top;
	19	+ box-sizing: border-box;
	20	+ overflow-y: auto;
	21	+}
	22	+
10	23	#frm_style_sidebar .frm-inner-content {
11	24	padding-left: 0;
12	25	padding-right: 0;
13	26	padding-bottom: 0;
		@@ -22,8 +35,15 @@
22	35	right: 0;
23	36	color: var(--grey-400);
24	37	}
25	38
	39	+#frm_style_preview {
	40	+ overflow-y: auto;
	41	+ overflow-x: hidden;
	42	+ flex: 2;
	43	+ border-left: 1px solid var(--sidebar-hover);
	44	+}
	45	+
26	46	#frm_active_style_form:not(.frm_hidden) ~ #frm_sample_form,
27	47	.frm-style-card-info {
28	48	display: none;
29	49	}
		@@ -202,8 +222,86 @@
202	222	.styling_settings .frm_image_preview_wrapper .frm_choose_image_box {
203	223	margin-left: 0;
204	224	}
205	225
	226	+/* Color picker CSS */
	227	+#frm_style_sidebar .wp-picker-open + .wp-picker-input-wrap {
	228	+ position: absolute;
	229	+ margin-left: calc( ( 100% - 35px ) * -1 );
	230	+ margin-top: 1px;
	231	+ width: calc( 100% - 36px );
	232	+}
	233	+
	234	+#frm_style_sidebar .wp-picker-container input[type="text"].wp-color-picker {
	235	+ border: none;
	236	+ padding: 5px 8px;
	237	+ font-family: inherit;
	238	+ color: var(--grey-700);
	239	+ font-size: var(--text-md);
	240	+ width: 100%;
	241	+ line-height: var(--leading);
	242	+}
	243	+
	244	+#frm_style_sidebar .wp-picker-input-wrap .wp-picker-clear {
	245	+ display: none !important;
	246	+}
	247	+
	248	+#frm_style_sidebar .wp-picker-holder {
	249	+ position: absolute;
	250	+ z-index: 999;
	251	+}
	252	+
	253	+#frm_style_sidebar .wp-picker-input-wrap label {
	254	+ margin-bottom: 0;
	255	+}
	256	+
	257	+#frm_style_sidebar .wp-picker-container .wp-color-result.button {
	258	+ width: 100%;
	259	+ overflow: hidden;
	260	+ margin: 0 !important;
	261	+ height: var(--h-md) !important;
	262	+ padding: 0 0 0 var(--gap-lg) !important;
	263	+ border-radius: var(--small-radius);
	264	+ border-color: var(--grey-300);
	265	+}
	266	+
	267	+#frm_style_sidebar .wp-color-result-text {
	268	+ line-height: var(--leading) !important;
	269	+ font-size: var(--text-md);
	270	+ background: #fff !important;
	271	+ color: var(--grey-900);
	272	+ padding: 5px 8px;
	273	+ border-color: var(--grey-300);
	274	+ text-align: left;
	275	+}
	276	+
	277	+#frm_style_sidebar .color-alpha {
	278	+ width: var(--gap-lg) !important;
	279	+}
	280	+
	281	+.frm_grid_container .wp-picker-container {
	282	+ width: 100%;
	283	+ position: relative;
	284	+}
	285	+
	286	+.wp-picker-container button.wp-color-result {
	287	+ border: 1px solid var(--grey-300) !important;
	288	+}
	289	+
	290	+.wp-picker-container .wp-picker-input-wrap input.hex.wp-color-picker {
	291	+ max-width: 100%;
	292	+ position: relative;
	293	+}
	294	+
	295	+.frm_end .wp-picker-holder {
	296	+ margin-left: -145px;
	297	+}
	298	+
	299	+.frm_end.frm6 .wp-picker-holder {
	300	+ margin-left: -86px;
	301	+}
	302	+/* End of color picker CSS */
	303	+
206	304	.ui-datepicker-inline.ui-datepicker {
207	305	max-width: 19em;
208	306	}
209	307
		@@ -341,9 +439,8 @@
341	439	.frm-input-style-example {
342	440	border-width: var(--field-border-width);
343	441	border-style: var(--field-border-style);
344	442	border-color: var(--border-color);
345		- border-radius: var(--border-radius);
346	443	background-color: var(--bg-color);
347	444	max-width: 138px;
348	445	width: 100%;
349	446	height: 16px;
		@@ -392,12 +489,11 @@
392	489	#frm_style_template_modal .frm_warning_style a:focus {
393	490	box-shadow: none;
394	491	}
395	492
396		-/* Break the new style trigger into a separate line on small screens to avoid overlapping with the Enable Formidable styling toggle. */
397		-#frm_style_sidebar > .frm-flex-justify {
398		- gap: var(--gap-sm);
399		- flex-wrap: wrap;
	493	+#frm_new_style_trigger_wrapper {
	494	+ position: absolute;
	495	+ right: 15px;
400	496	}
401	497
402	498	/* RTL Styling */
403	499	body.rtl #frm_toggle_sample_form {
		@@ -404,8 +500,13 @@
404	500	right: unset;
405	501	left: 40px;
406	502	}
407	503
	504	+body.rtl #frm_new_style_trigger_wrapper {
	505	+ right: unset;
	506	+ left: 15px;
	507	+}
	508	+
408	509	body.rtl .frm-input-style-example {
409	510	padding-left: 0;
410	511	padding-right: 10px;
411	512	}
		@@ -420,8 +521,26 @@
420	521	.frm-styles-globally-disabled .frm_on_label,
421	522	.frm-styles-globally-disabled ~ #frm_style_preview #frm_edit_style {
422	523	pointer-events: none;
423	524	opacity: 0.5;
	525	+}
	526	+
	527	+@media only screen and (max-width: 1200px) {
	528	+ /* Adjust the height to account for the taller header when the tabs drop to a second line. */
	529	+ #frm_style_sidebar,
	530	+ #frm_style_preview {
	531	+ height: calc( 100vh - 135px );
	532	+ }
	533	+}
	534	+
	535	+@media only screen and (max-width: 900px) {
	536	+ /* Break the new style trigger into a separate line to avoid overlapping with the Enable Formidable styling toggle. */
	537	+ #frm_new_style_trigger_wrapper {
	538	+ position: static;
	539	+ display: flex;
	540	+ justify-content: flex-end;
	541	+ margin-bottom: 10px;
	542	+ }
424	543	}
425	544
426	545	@media only screen and (max-width: 782px) {
427	546	#frm_style_preview .with_frm_style .frm_radio input[type=radio],