Bug 1208616 - Improve Compact Theme toolbars with Win 7 Glass. r=Gijs
* Background added to menu bar when window is active
* Text shadow added to widgets placed next to tabs on the glass
MozReview-Commit-ID: 8Umf1t1pITI
--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -54,17 +54,16 @@
toolbar:-moz-lwtheme-brighttext {
--toolbarbutton-hover-background: rgba(25,33, 38,.6) linear-gradient(rgba(25,33,38,.6), rgba(25,33,38,.6)) padding-box;
--toolbarbutton-hover-boxshadow: none;
--toolbarbutton-hover-bordercolor: rgba(25,33,38,.6);
--toolbarbutton-active-background: rgba(25,33,38,1) linear-gradient(rgba(25,33,38,1), rgba(25,33,38,1)) border-box;
--toolbarbutton-active-boxshadow: none;
--toolbarbutton-active-bordercolor: rgba(25,33,38,.8);
--toolbarbutton-checkedhover-backgroundcolor: #3C5283;
-
}
:root:-moz-lwtheme-darktext {
--url-and-searchbar-background-color: #fff;
--chrome-background-color: #E3E4E6;
--chrome-color: #18191a;
--chrome-secondary-background-color: #f5f6f7;
--- a/browser/themes/windows/compacttheme.css
+++ b/browser/themes/windows/compacttheme.css
@@ -30,16 +30,46 @@
background: transparent !important;
}
}
#TabsToolbar::after {
display: none;
}
+@media (-moz-windows-glass) {
+ #main-menubar:not(:-moz-window-inactive) {
+ border-radius: 4px;
+ }
+
+ /* Compact Light: Light background for menu bar when active */
+ #main-menubar:not(:-moz-window-inactive):-moz-lwtheme-darktext {
+ background-color: rgba(255,255,255,.5);
+ color: black;
+ }
+
+ /* Compact Dark: Dark background for menu bar when active */
+ #main-menubar:not(:-moz-window-inactive):-moz-lwtheme-brighttext {
+ background-color: rgba(0,0,0,.5);
+ color: white;
+ }
+
+ /* Compact Light: Light text shadow for toolbar buttons placed on the glass */
+ #TabsToolbar .toolbarbutton-1:-moz-lwtheme-darktext,
+ #TabsToolbar #PlacesToolbar toolbarbutton.bookmark-item:-moz-lwtheme-darktext {
+ text-shadow: 0 0 .5em white, 0 0 .5em white, 0 1px 0 rgba(255,255,255,.4);
+ }
+
+ /* Compact Dark: Dark text shadow for toolbar buttons placed on the glass */
+ #TabsToolbar .toolbarbutton-1:-moz-lwtheme-brighttext,
+ #TabsToolbar #PlacesToolbar toolbarbutton.bookmark-item:-moz-lwtheme-brighttext {
+ text-shadow: 0 0 .5em black, 0 0 .5em black, 0 1px 0 rgba(0,0,0,.4);
+ }
+}
+
#back-button > .toolbarbutton-icon,
#forward-button > .toolbarbutton-icon {
background: var(--chrome-nav-buttons-background) !important;
border-radius: 0 !important;
height: auto !important;
padding: var(--toolbarbutton-vertical-inner-padding) 5px !important;
margin: 0 !important;
border: 1px solid var(--chrome-nav-bar-controls-border-color) !important;