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(80,80,80, .85);
53 flex-direction: column;
54 justify-content: center;
58 .controlsSpacerStack {
60 flex-direction: column;
62 justify-content: center;
67 background-color: rgba(255,255,255,.4);
73 justify-content: center;
78 background-color: rgba(26,26,26,.8);
91 background-color: transparent;
92 background-repeat: no-repeat;
93 background-position: center;
94 background-origin: content-box;
95 background-clip: content-box;
99 background-image: url(chrome://global/skin/media/pauseButton.svg);
100 -moz-context-properties: fill;
106 .playButton:hover:active {
109 .playButton[paused] {
110 background-image: url(chrome://global/skin/media/playButton.svg);
111 -moz-context-properties: fill;
114 .playButton[paused]:hover {
117 .playButton[paused]:hover:active {
122 background-image: url(chrome://global/skin/media/muteButton.svg#unmute);
125 background-image: url(chrome://global/skin/media/muteButton.svg#unmute-hover);
127 .muteButton:hover:active {
128 background-image: url(chrome://global/skin/media/muteButton.svg#unmute-active);
131 background-image: url(chrome://global/skin/media/muteButton.svg#mute);
133 .muteButton[muted]:hover {
134 background-image: url(chrome://global/skin/media/muteButton.svg#mute-hover);
136 .muteButton[muted]:hover:active {
137 background-image: url(chrome://global/skin/media/muteButton.svg#mute-active);
139 .muteButton[noAudio],
140 .muteButton[noAudio]:hover,
141 .muteButton[noAudio]:hover:active {
142 background-image: url(chrome://global/skin/media/muteButton.svg#noaudio);
144 .muteButton[noAudio] + .volumeStack {
148 .closedCaptionButton {
149 background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-off);
151 .closedCaptionButton:hover {
152 background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-off-hover);
154 .closedCaptionButton:hover:active {
155 background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-off-active);
157 .closedCaptionButton[enabled] {
158 background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc);
160 .closedCaptionButton[enabled]:hover {
161 background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-hover);
163 .closedCaptionButton[enabled]:hover:active {
164 background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-active);
168 background-image: url(chrome://global/skin/media/fullscreenButton.svg#fullscreen);
170 .fullscreenButton:hover {
171 background-image: url(chrome://global/skin/media/fullscreenButton.svg#fullscreen-hover);
173 .fullscreenButton:hover:active {
174 background-image: url(chrome://global/skin/media/fullscreenButton.svg#fullscreen-active);
176 .fullscreenButton[fullscreened] {
177 background-image: url(chrome://global/skin/media/fullscreenButton.svg#unfullscreen);
179 .fullscreenButton[fullscreened]:hover {
180 background-image: url(chrome://global/skin/media/fullscreenButton.svg#unfullscreen-hover);
182 .fullscreenButton[fullscreened]:hover:active {
183 background-image: url(chrome://global/skin/media/fullscreenButton.svg#unfullscreen-active);
190 .volumeControl::-moz-range-thumb,
191 .scrubber::-moz-range-thumb {
196 background-color: #ffffff;
197 filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.65));
200 .volumeControl::-moz-focus-outer,
201 .scrubber::-moz-focus-outer {
205 .progressBackgroundBar {
207 flex-direction: column;
208 justify-content: center;
247 border-radius: 2.5px;
250 background-color: transparent;
255 background-color: rgba(0,0,0,0.7);
258 .bufferBar::-moz-progress-bar,
259 .progressBar::-moz-progress-bar,
260 .volumeBackground::-moz-meter-bar {
265 border-radius: 2.5px;
269 .scrubber:hover::-moz-range-thumb,
270 .volumeControl:hover::-moz-range-thumb {
271 background-color: #48a0f7;
274 .scrubber:active::-moz-range-thumb,
275 .volumeControl:active::-moz-range-thumb {
276 background-color: #2d89e6;
279 .scrubber::-moz-range-track,
280 .scrubber::-moz-range-progress {
281 background-color: transparent;
284 .volumeControl::-moz-range-progress,
285 .volumeControl::-moz-range-track {
287 border-radius: 2.5px;
290 .volumeControl::-moz-range-progress {
291 background-color: #ffffff;
294 .volumeControl::-moz-range-track {
295 background-color: rgba(0,0,0,0.7);
299 .bufferBar::-moz-progress-bar {
300 background-color: rgba(255,255,255,0.3);
301 border-radius: 2.5px;
304 .progressBar::-moz-progress-bar {
305 background-color: #00b6f0;
313 border: 1px solid #000000;
314 border-radius: 2.5px;
316 vertical-align: middle;
318 background-color: #000000;
322 .textTrackList > .textTrackItem {
332 text-overflow: ellipsis;
334 background-color: transparent;
337 .textTrackList > .textTrackItem:hover {
338 background-color: #444444;
341 .textTrackList > .textTrackItem[on] {
350 .positionDurationBox {
352 padding-inline-start: 1px;
353 padding-inline-end: 9px;
357 font-size-adjust: 0.55;
362 display: inline-block;
373 .statusIcon[type="throbber"] {
374 background: url(chrome://global/skin/media/throbber.png) no-repeat center;
377 .statusIcon[type="throbber"][stalled] {
378 background: url(chrome://global/skin/media/stalled.png) no-repeat center;
381 .statusIcon[type="error"] {
384 background: url(chrome://global/skin/media/error.png) no-repeat center;
385 background-size: contain;
388 /* Overlay Play button */
393 background-image: url(chrome://global/skin/media/playButton.svg);
394 background-repeat: no-repeat;
395 background-position: 54% 50%;
396 background-size: 40% 40%;
397 background-color: #1a1a1a;
398 -moz-context-properties: fill;
405 .controlsSpacerStack:hover > .clickToPlay,
410 .controlsSpacerStack:hover > .clickToPlay[fadeout] {
414 .controlBar[fullscreen-unavailable] .fullscreenButton {
418 /* CSS Transitions */
420 transition-property: transform, opacity;
421 transition-duration: 400ms, 400ms;
424 .controlsSpacer[fadeout] {
428 .clickToPlay[fadeout] {
433 .clickToPlay[fadeout][immediate] {
434 transition-property: opacity, background-size;
435 transition-duration: 0s, 0s;
437 .controlBar:not([immediate]) {
438 transition-property: opacity;
439 transition-duration: 200ms;
441 .controlBar[fadeout] {
444 .volumeStack:not([immediate]) {
445 transition-property: opacity, margin-top;
446 transition-duration: 200ms, 200ms;
448 .statusOverlay:not([immediate]) {
449 transition-property: opacity;
450 transition-duration: 300ms;
451 transition-delay: 750ms;
453 .statusOverlay[fadeout] {
457 /* Error description formatting */
470 [error="errorAborted"] > [anonid="errorAborted"],
471 [error="errorNetwork"] > [anonid="errorNetwork"],
472 [error="errorDecode"] > [anonid="errorDecode"],
473 [error="errorSrcNotSupported"] > [anonid="errorSrcNotSupported"],
474 [error="errorNoSource"] > [anonid="errorNoSource"],
475 [error="errorGeneric"] > [anonid="errorGeneric"] {