/* 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;
}
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;
}
/* CSS Transitions */
+.clickToPlay {
+ -moz-transition-property: opacity, background-size;
+ -moz-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;
+}
.controlBar:not([immediate]) {
-moz-transition-property: opacity;
-moz-transition-duration: 200ms;