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 url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
6 @namespace html url("http://www.w3.org/1999/xhtml");
10 background-color: rgba(156,156,255,0.75);
17 background-color: transparent;
18 background-repeat: no-repeat;
19 background-position: center;
29 .closedCaptionButton:hover,
30 .fullscreenButton:hover {
31 background-color: rgba(255,207,0,0.75);
34 .playButton:hover:active,
35 .muteButton:hover:active,
36 .closedCaptionButton:hover:active,
37 .fullscreenButton:hover:active {
38 background-color: rgba(255,159,0,0.75);
42 background-image: url("chrome://global/skin/media/pauseButton.png");
43 margin-right: -22px; /* 1/2 of scrubber thumb width, for overhang. */
44 position: relative; /* Trick to work around negative margin interfering with clicking on the button. */
48 background-image: url("chrome://global/skin/media/pauseButton-hover.png");
52 background-image: url("chrome://global/skin/media/playButton.png");
55 .playButton[paused]:hover {
56 background-image: url("chrome://global/skin/media/playButton-hover.png");
60 background-image: url("chrome://global/skin/media/muteButton.png");
65 background-image: url("chrome://global/skin/media/muteButton-hover.png");
69 background-image: url("chrome://global/skin/media/unmuteButton.png");
72 .muteButton[muted]:hover {
73 background-image: url("chrome://global/skin/media/unmuteButton-hover.png");
76 .muteButton[noAudio] {
77 background-image: url("chrome://global/skin/media/noAudio.png");
80 .muteButton[noAudio] + .volumeStack {
84 .closedCaptionButton {
85 background-image: url("chrome://global/skin/media/closeCaptionButton.png");
86 background-position: 4px;
89 .closedCaptionButton[enabled] {
93 .closedCaptionButton[hidden] {
98 background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 16, 16, 0);
101 .fullscreenButton:hover {
102 background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 16, 16, 32, 0);
105 .fullscreenButton[fullscreened] {
106 background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 32, 16, 16);
109 .fullscreenButton[fullscreened]:hover {
110 background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 16, 32, 32, 16);
120 background-repeat: no-repeat;
121 background-position: center;
126 background-image: url("chrome://global/skin/media/volume-empty.png");
130 background-image: url("chrome://global/skin/media/volume-full.png");
131 background-clip: content-box;
136 -moz-appearance: none;
142 .textTrackList[hidden] {
146 .textTrackList > html|*.textTrackItem {
147 -moz-appearance: none;
148 -moz-box-align: start;
153 -moz-margin-end: 10px;
155 color: rgba(255,255,255,.5);
156 background-color: rgba(35,31,32,.74);
160 .textTrackList > html|*.textTrackItem[on] {
162 background-color: black;
165 .textTrackList > html|*.textTrackItem:hover {
166 background-color: rgba(0,0,0,.55);
169 .controlBar[fullscreen-unavailable] {
170 /* This value is duplicated in the videocontrols.xml adjustControlSize function. */
171 padding-inline-end: 8px;
174 .volumeControl .scale-thumb {
180 -moz-box-pack: center;
184 margin-left: -22px; /* 1/2 of scrubber thumb width, for overhang. */
185 padding-left: 8px; /* don't bump into the scrubber bar */
186 padding-top: 0px; /* center vertically with scrubber bar */
187 color: rgba(0,0,0,0.75);
188 font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
197 /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */
198 /* margin left/right: 1/2 of scrubber thumb width, for overhang. */
200 background-color: rgba(0,0,0,0.75);
201 border-radius: 2.5px;
206 /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */
207 /* margin left/right: 1/2 of scrubber thumb width, for overhang. */
210 background-color: transparent;
215 /* .progress-bar is an element inside the <progressmeter> implementation. */
216 .bufferBar .progress-bar {
218 * Note that this is drawn on top of the .backgroundBar. So although this
219 * has the same background-color specified, the semitransparent
220 * compositing gives it a different visual appearance.
222 background-color: rgba(255,159,0,0.75);
223 border-radius: 2.5px;
224 -moz-appearance: none;
227 .progressBar .progress-bar {
228 background-color: #008484;
229 border-radius: 2.5px;
230 -moz-appearance: none;
233 /* .scale-slider is an element inside the <scale> implementation. */
234 .scrubber .scale-slider,
235 .volumeControl .scale-slider {
236 /* Hide the default horizontal bar. */
241 .scrubber .scale-slider {
242 /* abs(margin-top) + margin-bottom + bar height == timeThumb height */
247 /* .scale-thumb is an element inside the <scale> implementation. */
248 .scrubber .scale-thumb,
249 .volumeControl .scale-thumb {
250 /* Override the default thumb appearance with a custom image. */
251 background: transparent;
252 border: none !important;
256 background: url("chrome://global/skin/media/scrubberThumb.png") no-repeat center;
259 -moz-box-pack: center;
262 .timeThumb[showhours="true"] {
263 background-image: url("chrome://global/skin/media/scrubberThumbWide.png");
267 .timeThumb:hover, .timeThumb:active {
268 background-image: url("chrome://global/skin/media/scrubberThumb-hover.png");
273 color: rgba(0,0,0,0.75);
275 font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
276 text-shadow: rgba(255,259,0, 0.3) 0 1px;
281 -moz-box-align: center;
282 -moz-box-pack: center;
283 background-color: rgba(0,0,0,0.55);
287 margin-bottom: 28px; /* same height as .controlBar, to keep icon centered above it */
292 .statusIcon[type="throbber"] {
293 background: url("chrome://communicator/skin/brand/throbber-anim.png") no-repeat center;
296 .statusIcon[type="throbber"][stalled] {
297 background: url("chrome://global/skin/media/stalled.png") no-repeat center;
300 .statusIcon[type="error"] {
301 background: url("chrome://global/skin/icons/alert-error.gif") no-repeat center;
304 /* Overlay Play button */
308 -moz-box-pack: center;
309 -moz-box-align: center;
311 background-image: url("chrome://global/skin/media/videoClickToPlayButton.svg");
312 background-repeat: no-repeat;
313 background-position: center;
314 background-size: 64px 64px;
315 background-color: hsla(0,0%,10%,.5);
321 /* Statistics formatting */
331 font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
340 background: rgba(68,68,111,.7);
342 border-collapse: collapse;
346 /* CSS Transitions */
348 transition-property: opacity, background-size;
349 transition-duration: 400ms, 400ms;
351 .clickToPlay[fadeout] {
352 background-size: auto, 192px 192px;
355 .clickToPlay[fadeout][immediate] {
356 transition-property: opacity, background-size;
357 transition-duration: 0s, 0s;
359 .controlBar:not([immediate]) {
360 transition-property: opacity;
361 transition-duration: 200ms;
363 .controlBar[fadeout] {
366 .volumeStack:not([immediate]) {
367 transition-property: opacity, margin-top;
368 transition-duration: 200ms, 200ms;
370 .volumeStack[fadeout] {
374 .statusOverlay:not([immediate]) {
375 transition-property: opacity;
376 transition-duration: 300ms;
377 transition-delay: 750ms;
379 .statusOverlay[fadeout] {
383 /* Error description formatting */
385 font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
397 @media (min-resolution: 2dppx) {
400 background-image: url(chrome://global/skin/media/pauseButton@2x.png);
401 background-size: 28px 28px;
403 .playButton[paused] {
404 background-image: url(chrome://global/skin/media/playButton@2x.png);
405 background-size: 28px 28px;
408 background-image: url(chrome://global/skin/media/volume-empty@2x.png);
409 background-size: 32px 16px;
412 background-image: url(chrome://global/skin/media/volume-full@2x.png);
413 background-size: 32px 16px;
416 background-image: url(chrome://global/skin/media/muteButton@2x.png);
417 background-size: 33px 28px;
420 background-image: url(chrome://global/skin/media/unmuteButton@2x.png);
421 background-size: 33px 28px;
423 .muteButton[noAudio] {
424 background-image: url(chrome://global/skin/media/noAudio@2x.png);
425 background-size: 33px 28px;
428 .closedCaptionButton {
429 background-image: url(chrome://global/skin/media/closeCaptionButton@2x.png);
430 background-position: 4px;
431 background-size: 28px 28px;
435 background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton@2x.png"), 0, 32, 32, 0);
436 background-size: 16px 16px;
438 .fullscreenButton[fullscreened] {
439 background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton@2x.png"), 0, 64, 32, 32);
440 background-size: 16px 16px;
443 background-image: url(chrome://global/skin/media/scrubberThumb@2x.png);
444 background-size: 33px 28px;
446 .timeThumb[showhours="true"] {
447 background-image: url(chrome://global/skin/media/scrubberThumbWide@2x.png);
448 background-size: 45px 28px;