← All changes | css/admin/style.css +23 -124 6.25 → 6.2 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.
		@@ -240,11 +253,9 @@
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.
242	255	This needs to be important because of a background-image: none !important rule that gets applied in front end CSS.
243	256	*/
244		- background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') !important;
245		- background-repeat: no-repeat !important;
246		- background-position: right 5px top 55% !important;
	257	+ background: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') no-repeat right 5px top 55% !important;
247	258
248	259	padding-right: 24px; /* Add enough padding for the icon. */
249	260	}
250	261
		@@ -263,9 +274,9 @@
263	274	Avoid a conflict with the .frm_form_field > label:first-child rule in frm_admin.css
264	275	The label in the preview should use the label color setting.
265	276	*/
266	277	#frm_style_preview .frm_form_field > label:first-child {
267		- color: var(--label-color);
	278	+ color: var(--label-color);
268	279	font-size: var(--font-size);
269	280	}
270	281
271	282	.frm-color-blocks {
		@@ -294,8 +305,9 @@
294	305	#frm_styling_form p > a svg {
295	306	position: relative;
296	307	bottom: 2px;
297	308	}
	309	+
298	310	.frm-style-card-separator {
299	311	background-color: var(--grey-300);
300	312	width: 2px;
301	313	height: 20px;
		@@ -329,9 +341,8 @@
329	341	.frm-input-style-example {
330	342	border-width: var(--field-border-width);
331	343	border-style: var(--field-border-style);
332	344	border-color: var(--border-color);
333		- border-radius: var(--border-radius);
334	345	background-color: var(--bg-color);
335	346	max-width: 138px;
336	347	width: 100%;
337	348	height: 16px;
		@@ -349,8 +360,9 @@
349	360	}
350	361
351	362	#frm_loading_style_placeholder,
352	363	#frm_style_preview.frm-loading-style-template .frm_forms,
	364	+#frm_default_style_cards_wrapper .dropdown-item.frm-apply-style,
353	365	.frm-currently-set-style-card .dropdown-item.frm-apply-style
354	366	{
355	367	display: none;
356	368	}
		@@ -409,121 +421,8 @@
409	421	pointer-events: none;
410	422	opacity: 0.5;
411	423	}
412	424
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	425	@media only screen and (max-width: 782px) {
527	426	#frm_style_preview .with_frm_style .frm_radio input[type=radio],
528	427	#frm_style_preview .with_frm_style .frm_checkbox input[type=checkbox] {
529	428	width: 18px !important;