← All changes | css/admin/form-templates.css +101 -0 6.26.1 → 6.13 View file →

		@@ -8,17 +8,87 @@
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	+}
	86	+
	87	+.frm-form-templates-grid-layout > * {
	88	+ grid-column: span 1;
	89	+}
	90	+
21	91	/* Create a blank form */
22	92	.frm-form-templates-create-button {
23	93	gap: 10px;
24	94	color: var(--grey-900);
		@@ -85,8 +155,14 @@
85	155	height: 13px;
86	156	flex-shrink: 0;
87	157	}
88	158
	159	+.frm-form-templates-item-title-text > span {
	160	+ white-space: nowrap;
	161	+ overflow: hidden;
	162	+ text-overflow: ellipsis;
	163	+}
	164	+
89	165	a.frm-form-templates-item-favorite-button {
90	166	display: none;
91	167	transition: color 200ms ease-out;
92	168	color: var(--grey-900);
		@@ -140,8 +216,14 @@
140	216	p.frm-form-templates-item-description {
141	217	font-size: var(--text-xs);
142	218	margin: 0;
143	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;
144	226	}
145	227
146	228	.frm-card-item:hover .frm-form-templates-item-description,
147	229	.frm-card-item:focus-within .frm-form-templates-item-description {
		@@ -178,8 +260,22 @@
178	260	cursor: pointer;
179	261	}
180	262
181	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	+/**
182	278	* Modal Styles
183	279	*
184	280	* Customizes the look of modals on the Form Templates page.
185	281	*/
		@@ -206,5 +302,10 @@
206	302	*/
207	303
208	304	.frm_hidden {
209	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;
210	311	}