A heckin ton. Mostly hackish

frontend/webpage/static/styles/login.css

@@ -0,0 +1,127 @@
+:root {
+	--form-spacing: 48px;
+
+	--element-spacing: 12px;
+
+	--error: #F95959;
+}
+
+#login-page {
+	display: block;
+
+	max-width: 1280px;
+}
+
+#login-flex {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+}
+
+#login-subsection {
+	width: 100%;
+}
+
+#login-elements {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+#login-header {
+	box-sizing: border-box;
+
+	width: 50%;
+	height: max-content;
+}
+
+#login-form {
+	box-sizing: border-box;
+
+	padding: 24px 0;
+
+	width: 50%;
+	height: max-content;
+
+	background-color: var(--distinction);
+
+	border-radius: 8px;
+}
+
+.form-row {
+	margin: var(--element-spacing) var(--form-spacing) 0;
+	border: 0;
+	padding: 0;
+	width: calc(100% - var(--form-spacing) * 2);
+	height: 40px;
+}
+
+.form-row.top {
+	margin-top: 0;
+}
+
+.form-row.multiline {
+	height: max-content;
+}
+
+#error-message {
+	display: none;
+
+	line-height: 40px;
+
+	color: var(--error);
+	font-size: 20px;
+}
+
+.login-field {
+	box-sizing: border-box;
+	padding: 0 var(--element-spacing);
+	font-size: 18px;
+	border-radius: 4px;
+	outline: none;
+}
+
+.login-field.error {
+	background-color: var(--error);
+}
+
+.ap-button.login {
+	height: 40px;
+
+	font-size: 18px;
+}
+
+#username,
+#confirm {
+	display: none;
+}
+
+#button-row {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+}
+
+#create-user-button,
+#guest-login-button {
+	width: calc(50% - var(--element-spacing) / 2);
+}
+
+#login-button {
+	width: calc(100% - var(--form-spacing * 2))
+}
+
+#warning {
+	color: var(--error);
+	font-size: 24px;
+	text-align: center;
+	line-height: 40px;
+}
+
+#warning-message {
+	margin-top: 0;
+	color: var(--foreground);
+	font-size: 18px;
+	text-align: center;
+}