← All changes | css/admin/applications.css +47 -17 6.5 → 5.5 View file →

		@@ -20,24 +20,26 @@
20	20	#frm_custom_applications_placeholder {
21	21	position: relative;
22	22	}
23	23
24		-.frm-admin-page-applications #frm_top_bar {
	24	+.formidable_page_formidable-applications #frm_top_bar {
25	25	background: #fff;
26	26	}
27	27
28		-.frm-admin-page-applications #wpbody {
	28	+.formidable_page_formidable-applications #wpbody {
29	29	background: var(--sidebar-color);
30	30	}
31	31
32		-.frm-admin-page-applications #wpcontent {
	32	+.formidable_page_formidable-applications #wpcontent {
33	33	padding-left: 0;
34	34	}
35	35
	36	+.frm-applications-index-content {
	37	+ padding: 40px 40px 0;
	38	+}
	39	+
36	40	.frm-application-cards-grid {
37		- padding-top: var(--gap-md);
38	41	padding-bottom: 50px;
39		- grid-gap: var(--gap-md);
40	42	}
41	43
42	44	.frm-application-cards-grid:last-child {
43	45	padding-bottom: 100px;
		@@ -42,36 +44,40 @@
42	44	.frm-application-cards-grid:last-child {
43	45	padding-bottom: 100px;
44	46	}
45	47
46		-.frm-admin-page-applications #wpbody-content {
	48	+.formidable_page_formidable-applications #wpbody-content {
47	49	padding-bottom: 0;
48	50	}
49	51
50	52	.frm-application-card {
51		- border-radius: var(--small-radius);
	53	+ border-radius: 4px;
52	54	background: #FFFFFF;
53	55	grid-column: span 3/span 3; /* treat as frm3 */
54	56	padding: 10px 0;
55	57	display: flex;
56	58	flex-direction: column;
57		- box-shadow: var(--box-shadow-sm);
58	59	}
59	60
	61	+.frm-application-card:nth-child(4) ~ .frm-application-card {
	62	+ margin-top: 20px;
	63	+}
	64	+
60	65	.frm-application-template-card {
61	66	cursor: pointer;
62	67	}
63	68
64	69	.frm-application-template-card:hover {
65		- box-shadow: var(--box-shadow-lg);
	70	+ filter: drop-shadow(0px 12px 24px rgba(72, 78, 84, 0.2));
66	71	}
67	72
68	73	.frm-application-template-card:hover h4 {
69		- color: var(--primary-500);
	74	+ color: var(--primary-color);
70	75	}
71	76
72	77	/* Card title */
73	78	.frm-application-card h4 {
	79	+ font-weight: 600;
74	80	display: inline-block;
75	81	max-width: 100%;
76	82	overflow: hidden;
77	83	white-space: nowrap;
		@@ -83,10 +89,13 @@
83	89	opacity: 0.85;
84	90	max-width: calc( 100% - 30px );
85	91	}
86	92
87		-.frm-application-card h4 .frmsvg {
88		- margin-right: var(--gap-xs);
	93	+.frm-locked-application-template > div:first-child > span > .frmsvg {
	94	+ position: relative;
	95	+ bottom: 5px;
	96	+ width: 14px;
	97	+ height: 14px;
89	98	}
90	99
91	100	#frm_application_templates_grid .frm-application-card .frm-button-secondary {
92	101	display: flex;
		@@ -105,8 +114,11 @@
105	114	#frm_application_templates_grid .frm-application-card .frm-button-secondary {
106	115	position: absolute;
107	116	right: 10px;
108	117	bottom: 0;
	118	+ line-height: 17px;
	119	+ min-height: 17px;
	120	+ height: 20px;
109	121	}
110	122
111	123	/* Card description */
112	124	.frm-application-card > div:first-child > div {
		@@ -153,9 +165,9 @@
153	165	.frm-application-modal-details {
154	166	padding: 25px 30px;
155	167	}
156	168
157		-.frm-admin-page-applications .ui-widget-overlay {
	169	+.formidable_page_formidable-applications .ui-widget-overlay {
158	170	position: fixed;
159	171	width: 100%;
160	172	height: 100%;
161	173	top: 0;
		@@ -184,9 +196,9 @@
184	196	opacity: 0.65;
185	197	margin-bottom: 5px;
186	198	}
187	199
188		-.frm-admin-page-applications #frm_bs_dropdown .install-now {
	200	+.formidable_page_formidable-applications #frm_bs_dropdown .install-now {
189	201	vertical-align: bottom;
190	202	}
191	203
192	204	.frm-application-card svg + h4 {
		@@ -197,9 +209,9 @@
197	209	display: inline-block;
198	210	}
199	211
200	212	#frm_application_category_filter > a {
201		- padding: 0 8px;
	213	+ padding: 0 10px;
202	214	}
203	215
204	216	#frm_application_category_filter > a:first-child {
205	217	padding-left: 0;
		@@ -208,8 +220,13 @@
208	220	#frm_application_category_filter > a:last-child {
209	221	padding-right: 0;
210	222	}
211	223
	224	+#frm_application_category_filter > a.frm-active-application-category {
	225	+ color: var(--dark-grey);
	226	+ pointer-events: none;
	227	+}
	228	+
212	229	.frm-admin-page-applications #frm_top_bar h1 {
213	230	width: auto;
214	231	}
215	232
		@@ -231,14 +248,15 @@
231	248
232	249	#frm_custom_applications_placeholder > div:last-child {
233	250	text-align: center;
234	251	max-width: 500px;
235		- margin: var(--gap-md) auto;
	252	+ margin: 0 auto 20px;
236	253	position: relative;
	254	+ top: 20px;
237	255	}
238	256
239	257	#frm_custom_applications_placeholder > div a {
240		- margin-top: var(--gap-md);
	258	+ margin-top: 20px;
241	259	}
242	260
243	261	@media only screen and (max-width: 1200px) {
244	262	.frm-application-card {
		@@ -243,8 +261,12 @@
243	261	@media only screen and (max-width: 1200px) {
244	262	.frm-application-card {
245	263	grid-column: span 4/span 4; /* treat as frm4 */
246	264	}
	265	+
	266	+ .frm-application-card:nth-child(3) ~ .frm-application-card {
	267	+ margin-top: 20px;
	268	+ }
247	269	}
248	270
249	271	@media only screen and (max-width: 800px) {
250	272	.frm-application-card {
		@@ -249,8 +271,12 @@
249	271	@media only screen and (max-width: 800px) {
250	272	.frm-application-card {
251	273	grid-column: span 6/span 6; /* treat as frm6 */
252	274	}
	275	+
	276	+ .frm-application-card:nth-child(2) ~ .frm-application-card {
	277	+ margin-top: 20px;
	278	+ }
253	279	}
254	280
255	281	@media only screen and (max-width: 600px) {
256	282	#frm_application_category_filter {
		@@ -259,6 +285,10 @@
259	285	}
260	286
261	287	.frm-application-card {
262	288	grid-column: span 12/span 12; /* treat as frm12 */
	289	+ }
	290	+
	291	+ .frm-application-card:nth-child(1) ~ .frm-application-card {
	292	+ margin-top: 20px;
263	293	}
264	294	}