css vars refactoring

3 files changed, 19 insertions, 19 deletions

diff --git a/kvmd/web/css/keyboard.css b/kvmd/web/css/keyboard.css
index fff53ef9..d2894947 100644
--- a/kvmd/web/css/keyboard.css
+++ b/kvmd/web/css/keyboard.css
@@ -93,5 +93,5 @@ div#keyboard p {
 	transform: translateY(-50%);
 }
 div#keyboard b {
-	color: var(--fg-color-special);
+	color: var(--bg-color-intensive);
 }
diff --git a/kvmd/web/css/msd.css b/kvmd/web/css/msd.css
index ee9fb147..b5b0a1aa 100644
--- a/kvmd/web/css/msd.css
+++ b/kvmd/web/css/msd.css
@@ -23,7 +23,7 @@ td#msd-new-image-size {
 }
 
 div#msd-progress {
-	background-color: var(--bg-color-progress);
+	background-color: var(--bg-color-selected);
 	height: 1.5em;
 	width: 100%;
 	position: relative;
@@ -39,7 +39,7 @@ div#msd-progress:before {
 	right: 0;
 }
 div#msd-progress span#msd-progress-value {
-	background-color: var(--fg-color-progress);
+	background-color: var(--bg-color-intensive);
 	display: inline-block;
 	height: 100%;
 }
diff --git a/kvmd/web/css/vars.css b/kvmd/web/css/vars.css
index 3c25cec0..8db3d3f5 100644
--- a/kvmd/web/css/vars.css
+++ b/kvmd/web/css/vars.css
@@ -1,16 +1,4 @@
 :root {
-	--dark-border: thin solid #17191d;
-	--grey-border: thin solid #202225;
-	--normal-border: thin solid #36393f;
-	--black-border: thin solid black;
-	--intensive-border: 2px solid #5b90bb;
-
-	--micro-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.4);
-	--small-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
-	--big-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.4);
-
-	--border-color-intensive: #5b90bb;
-
 	--bg-color-normal: #36393f;
 	--bg-color-light: #484b51;
 	--bg-color-gray: #3b3e43;
@@ -19,15 +7,27 @@
 	--bg-color-intensive: #436a8a;
 	--bg-color-hovered: #1a1c1f;
 	--bg-color-selected: #171717;
-	--bg-color-progress: #171717;
 
 	--fg-color-normal: #c3c3c3;
 	--fg-color-dark: #aaaaaa;
 	--fg-color-intensive: white;
 	--fg-color-inactive: #6c7481;
-	--fg-color-selected: #6c7481;
-	--fg-color-progress: #436a8a;
-	--fg-color-special: #436a8a;
+	--fg-color-selected: var(--fg-color-inactive);
 
 	--bg-color-stream-screen: black;
+
+	--border-color-normal: var(--bg-color-normal);
+	--border-color-grey: var(--bg-color-ctl);
+	--border-color-dark: var(--bg-color-dark);
+	--border-color-intensive: #5b90bb;
+
+	--dark-border: thin solid var(--border-color-dark);
+	--grey-border: thin solid var(--border-color-grey);
+	--normal-border: thin solid var(--border-color-normal);
+	--black-border: thin solid black;
+	--intensive-border: 2px solid var(--border-color-intensive);
+
+	--micro-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.4);
+	--small-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
+	--big-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.4);
 }