Bug 1208616 - Improve Compact Theme toolbars with Win 7 Glass. r=Gijs draft
authorJ. Ryan Stinnett <jryans@gmail.com>
Tue, 21 Feb 2017 17:28:55 -0600
changeset 501649 1fa3adc23d6d589738f5d1de0b5a8f581bbc4025
parent 501569 05bfa2831c0ba4a26fa72328ffe6a99aba9c356a
child 549962 e094710430f46e2130f77096e64563a01c179606
push id50073
push userbmo:jryans@gmail.com
push dateMon, 20 Mar 2017 19:58:02 +0000
reviewersGijs
bugs1208616
milestone55.0a1
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
browser/themes/shared/compacttheme.inc.css
browser/themes/windows/compacttheme.css
--- 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;