Add styles to non-admin forms, as well

src/back/routes/admin/forms.admin-forms.css

@@ -21,113 +21,6 @@ body:not(*:has(.jdd-container)) .form-container {
 	}
 
 	.form {
-		display: grid;
-		grid-template-columns: 1fr 1fr;
-		--column-count: 2;
-
-		@container (max-width: 900px) {
-			grid-template-columns: 1fr;
-			--column-count: 1;
-		}
-
-		grid-auto-flow: dense;
-		gap: 8px;
-		max-width: 1224px;
-		margin: 0 auto;
-
-		.form-messages {
-			grid-column: span var(--column-count);
-			position: sticky;
-			top: 16px;
-			z-index: 3;
-			display: flex;
-			flex-flow: column;
-			gap: 8px;
-
-			.form-message {
-				display: inline-block;
-				align-self: center;
-			}
-		}
-
-		& > .form-input__wrapper {
-			border-radius: 4px;
-			padding: 1rem;
-			background-color: color-mix(
-				in srgb,
-				var(--color-brand-accent) 20%,
-				transparent
-			);
-			border: 1px solid var(--color-brand-accent);
-		}
-
-		& > h2 {
-			grid-column: span var(--column-count);
-			font-family: var(--font-sans-serif);
-			color: var(--color-brand-text-fg);
-			font-size: 36px;
-			margin: 1rem 0;
-		}
-
-		input[type="submit"] {
-			background-color: var(--color-brand-accent);
-			color: white;
-			grid-column: span var(--column-count);
-			border-radius: 10px;
-			height: 40px;
-			border: none;
-			cursor: pointer;
-
-			&:hover {
-				filter: brightness(1.2);
-			}
-		}
-
-		textarea {
-			width: 100%;
-			min-height: 120px;
-		}
-
-		.form-input--type-checkbox {
-			grid-row: span 1;
-		}
-
-		.form-input__wrapper--control-type__image {
-			grid-row: span 2;
-			gap: 8px;
-		}
-
-		.form-input__wrapper--text,
-		.form-input__wrapper--type__date,
-		.form-input__wrapper--type__datetime-local,
-		.form-input__wrapper--type__number,
-		.form-input__wrapper--enum,
-		.form-input--type-simple-input,
-		.form-input__wrapper--type__password {
-			display: flex;
-			flex-flow: row nowrap;
-			align-items: center;
-			gap: 8px;
-
-			input,
-			select {
-				font-size: 14px;
-				border-radius: 3px;
-				border-style: solid;
-				border-width: 1px;
-				border-color: color-mix(
-					in srgb,
-					var(--color-brand-accent) 50%,
-					transparent
-				);
-				box-sizing: border-box;
-				height: 50px;
-				padding: 8px;
-				flex-grow: 1;
-				background-color: hsl(13.8, 40%, 100%);
-			}
-		}
-
 		.form-input__wrapper--file:not(.form-input__wrapper--control-type__photo) {
 			grid-row: span 2;
 			display: grid;

src/back/routes/admin/forms.css

@@ -115,7 +115,106 @@
 	}
 }
 
-.form {
+.form-container .form {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	--column-count: 2;
+
+	@container (max-width: 900px) {
+		grid-template-columns: 1fr;
+		--column-count: 1;
+	}
+
+	grid-auto-flow: dense;
+	gap: 8px;
+	max-width: 1224px;
+	margin: 0 auto;
+
+	.form-messages {
+		grid-column: span var(--column-count);
+		position: sticky;
+		top: 16px;
+		z-index: 3;
+		display: flex;
+		flex-flow: column;
+		gap: 8px;
+
+		.form-message {
+			display: inline-block;
+			align-self: center;
+		}
+	}
+
+	& > .form-input__wrapper {
+		border-radius: 4px;
+		padding: 1rem;
+		background-color: color-mix(in srgb, var(--color-brand-accent) 20%, transparent);
+		border: 1px solid var(--color-brand-accent);
+	}
+
+	& > h2 {
+		grid-column: span var(--column-count);
+		font-family: var(--font-sans-serif);
+		color: var(--color-brand-text-fg);
+		font-size: 36px;
+		margin: 1rem 0;
+	}
+
+	input[type="submit"] {
+		background-color: var(--color-brand-accent);
+		color: white;
+		grid-column: span var(--column-count);
+		border-radius: 10px;
+		height: 40px;
+		border: none;
+		cursor: pointer;
+
+		&:hover {
+			filter: brightness(1.2);
+		}
+	}
+
+	textarea {
+		width: 100%;
+		min-height: 120px;
+	}
+
+	.form-input--type-checkbox {
+		grid-row: span 1;
+	}
+
+	.form-input__wrapper--control-type__image {
+		grid-row: span 2;
+		gap: 8px;
+	}
+
+	.form-input__wrapper--text,
+	.form-input__wrapper--type__date,
+	.form-input__wrapper--type__datetime-local,
+	.form-input__wrapper--type__number,
+	.form-input__wrapper--enum,
+	.form-input--type-simple-input,
+	.form-input__wrapper--type__password {
+		display: flex;
+		flex-flow: row nowrap;
+		align-items: center;
+		gap: 8px;
+
+		input,
+		select {
+			font-size: 14px;
+			border-radius: 3px;
+			border-style: solid;
+			border-width: 1px;
+			border-color: color-mix(in srgb, var(--color-brand-accent) 50%, transparent);
+			box-sizing: border-box;
+			height: 50px;
+			padding: 8px;
+			flex-grow: 1;
+			background-color: var(--color-brand-canvas);
+		}
+	}
+
 	.file_preview__icon {
 		display: flex;
 		flex-flow: row;

src/back/routes/login.form.ts

@@ -22,6 +22,7 @@ export default new (class LoginForm extends Form<typeof fields, void> {
 	fields = fields;
 
 	controls = [
+		new Controls.FormHeader(`Log in`),
 		new Controls.SimpleInput(fields.username, {
 			label: "Username:",
 			type: "text",