X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fglobal%2Fmedia%2Fvideocontrols.css;fp=LCARStrek%2Fglobal%2Fmedia%2Fvideocontrols.css;h=d9acf3614a16c6c782f4a9708e8a410ca8b03783;hp=97bd736ecc153daa8991e3955c9b619cf76e345d;hb=a6c8d0f5eca89404094b51eee861f983d2a2a483;hpb=232d98026054828eac7dd8870ac4bea06a3c7bf6 diff --git a/LCARStrek/global/media/videocontrols.css b/LCARStrek/global/media/videocontrols.css index 97bd736e..d9acf361 100644 --- a/LCARStrek/global/media/videocontrols.css +++ b/LCARStrek/global/media/videocontrols.css @@ -6,54 +6,68 @@ background-color: rgba(156,156,255,0.75); } -.playButton, .muteButton { - /* Remove the usual button appearance and styling */ +.playButton, +.muteButton, +.fullscreenButton { + background-color: transparent; + background-repeat: no-repeat; + background-position: center; margin: 0px; padding: 0px; border: none; min-height: 28px; - background-color: transparent; - background-repeat: no-repeat; - background-position: center center; -} -.playButton { min-width: 28px; - margin-right: -22px; /* 1/2 of scrubber thumb width, for overhang. */ - position: relative; /* Trick to work around negative margin interfering with clicking on the button. */ } -.muteButton { - min-width: 33px; -} -.playButton:hover, .muteButton:hover { + +.playButton:hover, +.muteButton:hover, +.fullscreenButton:hover { background-color: rgba(255,207,0,0.75); } + +.playButton:hover:active, +.muteButton:hover:active, +.fullscreenButton:hover:active { + background-color: rgba(255,159,0,0.75); +} + .playButton:-moz-focusring > .button-box, -.muteButton:-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. */ + position: relative; /* Trick to work around negative margin interfering with clicking on the button. */ } + .playButton:hover { background-image: url("chrome://global/skin/media/pauseButton-hover.png"); } + .playButton[paused] { background-image: url("chrome://global/skin/media/playButton.png"); } + .playButton[paused]:hover { background-image: url("chrome://global/skin/media/playButton-hover.png"); } .muteButton { background-image: url("chrome://global/skin/media/muteButton.png"); + min-width: 33px; } + .muteButton:hover { background-image: url("chrome://global/skin/media/muteButton-hover.png"); } + .muteButton[muted] { background-image: url("chrome://global/skin/media/unmuteButton.png"); } + .muteButton[muted]:hover { background-image: url("chrome://global/skin/media/unmuteButton-hover.png"); } @@ -63,16 +77,10 @@ } .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; + background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 16, 16, 0); } .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); } @@ -81,7 +89,6 @@ } .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); } @@ -202,7 +209,7 @@ } .timeThumb[showhours="true"] { - background: url("chrome://global/skin/media/scrubberThumbWide.png") no-repeat center; + background-image: url("chrome://global/skin/media/scrubberThumbWide.png"); } /*