X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=EarlyBlue%2Fglobal%2Fmedia%2Fvideocontrols.css;h=732f3febe1825e5b8638f58e28c38214cc9b92f9;hp=f820d42117632aac4291f81614ac2c2253ec25da;hb=46dc2718163b4e6ffb52ef8f46bef4c8db7ed804;hpb=3327253ed3b6be3c4cc98847e444c55f9a268d45 diff --git a/EarlyBlue/global/media/videocontrols.css b/EarlyBlue/global/media/videocontrols.css index f820d421..732f3feb 100644 --- a/EarlyBlue/global/media/videocontrols.css +++ b/EarlyBlue/global/media/videocontrols.css @@ -1,4 +1,5 @@ @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +@namespace html url("http://www.w3.org/1999/xhtml"); .controlBar { height: 28px; @@ -27,17 +28,34 @@ .playButton { background-image: url("chrome://global/skin/media/pauseButton.png"); } -.playButton[paused="true"] { +.playButton[paused] { background-image: url("chrome://global/skin/media/playButton.png"); } .muteButton { background-image: url("chrome://global/skin/media/muteButton.png"); } -.muteButton[muted="true"] { +.muteButton[muted] { background-image: url("chrome://global/skin/media/unmuteButton.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[fullscreened] { + background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 32, 16, 16); +} + .volumeStack { width: 28px; height: 70px; @@ -69,7 +87,6 @@ background-color: rgba(0,0,0,0.5); } - .durationBox { -moz-box-pack: center; } @@ -83,6 +100,10 @@ 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. */ @@ -158,7 +179,7 @@ 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; + padding-top: 5px; } .statusOverlay { @@ -176,7 +197,105 @@ .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,68,.7); + table-layout: fixed; + border-collapse: collapse; + position: absolute; +} + +/* 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; +} +.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; +} + +/* Error description formatting */ +.errorLabel { + font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; + font-size: 11px; + color: #CCD0DD; + text-shadow: + -1px -1px 0 #000, + 1px -1px 0 #000, + -1px 1px 0 #000, + 1px 1px 0 #000; + padding: 0 10px; + text-align: center; +}