Commit | Line | Data |
---|---|---|
dae45075 RK |
1 | /* This Source Code Form is subject to the terms of the Mozilla Public |
2 | * License, v. 2.0. If a copy of the MPL was not distributed with this | |
3 | * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | |
4 | ||
1c129f50 RK |
5 | /*@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");*/ |
6 | @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); | |
1e29db46 | 7 | @namespace html url("http://www.w3.org/1999/xhtml"); |
29465e59 | 8 | |
1c129f50 | 9 | hbox.controlBar { |
b310ca09 | 10 | height: 28px; |
6f25e2c5 | 11 | background-color: rgba(156,156,255,0.75); |
29465e59 RK |
12 | } |
13 | ||
1c129f50 RK |
14 | xul|button.playButton, |
15 | xul|button.muteButton, | |
16 | xul|button.closedCaptionButton, | |
17 | xul|button.fullscreenButton { | |
a6c8d0f5 RK |
18 | background-color: transparent; |
19 | background-repeat: no-repeat; | |
20 | background-position: center; | |
dae45075 RK |
21 | margin: 0; |
22 | padding: 0; | |
b310ca09 | 23 | min-height: 28px; |
b310ca09 | 24 | min-width: 28px; |
dae45075 | 25 | border: none; |
b310ca09 | 26 | } |
a6c8d0f5 | 27 | |
1c129f50 RK |
28 | xul|button.playButton:hover, |
29 | xul|button.muteButton:not([noAudio]):hover, | |
30 | xul|button.closedCaptionButton:hover, | |
31 | xul|button.fullscreenButton:hover { | |
1880ed93 RK |
32 | background-color: rgba(255,207,0,0.75); |
33 | } | |
a6c8d0f5 | 34 | |
1c129f50 RK |
35 | xul|button.playButton:hover:active, |
36 | xul|button.muteButton:not([noAudio]):hover:active, | |
37 | xul|button.closedCaptionButton:hover:active, | |
38 | xul|button.fullscreenButton:hover:active { | |
a6c8d0f5 RK |
39 | background-color: rgba(255,159,0,0.75); |
40 | } | |
41 | ||
1c129f50 | 42 | xul|button.playButton { |
1880ed93 | 43 | background-image: url("chrome://global/skin/media/pauseButton.png"); |
a6c8d0f5 RK |
44 | margin-right: -22px; /* 1/2 of scrubber thumb width, for overhang. */ |
45 | position: relative; /* Trick to work around negative margin interfering with clicking on the button. */ | |
6f25e2c5 | 46 | } |
a6c8d0f5 | 47 | |
1c129f50 | 48 | xul|button.playButton:hover { |
1880ed93 | 49 | background-image: url("chrome://global/skin/media/pauseButton-hover.png"); |
29465e59 | 50 | } |
a6c8d0f5 | 51 | |
1c129f50 | 52 | xul|button.playButton[paused] { |
1880ed93 | 53 | background-image: url("chrome://global/skin/media/playButton.png"); |
6f25e2c5 | 54 | } |
a6c8d0f5 | 55 | |
1c129f50 | 56 | xul|button.playButton[paused]:hover { |
1880ed93 | 57 | background-image: url("chrome://global/skin/media/playButton-hover.png"); |
29465e59 RK |
58 | } |
59 | ||
1c129f50 | 60 | xul|button.muteButton { |
1880ed93 | 61 | background-image: url("chrome://global/skin/media/muteButton.png"); |
a6c8d0f5 | 62 | min-width: 33px; |
6f25e2c5 | 63 | } |
a6c8d0f5 | 64 | |
1c129f50 | 65 | xul|button.muteButton:hover { |
1880ed93 | 66 | background-image: url("chrome://global/skin/media/muteButton-hover.png"); |
6f25e2c5 | 67 | } |
a6c8d0f5 | 68 | |
1c129f50 | 69 | xul|button.muteButton[muted] { |
1880ed93 | 70 | background-image: url("chrome://global/skin/media/unmuteButton.png"); |
6f25e2c5 | 71 | } |
a6c8d0f5 | 72 | |
1c129f50 | 73 | xul|button.muteButton[muted]:hover { |
1880ed93 | 74 | background-image: url("chrome://global/skin/media/unmuteButton-hover.png"); |
6f25e2c5 | 75 | } |
b310ca09 | 76 | |
1c129f50 | 77 | xul|button.muteButton[noAudio] { |
46dc2718 RK |
78 | background-image: url("chrome://global/skin/media/noAudio.png"); |
79 | } | |
80 | ||
1c129f50 | 81 | xul|button.muteButton[noAudio] + .volumeStack { |
e6488357 RK |
82 | display: none; |
83 | } | |
84 | ||
1c129f50 | 85 | xul|button.closedCaptionButton { |
dae45075 RK |
86 | background-image: url("chrome://global/skin/media/closeCaptionButton.png"); |
87 | background-position: 4px; | |
88 | } | |
89 | ||
1c129f50 | 90 | xul|button.closedCaptionButton:hover { |
23516a30 RK |
91 | background-image: url("chrome://global/skin/media/closeCaptionButton-hover.png"); |
92 | } | |
93 | ||
1c129f50 | 94 | xul|button.closedCaptionButton[enabled] { |
dae45075 RK |
95 | opacity: 1; |
96 | } | |
97 | ||
1c129f50 | 98 | xul|button.closedCaptionButton[hidden] { |
dae45075 RK |
99 | display: none; |
100 | } | |
101 | ||
1c129f50 | 102 | xul|button.fullscreenButton { |
a6c8d0f5 | 103 | background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 16, 16, 0); |
f128e38f RK |
104 | } |
105 | ||
1c129f50 | 106 | xul|button.fullscreenButton:hover { |
23516a30 | 107 | background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton-hover.png"), 0, 16, 16, 0); |
f128e38f RK |
108 | } |
109 | ||
1c129f50 | 110 | xul|button.fullscreenButton[fullscreened] { |
f777a4f1 | 111 | background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 32, 16, 16); |
f128e38f RK |
112 | } |
113 | ||
1c129f50 | 114 | xul|button.fullscreenButton[fullscreened]:hover { |
23516a30 | 115 | background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton-hover.png"), 0, 32, 16, 16); |
f128e38f RK |
116 | } |
117 | ||
1c129f50 | 118 | xul|*.volumeControl { |
e6488357 RK |
119 | width: 32px; |
120 | opacity: 0; | |
ca710c53 RK |
121 | } |
122 | ||
1c129f50 RK |
123 | xul|*.volumeBackground, |
124 | xul|*.volumeForeground { | |
e6488357 RK |
125 | background-repeat: no-repeat; |
126 | background-position: center; | |
127 | width: 32px; | |
ca710c53 | 128 | } |
e6488357 | 129 | |
1c129f50 | 130 | xul|*.volumeBackground { |
e6488357 | 131 | background-image: url("chrome://global/skin/media/volume-empty.png"); |
ca710c53 RK |
132 | } |
133 | ||
1c129f50 | 134 | xul|*.volumeForeground { |
e6488357 RK |
135 | background-image: url("chrome://global/skin/media/volume-full.png"); |
136 | background-clip: content-box; | |
ca710c53 RK |
137 | } |
138 | ||
1c129f50 | 139 | xul|*.textTrackList { |
dae45075 RK |
140 | display: -moz-box; |
141 | -moz-appearance: none; | |
142 | -moz-box-pack: end; | |
143 | -moz-box-align: end; | |
144 | padding: 0; | |
145 | } | |
146 | ||
1c129f50 | 147 | xul|*.textTrackList[hidden] { |
dae45075 RK |
148 | display: none; |
149 | } | |
150 | ||
1c129f50 | 151 | xul|*.textTrackList > html|*.textTrackItem { |
dae45075 RK |
152 | -moz-appearance: none; |
153 | -moz-box-align: start; | |
154 | text-align: start; | |
155 | overflow: hidden; | |
156 | margin: 0; | |
157 | padding: 2px 10px; | |
158 | -moz-margin-end: 10px; | |
159 | border: none; | |
160 | color: rgba(255,255,255,.5); | |
161 | background-color: rgba(35,31,32,.74); | |
162 | white-space: nowrap; | |
163 | } | |
164 | ||
1c129f50 | 165 | xul|*.textTrackList > html|*.textTrackItem[on] { |
dae45075 RK |
166 | color: white; |
167 | background-color: black; | |
168 | } | |
169 | ||
1c129f50 | 170 | xul|*.textTrackList > html|*.textTrackItem:hover { |
dae45075 RK |
171 | background-color: rgba(0,0,0,.55); |
172 | } | |
173 | ||
1c129f50 | 174 | xul|*.controlBar[fullscreen-unavailable] { |
441d0294 | 175 | /* This value is duplicated in the videocontrols.xml adjustControlSize function. */ |
dae45075 | 176 | padding-inline-end: 8px; |
441d0294 RK |
177 | } |
178 | ||
1c129f50 | 179 | xul|*.volumeControl .scale-thumb { |
441d0294 RK |
180 | min-width: 0; |
181 | opacity: 0; | |
182 | } | |
183 | ||
1c129f50 | 184 | xul|*.durationBox { |
ca710c53 RK |
185 | -moz-box-pack: center; |
186 | } | |
187 | ||
1c129f50 | 188 | xul|*.durationLabel { |
ca710c53 RK |
189 | margin-left: -22px; /* 1/2 of scrubber thumb width, for overhang. */ |
190 | padding-left: 8px; /* don't bump into the scrubber bar */ | |
191 | padding-top: 0px; /* center vertically with scrubber bar */ | |
192 | color: rgba(0,0,0,0.75); | |
3327253e | 193 | font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; |
dae45075 | 194 | font-size: 11px; |
ca710c53 RK |
195 | } |
196 | ||
1c129f50 | 197 | xul|*.positionLabel { |
9162a092 RK |
198 | display: none; |
199 | } | |
200 | ||
1c129f50 | 201 | xul|*.backgroundBar { |
ca710c53 RK |
202 | /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */ |
203 | /* margin left/right: 1/2 of scrubber thumb width, for overhang. */ | |
204 | margin: 10px 22px; | |
b310ca09 | 205 | background-color: rgba(0,0,0,0.75); |
a62af8a9 | 206 | border-radius: 2.5px; |
b310ca09 RK |
207 | } |
208 | ||
1c129f50 RK |
209 | xul|*.bufferBar, |
210 | xul|*.progressBar { | |
ca710c53 RK |
211 | /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */ |
212 | /* margin left/right: 1/2 of scrubber thumb width, for overhang. */ | |
213 | margin: 10px 22px; | |
b310ca09 RK |
214 | border: none; |
215 | background-color: transparent; | |
dae45075 RK |
216 | min-width: 0; |
217 | min-height: 0; | |
b310ca09 RK |
218 | } |
219 | ||
220 | /* .progress-bar is an element inside the <progressmeter> implementation. */ | |
1c129f50 | 221 | xul|*.bufferBar .progress-bar { |
b310ca09 RK |
222 | /* |
223 | * Note that this is drawn on top of the .backgroundBar. So although this | |
224 | * has the same background-color specified, the semitransparent | |
225 | * compositing gives it a different visual appearance. | |
226 | */ | |
227 | background-color: rgba(255,159,0,0.75); | |
a62af8a9 | 228 | border-radius: 2.5px; |
b310ca09 RK |
229 | -moz-appearance: none; |
230 | } | |
231 | ||
1c129f50 | 232 | xul|*.progressBar .progress-bar { |
b310ca09 | 233 | background-color: #008484; |
a62af8a9 | 234 | border-radius: 2.5px; |
b310ca09 RK |
235 | -moz-appearance: none; |
236 | } | |
237 | ||
238 | /* .scale-slider is an element inside the <scale> implementation. */ | |
1c129f50 RK |
239 | xul|*.scrubber .scale-slider, |
240 | xul|*.volumeControl .scale-slider { | |
b310ca09 RK |
241 | /* Hide the default horizontal bar. */ |
242 | background: none; | |
ca710c53 RK |
243 | margin: 0; |
244 | } | |
245 | ||
1c129f50 | 246 | xul|*.scrubber .scale-slider { |
3327253e RK |
247 | /* abs(margin-top) + margin-bottom + bar height == timeThumb height */ |
248 | margin-top: -10px; | |
249 | margin-bottom: 10px; | |
b310ca09 RK |
250 | } |
251 | ||
252 | /* .scale-thumb is an element inside the <scale> implementation. */ | |
1c129f50 RK |
253 | xul|*.scrubber .scale-thumb, |
254 | xul|*.volumeControl .scale-thumb { | |
b310ca09 | 255 | /* Override the default thumb appearance with a custom image. */ |
ca710c53 | 256 | background: transparent; |
b310ca09 | 257 | border: none !important; |
b310ca09 RK |
258 | } |
259 | ||
1c129f50 | 260 | xul|*.timeThumb { |
ca710c53 RK |
261 | background: url("chrome://global/skin/media/scrubberThumb.png") no-repeat center; |
262 | min-width: 45px; | |
1e140ad9 | 263 | min-height: 28px; |
ca710c53 RK |
264 | -moz-box-pack: center; |
265 | } | |
266 | ||
1c129f50 | 267 | xul|*.timeThumb[showhours="true"] { |
a6c8d0f5 | 268 | background-image: url("chrome://global/skin/media/scrubberThumbWide.png"); |
ca710c53 RK |
269 | } |
270 | ||
271 | /* | |
272 | .timeThumb:hover, .timeThumb:active { | |
b310ca09 RK |
273 | background-image: url("chrome://global/skin/media/scrubberThumb-hover.png"); |
274 | } | |
ca710c53 RK |
275 | */ |
276 | ||
1c129f50 | 277 | xul|*.timeLabel { |
3327253e RK |
278 | color: rgba(0,0,0,0.75); |
279 | font-size: 10px; | |
280 | font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; | |
281 | text-shadow: rgba(255,259,0, 0.3) 0 1px; | |
f777a4f1 | 282 | padding-top: 5px; |
ca710c53 RK |
283 | } |
284 | ||
1c129f50 | 285 | xul|*.statusOverlay { |
3327253e RK |
286 | -moz-box-align: center; |
287 | -moz-box-pack: center; | |
288 | background-color: rgba(0,0,0,0.55); | |
ca710c53 RK |
289 | } |
290 | ||
1c129f50 | 291 | xul|*.statusIcon { |
3327253e RK |
292 | margin-bottom: 28px; /* same height as .controlBar, to keep icon centered above it */ |
293 | width: 36px; | |
294 | height: 36px; | |
ca710c53 RK |
295 | } |
296 | ||
1c129f50 | 297 | xul|*.statusIcon[type="throbber"] { |
95f333af | 298 | background: url("chrome://communicator/skin/brand/throbber-anim.png") no-repeat center; |
ca710c53 | 299 | } |
154ee8b3 RK |
300 | /* |
301 | .statusIcon[type="throbber"][stalled] { | |
302 | background: url("chrome://global/skin/media/stalled.png") no-repeat center; | |
303 | } | |
304 | */ | |
1c129f50 | 305 | xul|*.statusIcon[type="error"] { |
3327253e | 306 | background: url("chrome://global/skin/icons/alert-error.gif") no-repeat center; |
ca710c53 | 307 | } |
4b1ccdb4 | 308 | |
044b5d49 RK |
309 | /* Overlay Play button */ |
310 | .clickToPlay { | |
311 | width: 64px; | |
312 | height: 64px; | |
313 | -moz-box-pack: center; | |
314 | -moz-box-align: center; | |
315 | opacity: 0.7; | |
dae45075 RK |
316 | background-image: url("chrome://global/skin/media/videoClickToPlayButton.svg"); |
317 | background-repeat: no-repeat; | |
318 | background-position: center; | |
319 | background-size: 64px 64px; | |
044b5d49 RK |
320 | background-color: hsla(0,0%,10%,.5); |
321 | } | |
322 | .clickToPlay:hover { | |
323 | opacity: 1; | |
324 | } | |
325 | ||
1e29db46 RK |
326 | /* Statistics formatting */ |
327 | html|*.statsDiv { | |
328 | position: relative; | |
329 | } | |
330 | html|td { | |
331 | height: 1em; | |
332 | max-height: 1em; | |
333 | padding: 0 2px; | |
334 | } | |
335 | html|table { | |
336 | font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; | |
337 | font-size: 11px; | |
338 | color: white; | |
339 | text-shadow: | |
340 | -1px -1px 0 #000, | |
341 | 1px -1px 0 #000, | |
342 | -1px 1px 0 #000, | |
343 | 1px 1px 0 #000; | |
344 | min-width: 100%; | |
345 | background: rgba(68,68,111,.7); | |
346 | table-layout: fixed; | |
347 | border-collapse: collapse; | |
348 | position: absolute; | |
349 | } | |
350 | ||
4b1ccdb4 | 351 | /* CSS Transitions */ |
044b5d49 | 352 | .clickToPlay { |
71a617ff RK |
353 | transition-property: opacity, background-size; |
354 | transition-duration: 400ms, 400ms; | |
044b5d49 RK |
355 | } |
356 | .clickToPlay[fadeout] { | |
357 | background-size: auto, 192px 192px; | |
358 | opacity: 0; | |
359 | } | |
360 | .clickToPlay[fadeout][immediate] { | |
71a617ff RK |
361 | transition-property: opacity, background-size; |
362 | transition-duration: 0s, 0s; | |
044b5d49 | 363 | } |
4b1ccdb4 | 364 | .controlBar:not([immediate]) { |
71a617ff RK |
365 | transition-property: opacity; |
366 | transition-duration: 200ms; | |
4b1ccdb4 RK |
367 | } |
368 | .controlBar[fadeout] { | |
369 | opacity: 0; | |
370 | } | |
371 | .volumeStack:not([immediate]) { | |
71a617ff RK |
372 | transition-property: opacity, margin-top; |
373 | transition-duration: 200ms, 200ms; | |
4b1ccdb4 RK |
374 | } |
375 | .volumeStack[fadeout] { | |
376 | opacity: 0; | |
377 | margin-top: 0; | |
378 | } | |
379 | .statusOverlay:not([immediate]) { | |
71a617ff RK |
380 | transition-property: opacity; |
381 | transition-duration: 300ms; | |
382 | transition-delay: 750ms; | |
4b1ccdb4 RK |
383 | } |
384 | .statusOverlay[fadeout] { | |
385 | opacity: 0; | |
386 | } | |
f128e38f RK |
387 | |
388 | /* Error description formatting */ | |
389 | .errorLabel { | |
390 | font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; | |
391 | font-size: 11px; | |
392 | color: #E7ADE7; | |
393 | text-shadow: | |
394 | -1px -1px 0 #000, | |
395 | 1px -1px 0 #000, | |
396 | -1px 1px 0 #000, | |
397 | 1px 1px 0 #000; | |
398 | padding: 0 10px; | |
399 | text-align: center; | |
400 | } | |
dae45075 RK |
401 | |
402 | @media (min-resolution: 2dppx) { | |
dae45075 RK |
403 | .playButton { |
404 | background-image: url(chrome://global/skin/media/pauseButton@2x.png); | |
405 | background-size: 28px 28px; | |
406 | } | |
23516a30 RK |
407 | .playButton:hover { |
408 | background-image: url(chrome://global/skin/media/pauseButton-hover@2x.png); | |
409 | background-size: 28px 28px; | |
410 | } | |
dae45075 RK |
411 | .playButton[paused] { |
412 | background-image: url(chrome://global/skin/media/playButton@2x.png); | |
413 | background-size: 28px 28px; | |
414 | } | |
23516a30 RK |
415 | .playButton[paused]:hover { |
416 | background-image: url(chrome://global/skin/media/playButton-hover@2x.png); | |
417 | background-size: 28px 28px; | |
418 | } | |
dae45075 RK |
419 | .volumeBackground { |
420 | background-image: url(chrome://global/skin/media/volume-empty@2x.png); | |
421 | background-size: 32px 16px; | |
422 | } | |
23516a30 RK |
423 | .volumeForeground:hover { |
424 | background-image: url(chrome://global/skin/media/volume-full-hover@2x.png); | |
dae45075 RK |
425 | background-size: 32px 16px; |
426 | } | |
427 | .muteButton { | |
428 | background-image: url(chrome://global/skin/media/muteButton@2x.png); | |
429 | background-size: 33px 28px; | |
430 | } | |
23516a30 RK |
431 | .muteButton:hover { |
432 | background-image: url(chrome://global/skin/media/muteButton-hover@2x.png); | |
433 | background-size: 33px 28px; | |
434 | } | |
dae45075 RK |
435 | .muteButton[muted] { |
436 | background-image: url(chrome://global/skin/media/unmuteButton@2x.png); | |
437 | background-size: 33px 28px; | |
438 | } | |
23516a30 RK |
439 | .muteButton[muted]:hover { |
440 | background-image: url(chrome://global/skin/media/unmuteButton-hover@2x.png); | |
441 | background-size: 33px 28px; | |
442 | } | |
dae45075 RK |
443 | .muteButton[noAudio] { |
444 | background-image: url(chrome://global/skin/media/noAudio@2x.png); | |
445 | background-size: 33px 28px; | |
446 | } | |
dae45075 RK |
447 | .closedCaptionButton { |
448 | background-image: url(chrome://global/skin/media/closeCaptionButton@2x.png); | |
449 | background-position: 4px; | |
450 | background-size: 28px 28px; | |
451 | } | |
23516a30 RK |
452 | .closedCaptionButton:hover { |
453 | background-image: url(chrome://global/skin/media/closeCaptionButton-hover@2x.png); | |
454 | background-position: 4px; | |
455 | background-size: 28px 28px; | |
456 | } | |
dae45075 RK |
457 | .fullscreenButton { |
458 | background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton@2x.png"), 0, 32, 32, 0); | |
459 | background-size: 16px 16px; | |
460 | } | |
23516a30 RK |
461 | .fullscreenButton:hover { |
462 | background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton-hover@2x.png"), 0, 32, 32, 0); | |
463 | background-size: 16px 16px; | |
464 | } | |
dae45075 RK |
465 | .fullscreenButton[fullscreened] { |
466 | background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton@2x.png"), 0, 64, 32, 32); | |
467 | background-size: 16px 16px; | |
468 | } | |
23516a30 RK |
469 | .fullscreenButton[fullscreened]:hover { |
470 | background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton-hover@2x.png"), 0, 64, 32, 32); | |
471 | background-size: 16px 16px; | |
472 | } | |
dae45075 RK |
473 | .timeThumb { |
474 | background-image: url(chrome://global/skin/media/scrubberThumb@2x.png); | |
475 | background-size: 33px 28px; | |
476 | } | |
477 | .timeThumb[showhours="true"] { | |
478 | background-image: url(chrome://global/skin/media/scrubberThumbWide@2x.png); | |
479 | background-size: 45px 28px; | |
480 | } | |
dae45075 | 481 | } |
1c129f50 RK |
482 | |
483 | ||
484 | /***** New HTML-based controls *****/ | |
485 | ||
486 | /*@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); | |
487 | @namespace url("http://www.w3.org/1999/xhtml");*/ | |
488 | ||
489 | video > xul|videocontrols, | |
490 | audio > xul|videocontrols { | |
491 | writing-mode: horizontal-tb; | |
492 | width: 100%; | |
493 | height: 100%; | |
494 | /* display: inline-block; --->CRASHES XUL-based versions! */ | |
495 | -moz-box-pack: end; | |
496 | } | |
497 | ||
498 | div.controlsContainer [hidden="true"], | |
499 | div.controlBar[hidden] { | |
500 | display: none; | |
501 | } | |
502 | ||
503 | div.controlBar[size="hidden"] { | |
504 | display: none; | |
505 | } | |
506 | ||
507 | div.controlsContainer, | |
508 | div.progressContainer { | |
509 | position: relative; | |
510 | height: 100%; | |
511 | } | |
512 | ||
513 | div.stackItem { | |
514 | position: absolute; | |
515 | left: 0; | |
516 | bottom: 0; | |
517 | width: 100%; | |
518 | height: 100%; | |
519 | } | |
520 | ||
521 | div.statusOverlay { | |
522 | display: flex; | |
523 | flex-direction: column; | |
524 | justify-content: center; | |
525 | align-items: center; | |
526 | background-color: rgb(160,144,144); | |
527 | } | |
528 | ||
529 | div.controlsOverlay { | |
530 | display: flex; | |
531 | flex-direction: column; | |
532 | justify-content: center; | |
533 | position: relative; | |
534 | } | |
535 | ||
536 | div.controlsSpacerStack { | |
537 | display: flex; | |
538 | flex-direction: column; | |
539 | flex-grow: 1; | |
540 | justify-content: center; | |
541 | align-items: center; | |
542 | } | |
543 | ||
544 | div.controlsSpacer { | |
545 | background-color: rgba(0,0,0,.4); | |
546 | } | |
547 | ||
548 | div.controlBar { | |
549 | position: relative; | |
550 | display: flex; | |
551 | justify-content: center; | |
552 | align-items: center; | |
553 | overflow: hidden; | |
554 | height: 40px; | |
555 | padding: 0 3px; | |
556 | background-color: rgba(156,156,255,0.75); | |
557 | } | |
558 | ||
559 | ||
560 | html|button.playButton, | |
561 | html|button.muteButton, | |
562 | html|button.closedCaptionButton, | |
563 | html|button.fullscreenButton { | |
564 | height: 100%; | |
565 | min-height: 30px; | |
566 | min-width: 30px; | |
567 | padding: 0; | |
568 | border: 0; | |
569 | margin: 0; | |
570 | background-color: transparent; | |
571 | background-repeat: no-repeat; | |
572 | background-position: center; | |
573 | background-origin: content-box; | |
574 | background-clip: content-box; | |
575 | } | |
576 | ||
577 | html|button.playButton:hover, | |
578 | html|button.muteButton:not([noAudio]):hover, | |
579 | html|button.closedCaptionButton:hover, | |
580 | html|button.fullscreenButton:hover { | |
581 | background-color: rgba(255,207,0,0.75); | |
582 | } | |
583 | ||
584 | html|button.playButton:hover:active, | |
585 | html|button.muteButton:not([noAudio]):hover:active, | |
586 | html|button.closedCaptionButton:hover:active, | |
587 | html|button.fullscreenButton:hover:active { | |
588 | background-color: rgba(255,159,0,0.75); | |
589 | } | |
590 | ||
591 | html|button.playButton { | |
592 | background-image: url(chrome://global/skin/media/pauseButton.svg#pause); | |
593 | } | |
594 | .playButton:hover { | |
595 | html|butto background-image: url(chrome://global/skin/media/pauseButton.svg#pause-hover); | |
596 | } | |
597 | html|button.playButton:hover:active { | |
598 | background-image: url(chrome://global/skin/media/pauseButton.svg#pause-active); | |
599 | } | |
600 | html|button.playButton[paused] { | |
601 | background-image: url(chrome://global/skin/media/playButton.svg#play); | |
602 | } | |
603 | html|button.playButton[paused]:hover { | |
604 | background-image: url(chrome://global/skin/media/playButton.svg#play-hover); | |
605 | } | |
606 | html|button.playButton[paused]:hover:active { | |
607 | background-image: url(chrome://global/skin/media/playButton.svg#play-active); | |
608 | } | |
609 | ||
610 | html|button.muteButton { | |
611 | background-image: url(chrome://global/skin/media/muteButton.svg#unmute); | |
612 | } | |
613 | html|button.muteButton:hover { | |
614 | background-image: url(chrome://global/skin/media/muteButton.svg#unmute-hover); | |
615 | } | |
616 | html|button.muteButton:hover:active { | |
617 | background-image: url(chrome://global/skin/media/muteButton.svg#unmute-active); | |
618 | } | |
619 | html|button.muteButton[muted] { | |
620 | background-image: url(chrome://global/skin/media/muteButton.svg#mute); | |
621 | } | |
622 | html|button.muteButton[muted]:hover { | |
623 | background-image: url(chrome://global/skin/media/muteButton.svg#mute-hover); | |
624 | } | |
625 | html|button.muteButton[muted]:hover:active { | |
626 | background-image: url(chrome://global/skin/media/muteButton.svg#mute-active); | |
627 | } | |
628 | html|button.muteButton[noAudio], | |
629 | html|button.muteButton[noAudio]:hover, | |
630 | html|button.muteButton[noAudio]:hover:active { | |
631 | background-image: url(chrome://global/skin/media/muteButton.svg#noaudio); | |
632 | } | |
633 | html|button.muteButton[noAudio] + .volumeStack { | |
634 | display: none; | |
635 | } | |
636 | ||
637 | html|button.closedCaptionButton { | |
638 | background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-off); | |
639 | } | |
640 | html|button.closedCaptionButton:hover { | |
641 | background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-off-hover); | |
642 | } | |
643 | html|button.closedCaptionButton:hover:active { | |
644 | background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-off-active); | |
645 | } | |
646 | html|button.closedCaptionButton[enabled] { | |
647 | background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc); | |
648 | } | |
649 | html|button.closedCaptionButton[enabled]:hover { | |
650 | background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-hover); | |
651 | } | |
652 | html|button.closedCaptionButton[enabled]:hover:active { | |
653 | background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-active); | |
654 | } | |
655 | ||
656 | html|button.fullscreenButton { | |
657 | background-image: url(chrome://global/skin/media/fullscreenButton.svg#fullscreen); | |
658 | } | |
659 | html|button.fullscreenButton:hover { | |
660 | background-image: url(chrome://global/skin/media/fullscreenButton.svg#fullscreen-hover); | |
661 | } | |
662 | html|button.fullscreenButton:hover:active { | |
663 | background-image: url(chrome://global/skin/media/fullscreenButton.svg#fullscreen-active); | |
664 | } | |
665 | html|button.fullscreenButton[fullscreened] { | |
666 | background-image: url(chrome://global/skin/media/fullscreenButton.svg#unfullscreen); | |
667 | } | |
668 | html|button.fullscreenButton[fullscreened]:hover { | |
669 | background-image: url(chrome://global/skin/media/fullscreenButton.svg#unfullscreen-hover); | |
670 | } | |
671 | html|button.fullscreenButton[fullscreened]:hover:active { | |
672 | background-image: url(chrome://global/skin/media/fullscreenButton.svg#unfullscreen-active); | |
673 | } | |
674 | ||
675 | div.controlBarSpacer { | |
676 | flex-grow: 1; | |
677 | } | |
678 | ||
679 | input.volumeControl::-moz-range-thumb, | |
680 | input.scrubber::-moz-range-thumb { | |
681 | height: 13px; | |
682 | width: 13px; | |
683 | border: none; | |
684 | border-radius: 50%; | |
685 | background-color: #000000; | |
686 | } | |
687 | ||
688 | input.volumeControl::-moz-focus-outer, | |
689 | input.scrubber::-moz-focus-outer { | |
690 | border: 0; | |
691 | } | |
692 | ||
693 | div.progressBackgroundBar { | |
694 | display: flex; | |
695 | flex-direction: column; | |
696 | justify-content: center; | |
697 | align-items: center; | |
698 | } | |
699 | ||
700 | div.progressStack { | |
701 | position: relative; | |
702 | width: 100%; | |
703 | height: 5px; | |
704 | } | |
705 | ||
706 | div.scrubberStack { | |
707 | min-width: 48px; | |
708 | flex-basis: 48px; | |
709 | flex-grow: 2; | |
710 | flex-shrink: 0; | |
711 | margin: 0 9px; | |
712 | } | |
713 | ||
714 | div.volumeStack { | |
715 | max-width: 60px; | |
716 | min-width: 48px; | |
717 | flex-grow: 1; | |
718 | flex-shrink: 0; | |
719 | margin-right: 6px; | |
720 | margin-left: 4px; | |
721 | } | |
722 | ||
723 | progress.bufferBar, | |
724 | progress.progressBar, | |
725 | input.scrubber, | |
726 | .volumeBackground, | |
727 | input.volumeControl { | |
728 | bottom: 0; | |
729 | left: 0; | |
730 | position: absolute; | |
731 | width: 100%; | |
732 | height: 100%; | |
733 | padding: 0; | |
734 | border: 0; | |
735 | border-radius: 2.5px; | |
736 | margin: 0; | |
737 | background: none; | |
738 | background-color: transparent; | |
739 | } | |
740 | ||
741 | progress.bufferBar, | |
742 | .volumeBackground { | |
743 | background-color: rgba(160,144,144,0.7); | |
744 | } | |
745 | ||
746 | progress.bufferBar::-moz-progress-bar, | |
747 | progress.progressBar::-moz-progress-bar, | |
748 | .volumeBackground::-moz-meter-bar { | |
749 | height: 100%; | |
750 | padding: 0; | |
751 | margin: 0; | |
752 | border: 0; | |
753 | border-radius: 2.5px; | |
754 | background: none; | |
755 | } | |
756 | ||
757 | input.scrubber:hover::-moz-range-thumb, | |
758 | input.volumeControl:hover::-moz-range-thumb { | |
759 | background-color: #FFCF00; | |
760 | } | |
761 | ||
762 | input.scrubber:active::-moz-range-thumb, | |
763 | input.volumeControl:active::-moz-range-thumb { | |
764 | background-color: #FF9F00; | |
765 | } | |
766 | ||
767 | input.scrubber::-moz-range-track, | |
768 | input.scrubber::-moz-range-progress { | |
769 | background-color: transparent; | |
770 | } | |
771 | ||
772 | input.volumeControl::-moz-range-progress, | |
773 | input.volumeControl::-moz-range-track { | |
774 | height: 5px; | |
775 | border-radius: 2.5px; | |
776 | } | |
777 | ||
778 | input.volumeControl::-moz-range-progress { | |
779 | background-color: #008484; | |
780 | } | |
781 | ||
782 | input.volumeControl::-moz-range-track { | |
783 | background-color: rgba(0,0,0,0.7); | |
784 | } | |
785 | ||
786 | ||
787 | progress.bufferBar::-moz-progress-bar { | |
788 | background-color: rgba(160,144,144,0.3); | |
789 | border-radius: 2.5px; | |
790 | } | |
791 | ||
792 | progress.progressBar::-moz-progress-bar { | |
793 | background-color: #008484; | |
794 | } | |
795 | ||
796 | .textTrackList { | |
797 | position: absolute; | |
798 | right: 5px; | |
799 | bottom: 45px; | |
800 | max-width: 80%; | |
801 | border: 1px solid #000000; | |
802 | border-radius: 2.5px; | |
803 | padding: 5px 0; | |
804 | vertical-align: middle; | |
805 | font-size: 12px; | |
806 | background-color: #000000; | |
807 | opacity: 0.7; | |
808 | } | |
809 | ||
810 | .textTrackList > .textTrackItem { | |
811 | display: block; | |
812 | width: 100%; | |
813 | height: 30px; | |
814 | padding: 2px 10px; | |
815 | border: none; | |
816 | margin: 0; | |
817 | white-space: nowrap; | |
818 | overflow: hidden; | |
819 | text-align: left; | |
820 | text-overflow: ellipsis; | |
821 | color: #FFCF00; | |
822 | background-color: transparent; | |
823 | } | |
824 | ||
825 | .textTrackList > .textTrackItem:hover { | |
826 | background-color: #FFCF00; | |
827 | } | |
828 | ||
829 | .textTrackList > .textTrackItem[on] { | |
830 | color: #008484; | |
831 | } | |
832 | ||
833 | span.positionLabel, | |
834 | span.durationLabel { | |
835 | display: none; | |
836 | } | |
837 | ||
838 | span.positionDurationBox { | |
839 | min-width: 9ch; | |
840 | text-align: center; | |
841 | padding-inline-start: 1px; | |
842 | padding-inline-end: 9px; | |
843 | white-space: nowrap; | |
844 | font: message-box; | |
845 | font-size: 13px; | |
846 | font-size-adjust: 0.6; | |
847 | color: #000000; | |
848 | } | |
849 | ||
850 | span.positionDurationBox[positionOnly] { | |
851 | min-width: 4ch; | |
852 | } | |
853 | ||
854 | span.duration { | |
855 | display: inline-block; | |
856 | white-space: pre; | |
857 | color: #8050B0; | |
858 | } | |
859 | ||
860 | .statusIcon { | |
861 | width: 36px; | |
862 | height: 36px; | |
863 | margin-bottom: 20px; | |
864 | } | |
865 | ||
866 | .statusIcon[type="throbber"] { | |
867 | background: url("chrome://communicator/skin/brand/throbber-anim.png") no-repeat center; | |
868 | } | |
869 | /* | |
870 | .statusIcon[type="throbber"][stalled] { | |
871 | background: url("chrome://global/skin/media/stalled.png") no-repeat center; | |
872 | } | |
873 | */ | |
874 | .statusIcon[type="error"] { | |
875 | min-width: 70px; | |
876 | min-height: 60px; | |
877 | background: url("chrome://global/skin/icons/alert-error.gif") no-repeat center; | |
878 | background-size: contain; | |
879 | } | |
880 | ||
881 | /* Overlay Play button */ | |
882 | .clickToPlay { | |
883 | min-width: 48px; | |
884 | min-height: 48px; | |
885 | border-radius: 50%; | |
886 | background-image: url(chrome://global/skin/media/playButton.svg#play); | |
887 | background-repeat: no-repeat; | |
888 | background-position: 54% 50%; | |
889 | background-size: 40% 40%; | |
890 | background-color: #000000; | |
891 | opacity: 0.8; | |
892 | position: relative; | |
893 | top: 20px; | |
894 | } | |
895 | ||
896 | .controlsSpacerStack:hover > .clickToPlay, | |
897 | .clickToPlay:hover { | |
898 | opacity: 0.55; | |
899 | } | |
900 | ||
901 | .controlsSpacerStack:hover > .clickToPlay[fadeout] { | |
902 | opacity: 0; | |
903 | } | |
904 | ||
905 | .controlBar[fullscreen-unavailable] .fullscreenButton { | |
906 | display: none; | |
907 | } | |
908 | ||
909 | /* CSS Transitions */ | |
910 | .clickToPlay { | |
911 | transition-property: transform, opacity; | |
912 | transition-duration: 400ms, 400ms; | |
913 | } | |
914 | ||
915 | .controlsSpacer[fadeout] { | |
916 | opacity: 0; | |
917 | } | |
918 | ||
919 | .clickToPlay[fadeout] { | |
920 | transform: scale(3); | |
921 | opacity: 0; | |
922 | } | |
923 | ||
924 | .clickToPlay[fadeout][immediate] { | |
925 | transition-property: opacity, background-size; | |
926 | transition-duration: 0s, 0s; | |
927 | } | |
928 | .controlBar:not([immediate]) { | |
929 | transition-property: opacity; | |
930 | transition-duration: 200ms; | |
931 | } | |
932 | .controlBar[fadeout] { | |
933 | opacity: 0; | |
934 | } | |
935 | .volumeStack:not([immediate]) { | |
936 | transition-property: opacity, margin-top; | |
937 | transition-duration: 200ms, 200ms; | |
938 | } | |
939 | .statusOverlay:not([immediate]) { | |
940 | transition-property: opacity; | |
941 | transition-duration: 300ms; | |
942 | transition-delay: 750ms; | |
943 | } | |
944 | .statusOverlay[fadeout] { | |
945 | opacity: 0; | |
946 | } | |
947 | ||
948 | /* Error description formatting */ | |
949 | .errorLabel { | |
950 | padding: 0 10px; | |
951 | text-align: center; | |
952 | font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; | |
953 | font-size: 14px; | |
954 | color: #E7ADE7; | |
955 | } | |
956 | ||
957 | .errorLabel { | |
958 | display: none; | |
959 | } | |
960 | ||
961 | [error="errorAborted"] > [anonid="errorAborted"], | |
962 | [error="errorNetwork"] > [anonid="errorNetwork"], | |
963 | [error="errorDecode"] > [anonid="errorDecode"], | |
964 | [error="errorSrcNotSupported"] > [anonid="errorSrcNotSupported"], | |
965 | [error="errorNoSource"] > [anonid="errorNoSource"], | |
966 | [error="errorGeneric"] > [anonid="errorGeneric"] { | |
967 | display: inline; | |
968 | } |