use css vars for coloring

Signed-off-by: Arthur Lu <learthurgo@gmail.com>

css/style.css

@@ -5,7 +5,9 @@
 	--content-txt-color: black;
 	--form-disabled-color: #606060;
 	--button-accept: #0F0;
+	--success-color: #0F0;
 	--button-cancel: #F00;
+	--fail-color: #F00;
 }
 
 * {
@@ -110,23 +112,6 @@ p {
 	text-align: left;
 }
 
-@media screen and (min-width: 480px) {
-.center-div {
-	min-width: 480px;
-	max-width: 50%;
-	width: fit-content;
-	margin-left: auto;
-	margin-right: auto;
-}
-}
-@media screen and (max-width: 480px) {
-.center-div {
-	width: 100%;
-	margin-left: auto;
-	margin-right: auto;
-}
-}
-
 .hidden {
 	visibility: hidden;	
 }

index.html

@@ -19,7 +19,7 @@
 			}
 			instance-obj:after, instance-obj:first-child:before {
 				content: " ";
-				border-bottom: 1px solid black;
+				border-bottom: 1px solid var(--content-txt-color);
 				grid-column: 1 / span 3;
 			}
 		</style>

login.html

@@ -17,7 +17,6 @@
 			</nav>
 		</header>
 		<main>
-			<div class="center-div">
 			<form style="margin-left: auto; margin-right: auto;">
 				<fieldset>
 					<legend>Proxmox VE Login</legend>
@@ -36,8 +35,7 @@
 					</div>
 				</fieldset>
 			</form>
-				<p id="status"></p>
-			</div>
+			<p id="status" style="text-align: center;"></p>
 		</main>
 		<footer><p>&copy; tronnet</p></footer>
 	</body>

scripts/config.js

@@ -325,7 +325,7 @@ async function handleDiskDelete () {
 	document.body.append(dialog);
 
 	dialog.header = `Delete ${this.dataset.disk}`;
-	dialog.formBody = `<p style="color: #FF0000;">Are you sure you want to <strong>delete</strong> disk</p><p style="color: #FF0000;">${this.dataset.disk}</p>`;
+	dialog.formBody = `<p>Are you sure you want to <strong>delete</strong> disk</p><p>${this.dataset.disk}</p>`;
 
 	dialog.callback = async (result, form) => {
 		if (result === "confirm") {

scripts/login.js

@@ -16,7 +16,7 @@ async function init (){
 	});
 	formSubmitButton.addEventListener("click", async (e) => {
 		status.innerText = "";
-		status.style.color = "#000000";
+		status.style.color = "var(--content-txt-color)";
 		e.preventDefault();
 		let form = document.querySelector("form");
 		let formData = new FormData(form);
@@ -25,21 +25,21 @@ async function init (){
 			let ticket = await requestTicket(formData.get("username"), formData.get("password"), formData.get("realm"));
 			setTicket(ticket.data.ticket, ticket.data.CSRFPreventionToken, formData.get("username"));
 			status.innerText = "Authentication successful!"
-			status.style.color = "#00ff00";
+			status.style.color = "var(--success-color)";
 			goToPage("index.html");
 		}
 		catch (error) {
 			if(error instanceof ResponseError) { // response error is usually 401 auth failed
 				status.innerText = "Authentication failed.";
-				status.style.color = "#ff0000";
+				status.style.color = "var(--fail-color)";
 			}
 			else if (error instanceof NetworkError) {
 				status.innerText = "Encountered a network error.";
-				status.style.color = "#ff0000";
+				status.style.color = "var(--fail-color)";
 			}
 			else {
 				status.innerText = "An error occured.";
-				status.style.color = "#ff0000";
+				status.style.color = "var(--fail-color)";
 				console.error(error);
 			}
 		}