From c3000f8a3a5df392180e902438fa3dc44a22d3c0 Mon Sep 17 00:00:00 2001
From: Arthur Lu <root@tronnet.net>
Date: Mon, 8 May 2023 02:27:14 +0000
Subject: [PATCH] use vars in more color styles

---
 css/nav.css       | 7 ++++---
 css/style.css     | 5 +++--
 scripts/dialog.js | 4 ++--
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/css/nav.css b/css/nav.css
index ad60839..0c852c3 100644
--- a/css/nav.css
+++ b/css/nav.css
@@ -58,9 +58,9 @@ nav a, nav h1, nav label {
 	#hamitems {
 		display: block;
 		position: absolute;
-		top: 55px;
+		top: 43px;
 		right: 0;
-		background-color: black;
+		background-color: var(--nav-bg-color);
 	}
 
 	#hamitems a {
@@ -79,12 +79,13 @@ nav a, nav h1, nav label {
 		padding: 0 0.5em;
 		border: 0;
 		transition: height 250ms cubic-bezier(0.23, 1, 0.32, 1);
+		visibility: hidden;
 	}
 
 	#hamburger:checked ~ #hamitems a {
 		height: 2.5em;
 		padding: 0.5em;
-		border: 1px solid #333;
 		transition: height 250ms cubic-bezier(0.23, 1, 0.32, 1);
+		visibility: visible;
 	}
 }
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 2faab2f..91f1657 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,6 +1,7 @@
 :root {
-	--fail-color: #f00;
-	--success-color: #0f0;
+	--negative-color: #f00;
+	--positive-color: #0f0;
+	--lightbg-text-color: black;
 	--main-bg-color: #404040;
 	--main-text-color: white;
 	--main-card-bg-color: #202020;
diff --git a/scripts/dialog.js b/scripts/dialog.js
index 73d4bd9..40fe005 100644
--- a/scripts/dialog.js
+++ b/scripts/dialog.js
@@ -4,8 +4,8 @@ export function dialog (header, body, callback = async (result, form) => {}) {
 		<p class="w3-large" id="prompt" style="text-align: center;"></p>
 		<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form"></form>
 		<div class="w3-center w3-container">
-			<button value="cancel" form="form" class="w3-button w3-margin" style="background-color: #f00; color: black;" formnovalidate>CANCEL</button>
-			<button value="confirm" form="form" class="w3-button w3-margin" style="background-color: #0f0; color: black;">CONFIRM</button>
+			<button value="cancel" form="form" class="w3-button w3-margin" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button>
+			<button value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button>
 		</div>
 	`;
 	dialog.className = "w3-container w3-card w3-border-0";