← All changes | css/admin/style.css +22 -120 6.28 → 6.8 View file →

		@@ -12,8 +12,13 @@
12	12	padding-right: 0;
13	13	padding-bottom: 0;
14	14	}
15	15
	16	+#frm_style_sidebar .control-section:hover .accordion-section-title {
	17	+ /* Normally an accordion has a white background but this doesn't look great with the padding on the accordion. */
	18	+ background-color: transparent !important;
	19	+}
	20	+
16	21	#frm_style_sidebar .accordion-section-title::after {
17	22	right: 0;
18	23	color: var(--grey-400);
19	24	}
		@@ -157,13 +162,12 @@
157	162	cursor: pointer;
158	163	font-weight: 400;
159	164
160	165	/*
161		- When a background image is set the children in the fieldset have a z-index of 1.
162		- The Ranking Field contains elements with a higher z-index of 2.
163		- Set to 3 so the floating buttons get priority when clicking if they overlap a form element.
	166	+ When a background image is set the children in the fieldset have a z-index of 1.\
	167	+ Set to 2 so the floating buttons get priority when clicking if they overlap a form element.
164	168	*/
165		- z-index: 3;
	169	+ z-index: 2;
166	170	}
167	171
168	172	#frm_style_preview .frm_floating_style_button.frm_hidden {
169	173	display: none;
		@@ -223,9 +227,18 @@
223	227	/* The long "Reset to defaults" option name requires extra space. There's normally a 160px min-width. */
224	228	min-width: 200px;
225	229	}
226	230
227		-#frm_style_preview .with_frm_style :not(.ui-datepicker-title) > select:not(.flatpickr-monthDropdown-months) {
	231	+/*
	232	+Do not set this for frm_inside_container as it requires a custom line height value.
	233	+Target .frm_primary_label so we avoid other labels like star rating stars.
	234	+Time fields use a div instead of a label, so don't target by the primary label by tag type.
	235	+*/
	236	+#frm_style_preview .frm_form_field:not(.frm_inside_container) > .frm_primary_label {
	237	+ line-height: var(--line-height);
	238	+}
	239	+
	240	+#frm_style_preview .with_frm_style :not(.ui-datepicker-title) > select {
228	241	/* Prevent back end styles from shrinking dropdowns. But leave datepicker dropdowns alone. */
229	242	width: var(--auto-width);
230	243	max-width: 100%;
231	244	}
		@@ -233,9 +246,9 @@
233	246	#frm_style_preview select {
234	247	appearance: none; /* Hide the default icon */
235	248	}
236	249
237		-#frm_style_preview select:not(.ui-datepicker-month):not(.ui-datepicker-year):not(.frm-ranking-position) {
	250	+#frm_style_preview select:not(.ui-datepicker-month):not(.ui-datepicker-year) {
238	251	/*
239	252	The styler preview doesn't use .wp-core-ui which results in a funny looking dropdown arrow.
240	253	Restore the WordPress background image defined in /wp-admin/css/forms.css for preview selects so they appear nicer and more consistent with other dropdowns.
241	254	The SVG is arrow-down-alt2 from Dashicons.
		@@ -263,9 +276,9 @@
263	276	Avoid a conflict with the .frm_form_field > label:first-child rule in frm_admin.css
264	277	The label in the preview should use the label color setting.
265	278	*/
266	279	#frm_style_preview .frm_form_field > label:first-child {
267		- color: var(--label-color);
	280	+ color: var(--label-color);
268	281	font-size: var(--font-size);
269	282	}
270	283
271	284	.frm-color-blocks {
		@@ -294,8 +307,9 @@
294	307	#frm_styling_form p > a svg {
295	308	position: relative;
296	309	bottom: 2px;
297	310	}
	311	+
298	312	.frm-style-card-separator {
299	313	background-color: var(--grey-300);
300	314	width: 2px;
301	315	height: 20px;
		@@ -349,8 +363,9 @@
349	363	}
350	364
351	365	#frm_loading_style_placeholder,
352	366	#frm_style_preview.frm-loading-style-template .frm_forms,
	367	+#frm_default_style_cards_wrapper .dropdown-item.frm-apply-style,
353	368	.frm-currently-set-style-card .dropdown-item.frm-apply-style
354	369	{
355	370	display: none;
356	371	}
		@@ -409,121 +424,8 @@
409	424	pointer-events: none;
410	425	opacity: 0.5;
411	426	}
412	427
413		-.formidable_page_formidable-styles .frm-right-panel .accordion-section-title:before,
414		-.formidable_page_formidable-styles .frm-right-panel .accordion-section-title:after {
415		- content: '' !important;
416		-}
417		-.formidable_page_formidable-styles .frm-right-panel .open .accordion-section-title > .frmsvg:last-child {
418		- transform: rotate(180deg);
419		-}
420		-.formidable_page_formidable-styles .frm-right-panel .accordion-section-title > .frmsvg:last-child {
421		- position: absolute;
422		- top: 0;
423		- bottom: 0;
424		- right: 0;
425		- margin: auto;
426		- color: var(--grey);
427		-}
428		-.control-section:hover .accordion-section-title {
429		- background: transparent !important;
430		- border-bottom-color: transparent;
431		-}
432		-.frm-style-settings-hover {
433		- width: 100%;
434		- position: absolute;
435		- top:0;
436		- left: 0;
437		- height: 58px;
438		- background: white;
439		- border-radius: var(--small-radius);
440		- box-shadow: var(--button-shadow);
441		- z-index: 0;
442		- transition: 0.25s opacity ease, 0.3s transform cubic-bezier(0.165, 0.84, 0.44, 1);
443		-}
444		-.frm-style-settings-hover.frm-animating {
445		- opacity: 0.45;
446		-}
447		-.frm-right-panel .accordion-section-content {
448		- background: transparent;
449		- padding: 0;
450		- overflow: initial;
451		-}
452		-
453		-.frm-right-panel .accordion-section-content > .inside {
454		- padding: 15px;
455		-}
456		-.frm-quick-settings .frm_form_field .frm-style-item-heading,
457		-.frm-right-panel .accordion-section-content > .inside .frm-style-item-heading {
458		- line-height: 36px;
459		-}
460		-.frm-right-panel .accordion-section-content > .inside .frm-style-item-heading .frm_help {
461		- display: inline-block;
462		- line-height: 13px;
463		-}
464		-
465		-.frm-right-panel .accordion-section-content .inside a {
466		- font-size: inherit;
467		-}
468		-.frm-right-panel .control-section.open h3 {
469		- border-bottom: none;
470		-}
471		-
472		-.js .frm-right-panel .control-section .accordion-section-title:focus,
473		-.js .frm-right-panel .control-section .accordion-section-title:hover {
474		- color: var(--grey-900);
475		-}
476		-.js .frm-right-panel .control-section.open h3.accordion-section-title {
477		- box-shadow: var(--button-shadow);
478		- background: white !important;
479		- border-radius: var(--small-radius);
480		-}
481		-
482		-.js .frm-right-panel .control-section .accordion-section-title:hover:before {
483		- color: var(--grey-700);
484		-}
485		-.frm-right-panel .accordion-section {
486		- border: none;
487		- position: relative;
488		- padding-bottom: 2px;
489		-}
490		-.frm-right-panel .accordion-section-title > .frmsvg:first-child {
491		- margin: 0 10px 0 0;
492		- color: var(--grey);
493		-}
494		-.frm-right-panel .accordion-section-title:hover > .frmsvg:first-child {
495		- color: var(--grey-900);
496		-}
497		-.frm-right-panel .accordion-section-title > .frmsvg:last-child {
498		- margin-right: 15px !important;
499		-}
500		-.frm-right-panel .open .accordion-section-title > .frmsvg:last-child {
501		- transform: rotate(180deg);
502		-}
503		-.frm-right-panel .open.accordion-section {
504		- border-bottom: 1px solid var(--grey-300);
505		-}
506		-.frm-right-panel h3.accordion-section-title {
507		- padding: 17px 15px !important;
508		- background: transparent;
509		- line-height: var(--leading);
510		- color: var(--grey-500);
511		- font-size: var(--text-md);
512		- font-weight: 400;
513		-}
514		-.styling_settings .accordion-container {
515		- position: relative;
516		-}
517		-.styling_settings .accordion-container .outer-border {
518		- position: relative;
519		- z-index: 1;
520		-}
521		-.styling_settings .accordion-section-title button {
522		- border: none;
523		- background: none;
524		- float: right;
525		-}
526	428	@media only screen and (max-width: 782px) {
527	429	#frm_style_preview .with_frm_style .frm_radio input[type=radio],
528	430	#frm_style_preview .with_frm_style .frm_checkbox input[type=checkbox] {
529	431	width: 18px !important;