From af3b6c1143ea2b4f4a10900fad7df98ef49dd083 Mon Sep 17 00:00:00 2001
From: Arthur Lu <learthurgo@gmail.com>
Date: Mon, 8 May 2023 00:50:14 +0000
Subject: [PATCH] use css vars for colors

---
 config.html   |  4 ++--
 css/form.css  | 25 ++++++++++---------------
 css/nav.css   | 25 +++++++++++++++++++------
 css/style.css | 29 ++++++++++++++---------------
 4 files changed, 45 insertions(+), 38 deletions(-)

diff --git a/config.html b/config.html
index 241a43a..6c393e8 100644
--- a/config.html
+++ b/config.html
@@ -28,11 +28,11 @@
 			<section class="w3-container">
 				<h2 id="name"><a href="index.html">Instances</a> / %{vmname}</h2>
 				<form>
-					<fieldset>
+					<fieldset class="w3-card w3-padding">
 						<legend>Resources</legend>
 						<div class="input-grid" id="resources" style="grid-template-columns: repeat(3, auto) 1fr;"></div>
 					</fieldset>
-					<fieldset style="margin-top: 16px;">
+					<fieldset class="w3-card w3-padding" style="margin-top: 16px;">
 						<legend>Disks</legend>
 						<div class="input-grid" id="disks" style="grid-template-columns: auto auto auto 1fr;"></div>
 						<div class="w3-container w3-center">
diff --git a/css/form.css b/css/form.css
index e3bafac..6bddde0 100644
--- a/css/form.css
+++ b/css/form.css
@@ -15,23 +15,18 @@
 }
 
 legend {
-    display: table;
-    float: left;
-    margin: 8px 0;
-    padding: 0;
-    width: 100%;
-    + * {
-        clear: both;
-    }
+	display: table;
+	float: left;
+	margin: 8px 0;
+	padding: 0;
+	width: 100%;
+	+ * {
+		clear: both;
+	}
 }
 
 fieldset {
-    border: 0;
-    padding: 8px 16px;
-    margin: 0;
-    min-width: 0;
-	background-color: #202020;
-	box-shadow: 0 2px 5px 0px black;
+	border: 0;
 }
 
 fieldset > *:last-child {
@@ -39,5 +34,5 @@ fieldset > *:last-child {
 }
 
 body:not(:-moz-handler-blocked) fieldset {
-    display: table-cell;
+	display: table-cell;
 }
\ No newline at end of file
diff --git a/css/nav.css b/css/nav.css
index 83617f1..ad60839 100644
--- a/css/nav.css
+++ b/css/nav.css
@@ -1,10 +1,25 @@
+:root {
+	--nav-bg-color: black;
+	--nav-text-color: white;
+	--nav-header-bg-color: #0f0;
+	--nav-header-text-color: black;
+	--nav-link-hover-color: var(--main-bg-color, #404040);
+}
+
 nav {
 	overflow: hidden;
-	color: white;
-	background-color: black;
+	background-color: var(--nav-bg-color);
+	color: var(--nav-text-color);
 	font-size: larger;
 }
 
+nav h1 {
+	font-size: 18px;
+	margin: 0px;
+	background-color: var(--nav-header-bg-color);
+	color: var(--nav-header-text-color);
+}
+
 nav a, nav h1, nav label {
 	text-align: left;
 	padding: 8px 10px;
@@ -17,13 +32,11 @@ nav a, nav h1, nav label {
 
 @media screen and (min-width: 600px){
 	#hamitems a:hover, #hamitems a[aria-current="true"], #hamitems:hover a[aria-current="true"]:hover {
-		background-color: #303030;
-		color: white;
+		background-color: var(--nav-link-hover-color);
 	}
 	
 	#hamitems:hover a[aria-current="true"] {
-		background-color: black;
-		color: white;
+		background-color: var(--nav-bg-color);
 	}
 
 	nav {
diff --git a/css/style.css b/css/style.css
index 097e756..2faab2f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,6 +1,12 @@
 :root {
 	--fail-color: #f00;
 	--success-color: #0f0;
+	--main-bg-color: #404040;
+	--main-text-color: white;
+	--main-card-bg-color: #202020;
+	--main-card-shadow-color: black;
+	--main-table-header-bg-color: black;
+	--main-input-bg-color: #404040;
 }
 
 * {
@@ -20,33 +26,26 @@ body {
 
 main, dialog {
 	max-width: 100vw;
-	background-color: #303030;
-	color: white;
-}
-
-h1 {
-	font-size: 18px;
-	margin: 0px;
-	background-color: #0f0;
-	color: #000;
+	background-color: var(--main-bg-color);
+	color: var(--main-text-color);
 }
 
 .w3-card {
-	background-color: #202020;
-	box-shadow: 0 2px 5px 0 black;
+	background-color: var(--main-card-bg-color);
+	box-shadow: 0 2px 5px 0 var(--main-card-shadow-color);
 }
 
 th {
-	background-color: #080808;
+	background-color: var(--main-table-header-bg-color);
 }
 
 td {
-	background-color: #202020;
+	background-color: var(--main-card-bg-color);
 }
 
 input, select, textarea {
-	background-color: #303030;
-	color: white;
+	background-color: var(--main-input-bg-color);
+	color: var(--main-text-color);
 }
 
 img.clickable {