From a6c8d0f5eca89404094b51eee861f983d2a2a483 Mon Sep 17 00:00:00 2001 From: Robert Kaiser Date: Sun, 7 Apr 2013 21:50:49 +0200 Subject: [PATCH] update both themes for toolkit winstripe changes in Mozilla 21 cycle --- EarlyBlue/global/findBar.css | 12 ++ EarlyBlue/global/global.css | 5 +- .../global/media/TopLevelImageDocument.css | 4 + EarlyBlue/global/media/videocontrols.css | 32 ++--- .../plugins/contentPluginClickToPlayPlain.png | Bin 0 -> 393 bytes EarlyBlue/mozapps/plugins/pluginProblem.css | 122 +++++++++++++++++- LCARStrek/global/findBar.css | 12 ++ LCARStrek/global/global.css | 5 +- .../global/media/TopLevelImageDocument.css | 4 + LCARStrek/global/media/videocontrols.css | 53 ++++---- LCARStrek/mozapps/plugins/pluginProblem.css | 10 +- 11 files changed, 201 insertions(+), 58 deletions(-) create mode 100644 EarlyBlue/mozapps/plugins/contentPluginClickToPlayPlain.png diff --git a/EarlyBlue/global/findBar.css b/EarlyBlue/global/findBar.css index 63764a9d..52edacef 100644 --- a/EarlyBlue/global/findBar.css +++ b/EarlyBlue/global/findBar.css @@ -8,6 +8,18 @@ findbar { border-top: 1px solid #666699; border-bottom: 1px solid transparent; min-width: 1px; + transition-property: margin-bottom, opacity, visibility; + transition-duration: 150ms, 150ms, 0s; + transition-timing-function: ease-in-out, ease-in-out, linear; +} + +findbar[hidden] { + /* Override display:none to make the transition work. */ + display: -moz-box; + visibility: collapse; + margin-bottom: -1em; + opacity: 0; + transition-delay: 0s, 0s, 150ms; } /* find-next button */ diff --git a/EarlyBlue/global/global.css b/EarlyBlue/global/global.css index 1695c405..a2314489 100644 --- a/EarlyBlue/global/global.css +++ b/EarlyBlue/global/global.css @@ -262,10 +262,13 @@ description { .text-link { color: blue; - text-decoration: underline; cursor: pointer; } +.text-link:hover { + text-decoration: underline; +} + .text-link:-moz-focusring { /* Don't specify the outline-color, we should always use initial value. */ outline: 1px dotted; diff --git a/EarlyBlue/global/media/TopLevelImageDocument.css b/EarlyBlue/global/media/TopLevelImageDocument.css index aef3a455..2ed8b007 100644 --- a/EarlyBlue/global/media/TopLevelImageDocument.css +++ b/EarlyBlue/global/media/TopLevelImageDocument.css @@ -12,4 +12,8 @@ background-color: #fff; color: #222; } + + .completeRotation { + transition: transform 0.3s ease 0s; + } } diff --git a/EarlyBlue/global/media/videocontrols.css b/EarlyBlue/global/media/videocontrols.css index 84c1145e..51276bd5 100644 --- a/EarlyBlue/global/media/videocontrols.css +++ b/EarlyBlue/global/media/videocontrols.css @@ -6,35 +6,34 @@ background-color: rgba(102,102,153,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 { 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[paused] { background-image: url("chrome://global/skin/media/playButton.png"); } .muteButton { background-image: url("chrome://global/skin/media/muteButton.png"); + min-width: 33px; } + .muteButton[muted] { background-image: url("chrome://global/skin/media/unmuteButton.png"); } @@ -44,12 +43,7 @@ } .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[fullscreened] { @@ -165,7 +159,7 @@ } .timeThumb[showhours="true"] { - background: url("chrome://global/skin/media/scrubberThumbWide.png") no-repeat center; + background-image: url("chrome://global/skin/media/scrubberThumbWide.png"); } /* diff --git a/EarlyBlue/mozapps/plugins/contentPluginClickToPlayPlain.png b/EarlyBlue/mozapps/plugins/contentPluginClickToPlayPlain.png new file mode 100644 index 0000000000000000000000000000000000000000..a02a59c35bec4284e9ae5349c9c3c473a9d52852 GIT binary patch literal 393 zcmeAS@N?(olHy`uVBq!ia0vp^2|#SX#0(@SS4@uqQak}ZA+D*q=|JY03wIkD8onPf z%mZ>5OM?7@862M7NCR<_yxm;OkH}&M25w;xW@MN(M*=9wUgGKN%6^xH zU06x|me%K%~RaUDG|$Wlq!Qk|Z|{^KFGm zA$8IIVe{tvpL|2JD?jku=Y*fl8J-D!iIzt<>`5}niZhOgZJa9bbduM>8C+|Y1R50H z)4FljZJPgg&ebxsLQ0FPghvj6}9 literal 0 HcmV?d00001 diff --git a/EarlyBlue/mozapps/plugins/pluginProblem.css b/EarlyBlue/mozapps/plugins/pluginProblem.css index cd599627..08d4838c 100644 --- a/EarlyBlue/mozapps/plugins/pluginProblem.css +++ b/EarlyBlue/mozapps/plugins/pluginProblem.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 html url(http://www.w3.org/1999/xhtml); /* These styles affect only the bound element, not other page content. */ @@ -11,6 +15,11 @@ box-shadow: inset 0 1px 5px #808080; padding: 5px; -moz-user-select: none; + position: relative; +} + +.hoverBox { + padding: 5px; } html|a { @@ -18,10 +27,13 @@ html|a { } .icon { - min-width: 48px; - min-height: 48px; + display: inline-block; + width: 48px; + height: 48px; background-position: center; background-repeat: no-repeat; + border: none; + background-color: transparent; } :-moz-type-unsupported .icon, :-moz-type-unsupported-platform .icon { @@ -30,11 +42,20 @@ html|a { :-moz-type-unsupported .icon[status="ready"] { background-image: url("chrome://mozapps/skin/plugins/contentPluginDownload.png"); } -:-moz-handler-clicktoplay .icon, :-moz-handler-vulnerable-updatable .icon, :-moz-handler-vulnerable-no-update .icon { background-image: url("chrome://mozapps/skin/plugins/contentPluginClickToPlay.png"); } + +:-moz-handler-clicktoplay .icon { + background-image: url("chrome://mozapps/skin/plugins/contentPluginClickToPlayPlain.png"); + background-position: 0 0; +} +:-moz-handler-clicktoplay .hoverBox:hover .icon, +:-moz-handler-clicktoplay .hoverBox:hover:active .icon { + background-position: -48px 0; +} + :-moz-handler-disabled .icon { background-image: url("chrome://mozapps/skin/plugins/contentPluginDisabled.png"); } @@ -52,10 +73,12 @@ html|a { } .msg { - font-size: 12px; cursor: default; + width: 100%; } +:-moz-handler-clicktoplay .mainBox, +:-moz-handler-clicktoplay .icon, :-moz-handler-clicktoplay .msgClickToPlay, :-moz-handler-vulnerable-updatable .msgClickToPlay, :-moz-handler-vulnerable-no-update .msgClickToPlay { @@ -78,9 +101,40 @@ html|a { min-height: 19px; /* height of biggest line (with throbber) */ } -.msgBottomLinks { - padding-left: 2px; - padding-right: 2px; +.submitComment { + width: 340px; + height: 70px; + padding: 5px; + border: none; + border-radius: 5px; + resize: none; + font-family: inherit; + font-size: inherit; +} + +.submitURLOptInBox { + text-align: start; +} + +.submitURLOptIn { + margin-left: -1px; +} + +.mainBox[chromedir="rtl"] .submitURLOptIn { + margin-left: 0; + margin-right: -1px; +} + +.submitButtonBox { + margin-top: 7px; +} + +.submitButton { + float: right; +} + +.mainBox[chromedir="rtl"] .submitButton { + float: left; } .helpIcon { @@ -89,4 +143,58 @@ html|a { min-width: 16px; min-height: 16px; background: url("chrome://mozapps/skin/plugins/pluginHelp-16.png") no-repeat; + cursor: pointer; + float: left; +} + +.mainBox[chromedir="rtl"] .helpIcon { + float: right; +} + +.closeIcon { + display: block; + position: absolute; + width: 16px; + height: 16px; + top: 4px; + right: 4px; + border: none; + background-color: transparent; + background-image: url("chrome://global/skin/icons/close-button.gif"); + background-repeat: no-repeat; +} + +.closeIcon:-moz-locale-dir(rtl) { + right: auto; + left: 4px; +} + +:-moz-handler-clicktoplay .mainBox { + background-image: none; + background-color: rgba(255, 255, 255, .2); + border: 1px dashed rgba(128, 128, 128, 0.5); + color: #808080; + text-shadow: none; + box-shadow: none; + transition: background-color 150ms ease; +} + +:-moz-handler-clicktoplay .mainBox:hover, +:-moz-handler-clicktoplay .mainBox:hover:active { + background-color: rgba(255, 255, 255, .8); +} + +:-moz-handler-clicktoplay .mainBox, +:-moz-handler-clicktoplay html|a { + color: #000000; +} + +:-moz-handler-clicktoplay .hoverBox:hover, +:-moz-handler-clicktoplay .hoverBox:hover html|a, +:-moz-handler-clicktoplay .hoverBox:hover:active, +:-moz-handler-clicktoplay .hoverBox:hover:active html|a { +} + +:-moz-handler-clicktoplay .closeIcon { + background-image: url("chrome://mozapps/skin/plugins/contentPluginClose.png"); } diff --git a/LCARStrek/global/findBar.css b/LCARStrek/global/findBar.css index 58865a2a..63e13a9b 100644 --- a/LCARStrek/global/findBar.css +++ b/LCARStrek/global/findBar.css @@ -12,6 +12,18 @@ findbar { border-top: 3px solid #000000; border-bottom: none; min-width: 1px; + transition-property: margin-bottom, opacity, visibility; + transition-duration: 150ms, 150ms, 0s; + transition-timing-function: ease-in-out, ease-in-out, linear; +} + +findbar[hidden] { + /* Override display:none to make the transition work. */ + display: -moz-box; + visibility: collapse; + margin-bottom: -1em; + opacity: 0; + transition-delay: 0s, 0s, 150ms; } /* find-next button */ diff --git a/LCARStrek/global/global.css b/LCARStrek/global/global.css index 5dd43311..5be3fee9 100644 --- a/LCARStrek/global/global.css +++ b/LCARStrek/global/global.css @@ -312,10 +312,13 @@ description { .text-link { color: #3333FF; - text-decoration: underline; cursor: pointer; } +.text-link:hover { + text-decoration: underline; +} + .text-link:-moz-focusring { /* Don't specify the outline-color, we should always use initial value. */ outline: 1px dotted; diff --git a/LCARStrek/global/media/TopLevelImageDocument.css b/LCARStrek/global/media/TopLevelImageDocument.css index 1fff0b1c..ddc99ad0 100644 --- a/LCARStrek/global/media/TopLevelImageDocument.css +++ b/LCARStrek/global/media/TopLevelImageDocument.css @@ -12,4 +12,8 @@ background-color: #FFFFFF; color: #221500; } + + .completeRotation { + transition: transform 0.3s ease 0s; + } } 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"); } /* diff --git a/LCARStrek/mozapps/plugins/pluginProblem.css b/LCARStrek/mozapps/plugins/pluginProblem.css index 7c89b3cb..8c88d60e 100644 --- a/LCARStrek/mozapps/plugins/pluginProblem.css +++ b/LCARStrek/mozapps/plugins/pluginProblem.css @@ -15,6 +15,7 @@ box-shadow: inset 0 1px 5px #8050B0; padding: 5px; -moz-user-select: none; + position: relative; } .hoverBox { @@ -73,8 +74,8 @@ html|a { } .msg { - font-size: 12px; cursor: default; + width: 100%; } :-moz-handler-clicktoplay .mainBox, @@ -137,11 +138,6 @@ html|a { float: left; } -.msgBottomLinks { - padding-left: 2px; - padding-right: 2px; -} - .helpIcon { float: left; display: inline-block; @@ -183,7 +179,7 @@ html|a { background-image: none; background-color: rgba(0, 0, 0, .2); border: 2px dashed rgba(255, 207, 0, 0.7); - border-radius: 3px; + border-radius: 8px; color: #8050B0; text-shadow: none; box-shadow: none; -- 2.35.3