← All changes | css/admin/style.css +17 -98 6.28 → 6.13 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	}
		@@ -223,9 +228,18 @@
223	228	/* The long "Reset to defaults" option name requires extra space. There's normally a 160px min-width. */
224	229	min-width: 200px;
225	230	}
226	231
227		-#frm_style_preview .with_frm_style :not(.ui-datepicker-title) > select:not(.flatpickr-monthDropdown-months) {
	232	+/*
	233	+Do not set this for frm_inside_container as it requires a custom line height value.
	234	+Target .frm_primary_label so we avoid other labels like star rating stars.
	235	+Time fields use a div instead of a label, so don't target by the primary label by tag type.
	236	+*/
	237	+#frm_style_preview .frm_form_field:not(.frm_inside_container) > .frm_primary_label {
	238	+ line-height: var(--line-height);
	239	+}
	240	+
	241	+#frm_style_preview .with_frm_style :not(.ui-datepicker-title) > select {
228	242	/* Prevent back end styles from shrinking dropdowns. But leave datepicker dropdowns alone. */
229	243	width: var(--auto-width);
230	244	max-width: 100%;
231	245	}
		@@ -294,8 +308,9 @@
294	308	#frm_styling_form p > a svg {
295	309	position: relative;
296	310	bottom: 2px;
297	311	}
	312	+
298	313	.frm-style-card-separator {
299	314	background-color: var(--grey-300);
300	315	width: 2px;
301	316	height: 20px;
		@@ -349,8 +364,9 @@
349	364	}
350	365
351	366	#frm_loading_style_placeholder,
352	367	#frm_style_preview.frm-loading-style-template .frm_forms,
	368	+#frm_default_style_cards_wrapper .dropdown-item.frm-apply-style,
353	369	.frm-currently-set-style-card .dropdown-item.frm-apply-style
354	370	{
355	371	display: none;
356	372	}
		@@ -424,106 +440,9 @@
424	440	right: 0;
425	441	margin: auto;
426	442	color: var(--grey);
427	443	}
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	444
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	445	@media only screen and (max-width: 782px) {
527	446	#frm_style_preview .with_frm_style .frm_radio input[type=radio],
528	447	#frm_style_preview .with_frm_style .frm_checkbox input[type=checkbox] {
529	448	width: 18px !important;