Update styles

pawteam · Nov 8, 2023 · bb21e2c · bb21e2c
1 parent c20521d
commit bb21e2c
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 18 deletions.
diff --git a/styles/app.scss b/styles/app.scss
@@ -1,42 +1,42 @@
-$IMG_WIDTH: 160px;
+@import 'values';
 
 body.enabled {
 	font-family: "Courier New", Helvtica, Arial, Verdata, Tahoma, serif;
-	background-color: black;
-	color: lightgreen;
+	background-color: $back_color;
+	color: $color;
 
 	*::selection {
-		background-color: lightgreen;
-		color: black;
+		background-color: $color;
+		color: $back_color;
 	}
 
 	a {
-		color: red;
+		color: $link_color;
 		text-decoration: none;
 		&:hover {
 			text-decoration: underline;
 		}
 
 		&::selection {
-			background-color: red;
-			color: black;
+			background-color: $link_color;
 		}
 	}
 
 	button {
-		border: 3px solid red;
+		border: 3px solid $button_color;
 		background-color: inherit;
-		color: red;
+		color: $button_color;
 		margin: 2px;
+		user-select: none;
 
 		&:hover {
-			border: 3px solid lightblue;
-			color: lightblue;
+			border: 3px solid $button_hover_color;
+			color: $button_hover_color;
 		}
 
 		&:active {
-			border: 5px solid lightblue;
-			color: lightblue;
+			border: 5px solid $button_active_color;
+			color: $button_active_color;
 			margin: 0;
 		}
 	}
@@ -47,17 +47,17 @@ body.enabled {
 		bottom: 20px;
 		left: 50%;
 		width: auto;
-		height: $IMG_WIDTH;
+		height: $img_height;
 		transform: translateX(-50%);
 
 		img {
 			position: relative;
-			height: $IMG_WIDTH;
+			height: $img_height;
 			width: auto;
 			float: left bottom;
 
 			&.machine {
-				height: calc($IMG_WIDTH / 2);
+				height: calc($img_height / 2);
 			}
 		}
 	}

diff --git a/www/index.html b/www/index.html
@@ -1,7 +1,7 @@
 <html>
 	<head>
 		<title>Pay and Wash</title>
-		<link rel="stylesheet" href="/css/app.css"/>
+		<link id="appStyle" rel="stylesheet" href="/css/app.css"/>
 	</head>
 	<body>
 		<script src="/js/site-wrap.js"></script>
@@ -36,6 +36,9 @@
 				});
 				document.body.outerHTML = '<@>LOADING</@>'.replace('@', 'body');
 			});
+			window.devcss = () => {
+				document.querySelector('head').removeChild(document.getElementById('appStyle'));
+			};
 		</script>
 	</head>
 	<body>