From 07b1a0e40387c4a8fa8f49cb2a7e50bdd27e0ec6 Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Sat, 12 Aug 2023 11:54:27 +0000
Subject: [PATCH] Fiddling with login CSS.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4395 ed5197a5-7fde-0310-b194-c3ffbd925b24
---
 core/auth.html | 45 +++++++++++++++++++++++++++++----------------
 1 file changed, 29 insertions(+), 16 deletions(-)
diff --git a/core/auth.html b/core/auth.html
index 1826f381..fd2b780f 100644
--- a/core/auth.html
+++ b/core/auth.html
@@ -2,11 +2,6 @@
 <html>
 	<head>
 		<title>Tilde Friends Sign-in</title>
-		<script>
-			function showHideConfirm() {
-				document.getElementById("confirmPassword").style.display = document.getElementById("register").checked ? "block" : "none";
-			}
-		</script>
 		<link type="text/css" rel="stylesheet" href="/static/style.css">
 		<link type="image/png" rel="shortcut icon" href="/static/favicon.png">
 		<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -47,7 +42,7 @@
 								display: none;
 							}
 							[name="tab"]+label {
-								background-color: #657b83;
+								background-color: #586e75;
 								padding: 1em;
 								display: inline-block;
 								flex: 1 0;
@@ -59,6 +54,7 @@
 							}
 							[name="tab"]:checked+label {
 								background-color: #93a1a1;
+								border: 2px solid #eee8d5;
 							}
 							.error {
 								color: #f00;
@@ -66,8 +62,21 @@
 								margin: 4px;
 								padding: 8px;
 							}
+							form label {
+								padding-top: 1em;
+								font-weight: bold;
+							}
+							form input {
+								font-size: x-large;
+								padding: 4px;
+							}
+							input[type="submit"] {
+								margin-top: 1em;
+								margin-bottom: 1em;
+								padding: 1em;
+							}
 						</style>
-						<div style="display: flex; flex-direction: column">
+						<div style="display: flex; flex-direction: column; max-width: 1280px; margin: auto">
 							<h1 ?hidden=${this.name}>Welcome.</h1>
 							<h1 ?hidden=${this.name === undefined}>Welcome, ${this.name}.</h1>
 
@@ -86,16 +95,22 @@
 								<div id="error" ?hidden=${this.error === undefined} class="error">
 									${this.error}
 								</div>
-								<form method="POST">
-									<div><label for="name">Name:</label> <input type="text" id="name" name="name" value=""></div>
-									<div><label for="password">Password:</label> <input type="password" id="password" name="password" value=""></div>
-									<div ?hidden=${this.tab != 'register'} id="confirmPassword"><label for="confirm">Confirm:</label> <input type="password" id="confirm" name="confirm" value=""></div>
-									<div><input id="loginButton" type="submit" name="submit" value="Login"></div>
+								<form method="POST" style="display: flex; flex-direction: column">
+									<label for="name">Name:</label>
+									<input type="text" id="name" name="name"></input>
+
+									<label for="password">Password:</label>
+									<input type="password" id="password" name="password"></input>
+
+									<label ?hidden=${this.tab != 'register'} for="confirm">Confirm Password:</label>
+									<input ?hidden=${this.tab != 'register'} type="password" id="confirm" name="confirm"></input>
+
+									<input id="loginButton" type="submit" name="submit" value="Login"></input>
 									<input type="hidden" name="register" value="${this.tab == 'register' ? 1 : 0}"></input>
 								</form>
 							</div>
 							<div ?hidden=${this.tab != 'guest'}>
-								<form method="POST">
+								<form method="POST" style="display: flex; flex-direction: column">
 									<input type="submit" id="guestButton" name="guestButton" value="Proceed as Guest"></input>
 								</form>
 							</div>
@@ -105,9 +120,7 @@
 							</div>
 
 							<h2>Code of Conduct</h2>
-							<div>
-								<textarea readonly rows="20" cols="80">${this.code_of_conduct}</textarea>
-							</div>
+							<textarea readonly rows="20" cols="80" style="resize: none">${this.code_of_conduct}</textarea>
 						</div>
 					`;
 				}
