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