From 223d6c6ded95fd10322321a5ecf204e46f3f50a9 Mon Sep 17 00:00:00 2001
From: rubenthoms <69145689+rubenthoms@users.noreply.github.com>
Date: Thu, 29 Sep 2022 13:58:13 +0200
Subject: [PATCH] Changed background color of sliders (#268)

* Made background color of slider rail slightly darker to improve visibility
---
 .../lib/components/Layout/Slider/slider.css   | 36 ++++++++++---------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/react/src/lib/components/Layout/Slider/slider.css b/react/src/lib/components/Layout/Slider/slider.css
index cb15834d..d142fa57 100644
--- a/react/src/lib/components/Layout/Slider/slider.css
+++ b/react/src/lib/components/Layout/Slider/slider.css
@@ -1,26 +1,30 @@
 /* !Important is needed to take precedence of the .rc-slider classes */
 
+.webviz-slider .rc-slider-rail {
+    background-color: rgb(190, 190, 190);
+}
+
 .webviz-slider .rc-slider-track {
-    background-color: var(--menuLinkColor) !important;
-  }
-  
-  .webviz-slider .rc-slider-dot-active {  
+    background-color: var(--menuLinkHoverColor) !important;
+}
+
+.webviz-slider .rc-slider-dot-active {
     border-color: var(--menuLinkHoverColor) !important;
     border-color: var(--menuLinkHoverColor) !important;
-  }
-  
-  .webviz-slider .rc-slider-handle {
+}
+
+.webviz-slider .rc-slider-handle {
     background-color: var(--menuLinkHoverColor) !important;
     border-color: var(--menuLinkHoverColor) !important;
-  }
-  
-  .webviz-slider .rc-slider-handle-active:active {
+}
+
+.webviz-slider .rc-slider-handle-active:active {
     border-color: var(--menuLinkHoverColor) !important;
-    box-shadow: 0 0 5px  var(--menuLinkHoverColor) !important;
-  }
-  
-  .webviz-slider .rc-slider-dot {
-    margin-left:-10px !important;
+    box-shadow: 0 0 5px var(--menuLinkHoverColor) !important;
+}
+
+.webviz-slider .rc-slider-dot {
+    margin-left: -10px !important;
     background-color: var(--menuBackground) !important;
     border-color: var(--menuLinkHoverColor) !important;
-  }
+}