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, .85);
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);
114 -moz-context-properties: fill;
120 .playButton:hover:active {
123 .playButton[paused] {
124 background-image: url(chrome://global/skin/media/playButton.svg);
125 -moz-context-properties: fill;
128 .playButton[paused]:hover {
131 .playButton[paused]:hover:active {
136 background-image: url(chrome://global/skin/media/muteButton.svg#unmute);
139 background-image: url(chrome://global/skin/media/muteButton.svg#unmute-hover);
141 .muteButton:hover:active {
142 background-image: url(chrome://global/skin/media/muteButton.svg#unmute-active);
145 background-image: url(chrome://global/skin/media/muteButton.svg#mute);
147 .muteButton[muted]:hover {
148 background-image: url(chrome://global/skin/media/muteButton.svg#mute-hover);
150 .muteButton[muted]:hover:active {
151 background-image: url(chrome://global/skin/media/muteButton.svg#mute-active);
153 .muteButton[noAudio],
154 .muteButton[noAudio]:hover,
155 .muteButton[noAudio]:hover:active {
156 background-image: url(chrome://global/skin/media/muteButton.svg#noaudio);
158 .muteButton[noAudio] + .volumeStack {
162 .closedCaptionButton {
163 background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-off);
165 .closedCaptionButton:hover {
166 background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-off-hover);
168 .closedCaptionButton:hover:active {
169 background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-off-active);
171 .closedCaptionButton[enabled] {
172 background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc);
174 .closedCaptionButton[enabled]:hover {
175 background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-hover);
177 .closedCaptionButton[enabled]:hover:active {
178 background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-active);
182 background-image: url(chrome://global/skin/media/fullscreenButton.svg#fullscreen);
184 .fullscreenButton:hover {
185 background-image: url(chrome://global/skin/media/fullscreenButton.svg#fullscreen-hover);
187 .fullscreenButton:hover:active {
188 background-image: url(chrome://global/skin/media/fullscreenButton.svg#fullscreen-active);
190 .fullscreenButton[fullscreened] {
191 background-image: url(chrome://global/skin/media/fullscreenButton.svg#unfullscreen);
193 .fullscreenButton[fullscreened]:hover {
194 background-image: url(chrome://global/skin/media/fullscreenButton.svg#unfullscreen-hover);
196 .fullscreenButton[fullscreened]:hover:active {
197 background-image: url(chrome://global/skin/media/fullscreenButton.svg#unfullscreen-active);
204 .volumeControl::-moz-range-thumb,
205 .scrubber::-moz-range-thumb {
210 background-color: #000000;
213 .volumeControl::-moz-focus-outer,
214 .scrubber::-moz-focus-outer {
218 .progressBackgroundBar {
220 flex-direction: column;
221 justify-content: center;
260 border-radius: 2.5px;
263 background-color: transparent;
268 background-color: rgba(160,144,144,0.7);
271 .bufferBar::-moz-progress-bar,
272 .progressBar::-moz-progress-bar,
273 .volumeBackground::-moz-meter-bar {
278 border-radius: 2.5px;
282 .scrubber:hover::-moz-range-thumb,
283 .volumeControl:hover::-moz-range-thumb {
284 background-color: #FFCF00;
287 .scrubber:active::-moz-range-thumb,
288 .volumeControl:active::-moz-range-thumb {
289 background-color: #FF9F00;
292 .scrubber::-moz-range-track,
293 .scrubber::-moz-range-progress {
294 background-color: transparent;
297 .volumeControl::-moz-range-progress,
298 .volumeControl::-moz-range-track {
300 border-radius: 2.5px;
303 .volumeControl::-moz-range-progress {
304 background-color: #008484;
307 .volumeControl::-moz-range-track {
308 background-color: rgba(0,0,0,0.7);
312 .bufferBar::-moz-progress-bar {
313 background-color: rgba(160,144,144,0.3);
314 border-radius: 2.5px;
317 .progressBar::-moz-progress-bar {
318 background-color: #008484;
326 border: 1px solid #000000;
327 border-radius: 2.5px;
329 vertical-align: middle;
331 background-color: #000000;
335 .textTrackList > .textTrackItem {
345 text-overflow: ellipsis;
347 background-color: transparent;
350 .textTrackList > .textTrackItem:hover {
351 background-color: #FFCF00;
354 .textTrackList > .textTrackItem[on] {
363 .positionDurationBox {
365 padding-inline-start: 1px;
366 padding-inline-end: 9px;
370 font-size-adjust: 0.55;
375 display: inline-block;
386 .statusIcon[type="throbber"] {
387 background: url(chrome://global/skin/media/throbber.png) no-repeat center;
390 .statusIcon[type="throbber"][stalled] {
391 background: url(chrome://global/skin/media/stalled.png) no-repeat center;
394 .statusIcon[type="error"] {
397 background: url(chrome://global/skin/media/error.png) no-repeat center;
398 background-size: contain;
401 /* Overlay Play button */
406 background-image: url(chrome://global/skin/media/playButton.svg);
407 background-repeat: no-repeat;
408 background-position: 54% 50%;
409 background-size: 40% 40%;
410 background-color: #000000;
411 -moz-context-properties: fill;
418 .controlsSpacerStack:hover > .clickToPlay,
423 .controlsSpacerStack:hover > .clickToPlay[fadeout] {
427 .controlBar[fullscreen-unavailable] .fullscreenButton {
431 /* CSS Transitions */
433 transition-property: transform, opacity;
434 transition-duration: 400ms, 400ms;
437 .controlsSpacer[fadeout] {
441 .clickToPlay[fadeout] {
446 .clickToPlay[fadeout][immediate] {
447 transition-property: opacity, background-size;
448 transition-duration: 0s, 0s;
450 .controlBar:not([immediate]) {
451 transition-property: opacity;
452 transition-duration: 200ms;
454 .controlBar[fadeout] {
457 .volumeStack:not([immediate]) {
458 transition-property: opacity, margin-top;
459 transition-duration: 200ms, 200ms;
461 .statusOverlay:not([immediate]) {
462 transition-property: opacity;
463 transition-duration: 300ms;
464 transition-delay: 750ms;
466 .statusOverlay[fadeout] {
470 /* Error description formatting */
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"] {