← All changes | css/admin/form-templates.css +98 -8 6.31 → 6.13 View file →

		@@ -8,20 +8,85 @@
8	8	* Page General Styles
9	9	*
10	10	* This section defines the basic typography and layout styles for the Form Templates page.
11	11	*/
	12	+#frm-form-templates-page ul,
	13	+#frm-form-templates-page li {
	14	+ margin: 0;
	15	+}
	16	+
12	17	#frm-form-templates-page .frm-upgrade-bar {
13	18	display: none;
14	19	}
15	20
16	21	/**
	22	+ * Sidebar Styles
	23	+ *
	24	+ * Defines the layout and styling for the sidebar, including scroll behavior.
	25	+ */
	26	+#frm-form-templates-page .frm-right-panel {
	27	+ padding: 2px;
	28	+ overflow-y: initial;
	29	+}
	30	+
	31	+#frm-form-templates-page .frm-scrollbar-wrapper {
	32	+ padding: var(--gap-md) var(--gap-sm);
	33	+}
	34	+
	35	+/* Search Box */
	36	+#frm-form-templates-page .frm-search {
	37	+ float: none;
	38	+ padding: 0 var(--gap-2xs);
	39	+}
	40	+
	41	+#template-search-input {
	42	+ width: 100%;
	43	+}
	44	+
	45	+/* Categories List */
	46	+.frm-form-templates-cat-item {
	47	+ cursor: pointer;
	48	+ padding: var(--gap-xs);
	49	+ border-radius: var(--small-radius);
	50	+ background-color: transparent;
	51	+ transition: background-color 250ms ease-out;
	52	+}
	53	+
	54	+.frm-form-templates-cat-item:hover {
	55	+ background-color: var(--grey-100);
	56	+}
	57	+
	58	+.frm-form-templates-cat-item > * {
	59	+ z-index: 2;
	60	+}
	61	+
	62	+.frm-form-templates-cat-text {
	63	+ color: var(--grey-900);
	64	+}
	65	+
	66	+.frm-form-templates-cat-count {
	67	+ color: var(--grey-400);
	68	+}
	69	+
	70	+.frm-current .frm-form-templates-cat-text,
	71	+.frm-current .frm-form-templates-cat-count {
	72	+ color: var(--primary-500);
	73	+}
	74	+
	75	+/**
17	76	* Page Content Styles
18	77	*
19	78	* Focuses on the main content area, laying out the various elements and components.
20	79	*/
	80	+.frm-form-templates-grid-layout {
	81	+ display: grid;
	82	+ grid-template-columns: repeat(auto-fill, minmax(308px, 1fr));
	83	+ grid-auto-rows: max-content;
	84	+ gap: var(--gap-sm);
	85	+}
21	86
22		-.frm_show_upgrade {
23		- opacity: .5;
	87	+.frm-form-templates-grid-layout > * {
	88	+ grid-column: span 1;
24	89	}
25	90
26	91	/* Create a blank form */
27	92	.frm-form-templates-create-button {
		@@ -44,13 +109,8 @@
44	109	outline: 1px solid var(--primary-700);
45	110	border-color: var(--primary-700);
46	111	}
47	112
48		-.frm-form-templates-create-button .frmsvg {
49		- width: 32px;
50		- height: 32px;
51		-}
52		-
53	113	#frm-form-templates-create-form .frmsvg {
54	114	width: 20px;
55	115	height: 20px;
56	116	color: var(--grey-500);
		@@ -95,8 +155,14 @@
95	155	height: 13px;
96	156	flex-shrink: 0;
97	157	}
98	158
	159	+.frm-form-templates-item-title-text > span {
	160	+ white-space: nowrap;
	161	+ overflow: hidden;
	162	+ text-overflow: ellipsis;
	163	+}
	164	+
99	165	a.frm-form-templates-item-favorite-button {
100	166	display: none;
101	167	transition: color 200ms ease-out;
102	168	color: var(--grey-900);
		@@ -150,8 +216,14 @@
150	216	p.frm-form-templates-item-description {
151	217	font-size: var(--text-xs);
152	218	margin: 0;
153	219	min-height: var(--h-md);
	220	+
	221	+ display: -webkit-box; /* Required for line-clamp to work */
	222	+ -webkit-box-orient: vertical; /* Required for line-clamp to work */
	223	+ -webkit-line-clamp: 2;
	224	+ text-overflow: ellipsis;
	225	+ overflow: hidden;
154	226	}
155	227
156	228	.frm-card-item:hover .frm-form-templates-item-description,
157	229	.frm-card-item:focus-within .frm-form-templates-item-description {
		@@ -188,13 +260,26 @@
188	260	cursor: pointer;
189	261	}
190	262
191	263	/**
	264	+ * Empty State Styles
	265	+ *
	266	+ * Provides styles for when the Form Templates page is empty.
	267	+ */
	268	+#frm-form-templates-empty-state {
	269	+ height: 100%;
	270	+ margin-top: calc(-1 * var(--gap-md));
	271	+}
	272	+
	273	+#frm-form-templates-empty-state .frm-form-templates-text {
	274	+ max-width: 420px;
	275	+}
	276	+
	277	+/**
192	278	* Modal Styles
193	279	*
194	280	* Customizes the look of modals on the Form Templates page.
195	281	*/
196		-
197	282	/* Upgrade Modal */
198	283	#frm-form-upgrade-modal .frm-upgrade-modal-plan-icon {
199	284	color: var(--error-500);
200	285	}
		@@ -217,5 +302,10 @@
217	302	*/
218	303
219	304	.frm_hidden {
220	305	display: none; /* Load this last for overrides */
	306	+}
	307	+
	308	+.frm-form-templates-divider {
	309	+ border-top: 1px solid var(--grey-200);
	310	+ margin: 0;
221	311	}