@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); @namespace html url("http://www.w3.org/1999/xhtml"); .controlBar { height: 28px; background-color: rgba(156,156,255,0.75); } .playButton, .muteButton { /* Remove the usual button appearance and styling */ margin: 0px; padding: 0px; border: none; min-height: 28px; background-color: transparent; background-repeat: no-repeat; background-position: center center; } .playButton { min-width: 28px; margin-right: -22px; /* 1/2 of scrubber thumb width, for overhang. */ position: relative; /* Trick to work around negative margin interfering with clicking on the button. */ } .muteButton { min-width: 33px; } .playButton:hover, .muteButton:hover { background-color: rgba(255,207,0,0.75); } .playButton:-moz-focusring > .button-box, .muteButton:-moz-focusring > .button-box { border: 1px dotted rgba(0,0,0,0.75); } .playButton { background-image: url("chrome://global/skin/media/pauseButton.png"); } .playButton:hover { background-image: url("chrome://global/skin/media/pauseButton-hover.png"); } .playButton[paused] { background-image: url("chrome://global/skin/media/playButton.png"); } .playButton[paused]:hover { background-image: url("chrome://global/skin/media/playButton-hover.png"); } .muteButton { background-image: url("chrome://global/skin/media/muteButton.png"); } .muteButton:hover { background-image: url("chrome://global/skin/media/muteButton-hover.png"); } .muteButton[muted] { background-image: url("chrome://global/skin/media/unmuteButton.png"); } .muteButton[muted]:hover { background-image: url("chrome://global/skin/media/unmuteButton-hover.png"); } .muteButton[noAudio] { background-image: url("chrome://global/skin/media/noAudio.png"); } .fullscreenButton { background: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 16, 16, 0) no-repeat center; margin: 0; padding: 0; min-height: 28px; min-width: 28px; border: none; } .fullscreenButton:hover { background-color: rgba(255,207,0,0.75); background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 16, 16, 32, 0); } .fullscreenButton[fullscreened] { background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 32, 16, 16); } .fullscreenButton[fullscreened]:hover { background-color: rgba(255,207,0,0.75); background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 16, 32, 32, 16); } .volumeStack { width: 28px; height: 70px; background-color: rgba(156,156,255,0.74); /* use negative margin to place stack over the mute button to its left. */ margin: -70px 3px 28px -31px; overflow: hidden; /* crop it when sliding down, don't grow the control bar */ position: relative; /* Trick to work around negative margin interfering with dragging the thumb. */ padding-top: 6px; border-radius: 3px 3px 0 0; } .volumeControl { min-height: 64px; } /* .scale-thumb is an element inside the implementation. */ .volumeControl .scale-thumb { /* Override the default thumb appearance with a custom image. */ -moz-appearance: none; background: url("chrome://global/skin/media/volumeThumb.png") no-repeat center; border: none !important; min-width: 20px; min-height: 10px; } .volumeControl .scale-thumb:hover, .volumeControl .scale-thumb:active { background-image: url("chrome://global/skin/media/volumeThumb-hover.png"); } .volumeBackgroundBar { /* margin left/right: make bar 8px wide (control width = 28, minus 2 * 10 margin) */ margin: 0px 10px; background-color: rgba(0,0,0,0.5); border-radius: 2.5px; } .durationBox { -moz-box-pack: center; } .durationLabel { margin-left: -22px; /* 1/2 of scrubber thumb width, for overhang. */ padding-left: 8px; /* don't bump into the scrubber bar */ padding-top: 0px; /* center vertically with scrubber bar */ color: rgba(0,0,0,0.75); font-size: 11px; font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; } .positionLabel { display: none; } .backgroundBar { /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */ /* margin left/right: 1/2 of scrubber thumb width, for overhang. */ margin: 10px 22px; background-color: rgba(0,0,0,0.75); border-radius: 2.5px; } .bufferBar, .progressBar { /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */ /* margin left/right: 1/2 of scrubber thumb width, for overhang. */ margin: 10px 22px; border: none; background-color: transparent; min-width: 0px; min-height: 0px; } /* .progress-bar is an element inside the implementation. */ .bufferBar .progress-bar { /* * Note that this is drawn on top of the .backgroundBar. So although this * has the same background-color specified, the semitransparent * compositing gives it a different visual appearance. */ background-color: rgba(255,159,0,0.75); border-radius: 2.5px; -moz-appearance: none; } .progressBar .progress-bar { background-color: #008484; border-radius: 2.5px; -moz-appearance: none; } /* .scale-slider is an element inside the implementation. */ .scrubber .scale-slider, .volumeControl .scale-slider { /* Hide the default horizontal bar. */ background: none; margin: 0; } .scrubber .scale-slider { /* abs(margin-top) + margin-bottom + bar height == timeThumb height */ margin-top: -10px; margin-bottom: 10px; } /* .scale-thumb is an element inside the implementation. */ .scrubber .scale-thumb { /* Override the default thumb appearance with a custom image. */ background: transparent; border: none !important; } .timeThumb { background: url("chrome://global/skin/media/scrubberThumb.png") no-repeat center; min-width: 45px; min-height: 28px; -moz-box-pack: center; } .timeThumb[showhours="true"] { background: url("chrome://global/skin/media/scrubberThumbWide.png") no-repeat center; } /* .timeThumb:hover, .timeThumb:active { background-image: url("chrome://global/skin/media/scrubberThumb-hover.png"); } */ .timeLabel { color: rgba(0,0,0,0.75); font-size: 10px; font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; text-shadow: rgba(255,259,0, 0.3) 0 1px; padding-top: 5px; } .statusOverlay { -moz-box-align: center; -moz-box-pack: center; background-color: rgba(0,0,0,0.55); } .statusIcon { margin-bottom: 28px; /* same height as .controlBar, to keep icon centered above it */ width: 36px; height: 36px; } .statusIcon[type="throbber"] { background: url("chrome://communicator/skin/brand/throbber-anim.gif") no-repeat center; } /* .statusIcon[type="throbber"][stalled] { background: url("chrome://global/skin/media/stalled.png") no-repeat center; } */ .statusIcon[type="error"] { background: url("chrome://global/skin/icons/alert-error.gif") no-repeat center; } /* Overlay Play button */ .clickToPlay { width: 64px; height: 64px; -moz-box-pack: center; -moz-box-align: center; opacity: 0.7; background-image: url("chrome://global/skin/media/clicktoplay-bgtexture.png"), url("chrome://global/skin/media/videoClickToPlayButton.svg"); background-repeat: repeat, no-repeat; background-position: center, center; background-size: auto, 64px 64px; background-color: hsla(0,0%,10%,.5); } .clickToPlay:hover { opacity: 1; } /* Statistics formatting */ html|*.statsDiv { position: relative; } html|td { height: 1em; max-height: 1em; padding: 0 2px; } html|table { font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; font-size: 11px; color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; min-width: 100%; background: rgba(68,68,111,.7); table-layout: fixed; border-collapse: collapse; position: absolute; } /* CSS Transitions */ .clickToPlay { transition-property: opacity, background-size; transition-duration: 400ms, 400ms; } .clickToPlay[fadeout] { background-size: auto, 192px 192px; opacity: 0; } .clickToPlay[fadeout][immediate] { transition-property: opacity, background-size; transition-duration: 0s, 0s; } .controlBar:not([immediate]) { transition-property: opacity; transition-duration: 200ms; } .controlBar[fadeout] { opacity: 0; } .volumeStack:not([immediate]) { transition-property: opacity, margin-top; transition-duration: 200ms, 200ms; } .volumeStack[fadeout] { opacity: 0; margin-top: 0; } .statusOverlay:not([immediate]) { transition-property: opacity; transition-duration: 300ms; transition-delay: 750ms; } .statusOverlay[fadeout] { opacity: 0; } /* Error description formatting */ .errorLabel { font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; font-size: 11px; color: #E7ADE7; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; padding: 0 10px; text-align: center; }