X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fglobal%2Fmedia%2Fvideocontrols.css;h=9335d9d8f8489f63b5d5edd3e2c814929988c63e;hp=f8d4cfd8481297e554b1f6c3f133658d62e356e6;hb=dae4507500ac2bc6547a8303851bc9b0bcae5ddf;hpb=781d1b79486cf2b5ee940009b7c15a546108c48f diff --git a/LCARStrek/global/media/videocontrols.css b/LCARStrek/global/media/videocontrols.css index f8d4cfd8..9335d9d8 100644 --- a/LCARStrek/global/media/videocontrols.css +++ b/LCARStrek/global/media/videocontrols.css @@ -1,3 +1,7 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); @namespace html url("http://www.w3.org/1999/xhtml"); @@ -8,35 +12,32 @@ .playButton, .muteButton, +.closedCaptionButton, .fullscreenButton { background-color: transparent; background-repeat: no-repeat; background-position: center; - margin: 0px; - padding: 0px; - border: none; + margin: 0; + padding: 0; min-height: 28px; min-width: 28px; + border: none; } .playButton:hover, .muteButton:hover, +.closedCaptionButton:hover, .fullscreenButton:hover { background-color: rgba(255,207,0,0.75); } .playButton:hover:active, .muteButton:hover:active, +.closedCaptionButton:hover:active, .fullscreenButton:hover:active { background-color: rgba(255,159,0,0.75); } -.playButton:-moz-focusring > .button-box, -.muteButton:-moz-focusring > .button-box, -.fullscreenButton:-moz-focusring > .button-box { - border: 1px dotted rgba(0,0,0,0.75); -} - .playButton { background-image: url("chrome://global/skin/media/pauseButton.png"); margin-right: -22px; /* 1/2 of scrubber thumb width, for overhang. */ @@ -80,6 +81,19 @@ display: none; } +.closedCaptionButton { + background-image: url("chrome://global/skin/media/closeCaptionButton.png"); + background-position: 4px; +} + +.closedCaptionButton[enabled] { + opacity: 1; +} + +.closedCaptionButton[hidden] { + display: none; +} + .fullscreenButton { background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 16, 16, 0); } @@ -117,9 +131,44 @@ background-clip: content-box; } -.controlBar[fullscreen-unavailable] > .volumeStack { +.textTrackList { + display: -moz-box; + -moz-appearance: none; + -moz-box-pack: end; + -moz-box-align: end; + padding: 0; +} + +.textTrackList[hidden] { + display: none; +} + +.textTrackList > html|*.textTrackItem { + -moz-appearance: none; + -moz-box-align: start; + text-align: start; + overflow: hidden; + margin: 0; + padding: 2px 10px; + -moz-margin-end: 10px; + border: none; + color: rgba(255,255,255,.5); + background-color: rgba(35,31,32,.74); + white-space: nowrap; +} + +.textTrackList > html|*.textTrackItem[on] { + color: white; + background-color: black; +} + +.textTrackList > html|*.textTrackItem:hover { + background-color: rgba(0,0,0,.55); +} + +.controlBar[fullscreen-unavailable] { /* This value is duplicated in the videocontrols.xml adjustControlSize function. */ - -moz-margin-end: 8px; + padding-inline-end: 8px; } .volumeControl .scale-thumb { @@ -136,8 +185,8 @@ padding-left: 8px; /* don't bump into the scrubber bar */ padding-top: 0px; /* center vertically with scrubber bar */ color: rgba(0,0,0,0.75); - font-size: 11px; font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; + font-size: 11px; } .positionLabel { @@ -152,14 +201,15 @@ border-radius: 2.5px; } -.bufferBar, .progressBar { +.bufferBar, +.progressBar { /* 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. */ margin: 10px 22px; border: none; background-color: transparent; - min-width: 0px; - min-height: 0px; + min-width: 0; + min-height: 0; } /* .progress-bar is an element inside the implementation. */ @@ -181,7 +231,8 @@ } /* .scale-slider is an element inside the implementation. */ -.scrubber .scale-slider, .volumeControl .scale-slider { +.scrubber .scale-slider, +.volumeControl .scale-slider { /* Hide the default horizontal bar. */ background: none; margin: 0; @@ -257,11 +308,10 @@ -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-image: url("chrome://global/skin/media/videoClickToPlayButton.svg"); + background-repeat: no-repeat; + background-position: center; + background-size: 64px 64px; background-color: hsla(0,0%,10%,.5); } .clickToPlay:hover { @@ -343,3 +393,59 @@ html|table { padding: 0 10px; text-align: center; } + +@media (min-resolution: 2dppx) { +/* + .playButton { + background-image: url(chrome://global/skin/media/pauseButton@2x.png); + background-size: 28px 28px; + } + .playButton[paused] { + background-image: url(chrome://global/skin/media/playButton@2x.png); + background-size: 28px 28px; + } + .volumeBackground { + background-image: url(chrome://global/skin/media/volume-empty@2x.png); + background-size: 32px 16px; + } + .volumeForeground { + background-image: url(chrome://global/skin/media/volume-full@2x.png); + background-size: 32px 16px; + } + .muteButton { + background-image: url(chrome://global/skin/media/muteButton@2x.png); + background-size: 33px 28px; + } + .muteButton[muted] { + background-image: url(chrome://global/skin/media/unmuteButton@2x.png); + background-size: 33px 28px; + } + .muteButton[noAudio] { + background-image: url(chrome://global/skin/media/noAudio@2x.png); + background-size: 33px 28px; + } +*/ + .closedCaptionButton { + background-image: url(chrome://global/skin/media/closeCaptionButton@2x.png); + background-position: 4px; + background-size: 28px 28px; + } +/* + .fullscreenButton { + background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton@2x.png"), 0, 32, 32, 0); + background-size: 16px 16px; + } + .fullscreenButton[fullscreened] { + background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton@2x.png"), 0, 64, 32, 32); + background-size: 16px 16px; + } + .timeThumb { + background-image: url(chrome://global/skin/media/scrubberThumb@2x.png); + background-size: 33px 28px; + } + .timeThumb[showhours="true"] { + background-image: url(chrome://global/skin/media/scrubberThumbWide@2x.png); + background-size: 45px 28px; + } +*/ +}