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(80,80,80);
49 flex-direction: column;
50 justify-content: center;
54 .controlsSpacerStack {
56 flex-direction: column;
58 justify-content: center;
63 background-color: rgba(255,255,255,.4);
69 justify-content: center;
74 background-color: rgba(26,26,26,.8);
87 background-color: transparent;
88 background-repeat: no-repeat;
89 background-position: center;
90 background-origin: content-box;
91 background-clip: content-box;
95 background-image: url(chrome://global/skin/media/pauseButton.svg#pause);
98 background-image: url(chrome://global/skin/media/pauseButton.svg#pause-hover);
100 .playButton:hover:active {
101 background-image: url(chrome://global/skin/media/pauseButton.svg#pause-active);
103 .playButton[paused] {
104 background-image: url(chrome://global/skin/media/playButton.svg#play);
106 .playButton[paused]:hover {
107 background-image: url(chrome://global/skin/media/playButton.svg#play-hover);
109 .playButton[paused]:hover:active {
110 background-image: url(chrome://global/skin/media/playButton.svg#play-active);
114 background-image: url(chrome://global/skin/media/muteButton.svg#unmute);
117 background-image: url(chrome://global/skin/media/muteButton.svg#unmute-hover);
119 .muteButton:hover:active {
120 background-image: url(chrome://global/skin/media/muteButton.svg#unmute-active);
123 background-image: url(chrome://global/skin/media/muteButton.svg#mute);
125 .muteButton[muted]:hover {
126 background-image: url(chrome://global/skin/media/muteButton.svg#mute-hover);
128 .muteButton[muted]:hover:active {
129 background-image: url(chrome://global/skin/media/muteButton.svg#mute-active);
131 .muteButton[noAudio],
132 .muteButton[noAudio]:hover,
133 .muteButton[noAudio]:hover:active {
134 background-image: url(chrome://global/skin/media/muteButton.svg#noaudio);
136 .muteButton[noAudio] + .volumeStack {
140 .closedCaptionButton {
141 background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-off);
143 .closedCaptionButton:hover {
144 background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-off-hover);
146 .closedCaptionButton:hover:active {
147 background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-off-active);
149 .closedCaptionButton[enabled] {
150 background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc);
152 .closedCaptionButton[enabled]:hover {
153 background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-hover);
155 .closedCaptionButton[enabled]:hover:active {
156 background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-active);
160 background-image: url(chrome://global/skin/media/fullscreenButton.svg#fullscreen);
162 .fullscreenButton:hover {
163 background-image: url(chrome://global/skin/media/fullscreenButton.svg#fullscreen-hover);
165 .fullscreenButton:hover:active {
166 background-image: url(chrome://global/skin/media/fullscreenButton.svg#fullscreen-active);
168 .fullscreenButton[fullscreened] {
169 background-image: url(chrome://global/skin/media/fullscreenButton.svg#unfullscreen);
171 .fullscreenButton[fullscreened]:hover {
172 background-image: url(chrome://global/skin/media/fullscreenButton.svg#unfullscreen-hover);
174 .fullscreenButton[fullscreened]:hover:active {
175 background-image: url(chrome://global/skin/media/fullscreenButton.svg#unfullscreen-active);
182 .volumeControl::-moz-range-thumb,
183 .scrubber::-moz-range-thumb {
188 background-color: #ffffff;
189 filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.65));
192 .volumeControl::-moz-focus-outer,
193 .scrubber::-moz-focus-outer {
197 .progressBackgroundBar {
199 flex-direction: column;
200 justify-content: center;
239 border-radius: 2.5px;
242 background-color: transparent;
247 background-color: rgba(0,0,0,0.7);
250 .bufferBar::-moz-progress-bar,
251 .progressBar::-moz-progress-bar,
252 .volumeBackground::-moz-meter-bar {
257 border-radius: 2.5px;
261 .scrubber:hover::-moz-range-thumb,
262 .volumeControl:hover::-moz-range-thumb {
263 background-color: #48a0f7;
266 .scrubber:active::-moz-range-thumb,
267 .volumeControl:active::-moz-range-thumb {
268 background-color: #2d89e6;
271 .scrubber::-moz-range-track,
272 .scrubber::-moz-range-progress {
273 background-color: transparent;
276 .volumeControl::-moz-range-progress,
277 .volumeControl::-moz-range-track {
279 border-radius: 2.5px;
282 .volumeControl::-moz-range-progress {
283 background-color: #ffffff;
286 .volumeControl::-moz-range-track {
287 background-color: rgba(0,0,0,0.7);
291 .bufferBar::-moz-progress-bar {
292 background-color: rgba(255,255,255,0.3);
293 border-radius: 2.5px;
296 .progressBar::-moz-progress-bar {
297 background-color: #00b6f0;
305 border: 1px solid #000000;
306 border-radius: 2.5px;
308 vertical-align: middle;
310 background-color: #000000;
314 .textTrackList > .textTrackItem {
324 text-overflow: ellipsis;
326 background-color: transparent;
329 .textTrackList > .textTrackItem:hover {
330 background-color: #444444;
333 .textTrackList > .textTrackItem[on] {
342 .positionDurationBox {
344 padding-inline-start: 1px;
345 padding-inline-end: 9px;
349 font-size-adjust: 0.55;
354 display: inline-block;
365 .statusIcon[type="throbber"] {
366 background: url(chrome://global/skin/media/throbber.png) no-repeat center;
369 .statusIcon[type="throbber"][stalled] {
370 background: url(chrome://global/skin/media/stalled.png) no-repeat center;
373 .statusIcon[type="error"] {
376 background: url(chrome://global/skin/media/error.png) no-repeat center;
377 background-size: contain;
380 /* Overlay Play button */
385 background-image: url(chrome://global/skin/media/playButton.svg#play);
386 background-repeat: no-repeat;
387 background-position: 54% 50%;
388 background-size: 40% 40%;
389 background-color: #1a1a1a;
395 .controlsSpacerStack:hover > .clickToPlay,
400 .controlsSpacerStack:hover > .clickToPlay[fadeout] {
404 .controlBar[fullscreen-unavailable] .fullscreenButton {
408 /* CSS Transitions */
410 transition-property: transform, opacity;
411 transition-duration: 400ms, 400ms;
414 .controlsSpacer[fadeout] {
418 .clickToPlay[fadeout] {
423 .clickToPlay[fadeout][immediate] {
424 transition-property: opacity, background-size;
425 transition-duration: 0s, 0s;
427 .controlBar:not([immediate]) {
428 transition-property: opacity;
429 transition-duration: 200ms;
431 .controlBar[fadeout] {
434 .volumeStack:not([immediate]) {
435 transition-property: opacity, margin-top;
436 transition-duration: 200ms, 200ms;
438 .statusOverlay:not([immediate]) {
439 transition-property: opacity;
440 transition-duration: 300ms;
441 transition-delay: 750ms;
443 .statusOverlay[fadeout] {
447 /* Error description formatting */
460 [error="errorAborted"] > [anonid="errorAborted"],
461 [error="errorNetwork"] > [anonid="errorNetwork"],
462 [error="errorDecode"] > [anonid="errorDecode"],
463 [error="errorSrcNotSupported"] > [anonid="errorSrcNotSupported"],
464 [error="errorNoSource"] > [anonid="errorNoSource"],
465 [error="errorGeneric"] > [anonid="errorGeneric"] {