From f439ad29997c071606b22ce42be680d5a563215a Mon Sep 17 00:00:00 2001
From: Hristo Terezov <hristo@jitsi.org>
Date: Mon, 11 Mar 2019 11:43:33 +0000
Subject: [PATCH] feat(popover): Make the popover menus customizable.

---
 css/_popover.scss      |  7 +++++++
 css/_popup_menu.scss   | 27 +++++++++++++++++++++------
 css/themes/_light.scss |  9 ++++++---
 3 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/css/_popover.scss b/css/_popover.scss
index f89aa1036..2f0dc5117 100644
--- a/css/_popover.scss
+++ b/css/_popover.scss
@@ -41,3 +41,10 @@
     top: -25px;
     width: 100%;
 }
+
+.popover {
+    background-color: $popoverBg;
+    border-radius: 3px;
+    margin: -16px -24px;
+    padding: 16px 24px;
+}
diff --git a/css/_popup_menu.scss b/css/_popup_menu.scss
index 4d48f6024..220aa64b4 100644
--- a/css/_popup_menu.scss
+++ b/css/_popup_menu.scss
@@ -5,16 +5,13 @@
 .popupmenu {
     min-width: 75px;
     text-align: left;
-    padding: 0;
+    padding: 0px;
+    width: 150px;
     white-space: nowrap;
 
     &__item {
         list-style-type: none;
         height: 35px;
-
-        &:hover {
-            background-color: rgba(9, 30, 66, 0.04);
-        }
     }
 
     // Link Appearance
@@ -28,6 +25,12 @@
         width: 100%;
         cursor: pointer;
         padding: 0 5px;
+        color: $popupMenuColor;
+
+        &:hover {
+            background-color: $popupMenuHoverBackground;
+            color: $popupMenuHoverColor;
+        }
 
         &.disabled {
             pointer-events: none;
@@ -62,6 +65,18 @@
                 top: 50%;
                 transform: translate(0, -50%);
                 width: 100%;
+
+                &::-webkit-slider-runnable-track {
+                    background-color: $popupSliderColor;
+                }
+
+                &::-moz-range-track {
+                    background-color: $popupSliderColor;
+                }
+
+                &::-ms-fill-lower {
+                    background-color: $popupSliderColor;
+                }
             }
         }
     }
@@ -91,7 +106,7 @@
  * InlineDialogs.
  */
 ul.popupmenu {
-    margin: -15px;
+    margin: -16px -24px;
 }
 
 span.remotevideomenu:hover ul.popupmenu, ul.popupmenu:hover {
diff --git a/css/themes/_light.scss b/css/themes/_light.scss
index 5b4978220..edc48e7b8 100644
--- a/css/themes/_light.scss
+++ b/css/themes/_light.scss
@@ -80,9 +80,12 @@ $errorColor: #c61600;
 $feedbackCancelFontColor: #333;
 
 // Popover colors
-$popoverBg: #000;
-$popoverFontColor: #ffffff;
-$popupMenuSelectedItemBackground: rgba(256, 256, 256, .2);
+$popoverBg: initial;
+$popoverFontColor: #ffffff !important;
+$popupMenuColor: #ffffff !important;
+$popupMenuHoverColor: #ffffff !important;
+$popupMenuHoverBackground: rgba(255, 255, 255, 0.1);
+$popupSliderColor: #0376da;
 
 // Toolbar
 $secondaryToolbarBg: rgba(0, 0, 0, 0.5);