From 92b6afa87a692917e8c4fc292e0d2581a24f7072 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Sat, 24 Feb 2018 17:55:05 +0100
Subject: [PATCH] Fix #72: volume slider should now have the same style
 everywhere

---
 CHANGELOG                             |  1 +
 front/src/components/audio/Player.vue | 48 +++++++++++++++++++++++++++
 2 files changed, 49 insertions(+)

diff --git a/CHANGELOG b/CHANGELOG
index 0a6e27daf..a35f15932 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -5,6 +5,7 @@ Changelog
 ----------------
 
 - Front: Fixed broken ajax call on radio builder (#69)
+- Front: volume slider should now have the same style everywhere (#72)
 
 0.5 (2018-02-24)
 ----------------
diff --git a/front/src/components/audio/Player.vue b/front/src/components/audio/Player.vue
index 5e9965158..a6cd80523 100644
--- a/front/src/components/audio/Player.vue
+++ b/front/src/components/audio/Player.vue
@@ -310,6 +310,54 @@ export default {
     cursor: pointer;
     display: none;
   }
+  input[type=range] {
+    -webkit-appearance: none;
+  }
+  input[type=range]:focus {
+    outline: none;
+  }
+  input[type=range]::-webkit-slider-runnable-track {
+    cursor: pointer;
+    background: white;
+  }
+  input[type=range]::-webkit-slider-thumb {
+    background: white;
+    cursor: pointer;
+    -webkit-appearance: none;
+  }
+  input[type=range]:focus::-webkit-slider-runnable-track {
+    background: #white;
+  }
+  input[type=range]::-moz-range-track {
+    cursor: pointer;
+    background: white;
+  }
+  input[type=range]::-moz-range-thumb {
+    background: white;
+    cursor: pointer;
+  }
+  input[type=range]::-ms-track {
+    cursor: pointer;
+    background: transparent;
+    border-color: transparent;
+    color: transparent;
+  }
+  input[type=range]::-ms-fill-lower {
+    background: white;
+  }
+  input[type=range]::-ms-fill-upper {
+    background: white;
+  }
+  input[type=range]::-ms-thumb {
+    background: white;
+    cursor: pointer;
+  }
+  input[type=range]:focus::-ms-fill-lower {
+    background: white;
+  }
+  input[type=range]:focus::-ms-fill-upper {
+    background: #white;
+  }
   &:hover {
     [type="range"] {
       display: block;
-- 
GitLab