From d562c70667caad67fe197b69cc8a779aa77aac2e Mon Sep 17 00:00:00 2001
From: Aaron van Geffen <aaron@aaronweb.net>
Date: Sun, 29 Nov 2020 17:54:32 +0100
Subject: [PATCH] Improve styling of form elements.

---
 public/css/default.css | 61 +++++++++++++++++++++++++++++-------------
 1 file changed, 43 insertions(+), 18 deletions(-)

diff --git a/public/css/default.css b/public/css/default.css
index 861d257..020da75 100644
--- a/public/css/default.css
+++ b/public/css/default.css
@@ -375,34 +375,59 @@ footer a {
 
 input, select, .btn {
 	background: #fff;
-	border: 1px solid #ccc;
+	border: 1px solid #dbdbdb;
+	border-radius: 4px;
 	color: #000;
 	font: 13px/1.7 "Open Sans", "Helvetica", sans-serif;
 	padding: 3px;
 }
-input[type=submit], button, .btn {
-	background: #ddd;
-	border-radius: 3px;
-	border: 1px solid #aaa;
-	display: inline-block;
-	font: inherit;
-	padding: 4px 5px;
-}
-input[type=submit]:hover, button:hover, .btn:hover {
-	background-color: #d0d0d0;
-	border-color: #a0a0a0;
-}
 textarea {
-	border: 1px solid #ccc;
-	font: 12px/1.4 'Monaco', 'Inconsolata', 'DejaVu Sans Mono', monospace;
+	border: 1px solid #dbdbdb;
+	border-radius: 4px;
+	font: 14px/1.4 'Inconsolata', 'DejaVu Sans Mono', monospace;
 	padding: 0.75%;
-	width: 98.5%;
 }
+
+input[type=submit], button, .btn {
+	background-color: #eee;
+	border-color: #dbdbdb;
+	border-width: 1px;
+	border-radius: 4px;
+	color: #363636;
+	cursor: pointer;
+	display: inline-block;
+	justify-content: center;
+	padding-bottom: calc(0.4em - 1px);
+	padding-left: 0.8em;
+	padding-right: 0.8em;
+	padding-top: calc(0.4em - 1px);
+	text-align: center;
+	white-space: nowrap;
+}
+input:hover, select:hover, button:hover, .btn:hover {
+	border-color: #b5b5b5;
+}
+input:focus, select:focus, button:focus, .btn:focus {
+	border-color: #3273dc;
+}
+input:focus:not(:active), select:focus:not(:active), button:focus:not(:active), .btn:focus:not(:active) {
+	box-shadow: 0px 0px 0px 2px rgba(50, 115, 220, 0.25);
+}
+input:active, select:active, button:active, .btn:active {
+	border-color: #4a4a4a;
+}
+
 .btn-red {
-	background: #F3B076;
-	border-color: #C98245;
+	background: #eebbaa;
+	border-color: #cc9988;
+}
+.btn-red:hover, .btn-red:focus {
+	border-color: #bb7766;
 	color: #000;
 }
+.btn-red:focus:not(:active) {
+	box-shadow: 0px 0px 0px 2px rgba(241, 70, 104, 0.25);
+}
 
 
 /* Login box styles