Edit File

Edit File: form-templates.css

/**
 * Form Templates Page Styles
 *
 * This file includes all CSS rules specifically for the Form Templates page.
 */

/**
 * Page General Styles
 *
 * This section defines the basic typography and layout styles for the Form Templates page.
 */
#frm-form-templates-page ul,
#frm-form-templates-page li {
	margin: 0;
}

#frm-form-templates-page .frm-upgrade-bar {
	display: none;
}

/**
 * Sidebar Styles
 *
 * Defines the layout and styling for the sidebar, including scroll behavior.
 */
#frm-form-templates-page .frm-right-panel {
	padding: 2px;
	overflow-y: initial;
}

#frm-form-templates-page .frm-scrollbar-wrapper {
	padding: var(--gap-md) var(--gap-sm);
}

/* Search Box */
#frm-form-templates-page .frm-search {
	float: none;
	padding: 0 var(--gap-2xs);
}

#template-search-input {
	width: 100%;
}

/* Categories List */
.frm-form-templates-cat-item {
	cursor: pointer;
	padding: var(--gap-xs);
	border-radius: var(--small-radius);
	background-color: transparent;
	transition: background-color 250ms ease-out;
}

.frm-form-templates-cat-item:hover {
	background-color: var(--grey-100);
}

.frm-form-templates-cat-item > * {
	z-index: 2;
}

.frm-form-templates-cat-text {
	color: var(--grey-900);
}

.frm-form-templates-cat-count {
	color: var(--grey-400);
}

.frm-current .frm-form-templates-cat-text,
.frm-current .frm-form-templates-cat-count {
	color: var(--primary-500);
}

/**
 * Page Content Styles
 *
 * Focuses on the main content area, laying out the various elements and components.
 */
.frm-form-templates-grid-layout {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(308px, 1fr));
	grid-auto-rows: max-content;
	gap: var(--gap-sm);
}

.frm-form-templates-grid-layout > * {
	grid-column: span 1;
}

/* Create a blank form */
#frm-form-templates-create-form {
	gap: 10px;
	color: var(--grey-900);
	background-color: transparent;
	border: 1px dashed var(--grey-400);
	border-radius: var(--small-radius);
	padding: calc(var(--gap-sm) - 2px) var(--gap-sm);
	transition: background-color 200ms ease-out;
	cursor: pointer;
	box-shadow: var(--box-shadow-xs);
}

#frm-form-templates-create-form:hover {
	background-color: var(--grey-50);
}

#frm-form-templates-create-form:focus-within {
	outline: 1px solid var(--primary-700);
	border-color: var(--primary-700);
}

#frm-form-templates-create-form .frmsvg {
	width: 20px;
	height: 20px;
	color: var(--grey-500);
	background: var(--grey-100);
	border-radius: var(--small-radius);
	padding: calc(var(--gap-2xs) + 2px);
}

/* Templates item */
.frm-form-templates-item-icon {
	flex-shrink: 0;
}

#frm-form-templates-list .frm-form-templates-item-icon {
	display: none;
}

.frm-form-templates-item-body {
	display: flex;
	flex-direction: column;
	gap: calc(var(--gap-xs) - 2px);
	min-width: 0; /* Fix for truncated text within a flexbox layout */
	flex-grow: 1;
}

.frm-form-templates-item-title,
.frm-form-templates-item-title-text {
	display: flex;
	gap: 6px;
	align-items: center;
	margin: 0;
}

.frm-form-templates-item-title-text {
	width: calc(100% - 24px);
	font-size: var(--text-sm);
}

.frm-form-templates-item-lock-icon .frmsvg {
	display: flex;
	width: 11px;
	height: 13px;
	flex-shrink: 0;
}

.frm-form-templates-item-title-text > span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

a.frm-form-templates-item-favorite-button {
	display: none;
	transition: color 200ms ease-out;
	color: var(--grey-900);
}

.frm-form-templates-favorite-item .frm-form-templates-item-favorite-button {
	display: flex;
}

a.frm-form-templates-item-favorite-button:hover,
.frm-form-templates-favorite-item .frm-form-templates-item-favorite-button {
	color: var(--error-500);
}

.frm-form-templates-favorite-item a.frm-form-templates-item-favorite-button:hover {
	color: var(--error-700);
}

.frm-form-templates-custom-item-trash-button {
	display: none;
}

.frm-form-templates-custom-item-trash-button .frmsvg {
	width: 18px;
	height: 18px;
	color: var(--grey-900);
	transition: color 200ms ease-out;
	z-index: 2;
}

.frm-form-templates-custom-item-trash-button:hover .frmsvg {
	color: var(--primary-500);
}

.frm-form-templates-custom-item-trash-button + .frm-vertical-line {
	display: none;
}

.frm-form-templates-item-content {
	position: relative;
}

.frm-form-templates-item-buttons {
	display: none;
	position: absolute;
	gap: 12px;
	margin-top: calc(var(--gap-2xs) + 2px);
	z-index: 2;
}

p.frm-form-templates-item-description {
	font-size: var(--text-xs);
	margin: 0;
	min-height: var(--h-md);

display: -webkit-box;         /* Required for line-clamp to work */
	-webkit-box-orient: vertical; /* Required for line-clamp to work */
	-webkit-line-clamp: 2;
	text-overflow: ellipsis;
	overflow: hidden;
}

.frm-card-item:hover .frm-form-templates-item-description,
.frm-card-item:focus-within .frm-form-templates-item-description {
	visibility: hidden;
	opacity: 0;
}

.frm-card-item:hover .frm-form-templates-item-buttons,
.frm-card-item:focus-within .frm-form-templates-item-buttons {
	display: flex;
}

.frm-card-item:not(.frm-form-templates-favorite-item):hover .frm-form-templates-item-favorite-button,
.frm-form-templates-custom-item:hover .frm-form-templates-custom-item-trash-button,
.frm-form-templates-custom-item:hover .frm-form-templates-custom-item-trash-button + .frm-vertical-line {
	display: flex;
}

/* Application templates */
#frm-form-templates-applications img {
	width: 64px;
	height: 64px;
	object-fit: contain;
	border: 1px solid var(--grey-200);
	border-radius: var(--small-radius);
	box-sizing: border-box;
}

#frm-form-templates-applications .frm-meta-tag {
	max-width: max-content;
}

.frm-form-templates-application-item {
	cursor: pointer;
}

/**
 * Empty State Styles
 *
 * Provides styles for when the Form Templates page is empty.
 */
#frm-form-templates-empty-state {
	height: 100%;
	margin-top: calc(-1 * var(--gap-md));
}

#frm-form-templates-empty-state .frm-form-templates-text {
	max-width: 420px;
}

/**
 * Modal Styles
 *
 * Customizes the look of modals on the Form Templates page.
 */
/* Modal Errors */
#frm-form-templates-modal .frm-form-templates-modal-error:not(.frm_hidden),
#frm_code_from_email_options:not(.frm_hidden) {
	display: flex;
}

#frm-form-templates-modal .frm-form-templates-modal-error,
#frm_code_from_email_options {
	gap: calc(var(--gap-xs) + var(--gap-2xs));
}

#frm-form-templates-modal .frm-form-templates-modal-error {
	color: var(--error-500);
}

#frm_code_from_email_error span,
#frm_leave_email_error span {
	display: none;
}

#frm_code_from_email_error[frm-error="wrong-code"] span[frm-error="wrong-code"],
#frm_code_from_email_error[frm-error="empty"] span[frm-error="empty"],
#frm_code_from_email_error[frm-error="custom"] span[frm-error="custom"],
#frm_leave_email_error[frm-error="invalid"] span[frm-error="invalid"],
#frm_leave_email_error[frm-error="empty"] span[frm-error="empty"] {
	display: inline-block;
}

/* Upgrade Modal */
#frm-form-upgrade-modal .frm-upgrade-modal-plan-icon {
	color: var(--error-500);
}

/* Code from email modal */
#frm_code_from_email_options {
	color: var(--primary-500);
}

/**
 * Helper Classes
 *
 * Provides helper classes for common layout patterns and animations in the
 * Form Templates page.
 */

.frm_hidden {
	display: none; /* Load this last for overrides */
}

.frm-form-templates-divider {
	border-top: 1px solid var(--grey-200);
	margin: 0;
}

Back