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-- |
477 | 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 |
|
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 | 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 | 76 |
} |
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 | 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 | 84 |
outline: none; |
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 | 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 | 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 | 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 | 122 |
height: 11px; |
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 | 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 | 162 |
} |
163 |
||
164 |
||
165 |
#sound-control-scale-minus { |
|
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 | 168 |
left: 7px; |
169 |
} |
|
170 |
||
171 |
} |