← All changes | css/admin/applications.css +57 -99 6.27 → 6.7 View file →

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