From 96e16edd6f2038b60db56a506194fd394ae75f5b Mon Sep 17 00:00:00 2001
From: WolverinDEV <git@teaspeak.de>
Date: Mon, 20 Jul 2020 19:12:34 +0200
Subject: [PATCH] Made the menu bar fully editable

---
 shared/js/ui/frames/control-bar/button.scss | 20 ++++++++++++++------
 shared/js/ui/frames/control-bar/index.scss  |  3 ++-
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/shared/js/ui/frames/control-bar/button.scss b/shared/js/ui/frames/control-bar/button.scss
index 0c1260c9..b7b79d24 100644
--- a/shared/js/ui/frames/control-bar/button.scss
+++ b/shared/js/ui/frames/control-bar/button.scss
@@ -16,6 +16,14 @@ html:root {
     --menu-bar-button-border-activated-red: #a10000;
     --menu-bar-button-border-activated-hover: #005fa1;
     --menu-bar-button-border-activated-red-hover: #a10000;
+
+    --menu-bar-dropdown: #c4c5c5;
+    --menu-bar-dropdown-border: #2c2525;
+    --menu-bar-dropdown-background: #2d3032;
+    --menu-bar-dropdown-hover-background: #252729;
+
+    --menu-bar-dropdown-arrow-background: #393c43;
+    --menu-bar-dropdown-arrow: #4a4c55;
 }
 
 /* border etc */
@@ -137,11 +145,11 @@ html:root {
         position: absolute;
         margin-left: 5px;
 
-        color: #c4c5c5;
+        color: var(--menu-bar-dropdown);
 
-        background-color: #2d3032;
+        background-color: var(--menu-bar-dropdown-background);
         align-items: center;
-        border: .05em solid #2c2525;
+        border: .05em solid var(--menu-bar-dropdown-border);
         border-radius: 0 $border_radius_middle $border_radius_middle $border_radius_middle;
 
         width: 15em; /* fallback */
@@ -213,7 +221,7 @@ html:root {
             }
 
             &:hover {
-                background-color: #252729;
+                background-color: var(--menu-bar-dropdown-hover-background);
 
                 > .dropdown {
                     display: block;
@@ -238,8 +246,8 @@ html:root {
         }
 
         .button, .dropdown-arrow {
-            background-color: #393c43;
-            border-color: #4a4c55;
+            background-color: var(--menu-bar-dropdown-arrow-background);
+            border-color: var(--menu-bar-dropdown-arrow);
 
             border-bottom-right-radius: 0;
             border-bottom-left-radius: 0;
diff --git a/shared/js/ui/frames/control-bar/index.scss b/shared/js/ui/frames/control-bar/index.scss
index ddbb6808..420d9e58 100644
--- a/shared/js/ui/frames/control-bar/index.scss
+++ b/shared/js/ui/frames/control-bar/index.scss
@@ -4,6 +4,7 @@
 /* Variables */
 html:root {
     --menu-bar-background: #454545;
+    --menu-bar-divider: #393838;
 }
 
 /* max height is 2em */
@@ -25,7 +26,7 @@ html:root {
         flex-grow: 0;
         flex-shrink: 0;
 
-        border-left:2px solid #393838;
+        border-left:2px solid var(--menu-bar-divider);
         height: calc(100% - 3px);
         margin: 3px;
     }