Changed background color of sliders (#268)

* Made background color of slider rail slightly darker to improve visibility
equinor · Sep 29, 2022 · 223d6c6 · 223d6c6
1 parent 5a916e6
commit 223d6c6
Showing 1 changed file with 20 additions and 16 deletions.
diff --git 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;
-  }
+}