1 .player-sound-control {

     2 

     3   & {

     4     margin: 0px 19px 0px 0px;

     5     font-size: 20px;

     6   }

     7 

     8   #sound-control-speaker {

     9     width: 2em;

    10     line-height: 80px;

    11   }

    12 

    13   #sound-control-speaker i {

    14     cursor: pointer;

    15     vertical-align: middle;

    16   }

    17 

    18   #sound-control-speaker i::before {

    19     font-size: 20px;

    20   }

    21 

    22   #sound-control-speaker i.fa-times::before {

    23     font-size: 16px;

    24   }

    25 

    26   #sound-control-speaker i.fa-volume-off+i.fa-times {

    27     display:inline-block;

    28   }

    29 

    30   #sound-control-speaker i.fa-times {

    31     display:none;

    32   }

    33 

    34   #sound-control-scale {

    35     background-color: $corpus-white;

    36     width: 1em;

    37     height: 90px;

    38     position: fixed;

    39     z-index: 1;

    40     display: none;

    41   }

    42 

    43   #sound-control-scale:hover {

    44     display: block;

    45   }

    46 

    47   .sound-control-scale-indicator {

    48     color: $corpus-black;

    49     text-align: center;

    50     display: table;

    51     margin: 0 auto;

    52     cursor: pointer;

    53     -webkit-touch-callout: none; /* iOS Safari */

    54       -webkit-user-select: none; /* Chrome/Safari/Opera */

    55        -khtml-user-select: none; /* Konqueror */

    56          -moz-user-select: none; /* Firefox */

    57           -ms-user-select: none; /* Internet Explorer/Edge */

    58               user-select: none;

    59   }

    60 

    61   .sound-control-scale-indicator[disabled] {

    62     color: $corpus-grey;

    63     cursor: default;

    64     pointer-events: none;

    65   }

    66 

    67   // taken from http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html

    68 

    69   .volume-slider {

    70     height: 5px;

    71     width: 50px;

    72     position: absolute;

    73 

    74     /*removes default webkit styles*/

    75     -webkit-appearance: none;

    76 

    77     transform: rotate(270deg) translate(-15px, -20px);

    78     -ms-transform: rotate(270deg) translate(30px, 20px);

    79     transform-origin: bottom;

    80 

    81   }

    82   .volume-slider::-webkit-slider-runnable-track {

    83     height: 5px;

    84     width: 50px;

    85     background: #ddd;

    86     border: none;

    87     border-radius: 3px;

    88     margin-top: 11px;

    89   }

    90   .volume-slider::-webkit-slider-thumb {

    91     -webkit-appearance: none;

    92     border: none;

    93     height: 11px;

    94     width: 11px;

    95     border-radius: 50%;

    96     background: $corpus-blue;

    97     margin-top: -3px;

    98   }

    99 

   100   .volume-slider[disabled]::-webkit-slider-thumb {

   101     background: $corpus-grey;

   102   }

   103 

   104   .volume-slider:focus {

   105     outline: none;

   106   }

   107   .volume-slider:focus::-webkit-slider-runnable-track {

   108     background: #ccc;

   109   }

   110 

   111   .volume-slider::-moz-range-track {

   112     width: 50px;

   113     height: 5px;

   114     background: #ddd;

   115     border: none;

   116     border-radius: 2px;

   117   }

   118 

   119   .volume-slider::-moz-range-progress {

   120     background-color: $corpus-light-blue;

   121   }

   122 

   123   .volume-slider::-moz-range-thumb {

   124     border: none;

   125     height: 11px;

   126     width: 11px;

   127     border-radius: 50%;

   128     background: $corpus-blue;

   129   }

   130 

   131   .volume-slider[disabled]::-moz-range-thumb {

   132     background: $corpus-grey;

   133   }

   134 

   135 

   136   /*hide the outline behind the border*/

   137   .volume-slider:-moz-focusring {

   138     outline: 1px solid $corpus-white;

   139     outline-offset: -1px;

   140   }

   141 

   142   // .volume-slider::-ms-track {

   143   //   display:none;

   144   //   width: 50px;

   145   //   height: 5px;

   146 

   147   //   /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */

   148   //   background-color: transparent;

   149 

   150   //   /*leave room for the larger thumb to overflow with a transparent border */

   151   //   border-color: transparent;

   152   //   border-width: 6px 0;

   153 

   154   //   /*remove default tick marks*/

   155   //   color: transparent;

   156   // }

   157   // .volume-slider::-ms-fill-lower {

   158   //   background-color: $corpus-light-blue;

   159   //   border-radius: 11px;

   160   // }

   161   // .volume-slider::-ms-fill-upper {

   162   //   background-color: #ddd;

   163   //   border-radius: 11px;

   164   // }

   165   // .volume-slider::-ms-thumb {

   166   //   border: none;

   167   //   height: 11px;

   168   //   width: 11px;

   169   //   border-radius: 50%;

   170   //   background: $corpus-blue;

   171   // }

   172   // .volume-slider[disabled]::-ms-thumb {

   173   //   background: $corpus-grey;

   174   // }

   175 

   176   // .volume-slider:focus::-ms-fill-lower {

   177   //   background: $corpus-light-blue;

   178   // }

   179   // .volume-slider:focus::-ms-fill-upper {

   180   //   background: #ccc;

   181   // }

   182 

   183   #sound-control-scale-minus {

   184     position: absolute;

   185     top: 67px;

   186     left: 7px;

   187   }

   188 

   189 }