X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fglobal%2Fmedia%2Fvideocontrols.css;h=3220dcafd06f6de45a3bb0ca1c29687051d018a9;hp=783e0c2b0db2e1d18135908d8cd61466cb5dab78;hb=044b5d491a673c74d770c3f43276c2b85380a485;hpb=4b1ccdb4c3b21dd1933b2e9e97a90f883dd833ef diff --git a/LCARStrek/global/media/videocontrols.css b/LCARStrek/global/media/videocontrols.css index 783e0c2b..3220dcaf 100644 --- a/LCARStrek/global/media/videocontrols.css +++ b/LCARStrek/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; @@ -37,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"); } @@ -50,13 +51,39 @@ .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"); } +.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; + margin: 0; + padding: 0; + min-height: 28px; + min-width: 28px; + border: none; +} + +.fullscreenButton:hover { + background-color: rgba(255,207,0,0.75); + -moz-image-region: rect(16px, 16px, 32px, 0px); +} + +.fullscreenButton[fullscreened] { + -moz-image-region: rect(0px, 32px, 16px, 16px); +} + +.fullscreenButton[fullscreened]:hover { + background-color: rgba(255,207,0,0.75); + -moz-image-region: rect(16px, 32px, 32px, 16px); +} + .volumeStack { width: 28px; height: 70px; @@ -66,6 +93,7 @@ overflow: hidden; /* crop it when sliding down, don't grow the control bar */ position: relative; /* Trick to work around negative margin interfering with dragging the thumb. */ padding-top: 6px; + border-radius: 3px 3px 0 0; } .volumeControl { @@ -92,7 +120,6 @@ border-radius: 4px 4px; } - .durationBox { -moz-box-pack: center; } @@ -106,6 +133,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. */ @@ -202,12 +233,71 @@ .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,111,.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; @@ -231,3 +321,17 @@ .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; +}