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 .positionDurationBox {
355 font-size-adjust: unset;
356 font-family: "Helvetica Neue", "Helvetica", sans-serif;
361 display: inline-block;
372 .statusIcon[type="throbber"] {
373 background: url(chrome://global/skin/media/throbber.png) no-repeat center;
376 .statusIcon[type="throbber"][stalled] {
377 background: url(chrome://global/skin/media/stalled.png) no-repeat center;
380 .statusIcon[type="error"] {
383 background: url(chrome://global/skin/media/error.png) no-repeat center;
384 background-size: contain;
387 /* Overlay Play button */
392 background-image: url(chrome://global/skin/media/playButton.svg#play);
393 background-repeat: no-repeat;
394 background-position: 54% 50%;
395 background-size: 40% 40%;
396 background-color: #1a1a1a;
402 .controlsSpacerStack:hover > .clickToPlay,
407 .controlsSpacerStack:hover > .clickToPlay[fadeout] {
411 .controlBar[fullscreen-unavailable] .fullscreenButton {
415 /* CSS Transitions */
417 transition-property: transform, opacity;
418 transition-duration: 400ms, 400ms;
421 .controlsSpacer[fadeout] {
425 .clickToPlay[fadeout] {
430 .clickToPlay[fadeout][immediate] {
431 transition-property: opacity, background-size;
432 transition-duration: 0s, 0s;
434 .controlBar:not([immediate]) {
435 transition-property: opacity;
436 transition-duration: 200ms;
438 .controlBar[fadeout] {
441 .volumeStack:not([immediate]) {
442 transition-property: opacity, margin-top;
443 transition-duration: 200ms, 200ms;
445 .statusOverlay:not([immediate]) {
446 transition-property: opacity;
447 transition-duration: 300ms;
448 transition-delay: 750ms;
450 .statusOverlay[fadeout] {
454 /* Error description formatting */
467 [error="errorAborted"] > [anonid="errorAborted"],
468 [error="errorNetwork"] > [anonid="errorNetwork"],
469 [error="errorDecode"] > [anonid="errorDecode"],
470 [error="errorSrcNotSupported"] > [anonid="errorSrcNotSupported"],
471 [error="errorNoSource"] > [anonid="errorNoSource"],
472 [error="errorGeneric"] > [anonid="errorGeneric"] {
476 /* For high contrast theme in Windows */
480 background-color: transparent;
483 @media (-moz-windows-default-theme) {
485 background-color: rgba(255,255,255,.4);
489 background-color: #1a1a1a;