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"] {
25 .controlsSpacer[hideCursor] {
45 flex-direction: column;
46 justify-content: center;
48 background-color: rgb(160,144,144);
53 flex-direction: column;
54 justify-content: center;
58 .controlsSpacerStack {
60 flex-direction: column;
62 justify-content: center;
67 background-color: rgba(0,0,0,.4);
73 justify-content: center;
78 background-color: rgba(156,156,255,0.75);
91 background-color: transparent;
92 background-repeat: no-repeat;
93 background-position: center;
94 background-origin: content-box;
95 background-clip: content-box;
99 .muteButton:not([noAudio]):hover,
100 .closedCaptionButton:hover,
101 .fullscreenButton:hover {
102 background-color: rgba(255,207,0,0.75);
105 .playButton:hover:active,
106 .muteButton:not([noAudio]):hover:active,
107 .closedCaptionButton:hover:active,
108 .fullscreenButton:hover:active {
109 background-color: rgba(255,159,0,0.75);
113 background-image: url(chrome://global/skin/media/pauseButton.svg#pause);
116 background-image: url(chrome://global/skin/media/pauseButton.svg#pause-hover);
118 .playButton:hover:active {
119 background-image: url(chrome://global/skin/media/pauseButton.svg#pause-active);
121 .playButton[paused] {
122 background-image: url(chrome://global/skin/media/playButton.svg#play);
124 .playButton[paused]:hover {
125 background-image: url(chrome://global/skin/media/playButton.svg#play-hover);
127 .playButton[paused]:hover:active {
128 background-image: url(chrome://global/skin/media/playButton.svg#play-active);
132 background-image: url(chrome://global/skin/media/muteButton.svg#unmute);
135 background-image: url(chrome://global/skin/media/muteButton.svg#unmute-hover);
137 .muteButton:hover:active {
138 background-image: url(chrome://global/skin/media/muteButton.svg#unmute-active);
141 background-image: url(chrome://global/skin/media/muteButton.svg#mute);
143 .muteButton[muted]:hover {
144 background-image: url(chrome://global/skin/media/muteButton.svg#mute-hover);
146 .muteButton[muted]:hover:active {
147 background-image: url(chrome://global/skin/media/muteButton.svg#mute-active);
149 .muteButton[noAudio],
150 .muteButton[noAudio]:hover,
151 .muteButton[noAudio]:hover:active {
152 background-image: url(chrome://global/skin/media/muteButton.svg#noaudio);
154 .muteButton[noAudio] + .volumeStack {
158 .closedCaptionButton {
159 background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-off);
161 .closedCaptionButton:hover {
162 background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-off-hover);
164 .closedCaptionButton:hover:active {
165 background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-off-active);
167 .closedCaptionButton[enabled] {
168 background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc);
170 .closedCaptionButton[enabled]:hover {
171 background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-hover);
173 .closedCaptionButton[enabled]:hover:active {
174 background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-active);
178 background-image: url(chrome://global/skin/media/fullscreenButton.svg#fullscreen);
180 .fullscreenButton:hover {
181 background-image: url(chrome://global/skin/media/fullscreenButton.svg#fullscreen-hover);
183 .fullscreenButton:hover:active {
184 background-image: url(chrome://global/skin/media/fullscreenButton.svg#fullscreen-active);
186 .fullscreenButton[fullscreened] {
187 background-image: url(chrome://global/skin/media/fullscreenButton.svg#unfullscreen);
189 .fullscreenButton[fullscreened]:hover {
190 background-image: url(chrome://global/skin/media/fullscreenButton.svg#unfullscreen-hover);
192 .fullscreenButton[fullscreened]:hover:active {
193 background-image: url(chrome://global/skin/media/fullscreenButton.svg#unfullscreen-active);
200 .volumeControl::-moz-range-thumb,
201 .scrubber::-moz-range-thumb {
206 background-color: #000000;
209 .volumeControl::-moz-focus-outer,
210 .scrubber::-moz-focus-outer {
214 .progressBackgroundBar {
216 flex-direction: column;
217 justify-content: center;
256 border-radius: 2.5px;
259 background-color: transparent;
264 background-color: rgba(160,144,144,0.7);
267 .bufferBar::-moz-progress-bar,
268 .progressBar::-moz-progress-bar,
269 .volumeBackground::-moz-meter-bar {
274 border-radius: 2.5px;
278 .scrubber:hover::-moz-range-thumb,
279 .volumeControl:hover::-moz-range-thumb {
280 background-color: #FFCF00;
283 .scrubber:active::-moz-range-thumb,
284 .volumeControl:active::-moz-range-thumb {
285 background-color: #FF9F00;
288 .scrubber::-moz-range-track,
289 .scrubber::-moz-range-progress {
290 background-color: transparent;
293 .volumeControl::-moz-range-progress,
294 .volumeControl::-moz-range-track {
296 border-radius: 2.5px;
299 .volumeControl::-moz-range-progress {
300 background-color: #008484;
303 .volumeControl::-moz-range-track {
304 background-color: rgba(0,0,0,0.7);
308 .bufferBar::-moz-progress-bar {
309 background-color: rgba(160,144,144,0.3);
310 border-radius: 2.5px;
313 .progressBar::-moz-progress-bar {
314 background-color: #008484;
322 border: 1px solid #000000;
323 border-radius: 2.5px;
325 vertical-align: middle;
327 background-color: #000000;
331 .textTrackList > .textTrackItem {
341 text-overflow: ellipsis;
343 background-color: transparent;
346 .textTrackList > .textTrackItem:hover {
347 background-color: #FFCF00;
350 .textTrackList > .textTrackItem[on] {
359 .positionDurationBox {
361 padding-inline-start: 1px;
362 padding-inline-end: 9px;
366 font-size-adjust: 0.55;
371 display: inline-block;
382 .statusIcon[type="throbber"] {
383 background: url(chrome://global/skin/media/throbber.png) no-repeat center;
386 .statusIcon[type="throbber"][stalled] {
387 background: url(chrome://global/skin/media/stalled.png) no-repeat center;
390 .statusIcon[type="error"] {
393 background: url(chrome://global/skin/media/error.png) no-repeat center;
394 background-size: contain;
397 /* Overlay Play button */
402 background-image: url(chrome://global/skin/media/playButton.svg#play);
403 background-repeat: no-repeat;
404 background-position: 54% 50%;
405 background-size: 40% 40%;
406 background-color: #000000;
412 .controlsSpacerStack:hover > .clickToPlay,
417 .controlsSpacerStack:hover > .clickToPlay[fadeout] {
421 .controlBar[fullscreen-unavailable] .fullscreenButton {
425 /* CSS Transitions */
427 transition-property: transform, opacity;
428 transition-duration: 400ms, 400ms;
431 .controlsSpacer[fadeout] {
435 .clickToPlay[fadeout] {
440 .clickToPlay[fadeout][immediate] {
441 transition-property: opacity, background-size;
442 transition-duration: 0s, 0s;
444 .controlBar:not([immediate]) {
445 transition-property: opacity;
446 transition-duration: 200ms;
448 .controlBar[fadeout] {
451 .volumeStack:not([immediate]) {
452 transition-property: opacity, margin-top;
453 transition-duration: 200ms, 200ms;
455 .statusOverlay:not([immediate]) {
456 transition-property: opacity;
457 transition-duration: 300ms;
458 transition-delay: 750ms;
460 .statusOverlay[fadeout] {
464 /* Error description formatting */
477 [error="errorAborted"] > [anonid="errorAborted"],
478 [error="errorNetwork"] > [anonid="errorNetwork"],
479 [error="errorDecode"] > [anonid="errorDecode"],
480 [error="errorSrcNotSupported"] > [anonid="errorSrcNotSupported"],
481 [error="errorNoSource"] > [anonid="errorNoSource"],
482 [error="errorGeneric"] > [anonid="errorGeneric"] {