Bug 568037 - Adjust toolbar backgrounds and gradients for the new theme. rs=gavin

browser/themes/winstripe/browser/browser-aero.css

@@ -2,24 +2,42 @@
 %include browser.css
 %undef WINSTRIPE_AERO
 
+%define customToolbarColor rgb(227,237,246)
+
+@media all and (-moz-windows-default-theme) {
+  #navigator-toolbox > toolbar:not(:-moz-lwtheme) {
+    background-color: @customToolbarColor@;
+  }
+
+  #navigator-toolbox[tabsontop="true"] > #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab[selected="true"]:not(:-moz-lwtheme) {
+    background-image: -moz-radial-gradient(center top, white, rgba(255,255,255,0) 60%),
+                      -moz-linear-gradient(left, transparent, transparent 1px,
+                                                 @toolbarHighlight@ 1px, @toolbarHighlight@),
+                      -moz-linear-gradient(left, transparent, transparent 1px,
+                                                 @customToolbarColor@ 1px, @customToolbarColor@);
+  }
+}
+
 @media all and (-moz-windows-compositor) {
   #main-window:not(:-moz-lwtheme) {
     -moz-appearance: -moz-win-glass;
     background: transparent;
   }
 
-  #navigator-toolbox:not(:-moz-lwtheme),
-  #navigator-toolbox > toolbar {
-    -moz-appearance: none;
-    background: transparent;
-    border-style: none;
-  }
-
-  #navigator-toolbox:not(:-moz-lwtheme) {
+  #toolbar-menubar:not(:-moz-lwtheme),
+  #navigator-toolbox[tabsontop="true"] > #TabsToolbar:not(:-moz-lwtheme),
+  #navigator-toolbox:not([tabsontop="true"]) > #nav-bar:not(:-moz-lwtheme),
+  #navigator-toolbox:not([tabsontop="true"]) > #nav-bar + #customToolbars + #PersonalToolbar[collapsed="true"] + #TabsToolbar:last-child:not(:-moz-lwtheme) {
+    background: transparent !important;
     color: black;
     text-shadow: 0 0 .7em white, 0 0 .7em white, 0 1px 0 rgba(255,255,255,.4);
   }
 
+  #navigator-toolbox[tabsontop="true"] > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
+    border-left: 1px solid ThreeDShadow;
+    border-right: 1px solid ThreeDShadow;
+  }
+
   #browser:not(:-moz-lwtheme),
   #browser-bottombox:not(:-moz-lwtheme) {
     background-color: -moz-dialog;
@@ -80,11 +98,6 @@
 }
 
 @media all and (-moz-windows-default-theme) {
-  #navigator-toolbox > toolbar {
-    -moz-appearance: none;
-    border-style: none;
-  }
-
   /* Bug 413060, comment 16: Vista Aero is a special case where we use a
      tooltip appearance for the address bar popup panels */
   #identity-popup,

browser/themes/winstripe/browser/browser.css

@@ -46,6 +46,9 @@
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 @namespace html url("http://www.w3.org/1999/xhtml");
 
+%filter substitution
+%define toolbarHighlight rgba(255,255,255,.5)
+
 #menubar-items {
   -moz-box-orient: vertical; /* for flex hack */
 }
@@ -54,19 +57,40 @@
   -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
 }
 
-#nav-bar {
+#navigator-toolbox {
+  -moz-appearance: none;
+  border-top: none;
+  background-color: transparent;
+}
+
+#navigator-toolbox[tabsontop="true"] {
+  border-bottom: 1px solid ThreeDShadow;
+}
+
+#navigator-toolbox > toolbar:not(:-moz-lwtheme) {
   -moz-appearance: none;
   border-style: none;
+  background-color: -moz-Dialog;
+}
+
+#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar)[iconsize="small"],
+#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar)[defaulticonsize="small"]:not([iconsize]) {
+  padding-top: 1px;
+  padding-bottom: 1px;
+}
+
+#nav-bar:not(:-moz-lwtheme) {
+  background-image: -moz-linear-gradient(@toolbarHighlight@, rgba(255,255,255,0));
+}
+
+#navigator-toolbox:not([tabsontop="true"]) > #toolbar-menubar:not(:-moz-lwtheme) {
+  background-image: -moz-linear-gradient(@toolbarHighlight@, @toolbarHighlight@);
 }
 
 #personal-bookmarks {
   min-height: 24px;
 }
 
-#navigator-toolbox[inFullscreen="true"] {
-  border-top: none;
-}
-
 #print-preview-toolbar:not(:-moz-lwtheme) {
   -moz-appearance: toolbox;
 }
@@ -393,7 +417,12 @@ toolbar:not([iconsize="small"])[mode="icons"] #back-button > .toolbarbutton-icon
 toolbar:not([iconsize="small"])[mode="icons"][currentset*="unified-back-forward-button"],
 #nav-bar:not([iconsize="small"])[mode="icons"]:not([currentset]) {
   padding-top: 3px;
-  padding-bottom: 3px;
+  padding-bottom: 5px;
+}
+
+#navigator-toolbox[tabsontop="true"] > toolbar:not([iconsize="small"])[mode="icons"][currentset*="unified-back-forward-button"],
+#navigator-toolbox[tabsontop="true"] > #nav-bar:not([iconsize="small"])[mode="icons"]:not([currentset]) {
+  padding-top: 5px;
 }
 
 toolbar:not([iconsize="small"])[mode="icons"] #forward-button {
@@ -949,12 +978,15 @@ richlistitem[type="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-i
 
 /* Tabstrip */
 #TabsToolbar {
-  -moz-appearance: none;
   min-height: 0;
   padding: 0;
-  border-style: none;
-  background: -moz-linear-gradient(transparent, transparent 10%,
-                                   rgba(0,0,0,.03) 50%, rgba(0,0,0,.1) 90%, rgba(0,0,0,.2));
+  -moz-box-shadow: 0 -1px ThreeDShadow inset;
+}
+
+#TabsToolbar:not(:-moz-lwtheme),
+#navigator-toolbox:not([tabsontop="true"]) > #TabsToolbar {
+  background-image: -moz-linear-gradient(transparent, transparent 10%,
+                                         rgba(0,0,0,.03) 50%, rgba(0,0,0,.1) 90%, rgba(0,0,0,.2));
 }
 
 .tabbrowser-tabs:-moz-system-metric(touch-enabled) {
@@ -1014,11 +1046,13 @@ richlistitem[type="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-i
   color: black;
 }
 
-#navigator-toolbox[tabsontop="true"] > #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab[selected="true"] {
+#navigator-toolbox[tabsontop="true"] > #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab[selected="true"]:not(:-moz-lwtheme) {
   background-image: -moz-radial-gradient(center top, white, rgba(255,255,255,0) 60%),
+                    -moz-linear-gradient(left, transparent, transparent 1px,
+                                               @toolbarHighlight@ 1px, @toolbarHighlight@),
                     -moz-linear-gradient(left, transparent, transparent 1px,
                                                -moz-dialog 1px, -moz-dialog);
-  background-position: center center, -6px 0;
+  background-position: center center, -6px 0, -6px 0;
   color: -moz-dialogText;
 }