← All changes | css/admin/applications.css +104 -63 6.4.2 → trunk View file →

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