← All changes | css/admin/applications.css +47 -26 6.3 → 5.4 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;
		@@ -170,23 +182,14 @@
170	182	background-color: #F6F7FB;
171	183	padding: 20px 30px 15px;
172	184	}
173	185
174		-#frm_view_application_modal img {
175		- height: 245px;
176		-}
177		-
178		-#frm_view_application_modal .frm_modal_content {
179		- flex: 1;
180		- overflow-y: auto;
181		-}
182		-
183	186	.frm-application-modal-label {
184	187	opacity: 0.65;
185	188	margin-bottom: 5px;
186	189	}
187	190
188		-.frm-admin-page-applications #frm_bs_dropdown .install-now {
	191	+.formidable_page_formidable-applications #frm_bs_dropdown .install-now {
189	192	vertical-align: bottom;
190	193	}
191	194
192	195	.frm-application-card svg + h4 {
		@@ -197,9 +200,9 @@
197	200	display: inline-block;
198	201	}
199	202
200	203	#frm_application_category_filter > a {
201		- padding: 0 8px;
	204	+ padding: 0 10px;
202	205	}
203	206
204	207	#frm_application_category_filter > a:first-child {
205	208	padding-left: 0;
		@@ -208,8 +211,13 @@
208	211	#frm_application_category_filter > a:last-child {
209	212	padding-right: 0;
210	213	}
211	214
	215	+#frm_application_category_filter > a.frm-active-application-category {
	216	+ color: var(--dark-grey);
	217	+ pointer-events: none;
	218	+}
	219	+
212	220	.frm-admin-page-applications #frm_top_bar h1 {
213	221	width: auto;
214	222	}
215	223
		@@ -231,14 +239,15 @@
231	239
232	240	#frm_custom_applications_placeholder > div:last-child {
233	241	text-align: center;
234	242	max-width: 500px;
235		- margin: var(--gap-md) auto;
	243	+ margin: 0 auto 20px;
236	244	position: relative;
	245	+ top: 20px;
237	246	}
238	247
239	248	#frm_custom_applications_placeholder > div a {
240		- margin-top: var(--gap-md);
	249	+ margin-top: 20px;
241	250	}
242	251
243	252	@media only screen and (max-width: 1200px) {
244	253	.frm-application-card {
		@@ -243,8 +252,12 @@
243	252	@media only screen and (max-width: 1200px) {
244	253	.frm-application-card {
245	254	grid-column: span 4/span 4; /* treat as frm4 */
246	255	}
	256	+
	257	+ .frm-application-card:nth-child(3) ~ .frm-application-card {
	258	+ margin-top: 20px;
	259	+ }
247	260	}
248	261
249	262	@media only screen and (max-width: 800px) {
250	263	.frm-application-card {
		@@ -249,8 +262,12 @@
249	262	@media only screen and (max-width: 800px) {
250	263	.frm-application-card {
251	264	grid-column: span 6/span 6; /* treat as frm6 */
252	265	}
	266	+
	267	+ .frm-application-card:nth-child(2) ~ .frm-application-card {
	268	+ margin-top: 20px;
	269	+ }
253	270	}
254	271
255	272	@media only screen and (max-width: 600px) {
256	273	#frm_application_category_filter {
		@@ -259,6 +276,10 @@
259	276	}
260	277
261	278	.frm-application-card {
262	279	grid-column: span 12/span 12; /* treat as frm12 */
	280	+ }
	281	+
	282	+ .frm-application-card:nth-child(1) ~ .frm-application-card {
	283	+ margin-top: 20px;
263	284	}
264	285	}