cms/app-client/app/styles/components/player-sound-control.scss
author ymh <ymh.work@gmail.com>
Tue, 20 Dec 2016 01:50:35 +0100
changeset 479 e7df0b5b09b6
parent 478 b621657bb436
child 480 814468b0fc69
permissions -rw-r--r--
better cross browser compatibility, still pb with MS edge
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
477
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
     1
.player-sound-control {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
     2
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
     3
  & {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
     4
    margin: 0px 19px 0px 0px;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
     5
    font-size: 20px;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
     6
  }
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
     7
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
     8
  #sound-control-speaker {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
     9
    width: 2em;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    10
    line-height: 80px;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    11
  }
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    12
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    13
  #sound-control-speaker i {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    14
    cursor: pointer;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    15
    vertical-align: middle;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    16
  }
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    17
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    18
  #sound-control-speaker i::before {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    19
    font-size: 20px;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    20
  }
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    21
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    22
  #sound-control-speaker i.fa-times::before {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    23
    font-size: 16px;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    24
  }
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    25
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    26
  #sound-control-speaker i.fa-volume-off+i.fa-times {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    27
    display:inline-block;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    28
  }
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    29
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    30
  #sound-control-speaker i.fa-times {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    31
    display:none;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    32
  }
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    33
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    34
  #sound-control-scale {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    35
    background-color: $corpus-white;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    36
    width: 1em;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    37
    height: 90px;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    38
    position: fixed;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    39
    z-index: 1;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    40
    display: none;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    41
  }
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    42
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    43
  #sound-control-scale:hover {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    44
    display: block;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    45
  }
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    46
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    47
  .sound-control-scale-indicator {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    48
    color: $corpus-black;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    49
    text-align: center;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    50
    display: table;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    51
    margin: 0 auto;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    52
    cursor: pointer;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    53
    -webkit-touch-callout: none; /* iOS Safari */
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    54
      -webkit-user-select: none; /* Chrome/Safari/Opera */
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    55
       -khtml-user-select: none; /* Konqueror */
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    56
         -moz-user-select: none; /* Firefox */
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    57
          -ms-user-select: none; /* Internet Explorer/Edge */
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    58
              user-select: none;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    59
  }
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    60
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    61
  .sound-control-scale-indicator[disabled] {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    62
    color: $corpus-grey;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    63
    cursor: default;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    64
    pointer-events: none;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    65
  }
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    66
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    67
  // taken from http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html
479
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
    68
  // http://danielstern.ca/range.css/#/
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
    69
  #sound-control-range-wrapper {
477
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    70
    width: 50px;
479
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
    71
    transform: rotate(270deg) translate(-10px, -12px);
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
    72
    -webkit-transform: rotate(270deg) translate(-15px, -19px);
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
    73
    -moz-transform: rotate(270deg) translate(-15px, -12px);
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
    74
    -ms-transform: rotate(270deg) translate(2px, -8px);
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
    75
    transform-origin: 50% 50%;
477
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    76
  }
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    77
479
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
    78
  input[type=range] {
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
    79
    -webkit-appearance: none;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
    80
    width: 100%;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
    81
    margin: 3px 3px;
477
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    82
  }
479
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
    83
  input[type=range]:focus {
477
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    84
    outline: none;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    85
  }
479
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
    86
  input[type=range]::-webkit-slider-runnable-track {
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
    87
    width: 100%;
477
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    88
    height: 5px;
479
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
    89
    cursor: pointer;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
    90
    box-shadow: 0px 0px px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
    91
    background: rgba(48, 113, 169, 0.78);
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
    92
    border-radius: 1.3px;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
    93
    border: 0.2px solid #010101;
477
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
    94
  }
479
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
    95
  input[type=range]::-webkit-slider-thumb {
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
    96
    box-shadow: 0px 0px 0px #000031, 0px 0px 0px #00004b;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
    97
    border: 1px solid #00001e;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
    98
    height: 11px;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
    99
    width: 11px;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   100
    border-radius: 11px;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   101
    background: #ffffff;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   102
    cursor: pointer;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   103
    -webkit-appearance: none;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   104
    margin-top: -3.5px;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   105
    //margin-top: -2px;
477
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   106
  }
479
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   107
  input[type=range]:focus::-webkit-slider-runnable-track {
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   108
    background: rgba(106, 163, 213, 0.78);
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   109
  }
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   110
  input[type=range]::-moz-range-track {
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   111
    width: 100%;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   112
    height: 5px;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   113
    cursor: pointer;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   114
    box-shadow: 0px 0px px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   115
    background: rgba(48, 113, 169, 0.78);
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   116
    border-radius: 1.3px;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   117
    border: 0.2px solid #010101;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   118
  }
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   119
  input[type=range]::-moz-range-thumb {
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   120
    box-shadow: 0px 0px 0px #000031, 0px 0px 0px #00004b;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   121
    border: 1px solid #00001e;
477
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   122
    height: 11px;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   123
    width: 11px;
479
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   124
    border-radius: 11px;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   125
    background: #ffffff;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   126
    cursor: pointer;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   127
  }
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   128
  input[type=range]::-ms-track {
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   129
    width: 100%;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   130
    height: 5px;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   131
    cursor: pointer;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   132
    background: transparent;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   133
    border-color: transparent;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   134
    color: transparent;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   135
  }
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   136
  input[type=range]::-ms-fill-lower {
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   137
    background: rgba(25, 60, 90, 0.78);
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   138
    border: 0.2px solid #010101;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   139
    border-radius: 2.6px;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   140
    box-shadow: 0px 0px px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
477
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   141
  }
479
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   142
  input[type=range]::-ms-fill-upper {
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   143
    background: rgba(48, 113, 169, 0.78);
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   144
    border: 0.2px solid #010101;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   145
    border-radius: 2.6px;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   146
    box-shadow: 0px 0px px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   147
  }
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   148
  input[type=range]::-ms-thumb {
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   149
    box-shadow: 0px 0px 0px #000031, 0px 0px 0px #00004b;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   150
    border: 1px solid #00001e;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   151
    height: 11px;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   152
    width: 11px;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   153
    border-radius: 11px;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   154
    background: #ffffff;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   155
    cursor: pointer;
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   156
  }
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   157
  input[type=range]:focus::-ms-fill-lower {
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   158
    background: rgba(48, 113, 169, 0.78);
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   159
  }
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   160
  input[type=range]:focus::-ms-fill-upper {
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   161
    background: rgba(106, 163, 213, 0.78);
477
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   162
  }
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   163
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   164
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   165
  #sound-control-scale-minus {
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   166
    position: absolute;
479
e7df0b5b09b6 better cross browser compatibility, still pb with MS edge
ymh <ymh.work@gmail.com>
parents: 478
diff changeset
   167
    top: 70px;
477
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   168
    left: 7px;
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   169
  }
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   170
ce52f0fca330 add volume control to the player
ymh <ymh.work@gmail.com>
parents:
diff changeset
   171
}