X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fglobal%2Fmedia%2Fvideocontrols.css;h=912093a162123b65a11d8b760ab8ee0cf81a5257;hp=54e3a9349d057e7e9c0ae1ed889acf168c13cacd;hb=46dc2718163b4e6ffb52ef8f46bef4c8db7ed804;hpb=1e29db46dc44bb298673e0574cef312051e15a94 diff --git a/LCARStrek/global/media/videocontrols.css b/LCARStrek/global/media/videocontrols.css index 54e3a934..912093a1 100644 --- a/LCARStrek/global/media/videocontrols.css +++ b/LCARStrek/global/media/videocontrols.css @@ -38,10 +38,10 @@ .playButton:hover { background-image: url("chrome://global/skin/media/pauseButton-hover.png"); } -.playButton[paused="true"] { +.playButton[paused] { background-image: url("chrome://global/skin/media/playButton.png"); } -.playButton[paused="true"]:hover { +.playButton[paused]:hover { background-image: url("chrome://global/skin/media/playButton-hover.png"); } @@ -51,13 +51,40 @@ .muteButton:hover { background-image: url("chrome://global/skin/media/muteButton-hover.png"); } -.muteButton[muted="true"] { +.muteButton[muted] { background-image: url("chrome://global/skin/media/unmuteButton.png"); } -.muteButton[muted="true"]:hover { +.muteButton[muted]:hover { background-image: url("chrome://global/skin/media/unmuteButton-hover.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:hover { + background-color: rgba(255,207,0,0.75); + background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 16, 16, 32, 0); +} + +.fullscreenButton[fullscreened] { + 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); + background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 16, 32, 32, 16); +} + .volumeStack { width: 28px; height: 70px; @@ -91,7 +118,7 @@ /* 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 { @@ -116,7 +143,7 @@ /* 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 { @@ -137,13 +164,13 @@ * 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; } @@ -189,7 +216,7 @@ 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 { @@ -216,6 +243,24 @@ 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; @@ -242,6 +287,18 @@ html|table { } /* 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; @@ -265,3 +322,17 @@ html|table { .statusOverlay[fadeout] { opacity: 0; } + +/* Error description formatting */ +.errorLabel { + font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; + font-size: 11px; + color: #E7ADE7; + text-shadow: + -1px -1px 0 #000, + 1px -1px 0 #000, + -1px 1px 0 #000, + 1px 1px 0 #000; + padding: 0 10px; + text-align: center; +}