← All changes | css/admin/style.css +123 -22 6.4 → 6.24.1 View file →

		@@ -12,13 +12,8 @@
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		-
21	16	#frm_style_sidebar .accordion-section-title::after {
22	17	right: 0;
23	18	color: var(--grey-400);
24	19	}
		@@ -162,12 +157,13 @@
162	157	cursor: pointer;
163	158	font-weight: 400;
164	159
165	160	/*
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.
	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.
168	164	*/
169		- z-index: 2;
	165	+ z-index: 3;
170	166	}
171	167
172	168	#frm_style_preview .frm_floating_style_button.frm_hidden {
173	169	display: none;
		@@ -227,18 +223,9 @@
227	223	/* The long "Reset to defaults" option name requires extra space. There's normally a 160px min-width. */
228	224	min-width: 200px;
229	225	}
230	226
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 {
	227	+#frm_style_preview .with_frm_style :not(.ui-datepicker-title) > select:not(.flatpickr-monthDropdown-months) {
241	228	/* Prevent back end styles from shrinking dropdowns. But leave datepicker dropdowns alone. */
242	229	width: var(--auto-width);
243	230	max-width: 100%;
244	231	}
		@@ -246,9 +233,9 @@
246	233	#frm_style_preview select {
247	234	appearance: none; /* Hide the default icon */
248	235	}
249	236
250		-#frm_style_preview select:not(.ui-datepicker-month):not(.ui-datepicker-year) {
	237	+#frm_style_preview select:not(.ui-datepicker-month):not(.ui-datepicker-year):not(.frm-ranking-position) {
251	238	/*
252	239	The styler preview doesn't use .wp-core-ui which results in a funny looking dropdown arrow.
253	240	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.
254	241	The SVG is arrow-down-alt2 from Dashicons.
		@@ -253,9 +240,11 @@
253	240	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.
254	241	The SVG is arrow-down-alt2 from Dashicons.
255	242	This needs to be important because of a background-image: none !important rule that gets applied in front end CSS.
256	243	*/
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;
	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;
258	247
259	248	padding-right: 24px; /* Add enough padding for the icon. */
260	249	}
261	250
		@@ -274,9 +263,9 @@
274	263	Avoid a conflict with the .frm_form_field > label:first-child rule in frm_admin.css
275	264	The label in the preview should use the label color setting.
276	265	*/
277	266	#frm_style_preview .frm_form_field > label:first-child {
278		- color: var(--label-color);
	267	+ color: var(--label-color);
279	268	font-size: var(--font-size);
280	269	}
281	270
282	271	.frm-color-blocks {
		@@ -305,9 +294,8 @@
305	294	#frm_styling_form p > a svg {
306	295	position: relative;
307	296	bottom: 2px;
308	297	}
309		-
310	298	.frm-style-card-separator {
311	299	background-color: var(--grey-300);
312	300	width: 2px;
313	301	height: 20px;
		@@ -422,8 +410,121 @@
422	410	pointer-events: none;
423	411	opacity: 0.5;
424	412	}
425	413
	414	+.formidable_page_formidable-styles .frm-right-panel .accordion-section-title:before,
	415	+.formidable_page_formidable-styles .frm-right-panel .accordion-section-title:after {
	416	+ content: '' !important;
	417	+}
	418	+.formidable_page_formidable-styles .frm-right-panel .open .accordion-section-title > .frmsvg:last-child {
	419	+ transform: rotate(180deg);
	420	+}
	421	+.formidable_page_formidable-styles .frm-right-panel .accordion-section-title > .frmsvg:last-child {
	422	+ position: absolute;
	423	+ top: 0;
	424	+ bottom: 0;
	425	+ right: 0;
	426	+ margin: auto;
	427	+ color: var(--grey);
	428	+}
	429	+.control-section:hover .accordion-section-title {
	430	+ background: transparent !important;
	431	+ border-bottom-color: transparent;
	432	+}
	433	+.frm-style-settings-hover {
	434	+ width: 100%;
	435	+ position: absolute;
	436	+ top:0;
	437	+ left: 0;
	438	+ height: 58px;
	439	+ background: white;
	440	+ border-radius: var(--small-radius);
	441	+ box-shadow: var(--button-shadow);
	442	+ z-index: 0;
	443	+ transition: 0.25s opacity ease, 0.3s transform cubic-bezier(0.165, 0.84, 0.44, 1);
	444	+}
	445	+.frm-style-settings-hover.frm-animating {
	446	+ opacity: 0.45;
	447	+}
	448	+.frm-right-panel .accordion-section-content {
	449	+ background: transparent;
	450	+ padding: 0;
	451	+ overflow: initial;
	452	+}
	453	+
	454	+.frm-right-panel .accordion-section-content > .inside {
	455	+ padding: 15px;
	456	+}
	457	+.frm-quick-settings .frm_form_field .frm-style-item-heading,
	458	+.frm-right-panel .accordion-section-content > .inside .frm-style-item-heading {
	459	+ line-height: 36px;
	460	+}
	461	+.frm-right-panel .accordion-section-content > .inside .frm-style-item-heading .frm_help {
	462	+ display: inline-block;
	463	+ line-height: 13px;
	464	+}
	465	+
	466	+.frm-right-panel .accordion-section-content .inside a {
	467	+ font-size: inherit;
	468	+}
	469	+.frm-right-panel .control-section.open h3 {
	470	+ border-bottom: none;
	471	+}
	472	+
	473	+.js .frm-right-panel .control-section .accordion-section-title:focus,
	474	+.js .frm-right-panel .control-section .accordion-section-title:hover {
	475	+ color: var(--grey-900);
	476	+}
	477	+.js .frm-right-panel .control-section.open h3.accordion-section-title {
	478	+ box-shadow: var(--button-shadow);
	479	+ background: white !important;
	480	+ border-radius: var(--small-radius);
	481	+}
	482	+
	483	+.js .frm-right-panel .control-section .accordion-section-title:hover:before {
	484	+ color: var(--grey-700);
	485	+}
	486	+.frm-right-panel .accordion-section {
	487	+ border: none;
	488	+ position: relative;
	489	+ padding-bottom: 2px;
	490	+}
	491	+.frm-right-panel .accordion-section-title > .frmsvg:first-child {
	492	+ margin: 0 10px 0 0;
	493	+ color: var(--grey);
	494	+}
	495	+.frm-right-panel .accordion-section-title:hover > .frmsvg:first-child {
	496	+ color: var(--grey-900);
	497	+}
	498	+.frm-right-panel .accordion-section-title > .frmsvg:last-child {
	499	+ margin-right: 15px !important;
	500	+}
	501	+.frm-right-panel .open .accordion-section-title > .frmsvg:last-child {
	502	+ transform: rotate(180deg);
	503	+}
	504	+.frm-right-panel .open.accordion-section {
	505	+ border-bottom: 1px solid var(--grey-300);
	506	+}
	507	+.frm-right-panel h3.accordion-section-title {
	508	+ padding: 17px 15px !important;
	509	+ background: transparent;
	510	+ line-height: var(--leading);
	511	+ color: var(--grey-500);
	512	+ font-size: var(--text-md);
	513	+ font-weight: 400;
	514	+}
	515	+.styling_settings .accordion-container {
	516	+ position: relative;
	517	+}
	518	+.styling_settings .accordion-container .outer-border {
	519	+ position: relative;
	520	+ z-index: 1;
	521	+}
	522	+.styling_settings .accordion-section-title button {
	523	+ border: none;
	524	+ background: none;
	525	+ float: right;
	526	+}
426	527	@media only screen and (max-width: 782px) {
427	528	#frm_style_preview .with_frm_style .frm_radio input[type=radio],
428	529	#frm_style_preview .with_frm_style .frm_checkbox input[type=checkbox] {
429	530	width: 18px !important;