# HG changeset patch
# User ymh <ymh.work@gmail.com>
# Date 1482195035 -3600
# Node ID e7df0b5b09b65974bfdb3010a46a5ab8816685f7
# Parent  b621657bb436d837079e91592eed94383b46d66d
better cross browser compatibility, still pb with MS edge

diff -r b621657bb436 -r e7df0b5b09b6 cms/app-client/app/styles/components/player-sound-control.scss
--- a/cms/app-client/app/styles/components/player-sound-control.scss	Mon Dec 19 21:58:29 2016 +0100
+++ b/cms/app-client/app/styles/components/player-sound-control.scss	Tue Dec 20 01:50:35 2016 +0100
@@ -65,83 +65,106 @@
   }
 
   // taken from http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html
-
-  .volume-slider {
-    height: 5px;
+  // http://danielstern.ca/range.css/#/
+  #sound-control-range-wrapper {
     width: 50px;
-    position: absolute;
-
-    /*removes default webkit styles*/
-    -webkit-appearance: none;
-
-    transform: rotate(270deg) translate(-15px, -20px);
-    -ms-transform: rotate(270deg) translate(30px, 20px);
-    transform-origin: bottom;
-
-  }
-  .volume-slider::-webkit-slider-runnable-track {
-    height: 5px;
-    width: 50px;
-    background: #ddd;
-    border: none;
-    border-radius: 3px;
-    margin-top: 11px;
-  }
-  .volume-slider::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    border: none;
-    height: 11px;
-    width: 11px;
-    border-radius: 50%;
-    background: $corpus-blue;
-    margin-top: -3px;
+    transform: rotate(270deg) translate(-10px, -12px);
+    -webkit-transform: rotate(270deg) translate(-15px, -19px);
+    -moz-transform: rotate(270deg) translate(-15px, -12px);
+    -ms-transform: rotate(270deg) translate(2px, -8px);
+    transform-origin: 50% 50%;
   }
 
-  .volume-slider[disabled]::-webkit-slider-thumb {
-    background: $corpus-grey;
+  input[type=range] {
+    -webkit-appearance: none;
+    width: 100%;
+    margin: 3px 3px;
   }
-
-  .volume-slider:focus {
+  input[type=range]:focus {
     outline: none;
   }
-  .volume-slider:focus::-webkit-slider-runnable-track {
-    background: #ccc;
-  }
-
-  .volume-slider::-moz-range-track {
-    width: 50px;
+  input[type=range]::-webkit-slider-runnable-track {
+    width: 100%;
     height: 5px;
-    background: #ddd;
-    border: none;
-    border-radius: 2px;
+    cursor: pointer;
+    box-shadow: 0px 0px px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
+    background: rgba(48, 113, 169, 0.78);
+    border-radius: 1.3px;
+    border: 0.2px solid #010101;
   }
-
-  .volume-slider::-moz-range-progress {
-    background-color: $corpus-light-blue;
+  input[type=range]::-webkit-slider-thumb {
+    box-shadow: 0px 0px 0px #000031, 0px 0px 0px #00004b;
+    border: 1px solid #00001e;
+    height: 11px;
+    width: 11px;
+    border-radius: 11px;
+    background: #ffffff;
+    cursor: pointer;
+    -webkit-appearance: none;
+    margin-top: -3.5px;
+    //margin-top: -2px;
   }
-
-  .volume-slider::-moz-range-thumb {
-    border: none;
+  input[type=range]:focus::-webkit-slider-runnable-track {
+    background: rgba(106, 163, 213, 0.78);
+  }
+  input[type=range]::-moz-range-track {
+    width: 100%;
+    height: 5px;
+    cursor: pointer;
+    box-shadow: 0px 0px px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
+    background: rgba(48, 113, 169, 0.78);
+    border-radius: 1.3px;
+    border: 0.2px solid #010101;
+  }
+  input[type=range]::-moz-range-thumb {
+    box-shadow: 0px 0px 0px #000031, 0px 0px 0px #00004b;
+    border: 1px solid #00001e;
     height: 11px;
     width: 11px;
-    border-radius: 50%;
-    background: $corpus-blue;
+    border-radius: 11px;
+    background: #ffffff;
+    cursor: pointer;
+  }
+  input[type=range]::-ms-track {
+    width: 100%;
+    height: 5px;
+    cursor: pointer;
+    background: transparent;
+    border-color: transparent;
+    color: transparent;
+  }
+  input[type=range]::-ms-fill-lower {
+    background: rgba(25, 60, 90, 0.78);
+    border: 0.2px solid #010101;
+    border-radius: 2.6px;
+    box-shadow: 0px 0px px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
   }
-
-  .volume-slider[disabled]::-moz-range-thumb {
-    background: $corpus-grey;
+  input[type=range]::-ms-fill-upper {
+    background: rgba(48, 113, 169, 0.78);
+    border: 0.2px solid #010101;
+    border-radius: 2.6px;
+    box-shadow: 0px 0px px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
+  }
+  input[type=range]::-ms-thumb {
+    box-shadow: 0px 0px 0px #000031, 0px 0px 0px #00004b;
+    border: 1px solid #00001e;
+    height: 11px;
+    width: 11px;
+    border-radius: 11px;
+    background: #ffffff;
+    cursor: pointer;
+  }
+  input[type=range]:focus::-ms-fill-lower {
+    background: rgba(48, 113, 169, 0.78);
+  }
+  input[type=range]:focus::-ms-fill-upper {
+    background: rgba(106, 163, 213, 0.78);
   }
 
 
-  /*hide the outline behind the border*/
-  .volume-slider:-moz-focusring {
-    outline: 1px solid $corpus-white;
-    outline-offset: -1px;
-  }
-
   #sound-control-scale-minus {
     position: absolute;
-    top: 67px;
+    top: 70px;
     left: 7px;
   }
 
diff -r b621657bb436 -r e7df0b5b09b6 cms/app-client/app/templates/components/player-sound-control.hbs
--- a/cms/app-client/app/templates/components/player-sound-control.hbs	Mon Dec 19 21:58:29 2016 +0100
+++ b/cms/app-client/app/templates/components/player-sound-control.hbs	Tue Dec 20 01:50:35 2016 +0100
@@ -2,6 +2,7 @@
 <div id="sound-control-speaker" aria-hidden="true"><i class="fa {{speakerClass}}" {{action 'muteToggle'}}></i><i class="fa fa-times" {{action 'muteToggle'}}></i></div>
 <div id="sound-control-scale">
   <div id="sound-control-scale-plus" class="sound-control-scale-indicator" {{ action 'clickPlus' }} disabled={{muted}}>+</div>
+  <div id="sound-control-range-wrapper">
   {{input
     type="range"
     min="0"
@@ -11,5 +12,6 @@
     value=volume
     disabled=muted
   }}
+  </div>
   <div id="sound-control-scale-minus" class="sound-control-scale-indicator" {{ action 'clickMinus' }} disabled={{muted}}>-</div>
 </div>