← All changes | css/admin/style.css +118 -12 6.4 → 6.14 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;
		@@ -246,9 +242,9 @@
246	242	#frm_style_preview select {
247	243	appearance: none; /* Hide the default icon */
248	244	}
249	245
250		-#frm_style_preview select:not(.ui-datepicker-month):not(.ui-datepicker-year) {
	246	+#frm_style_preview select:not(.ui-datepicker-month):not(.ui-datepicker-year):not(.frm-ranking-position) {
251	247	/*
252	248	The styler preview doesn't use .wp-core-ui which results in a funny looking dropdown arrow.
253	249	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	250	The SVG is arrow-down-alt2 from Dashicons.
		@@ -253,9 +249,11 @@
253	249	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	250	The SVG is arrow-down-alt2 from Dashicons.
255	251	This needs to be important because of a background-image: none !important rule that gets applied in front end CSS.
256	252	*/
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;
	253	+ 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;
	254	+ background-repeat: no-repeat !important;
	255	+ background-position: right 5px top 55% !important;
258	256
259	257	padding-right: 24px; /* Add enough padding for the icon. */
260	258	}
261	259
		@@ -274,9 +272,9 @@
274	272	Avoid a conflict with the .frm_form_field > label:first-child rule in frm_admin.css
275	273	The label in the preview should use the label color setting.
276	274	*/
277	275	#frm_style_preview .frm_form_field > label:first-child {
278		- color: var(--label-color);
	276	+ color: var(--label-color);
279	277	font-size: var(--font-size);
280	278	}
281	279
282	280	.frm-color-blocks {
		@@ -305,9 +303,8 @@
305	303	#frm_styling_form p > a svg {
306	304	position: relative;
307	305	bottom: 2px;
308	306	}
309		-
310	307	.frm-style-card-separator {
311	308	background-color: var(--grey-300);
312	309	width: 2px;
313	310	height: 20px;
		@@ -422,8 +419,117 @@
422	419	pointer-events: none;
423	420	opacity: 0.5;
424	421	}
425	422
	423	+.formidable_page_formidable-styles .frm-right-panel .accordion-section-title:before,
	424	+.formidable_page_formidable-styles .frm-right-panel .accordion-section-title:after {
	425	+ content: '' !important;
	426	+}
	427	+.formidable_page_formidable-styles .frm-right-panel .open .accordion-section-title > .frmsvg:last-child {
	428	+ transform: rotate(180deg);
	429	+}
	430	+.formidable_page_formidable-styles .frm-right-panel .accordion-section-title > .frmsvg:last-child {
	431	+ position: absolute;
	432	+ top: 0;
	433	+ bottom: 0;
	434	+ right: 0;
	435	+ margin: auto;
	436	+ color: var(--grey);
	437	+}
	438	+.control-section:hover .accordion-section-title {
	439	+ background: transparent !important;
	440	+ border-bottom-color: transparent;
	441	+}
	442	+.frm-style-settings-hover {
	443	+ width: 100%;
	444	+ position: absolute;
	445	+ top:0;
	446	+ left: 0;
	447	+ height: 58px;
	448	+ background: white;
	449	+ border-radius: var(--small-radius);
	450	+ box-shadow: var(--button-shadow);
	451	+ z-index: 0;
	452	+ transition: 0.25s opacity ease, 0.3s transform cubic-bezier(0.165, 0.84, 0.44, 1);
	453	+}
	454	+.frm-style-settings-hover.frm-animating {
	455	+ opacity: 0.45;
	456	+}
	457	+.frm-right-panel .accordion-section-content {
	458	+ background: transparent;
	459	+ padding: 0;
	460	+ overflow: initial;
	461	+}
	462	+
	463	+.frm-right-panel .accordion-section-content > .inside {
	464	+ padding: 15px;
	465	+}
	466	+.frm-quick-settings .frm_form_field .frm-style-item-heading,
	467	+.frm-right-panel .accordion-section-content > .inside .frm-style-item-heading {
	468	+ line-height: 36px;
	469	+}
	470	+.frm-right-panel .accordion-section-content > .inside .frm-style-item-heading .frm_help {
	471	+ display: inline-block;
	472	+ line-height: 13px;
	473	+}
	474	+
	475	+.frm-right-panel .accordion-section-content .inside a {
	476	+ font-size: inherit;
	477	+}
	478	+.frm-right-panel .control-section.open h3 {
	479	+ border-bottom: none;
	480	+}
	481	+
	482	+.js .frm-right-panel .control-section .accordion-section-title:focus,
	483	+.js .frm-right-panel .control-section .accordion-section-title:hover {
	484	+ color: var(--grey-900);
	485	+}
	486	+.js .frm-right-panel .control-section.open h3.accordion-section-title {
	487	+ box-shadow: var(--button-shadow);
	488	+ background: white !important;
	489	+ border-radius: var(--small-radius);
	490	+}
	491	+
	492	+.js .frm-right-panel .control-section .accordion-section-title:hover:before {
	493	+ color: var(--grey-700);
	494	+}
	495	+.frm-right-panel .accordion-section {
	496	+ border: none;
	497	+ position: relative;
	498	+ padding-bottom: 2px;
	499	+}
	500	+.frm-right-panel .accordion-section-title > .frmsvg:first-child {
	501	+ margin: 0 10px 0 0;
	502	+ color: var(--grey);
	503	+}
	504	+.frm-right-panel .accordion-section-title:hover > .frmsvg:first-child {
	505	+ color: var(--grey-900);
	506	+}
	507	+.frm-right-panel .accordion-section-title > .frmsvg:last-child {
	508	+ margin-right: 15px !important;
	509	+}
	510	+.frm-right-panel .open .accordion-section-title > .frmsvg:last-child {
	511	+ transform: rotate(180deg);
	512	+}
	513	+.frm-right-panel .open.accordion-section {
	514	+ border-bottom: 1px solid var(--grey-300);
	515	+}
	516	+#frm_view_editor_left.frm-right-panel .accordion-section-title,
	517	+.frm-right-panel h3.accordion-section-title {
	518	+ padding: 17px 15px;
	519	+ background: transparent;
	520	+ line-height: var(--leading);
	521	+ color: var(--grey-500);
	522	+ font-size: var(--text-md);
	523	+ font-weight: 400;
	524	+}
	525	+.styling_settings .accordion-container {
	526	+ position: relative;
	527	+}
	528	+.styling_settings .accordion-container .outer-border {
	529	+ position: relative;
	530	+ z-index: 1;
	531	+}
426	532	@media only screen and (max-width: 782px) {
427	533	#frm_style_preview .with_frm_style .frm_radio input[type=radio],
428	534	#frm_style_preview .with_frm_style .frm_checkbox input[type=checkbox] {
429	535	width: 18px !important;