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