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 | 5 | @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); |
0282321d | 6 | @namespace url("http://www.w3.org/1999/xhtml"); |
1c129f50 RK |
7 | |
8 | video > xul|videocontrols, | |
9 | audio > xul|videocontrols { | |
10 | writing-mode: horizontal-tb; | |
11 | width: 100%; | |
12 | height: 100%; | |
0282321d | 13 | display: inline-block; |
1c129f50 RK |
14 | } |
15 | ||
0282321d RK |
16 | .controlsContainer [hidden="true"], |
17 | .controlBar[hidden] { | |
1c129f50 RK |
18 | display: none; |
19 | } | |
20 | ||
0282321d | 21 | .controlBar[size="hidden"] { |
1c129f50 RK |
22 | display: none; |
23 | } | |
24 | ||
918c9e49 RK |
25 | .controlsSpacer[hideCursor] { |
26 | cursor: none; | |
27 | } | |
28 | ||
0282321d RK |
29 | .controlsContainer, |
30 | .progressContainer { | |
1c129f50 RK |
31 | position: relative; |
32 | height: 100%; | |
33 | } | |
34 | ||
0282321d | 35 | .stackItem { |
1c129f50 RK |
36 | position: absolute; |
37 | left: 0; | |
38 | bottom: 0; | |
39 | width: 100%; | |
40 | height: 100%; | |
41 | } | |
42 | ||
0282321d | 43 | .statusOverlay { |
1c129f50 RK |
44 | display: flex; |
45 | flex-direction: column; | |
46 | justify-content: center; | |
47 | align-items: center; | |
dbad77ea | 48 | background-color: rgb(160,144,144, .85); |
1c129f50 RK |
49 | } |
50 | ||
0282321d | 51 | .controlsOverlay { |
1c129f50 RK |
52 | display: flex; |
53 | flex-direction: column; | |
54 | justify-content: center; | |
55 | position: relative; | |
56 | } | |
57 | ||
0282321d | 58 | .controlsSpacerStack { |
1c129f50 RK |
59 | display: flex; |
60 | flex-direction: column; | |
61 | flex-grow: 1; | |
62 | justify-content: center; | |
63 | align-items: center; | |
64 | } | |
65 | ||
0282321d | 66 | .controlsSpacer { |
1c129f50 RK |
67 | background-color: rgba(0,0,0,.4); |
68 | } | |
69 | ||
0282321d | 70 | .controlBar { |
1c129f50 RK |
71 | position: relative; |
72 | display: flex; | |
73 | justify-content: center; | |
74 | align-items: center; | |
75 | overflow: hidden; | |
76 | height: 40px; | |
0282321d | 77 | padding: 0 9px; |
1c129f50 RK |
78 | background-color: rgba(156,156,255,0.75); |
79 | } | |
80 | ||
0282321d RK |
81 | .playButton, |
82 | .muteButton, | |
83 | .closedCaptionButton, | |
84 | .fullscreenButton { | |
1c129f50 RK |
85 | height: 100%; |
86 | min-height: 30px; | |
87 | min-width: 30px; | |
0282321d | 88 | padding: 6px; |
1c129f50 RK |
89 | border: 0; |
90 | margin: 0; | |
91 | background-color: transparent; | |
92 | background-repeat: no-repeat; | |
93 | background-position: center; | |
94 | background-origin: content-box; | |
95 | background-clip: content-box; | |
96 | } | |
97 | ||
0282321d RK |
98 | .playButton:hover, |
99 | .muteButton:not([noAudio]):hover, | |
100 | .closedCaptionButton:hover, | |
101 | .fullscreenButton:hover { | |
1c129f50 RK |
102 | background-color: rgba(255,207,0,0.75); |
103 | } | |
104 | ||
0282321d RK |
105 | .playButton:hover:active, |
106 | .muteButton:not([noAudio]):hover:active, | |
107 | .closedCaptionButton:hover:active, | |
108 | .fullscreenButton:hover:active { | |
1c129f50 RK |
109 | background-color: rgba(255,159,0,0.75); |
110 | } | |
111 | ||
0282321d | 112 | .playButton { |
dbad77ea RK |
113 | background-image: url(chrome://global/skin/media/pauseButton.svg); |
114 | -moz-context-properties: fill; | |
115 | fill: #000000; | |
1c129f50 RK |
116 | } |
117 | .playButton:hover { | |
dbad77ea | 118 | fill: #000000; |
1c129f50 | 119 | } |
0282321d | 120 | .playButton:hover:active { |
dbad77ea | 121 | fill: #000000; |
1c129f50 | 122 | } |
0282321d | 123 | .playButton[paused] { |
dbad77ea RK |
124 | background-image: url(chrome://global/skin/media/playButton.svg); |
125 | -moz-context-properties: fill; | |
126 | fill: #000000; | |
1c129f50 | 127 | } |
0282321d | 128 | .playButton[paused]:hover { |
dbad77ea | 129 | fill: #000000; |
1c129f50 | 130 | } |
0282321d | 131 | .playButton[paused]:hover:active { |
dbad77ea | 132 | fill: #000000; |
1c129f50 RK |
133 | } |
134 | ||
0282321d | 135 | .muteButton { |
1c129f50 RK |
136 | background-image: url(chrome://global/skin/media/muteButton.svg#unmute); |
137 | } | |
0282321d | 138 | .muteButton:hover { |
1c129f50 RK |
139 | background-image: url(chrome://global/skin/media/muteButton.svg#unmute-hover); |
140 | } | |
0282321d | 141 | .muteButton:hover:active { |
1c129f50 RK |
142 | background-image: url(chrome://global/skin/media/muteButton.svg#unmute-active); |
143 | } | |
0282321d | 144 | .muteButton[muted] { |
1c129f50 RK |
145 | background-image: url(chrome://global/skin/media/muteButton.svg#mute); |
146 | } | |
0282321d | 147 | .muteButton[muted]:hover { |
1c129f50 RK |
148 | background-image: url(chrome://global/skin/media/muteButton.svg#mute-hover); |
149 | } | |
0282321d | 150 | .muteButton[muted]:hover:active { |
1c129f50 RK |
151 | background-image: url(chrome://global/skin/media/muteButton.svg#mute-active); |
152 | } | |
0282321d RK |
153 | .muteButton[noAudio], |
154 | .muteButton[noAudio]:hover, | |
155 | .muteButton[noAudio]:hover:active { | |
1c129f50 RK |
156 | background-image: url(chrome://global/skin/media/muteButton.svg#noaudio); |
157 | } | |
0282321d | 158 | .muteButton[noAudio] + .volumeStack { |
1c129f50 RK |
159 | display: none; |
160 | } | |
161 | ||
0282321d | 162 | .closedCaptionButton { |
1c129f50 RK |
163 | background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-off); |
164 | } | |
0282321d | 165 | .closedCaptionButton:hover { |
1c129f50 RK |
166 | background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-off-hover); |
167 | } | |
0282321d | 168 | .closedCaptionButton:hover:active { |
1c129f50 RK |
169 | background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-off-active); |
170 | } | |
0282321d | 171 | .closedCaptionButton[enabled] { |
1c129f50 RK |
172 | background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc); |
173 | } | |
0282321d | 174 | .closedCaptionButton[enabled]:hover { |
1c129f50 RK |
175 | background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-hover); |
176 | } | |
0282321d | 177 | .closedCaptionButton[enabled]:hover:active { |
1c129f50 RK |
178 | background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-active); |
179 | } | |
180 | ||
0282321d | 181 | .fullscreenButton { |
1c129f50 RK |
182 | background-image: url(chrome://global/skin/media/fullscreenButton.svg#fullscreen); |
183 | } | |
0282321d | 184 | .fullscreenButton:hover { |
1c129f50 RK |
185 | background-image: url(chrome://global/skin/media/fullscreenButton.svg#fullscreen-hover); |
186 | } | |
0282321d | 187 | .fullscreenButton:hover:active { |
1c129f50 RK |
188 | background-image: url(chrome://global/skin/media/fullscreenButton.svg#fullscreen-active); |
189 | } | |
0282321d | 190 | .fullscreenButton[fullscreened] { |
1c129f50 RK |
191 | background-image: url(chrome://global/skin/media/fullscreenButton.svg#unfullscreen); |
192 | } | |
0282321d | 193 | .fullscreenButton[fullscreened]:hover { |
1c129f50 RK |
194 | background-image: url(chrome://global/skin/media/fullscreenButton.svg#unfullscreen-hover); |
195 | } | |
0282321d | 196 | .fullscreenButton[fullscreened]:hover:active { |
1c129f50 RK |
197 | background-image: url(chrome://global/skin/media/fullscreenButton.svg#unfullscreen-active); |
198 | } | |
199 | ||
0282321d | 200 | .controlBarSpacer { |
1c129f50 RK |
201 | flex-grow: 1; |
202 | } | |
203 | ||
0282321d RK |
204 | .volumeControl::-moz-range-thumb, |
205 | .scrubber::-moz-range-thumb { | |
1c129f50 RK |
206 | height: 13px; |
207 | width: 13px; | |
208 | border: none; | |
209 | border-radius: 50%; | |
210 | background-color: #000000; | |
211 | } | |
212 | ||
0282321d RK |
213 | .volumeControl::-moz-focus-outer, |
214 | .scrubber::-moz-focus-outer { | |
1c129f50 RK |
215 | border: 0; |
216 | } | |
217 | ||
0282321d | 218 | .progressBackgroundBar { |
1c129f50 RK |
219 | display: flex; |
220 | flex-direction: column; | |
221 | justify-content: center; | |
222 | align-items: center; | |
223 | } | |
224 | ||
0282321d | 225 | .progressStack { |
1c129f50 RK |
226 | position: relative; |
227 | width: 100%; | |
228 | height: 5px; | |
229 | } | |
230 | ||
0282321d | 231 | .scrubberStack { |
1c129f50 RK |
232 | min-width: 48px; |
233 | flex-basis: 48px; | |
234 | flex-grow: 2; | |
235 | flex-shrink: 0; | |
236 | margin: 0 9px; | |
237 | } | |
238 | ||
0282321d | 239 | .volumeStack { |
1c129f50 RK |
240 | max-width: 60px; |
241 | min-width: 48px; | |
242 | flex-grow: 1; | |
243 | flex-shrink: 0; | |
244 | margin-right: 6px; | |
245 | margin-left: 4px; | |
246 | } | |
247 | ||
0282321d RK |
248 | .bufferBar, |
249 | .progressBar, | |
250 | .scrubber, | |
1c129f50 | 251 | .volumeBackground, |
0282321d | 252 | .volumeControl { |
1c129f50 RK |
253 | bottom: 0; |
254 | left: 0; | |
255 | position: absolute; | |
256 | width: 100%; | |
257 | height: 100%; | |
258 | padding: 0; | |
259 | border: 0; | |
260 | border-radius: 2.5px; | |
261 | margin: 0; | |
262 | background: none; | |
263 | background-color: transparent; | |
264 | } | |
265 | ||
0282321d | 266 | .bufferBar, |
1c129f50 RK |
267 | .volumeBackground { |
268 | background-color: rgba(160,144,144,0.7); | |
269 | } | |
270 | ||
0282321d RK |
271 | .bufferBar::-moz-progress-bar, |
272 | .progressBar::-moz-progress-bar, | |
1c129f50 RK |
273 | .volumeBackground::-moz-meter-bar { |
274 | height: 100%; | |
275 | padding: 0; | |
276 | margin: 0; | |
277 | border: 0; | |
278 | border-radius: 2.5px; | |
279 | background: none; | |
280 | } | |
281 | ||
0282321d RK |
282 | .scrubber:hover::-moz-range-thumb, |
283 | .volumeControl:hover::-moz-range-thumb { | |
1c129f50 RK |
284 | background-color: #FFCF00; |
285 | } | |
286 | ||
0282321d RK |
287 | .scrubber:active::-moz-range-thumb, |
288 | .volumeControl:active::-moz-range-thumb { | |
1c129f50 RK |
289 | background-color: #FF9F00; |
290 | } | |
291 | ||
0282321d RK |
292 | .scrubber::-moz-range-track, |
293 | .scrubber::-moz-range-progress { | |
1c129f50 RK |
294 | background-color: transparent; |
295 | } | |
296 | ||
0282321d RK |
297 | .volumeControl::-moz-range-progress, |
298 | .volumeControl::-moz-range-track { | |
1c129f50 RK |
299 | height: 5px; |
300 | border-radius: 2.5px; | |
301 | } | |
302 | ||
0282321d | 303 | .volumeControl::-moz-range-progress { |
1c129f50 RK |
304 | background-color: #008484; |
305 | } | |
306 | ||
0282321d | 307 | .volumeControl::-moz-range-track { |
1c129f50 RK |
308 | background-color: rgba(0,0,0,0.7); |
309 | } | |
310 | ||
311 | ||
0282321d | 312 | .bufferBar::-moz-progress-bar { |
1c129f50 RK |
313 | background-color: rgba(160,144,144,0.3); |
314 | border-radius: 2.5px; | |
315 | } | |
316 | ||
0282321d | 317 | .progressBar::-moz-progress-bar { |
1c129f50 RK |
318 | background-color: #008484; |
319 | } | |
320 | ||
321 | .textTrackList { | |
322 | position: absolute; | |
323 | right: 5px; | |
324 | bottom: 45px; | |
325 | max-width: 80%; | |
326 | border: 1px solid #000000; | |
327 | border-radius: 2.5px; | |
328 | padding: 5px 0; | |
329 | vertical-align: middle; | |
330 | font-size: 12px; | |
331 | background-color: #000000; | |
332 | opacity: 0.7; | |
333 | } | |
334 | ||
335 | .textTrackList > .textTrackItem { | |
336 | display: block; | |
337 | width: 100%; | |
338 | height: 30px; | |
339 | padding: 2px 10px; | |
340 | border: none; | |
341 | margin: 0; | |
342 | white-space: nowrap; | |
343 | overflow: hidden; | |
344 | text-align: left; | |
345 | text-overflow: ellipsis; | |
0282321d | 346 | color: #FF9F00; |
1c129f50 RK |
347 | background-color: transparent; |
348 | } | |
349 | ||
350 | .textTrackList > .textTrackItem:hover { | |
351 | background-color: #FFCF00; | |
352 | } | |
353 | ||
354 | .textTrackList > .textTrackItem[on] { | |
355 | color: #008484; | |
356 | } | |
357 | ||
0282321d RK |
358 | .positionLabel, |
359 | .durationLabel { | |
1c129f50 RK |
360 | display: none; |
361 | } | |
362 | ||
0282321d | 363 | .positionDurationBox { |
1c129f50 RK |
364 | text-align: center; |
365 | padding-inline-start: 1px; | |
366 | padding-inline-end: 9px; | |
367 | white-space: nowrap; | |
368 | font: message-box; | |
369 | font-size: 13px; | |
0282321d | 370 | font-size-adjust: 0.55; |
1c129f50 RK |
371 | color: #000000; |
372 | } | |
373 | ||
0282321d | 374 | .duration { |
1c129f50 RK |
375 | display: inline-block; |
376 | white-space: pre; | |
377 | color: #8050B0; | |
378 | } | |
379 | ||
380 | .statusIcon { | |
381 | width: 36px; | |
382 | height: 36px; | |
383 | margin-bottom: 20px; | |
384 | } | |
385 | ||
386 | .statusIcon[type="throbber"] { | |
0282321d | 387 | background: url(chrome://global/skin/media/throbber.png) no-repeat center; |
1c129f50 | 388 | } |
0282321d | 389 | |
1c129f50 | 390 | .statusIcon[type="throbber"][stalled] { |
0282321d | 391 | background: url(chrome://global/skin/media/stalled.png) no-repeat center; |
1c129f50 | 392 | } |
0282321d | 393 | |
1c129f50 RK |
394 | .statusIcon[type="error"] { |
395 | min-width: 70px; | |
396 | min-height: 60px; | |
0282321d | 397 | background: url(chrome://global/skin/media/error.png) no-repeat center; |
1c129f50 RK |
398 | background-size: contain; |
399 | } | |
400 | ||
401 | /* Overlay Play button */ | |
402 | .clickToPlay { | |
403 | min-width: 48px; | |
404 | min-height: 48px; | |
405 | border-radius: 50%; | |
dbad77ea | 406 | background-image: url(chrome://global/skin/media/playButton.svg); |
1c129f50 RK |
407 | background-repeat: no-repeat; |
408 | background-position: 54% 50%; | |
409 | background-size: 40% 40%; | |
410 | background-color: #000000; | |
dbad77ea RK |
411 | -moz-context-properties: fill; |
412 | fill: #FFCF00; | |
1c129f50 RK |
413 | opacity: 0.8; |
414 | position: relative; | |
415 | top: 20px; | |
416 | } | |
417 | ||
418 | .controlsSpacerStack:hover > .clickToPlay, | |
419 | .clickToPlay:hover { | |
420 | opacity: 0.55; | |
421 | } | |
422 | ||
423 | .controlsSpacerStack:hover > .clickToPlay[fadeout] { | |
424 | opacity: 0; | |
425 | } | |
426 | ||
427 | .controlBar[fullscreen-unavailable] .fullscreenButton { | |
428 | display: none; | |
429 | } | |
430 | ||
431 | /* CSS Transitions */ | |
432 | .clickToPlay { | |
433 | transition-property: transform, opacity; | |
434 | transition-duration: 400ms, 400ms; | |
435 | } | |
436 | ||
437 | .controlsSpacer[fadeout] { | |
438 | opacity: 0; | |
439 | } | |
440 | ||
441 | .clickToPlay[fadeout] { | |
442 | transform: scale(3); | |
443 | opacity: 0; | |
444 | } | |
445 | ||
446 | .clickToPlay[fadeout][immediate] { | |
447 | transition-property: opacity, background-size; | |
448 | transition-duration: 0s, 0s; | |
449 | } | |
450 | .controlBar:not([immediate]) { | |
451 | transition-property: opacity; | |
452 | transition-duration: 200ms; | |
453 | } | |
454 | .controlBar[fadeout] { | |
455 | opacity: 0; | |
456 | } | |
457 | .volumeStack:not([immediate]) { | |
458 | transition-property: opacity, margin-top; | |
459 | transition-duration: 200ms, 200ms; | |
460 | } | |
461 | .statusOverlay:not([immediate]) { | |
462 | transition-property: opacity; | |
463 | transition-duration: 300ms; | |
464 | transition-delay: 750ms; | |
465 | } | |
466 | .statusOverlay[fadeout] { | |
467 | opacity: 0; | |
468 | } | |
469 | ||
470 | /* Error description formatting */ | |
471 | .errorLabel { | |
472 | padding: 0 10px; | |
473 | text-align: center; | |
0282321d | 474 | font: message-box; |
1c129f50 RK |
475 | font-size: 14px; |
476 | color: #E7ADE7; | |
477 | } | |
478 | ||
479 | .errorLabel { | |
480 | display: none; | |
481 | } | |
482 | ||
483 | [error="errorAborted"] > [anonid="errorAborted"], | |
484 | [error="errorNetwork"] > [anonid="errorNetwork"], | |
485 | [error="errorDecode"] > [anonid="errorDecode"], | |
486 | [error="errorSrcNotSupported"] > [anonid="errorSrcNotSupported"], | |
487 | [error="errorNoSource"] > [anonid="errorNoSource"], | |
488 | [error="errorGeneric"] > [anonid="errorGeneric"] { | |
489 | display: inline; | |
490 | } |