background-color: rgba(102,102,153,0.75);
}
-.playButton, .muteButton {
- /* Remove the usual button appearance and styling */
+.playButton,
+.muteButton,
+.fullscreenButton {
+ background-color: transparent;
+ background-repeat: no-repeat;
+ background-position: center;
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");
+ 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. */
}
+
.playButton[paused] {
background-image: url("chrome://global/skin/media/playButton.png");
}
.muteButton {
background-image: url("chrome://global/skin/media/muteButton.png");
+ min-width: 33px;
}
+
.muteButton[muted] {
background-image: url("chrome://global/skin/media/unmuteButton.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;
+ background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 16, 16, 0);
}
.fullscreenButton[fullscreened] {
-moz-appearance: none;
background: url("chrome://global/skin/media/volumeThumb.png") no-repeat center;
border: none !important;
- min-width: 16px;
- min-height: 11px;
+ min-width: 20px;
+ min-height: 10px;
}
.volumeBackgroundBar {
}
.timeThumb[showhours="true"] {
- background: url("chrome://global/skin/media/scrubberThumbWide.png") no-repeat center;
+ background-image: url("chrome://global/skin/media/scrubberThumbWide.png");
}
/*
/* 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;