background-image: url("chrome://global/skin/media/unmuteButton-hover.png");
}
+.muteButton[noAudio] {
+ background-image: url("chrome://global/skin/media/noAudio.png");
+}
+
.fullscreenButton {
- background-color: transparent;
- list-style-image: url("chrome://global/skin/media/fullscreenButton.png");
- -moz-image-region: rect(0px, 16px, 16px, 0px);
- -moz-appearance: none;
+ 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;
.fullscreenButton:hover {
background-color: rgba(255,207,0,0.75);
- -moz-image-region: rect(16px, 16px, 32px, 0px);
+ background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 16, 16, 32, 0);
}
.fullscreenButton[fullscreened] {
- -moz-image-region: rect(0px, 32px, 16px, 16px);
+ 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);
- -moz-image-region: rect(16px, 32px, 32px, 16px);
+ background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 16, 32, 32, 16);
}
.volumeStack {
/* 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: 4px 4px;
+ border-radius: 2.5px;
}
.durationBox {
/* margin left/right: 1/2 of scrubber thumb width, for overhang. */
margin: 10px 22px;
background-color: rgba(0,0,0,0.75);
- border-radius: 4px 4px;
+ border-radius: 2.5px;
}
.bufferBar, .progressBar {
* compositing gives it a different visual appearance.
*/
background-color: rgba(255,159,0,0.75);
- border-radius: 4px 4px;
+ border-radius: 2.5px;
-moz-appearance: none;
}
.progressBar .progress-bar {
background-color: #008484;
- border-radius: 4px 0px 0px 4px;
+ border-radius: 2.5px;
-moz-appearance: none;
}
font-size: 10px;
font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
text-shadow: rgba(255,259,0, 0.3) 0 1px;
- padding-top: 2px;
+ padding-top: 5px;
}
.statusOverlay {
/* CSS Transitions */
.clickToPlay {
- -moz-transition-property: opacity, background-size;
- -moz-transition-duration: 400ms, 400ms;
+ transition-property: opacity, background-size;
+ transition-duration: 400ms, 400ms;
}
.clickToPlay[fadeout] {
background-size: auto, 192px 192px;
opacity: 0;
}
.clickToPlay[fadeout][immediate] {
- -moz-transition-property: opacity, background-size;
- -moz-transition-duration: 0s, 0s;
+ transition-property: opacity, background-size;
+ transition-duration: 0s, 0s;
}
.controlBar:not([immediate]) {
- -moz-transition-property: opacity;
- -moz-transition-duration: 200ms;
+ transition-property: opacity;
+ transition-duration: 200ms;
}
.controlBar[fadeout] {
opacity: 0;
}
.volumeStack:not([immediate]) {
- -moz-transition-property: opacity, margin-top;
- -moz-transition-duration: 200ms, 200ms;
+ transition-property: opacity, margin-top;
+ 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;
+ transition-property: opacity;
+ transition-duration: 300ms;
+ transition-delay: 750ms;
}
.statusOverlay[fadeout] {
opacity: 0;