Consistent buttons styles, re-style fieldset contents and legend

Adrian Simmons created

Signed-off-by: Adrian Simmons <adrinux@perlucida.co.uk>

Change summary

ws/static/styles.css | 38 +++++++++++++++++++-------------------
1 file changed, 19 insertions(+), 19 deletions(-)

Detailed changes

ws/static/styles.css 🔗

@@ -267,18 +267,26 @@ form label {
 }
 
 fieldset {
+	position: relative;
 	border: 0 none;
 	background-color: var(--card-background);
-	margin-inline: -0.9rem;
+	margin-inline: -1px; /* Line up with input boxes */
+	margin-block-start: 1rem;
+	padding-inline: 1rem;
 }
 
-fieldset + fieldset {
-	margin-block-start: 0.5rem;
+fieldset legend {
+	position: absolute;
+	top: -1.5rem;
+	left: 0;
+	margin-inline: 1px;
+	padding: 0;
+	font-weight: bold;
 }
 
-fieldset legend {
-	margin-inline: 0;
-	margin-block: 1rem 0.2rem;
+fieldset h4 {
+	margin-inline-start: 0.25rem;
+	margin-block: 0.5rem;
 }
 
 .input {
@@ -295,28 +303,20 @@ fieldset legend {
   display: block;
 }
 
-input.button {
+.button {
 	line-height: 1;
 	padding: 0.6rem 0.5rem 0.4rem;
 	font-weight: bold;
 	font-size: 1.2rem;
-	color: var(--page-background);
-	background-color: var(--action);
-	border: 1px solid var(--card-border);
+	color: var(--action);
+	background-color: var(--page-background);
+	border: 1px solid var(--action);
 	border-radius: 0.5rem;
 	cursor: pointer;
 }
 
-@media (prefers-color-scheme: dark) {
-	input.button {
-		color: var(--action);
-		background-color: var(--page-background);
-		border: 1px solid var(--action);
-	}
-}
-
 form.login .button {
-	margin-block-start: 1.1rem;
+	margin-block-start: 0.75rem;
 }
 
 /* End Forms */