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/. */
5 @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
6 @namespace url("http://www.w3.org/1999/xhtml");
8 video > xul|videocontrols,
9 audio > xul|videocontrols {
10 writing-mode: horizontal-tb;
13 display: inline-block;
16 .controlsContainer [hidden="true"],
21 .controlBar[size="hidden"] {
41 flex-direction: column;
42 justify-content: center;
44 background-color: rgb(160,144,144);
49 flex-direction: column;
50 justify-content: center;
54 .controlsSpacerStack {
56 flex-direction: column;
58 justify-content: center;
63 background-color: rgba(0,0,0,.4);
69 justify-content: center;
74 background-color: rgba(156,156,255,0.75);
87 background-color: transparent;
88 background-repeat: no-repeat;
89 background-position: center;
90 background-origin: content-box;
91 background-clip: content-box;
95 .muteButton:not([noAudio]):hover,
96 .closedCaptionButton:hover,
97 .fullscreenButton:hover {
98 background-color: rgba(255,207,0,0.75);
101 .playButton:hover:active,
102 .muteButton:not([noAudio]):hover:active,
103 .closedCaptionButton:hover:active,
104 .fullscreenButton:hover:active {
105 background-color: rgba(255,159,0,0.75);
109 background-image: url(chrome://global/skin/media/pauseButton.svg#pause);
112 background-image: url(chrome://global/skin/media/pauseButton.svg#pause-hover);
114 .playButton:hover:active {
115 background-image: url(chrome://global/skin/media/pauseButton.svg#pause-active);
117 .playButton[paused] {
118 background-image: url(chrome://global/skin/media/playButton.svg#play);
120 .playButton[paused]:hover {
121 background-image: url(chrome://global/skin/media/playButton.svg#play-hover);
123 .playButton[paused]:hover:active {
124 background-image: url(chrome://global/skin/media/playButton.svg#play-active);
128 background-image: url(chrome://global/skin/media/muteButton.svg#unmute);
131 background-image: url(chrome://global/skin/media/muteButton.svg#unmute-hover);
133 .muteButton:hover:active {
134 background-image: url(chrome://global/skin/media/muteButton.svg#unmute-active);
137 background-image: url(chrome://global/skin/media/muteButton.svg#mute);
139 .muteButton[muted]:hover {
140 background-image: url(chrome://global/skin/media/muteButton.svg#mute-hover);
142 .muteButton[muted]:hover:active {
143 background-image: url(chrome://global/skin/media/muteButton.svg#mute-active);
145 .muteButton[noAudio],
146 .muteButton[noAudio]:hover,
147 .muteButton[noAudio]:hover:active {
148 background-image: url(chrome://global/skin/media/muteButton.svg#noaudio);
150 .muteButton[noAudio] + .volumeStack {
154 .closedCaptionButton {
155 background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-off);
157 .closedCaptionButton:hover {
158 background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-off-hover);
160 .closedCaptionButton:hover:active {
161 background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-off-active);
163 .closedCaptionButton[enabled] {
164 background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc);
166 .closedCaptionButton[enabled]:hover {
167 background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-hover);
169 .closedCaptionButton[enabled]:hover:active {
170 background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-active);
174 background-image: url(chrome://global/skin/media/fullscreenButton.svg#fullscreen);
176 .fullscreenButton:hover {
177 background-image: url(chrome://global/skin/media/fullscreenButton.svg#fullscreen-hover);
179 .fullscreenButton:hover:active {
180 background-image: url(chrome://global/skin/media/fullscreenButton.svg#fullscreen-active);
182 .fullscreenButton[fullscreened] {
183 background-image: url(chrome://global/skin/media/fullscreenButton.svg#unfullscreen);
185 .fullscreenButton[fullscreened]:hover {
186 background-image: url(chrome://global/skin/media/fullscreenButton.svg#unfullscreen-hover);
188 .fullscreenButton[fullscreened]:hover:active {
189 background-image: url(chrome://global/skin/media/fullscreenButton.svg#unfullscreen-active);
196 .volumeControl::-moz-range-thumb,
197 .scrubber::-moz-range-thumb {
202 background-color: #000000;
205 .volumeControl::-moz-focus-outer,
206 .scrubber::-moz-focus-outer {
210 .progressBackgroundBar {
212 flex-direction: column;
213 justify-content: center;
252 border-radius: 2.5px;
255 background-color: transparent;
260 background-color: rgba(160,144,144,0.7);
263 .bufferBar::-moz-progress-bar,
264 .progressBar::-moz-progress-bar,
265 .volumeBackground::-moz-meter-bar {
270 border-radius: 2.5px;
274 .scrubber:hover::-moz-range-thumb,
275 .volumeControl:hover::-moz-range-thumb {
276 background-color: #FFCF00;
279 .scrubber:active::-moz-range-thumb,
280 .volumeControl:active::-moz-range-thumb {
281 background-color: #FF9F00;
284 .scrubber::-moz-range-track,
285 .scrubber::-moz-range-progress {
286 background-color: transparent;
289 .volumeControl::-moz-range-progress,
290 .volumeControl::-moz-range-track {
292 border-radius: 2.5px;
295 .volumeControl::-moz-range-progress {
296 background-color: #008484;
299 .volumeControl::-moz-range-track {
300 background-color: rgba(0,0,0,0.7);
304 .bufferBar::-moz-progress-bar {
305 background-color: rgba(160,144,144,0.3);
306 border-radius: 2.5px;
309 .progressBar::-moz-progress-bar {
310 background-color: #008484;
318 border: 1px solid #000000;
319 border-radius: 2.5px;
321 vertical-align: middle;
323 background-color: #000000;
327 .textTrackList > .textTrackItem {
337 text-overflow: ellipsis;
339 background-color: transparent;
342 .textTrackList > .textTrackItem:hover {
343 background-color: #FFCF00;
346 .textTrackList > .textTrackItem[on] {
355 .positionDurationBox {
357 padding-inline-start: 1px;
358 padding-inline-end: 9px;
362 font-size-adjust: 0.55;
367 display: inline-block;
378 .statusIcon[type="throbber"] {
379 background: url(chrome://global/skin/media/throbber.png) no-repeat center;
382 .statusIcon[type="throbber"][stalled] {
383 background: url(chrome://global/skin/media/stalled.png) no-repeat center;
386 .statusIcon[type="error"] {
389 background: url(chrome://global/skin/media/error.png) no-repeat center;
390 background-size: contain;
393 /* Overlay Play button */
398 background-image: url(chrome://global/skin/media/playButton.svg#play);
399 background-repeat: no-repeat;
400 background-position: 54% 50%;
401 background-size: 40% 40%;
402 background-color: #000000;
408 .controlsSpacerStack:hover > .clickToPlay,
413 .controlsSpacerStack:hover > .clickToPlay[fadeout] {
417 .controlBar[fullscreen-unavailable] .fullscreenButton {
421 /* CSS Transitions */
423 transition-property: transform, opacity;
424 transition-duration: 400ms, 400ms;
427 .controlsSpacer[fadeout] {
431 .clickToPlay[fadeout] {
436 .clickToPlay[fadeout][immediate] {
437 transition-property: opacity, background-size;
438 transition-duration: 0s, 0s;
440 .controlBar:not([immediate]) {
441 transition-property: opacity;
442 transition-duration: 200ms;
444 .controlBar[fadeout] {
447 .volumeStack:not([immediate]) {
448 transition-property: opacity, margin-top;
449 transition-duration: 200ms, 200ms;
451 .statusOverlay:not([immediate]) {
452 transition-property: opacity;
453 transition-duration: 300ms;
454 transition-delay: 750ms;
456 .statusOverlay[fadeout] {
460 /* Error description formatting */
473 [error="errorAborted"] > [anonid="errorAborted"],
474 [error="errorNetwork"] > [anonid="errorNetwork"],
475 [error="errorDecode"] > [anonid="errorDecode"],
476 [error="errorSrcNotSupported"] > [anonid="errorSrcNotSupported"],
477 [error="errorNoSource"] > [anonid="errorNoSource"],
478 [error="errorGeneric"] > [anonid="errorGeneric"] {