@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); .controlBar { height: 28px; background-color: rgba(102,102,153,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 { background-image: url("chrome://global/skin/media/pauseButton.png"); } .playButton[paused="true"] { background-image: url("chrome://global/skin/media/playButton.png"); } .muteButton { background-image: url("chrome://global/skin/media/muteButton.png"); } .muteButton[muted="true"] { background-image: url("chrome://global/skin/media/unmuteButton.png"); } .volumeStack { width: 28px; height: 70px; background-color: rgba(102,102,153,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; } .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: 16px; min-height: 11px; } .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); } .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(204,208,221,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); } .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(204,208,221,0.75); -moz-appearance: none; } .progressBar .progress-bar { background-color: #336699; -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(102,102,153, 0.3) 0 1px; padding-top: 2px; } .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: 32px; height: 32px; } .statusIcon[type="throbber"] { background: url("chrome://communicator/skin/brand/throbber-anim.gif") no-repeat center; } .statusIcon[type="error"] { background: url("chrome://global/skin/icons/alert-error.gif") no-repeat center; } /* CSS Transitions */ .controlBar:not([immediate]) { -moz-transition-property: opacity; -moz-transition-duration: 200ms; } .controlBar[fadeout] { opacity: 0; } .volumeStack:not([immediate]) { -moz-transition-property: opacity, margin-top; -moz-transition-duration: 200ms, 200ms; } .volumeStack[fadeout] { opacity: 0; margin-top: 0; } .statusOverlay:not([immediate]) { -moz-transition-property: opacity; -moz-transition-duration: 300ms; -moz-transition-delay: 750ms; } .statusOverlay[fadeout] { opacity: 0; }