css: use vars

1 files changed, 35 insertions, 13 deletions

diff --git a/main.css b/main.css
index 63acc02..7c074d0 100644
--- a/main.css
+++ b/main.css
@@ -1,25 +1,41 @@
+:root {
+    --document-bg: white;
+    --fret-hover-color: yellow;
+    --fret-fg-color-1: white;
+    --fret-bg-color-1: red;
+    --fret-fg-color-2: white;
+    --fret-bg-color-2: green;
+    --fret-fg-color-3: white;
+    --fret-bg-color-3: blue;
+    --fret-muted-fg-color: grey;
+    --key-picker-interval-fg-color: grey;
+    --key-picker-interval-fg-color-1: lightgrey;
+    --key-picker-interval-fg-color-2: lightgrey;
+    --key-picker-interval-fg-color-3: lightgrey;
+}
+
 body {
     color: black;
-    background-color: white;
+    background-color: var(--document-bg);
 }
 
 .hover {
-    background-color: yellow;
+    background-color: var(--fret-hover-color);
 }
 
 .click1 {
-    color: white;
-    background-color: red;
+    color: var(--fret-fg-color-1);
+    background-color: var(--fret-bg-color-1);
 }
 
 .click2 {
-    color: white;
-    background-color: green;
+    color: var(--fret-fg-color-2);
+    background-color: var(--fret-bg-color-2);
 }
 
 .click3 {
-    color: white;
-    background-color: blue;
+    color: var(--fret-fg-color-3);
+    background-color: var(--fret-bg-color-3);
 }
 
 #fretboard {
@@ -59,7 +75,7 @@ body {
 }
 
 #fretboard .muted {
-    color: grey;
+    color: var(--fret-muted-fg-color);
 }
 
 #key-picker .notes {
@@ -75,15 +91,21 @@ body {
     display: grid;
     grid-row-start: 2;
     content: counter(notes, numeric);
-    color: grey;
+    color: var(--key-picker-interval-fg-color);
     font-size: small;
     text-align: center;
 }
 
-#key-picker .notes li.click1:before,
-#key-picker .notes li.click2:before,
+#key-picker .notes li.click1:before {
+    color: var(--key-picker-interval-fg-color-1);
+}
+
+#key-picker .notes li.click2:before {
+    color: var(--key-picker-interval-fg-color-2);
+}
+
 #key-picker .notes li.click3:before {
-    color: lightgrey;
+    color: var(--key-picker-interval-fg-color-3);
 }
 
 #key-picker .notes li {