← All changes | css/admin/applications.css +101 -112 6.34 → 5.5 View file →

		@@ -20,16 +20,26 @@
20	20	#frm_custom_applications_placeholder {
21	21	position: relative;
22	22	}
23	23
24		-.frm-admin-page-applications #wpcontent {
	24	+.formidable_page_formidable-applications #frm_top_bar {
	25	+ background: #fff;
	26	+}
	27	+
	28	+.formidable_page_formidable-applications #wpbody {
	29	+ background: var(--sidebar-color);
	30	+}
	31	+
	32	+.formidable_page_formidable-applications #wpcontent {
25	33	padding-left: 0;
26	34	}
27	35
	36	+.frm-applications-index-content {
	37	+ padding: 40px 40px 0;
	38	+}
	39	+
28	40	.frm-application-cards-grid {
29		- padding-top: var(--gap-md);
30	41	padding-bottom: 50px;
31		- grid-gap: var(--gap-md);
32	42	}
33	43
34	44	.frm-application-cards-grid:last-child {
35	45	padding-bottom: 100px;
		@@ -34,59 +44,60 @@
34	44	.frm-application-cards-grid:last-child {
35	45	padding-bottom: 100px;
36	46	}
37	47
38		-.frm-admin-page-applications #wpbody-content {
	48	+.formidable_page_formidable-applications #wpbody-content {
39	49	padding-bottom: 0;
40	50	}
41	51
42	52	.frm-application-card {
43		- grid-column: span 4/span 4; /* treat as frm4 */
	53	+ border-radius: 4px;
	54	+ background: #FFFFFF;
	55	+ grid-column: span 3/span 3; /* treat as frm3 */
	56	+ padding: 10px 0;
	57	+ display: flex;
44	58	flex-direction: column;
45		- gap: 0;
46	59	}
47	60
	61	+.frm-application-card:nth-child(4) ~ .frm-application-card {
	62	+ margin-top: 20px;
	63	+}
	64	+
48	65	.frm-application-template-card {
49	66	cursor: pointer;
50	67	}
51	68
52	69	.frm-application-template-card:hover {
53		- box-shadow: var(--box-shadow-lg);
	70	+ filter: drop-shadow(0px 12px 24px rgba(72, 78, 84, 0.2));
54	71	}
55	72
56		-.frm-application-template-card:hover h3 {
57		- color: var(--primary-500);
	73	+.frm-application-template-card:hover h4 {
	74	+ color: var(--primary-color);
58	75	}
59	76
60	77	/* Card title */
61		-.frm-application-card h3 {
62		- display: flex;
63		- width: 100%;
64		- align-items: center;
65		- flex-wrap: nowrap;
66		- gap: var(--gap-xs);
	78	+.frm-application-card h4 {
	79	+ font-weight: 600;
	80	+ display: inline-block;
	81	+ max-width: 100%;
	82	+ overflow: hidden;
	83	+ white-space: nowrap;
	84	+ text-overflow: ellipsis;
67	85	margin: 0;
68		- font-size: var(--text-sm) !important;
69		- font-weight: 500;
70		- min-height: 28px;
71	86	}
72	87
73		-.frm-application-card h3 .frmsvg {
74		- width: 11px;
75		- height: 13px;
	88	+.frm-locked-application-template h4 {
	89	+ opacity: 0.85;
	90	+ max-width: calc( 100% - 30px );
76	91	}
77	92
78		-.frm-application-card h3 .frm-inner-text {
79		- max-width: calc(100% - 50px);
80		- overflow: hidden;
81		- white-space: nowrap;
82		- text-overflow: ellipsis;
	93	+.frm-locked-application-template > div:first-child > span > .frmsvg {
	94	+ position: relative;
	95	+ bottom: 5px;
	96	+ width: 14px;
	97	+ height: 14px;
83	98	}
84	99
85		-.frm-application-card h3 .frm-meta-tag {
86		- margin: 0;
87		-}
88		-
89	100	#frm_application_templates_grid .frm-application-card .frm-button-secondary {
90	101	display: flex;
91	102	flex-direction: row;
92	103	}
		@@ -98,46 +109,39 @@
98	109	right: 2px;
99	110	align-self: center;
100	111	}
101	112
102		-.frm-application-card .frm-new-pill {
103		- min-height: 20px;
104		- font-size: var(--text-xs);
105		- align-items: center;
106		-}
107		-
108		-.frm-application-card:hover .frm-new-pill {
109		- display: none;
110		-}
111		-
112	113	/* Use template anchor */
113	114	#frm_application_templates_grid .frm-application-card .frm-button-secondary {
114		- display: none;
	115	+ position: absolute;
	116	+ right: 10px;
	117	+ bottom: 0;
	118	+ line-height: 17px;
	119	+ min-height: 17px;
	120	+ height: 20px;
115	121	}
116	122
117		-#frm_application_templates_grid .frm-application-card:hover .frm-button-secondary {
118		- display: inline-block;
	123	+/* Card description */
	124	+.frm-application-card > div:first-child > div {
	125	+ font-size: 12px;
119	126	}
120	127
121		-/* Card description */
122		-.frm-application-card > div:first-child > div {
123		- font-size: var(--text-xs);
	128	+.frm-application-card > div {
	129	+ padding: 0 10px;
124	130	}
125	131
126	132	.frm-application-item-count {
127		- font-size: var(--text-xs);
128		- color: var(--grey-500);
129		- margin-top: var(--gap-xs);
	133	+ font-size: 11px;
	134	+ color: var(--medium-grey);
	135	+ margin-top: 4px;
130	136	}
131	137
132		-#frm_view_application_modal .frm_note_style2 {
133		- margin-right: var(--gap-md);
134		- margin-left: var(--gap-md);
135		- padding: 10px;
136		- border-radius: 8px;
	138	+#frm_view_application_modal .frm_warning_style {
	139	+ border: none aliceblue;
	140	+ margin-top: 0;
	141	+ padding: 20px;
	142	+ border-radius: 0;
137	143	display: flex;
138		- justify-content: space-between;
139		- align-items: center;
140	144	}
141	145
142	146	#frm_view_application_modal .frm_warning_style span {
143	147	flex: 1;
		@@ -158,12 +162,12 @@
158	162	flex: 1;
159	163	}
160	164
161	165	.frm-application-modal-details {
162		- padding: 25px var(--gap-md);
	166	+ padding: 25px 30px;
163	167	}
164	168
165		-.frm-admin-page-applications .ui-widget-overlay {
	169	+.formidable_page_formidable-applications .ui-widget-overlay {
166	170	position: fixed;
167	171	width: 100%;
168	172	height: 100%;
169	173	top: 0;
		@@ -174,10 +178,10 @@
174	178	z-index: 2;
175	179	}
176	180
177	181	#frm_view_application_modal .frm-application-image-wrapper {
178		- background-color: #f6f7fb;
179		- padding: 20px var(--gap-md) 15px;
	182	+ background-color: #F6F7FB;
	183	+ padding: 20px 30px 15px;
180	184	}
181	185
182	186	#frm_view_application_modal img {
183	187	height: 245px;
		@@ -183,32 +187,31 @@
183	187	height: 245px;
184	188	}
185	189
186	190	#frm_view_application_modal .frm_modal_content {
187		- max-height: 75vh !important;
188	191	flex: 1;
189	192	overflow-y: auto;
190	193	}
191	194
192		-#frm_view_application_modal .postbox {
193		- max-height: 800px !important;
194		-}
195		-
196	195	.frm-application-modal-label {
197	196	opacity: 0.65;
198	197	margin-bottom: 5px;
199	198	}
200	199
201		-.frm-admin-page-applications #frm_bs_dropdown .install-now {
	200	+.formidable_page_formidable-applications #frm_bs_dropdown .install-now {
202	201	vertical-align: bottom;
203	202	}
204	203
	204	+.frm-application-card svg + h4 {
	205	+ margin-left: 10px;
	206	+}
	207	+
205	208	#frm_application_category_filter {
206		- display: inline-block;
	209	+ display: inline-block;
207	210	}
208	211
209	212	#frm_application_category_filter > a {
210		- padding: 0 8px;
	213	+ padding: 0 10px;
211	214	}
212	215
213	216	#frm_application_category_filter > a:first-child {
214	217	padding-left: 0;
		@@ -217,8 +220,13 @@
217	220	#frm_application_category_filter > a:last-child {
218	221	padding-right: 0;
219	222	}
220	223
	224	+#frm_application_category_filter > a.frm-active-application-category {
	225	+ color: var(--dark-grey);
	226	+ pointer-events: none;
	227	+}
	228	+
221	229	.frm-admin-page-applications #frm_top_bar h1 {
222	230	width: auto;
223	231	}
224	232
		@@ -233,68 +241,45 @@
233	241	.frm-application-templates-nav.wrap {
234	242	margin-right: 0;
235	243	}
236	244
237		-#frm_custom_applications_placeholder {
238		- border-radius: 16px;
239		- overflow: hidden;
240		- position: relative;
241		- margin-top: 40px;
242		- margin-bottom: 25px;
243		- background-color: #fff;
244		- padding: 11px 8px;
245		-}
246		-
247		-#frm_custom_applications_placeholder::before {
248		- content: "";
249		- display: block;
250		- background: linear-gradient(90deg, #1961d5 0.76%, #e8abef 100%);
251		- height: 4px;
252		- margin: auto;
	245	+#frm_custom_applications_placeholder > div:first-child {
253	246	position: absolute;
254		- top: 0;
255		- left: 0;
256		- width: 100%;
257	247	}
258	248
259		-#frm_custom_applications_placeholder img {
260		- margin-right: 5px;
261		- float: left;
	249	+#frm_custom_applications_placeholder > div:last-child {
	250	+ text-align: center;
	251	+ max-width: 500px;
	252	+ margin: 0 auto 20px;
	253	+ position: relative;
	254	+ top: 20px;
262	255	}
263	256
264		-#frm_custom_applications_placeholder div a {
265		- margin-top: var(--gap-md);
	257	+#frm_custom_applications_placeholder > div a {
	258	+ margin-top: 20px;
266	259	}
267	260
268		-#frm_custom_applications_placeholder .frm2 {
269		- text-align: right;
270		- padding-right: 24px;
271		-}
	261	+@media only screen and (max-width: 1200px) {
	262	+ .frm-application-card {
	263	+ grid-column: span 4/span 4; /* treat as frm4 */
	264	+ }
272	265
273		-#frm_custom_applications_placeholder h3 {
274		- font-weight: 700;
275		- margin-bottom: 4px;
	266	+ .frm-application-card:nth-child(3) ~ .frm-application-card {
	267	+ margin-top: 20px;
	268	+ }
276	269	}
277	270
278		-.frm-application-modal-label ~ .frm-application-modal-label {
279		- margin-top: var(--gap-md);
280		-}
281		-
282		-ul.frm-application-item-list {
283		- margin-top: 0;
284		- list-style: disc;
285		- list-style-position: inside;
286		-}
287		-
288		-@media only screen and (max-width: 1200px) {
289		-
	271	+@media only screen and (max-width: 800px) {
290	272	.frm-application-card {
291	273	grid-column: span 6/span 6; /* treat as frm6 */
292	274	}
	275	+
	276	+ .frm-application-card:nth-child(2) ~ .frm-application-card {
	277	+ margin-top: 20px;
	278	+ }
293	279	}
294	280
295	281	@media only screen and (max-width: 600px) {
296		-
297	282	#frm_application_category_filter {
298	283	display: block;
299	284	margin-left: 0;
300	285	}
		@@ -300,6 +285,10 @@
300	285	}
301	286
302	287	.frm-application-card {
303	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;
304	293	}
305	294	}