Bug 631698 - remove bogus 1px border below active app tabs (w/ tab overflow, Aero Glass, no DirectWrite). r=fryn a=dolske

browser/themes/gnomestripe/browser/browser.css

@@ -52,6 +52,7 @@
 %include ../../browserShared.inc
 %filter substitution
 %define toolbarHighlight rgba(255,255,255,.3)
+%define selectedTabHighlight rgba(255,255,255,.8) 1px, rgba(255,255,255,.5) 3px
 
 #menubar-items {
   -moz-box-orient: vertical; /* for flex hack */
@@ -65,6 +66,9 @@
   -moz-appearance: none;
   background-color: transparent;
   border-top: none;
+}
+
+#main-window:not([disablechrome]) #navigator-toolbox[tabsontop=true] {
   border-bottom: 1px solid ThreeDShadow;
 }
 
@@ -88,12 +92,6 @@
   background-image: -moz-linear-gradient(@toolbarHighlight@, rgba(255,255,255,0));
 }
 
-#navigator-toolbox[tabsontop="true"] > #nav-bar:not(:-moz-lwtheme),
-#navigator-toolbox[tabsontop="true"]:not([customizing]) > #nav-bar[collapsed="true"] + toolbar:not(:-moz-lwtheme),
-#navigator-toolbox[tabsontop="true"]:not([customizing]) > #nav-bar[collapsed="true"] + #customToolbars + #PersonalToolbar:not(:-moz-lwtheme) {
-  border-top: 1px solid ThreeDShadow;
-}
-
 #personal-bookmarks {
   min-height: 29px;
 }
@@ -1380,36 +1378,27 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
 }
 
 /* Tabstrip */
+
 #TabsToolbar {
   min-height: 0;
   padding: 0;
 }
 
 #TabsToolbar:not(:-moz-lwtheme),
-#TabsToolbar[tabsontop="false"] {
+#TabsToolbar[tabsontop=false] {
-  background-image: -moz-linear-gradient(transparent, transparent 50%,
+  background-image:
-                                         rgba(0,0,0,.05) 90%, rgba(0,0,0,.1));
+    -moz-linear-gradient(bottom, rgba(0,0,0,.3) 1px, rgba(0,0,0,.05) 1px, transparent 50%);
-}
-
-#tabbrowser-tabs[tabsontop="true"] > .tabbrowser-arrowscrollbox > scrollbox:not(:-moz-lwtheme) {
-  padding-bottom: 1px;
-  margin-bottom: -1px;
-  position: relative;
-}
-
-#tabbrowser-tabs[tabsontop="true"] > .tabbrowser-tab[selected="true"]:not(:-moz-lwtheme) {
-  margin-bottom: -1px;
-  padding-bottom: 1px;
 }
 
 .tabbrowser-tab,
 .tabs-newtab-button {
   position: static;
   -moz-appearance: none;
-  background: -moz-linear-gradient(hsla(0,0%,100%,.2), hsla(0,0%,45%,.2) 1px, hsla(0,0%,32%,.2) 50%);
+  background: -moz-linear-gradient(hsla(0,0%,100%,.2), hsla(0,0%,45%,.2) 2px, hsla(0,0%,32%,.2) 80%);
-  background-position: -5px -2px;
+  background-origin: border-box;
+  background-position: 1px 2px;
+  background-size: 100% -moz-calc(100% - 2px);
   background-repeat: no-repeat;
-  background-size: 200%;
   margin: 0;
   padding: 0;
   -moz-border-image: url(tabbrowser/tab.png) 4 5 3 6 / 4px 5px 3px 6px repeat stretch;
@@ -1419,11 +1408,17 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
 
 .tabbrowser-tab:hover,
 .tabs-newtab-button:hover {
-  background-image: -moz-linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.2) 2px, hsla(0,0%,75%,.2) 50%);
+  background-image: -moz-linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.2) 4px, hsla(0,0%,75%,.2) 80%);
 }
 
 .tabbrowser-tab[selected="true"] {
-  background-image: -moz-linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.5) 2px, @toolbarHighlight@ 20%),
+  background-image: -moz-linear-gradient(@selectedTabHighlight@, @toolbarHighlight@ 32%),
+                    -moz-linear-gradient(-moz-dialog, -moz-dialog);
+}
+
+#main-window[tabsontop=false]:not([disablechrome]) .tabbrowser-tab[selected=true]:not(:-moz-lwtheme) {
+  background-image: -moz-linear-gradient(bottom, rgba(0,0,0,.3) 1px, transparent 1px),
+                    -moz-linear-gradient(@selectedTabHighlight@, @toolbarHighlight@ 32%),
                     -moz-linear-gradient(-moz-dialog, -moz-dialog);
 }
 
@@ -1432,35 +1427,35 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
 }
 
 .tabbrowser-tab[selected="true"]:-moz-lwtheme {
-  background-image: -moz-linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.5) 2px, @toolbarHighlight@ 20%);
+  background-image: -moz-linear-gradient(@selectedTabHighlight@, @toolbarHighlight@ 32%);
 }
 
 .tabbrowser-tab:-moz-lwtheme-brighttext:not([selected="true"]),
 .tabs-newtab-button:-moz-lwtheme-brighttext {
-  background-image: -moz-linear-gradient(hsla(0,0%,60%,.6), hsla(0,0%,40%,.6) 2px, hsla(0,0%,30%,.6) 50%);
+  background-image: -moz-linear-gradient(hsla(0,0%,60%,.6), hsla(0,0%,40%,.6) 4px, hsla(0,0%,30%,.6) 80%);
 }
 
 .tabbrowser-tab:-moz-lwtheme-brighttext:not([selected="true"]):hover,
 .tabs-newtab-button:-moz-lwtheme-brighttext:hover {
-  background-image: -moz-linear-gradient(hsla(0,0%,80%,.6), hsla(0,0%,60%,.6) 2px, hsla(0,0%,45%,.6) 50%);
+  background-image: -moz-linear-gradient(hsla(0,0%,80%,.6), hsla(0,0%,60%,.6) 4px, hsla(0,0%,45%,.6) 80%);
 }
 
 .tabbrowser-tab:-moz-lwtheme-darktext:not([selected="true"]),
 .tabs-newtab-button:-moz-lwtheme-darktext {
-  background-image: -moz-linear-gradient(hsla(0,0%,100%,.5), hsla(0,0%,60%,.5) 2px, hsla(0,0%,45%,.5) 50%);
+  background-image: -moz-linear-gradient(hsla(0,0%,100%,.5), hsla(0,0%,60%,.5) 4px, hsla(0,0%,45%,.5) 80%);
 }
 
 .tabbrowser-tab:-moz-lwtheme-darktext:not([selected="true"]):hover,
 .tabs-newtab-button:-moz-lwtheme-darktext:hover {
-  background-image: -moz-linear-gradient(hsla(0,0%,100%,.5), hsla(0,0%,80%,.5) 2px, hsla(0,0%,60%,.5) 50%);
+  background-image: -moz-linear-gradient(hsla(0,0%,100%,.5), hsla(0,0%,80%,.5) 4px, hsla(0,0%,60%,.5) 80%);
 }
 
 .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) {
-  background-image: -moz-radial-gradient(40% 3px, circle farthest-corner, rgba(233,242,252,1) 2%, rgba(172,206,255,.75) 25%, rgba(87,151,201,.5) 40%, rgba(87,151,201,0) 80%);
+  background-image: -moz-radial-gradient(center 3px, circle cover, rgba(233,242,252,1) 3%, rgba(172,206,255,.75) 40%, rgba(87,151,201,.5) 80%, rgba(87,151,201,0));
 }
 .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]):hover {
-  background-image: -moz-linear-gradient(hsla(0,0%,100%,.8), hsla(0,0%,100%,.6) 2px, hsla(0,0%,75%,.2) 50%),
+  background-image: -moz-linear-gradient(hsla(0,0%,100%,.8), hsla(0,0%,100%,.6) 2px, hsla(0,0%,75%,.2) 80%),
-                    -moz-radial-gradient(40% 3px, circle farthest-corner, rgba(233,242,252,1) 2%, rgba(172,206,255,.75) 25%, rgba(87,151,201,.5) 40%, rgba(87,151,201,0) 80%);
+                    -moz-radial-gradient(center 3px, circle cover, rgba(233,242,252,1) 3%, rgba(172,206,255,.75) 40%, rgba(87,151,201,.5) 80%, rgba(87,151,201,0));
 }
 
 .tabbrowser-tab[pinned] {

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

@@ -3,7 +3,6 @@
 %undef WINSTRIPE_AERO
 
 %define customToolbarColor hsl(214,44%,87%)
-%define glassToolbarBorderColor rgba(10%,10%,10%,.4)
 %define glassActiveBorderColor rgb(37, 44, 51)
 %define glassInactiveBorderColor rgb(102, 102, 102)
 
@@ -42,16 +41,24 @@
 
   .tabbrowser-tab:not(:-moz-lwtheme),
   .tabs-newtab-button:not(:-moz-lwtheme) {
-    background-image: @genericBgTabTexture@, -moz-linear-gradient(@customToolbarColor@, @customToolbarColor@);
+    background-image: @toolbarShadowOnTab@, @bgTabTexture@,
+                      -moz-linear-gradient(@customToolbarColor@, @customToolbarColor@);
   }
 
   .tabbrowser-tab:not(:-moz-lwtheme):hover,
   .tabs-newtab-button:not(:-moz-lwtheme):hover {
-    background-image: @genericBgTabTextureHover@, -moz-linear-gradient(@customToolbarColor@, @customToolbarColor@);
+    background-image: @toolbarShadowOnTab@, @bgTabTextureHover@,
+                      -moz-linear-gradient(@customToolbarColor@, @customToolbarColor@);
   }
 
   .tabbrowser-tab[selected="true"]:not(:-moz-lwtheme) {
-    background-image: -moz-linear-gradient(white, @toolbarHighlight@ 30%),
+    background-image: -moz-linear-gradient(white, @toolbarHighlight@ 50%),
+                      -moz-linear-gradient(@customToolbarColor@, @customToolbarColor@);
+  }
+
+  #main-window[tabsontop=false]:not([disablechrome]) .tabbrowser-tab[selected=true]:not(:-moz-lwtheme) {
+    background-image: @toolbarShadowOnTab@,
+                      -moz-linear-gradient(white, @toolbarHighlight@ 50%),
                       -moz-linear-gradient(@customToolbarColor@, @customToolbarColor@);
   }
 
@@ -113,53 +120,63 @@
   }
 
   #toolbar-menubar:not(:-moz-lwtheme),
-  #TabsToolbar[tabsontop="true"]:not(:-moz-lwtheme),
+  #TabsToolbar[tabsontop=true]:not(:-moz-lwtheme),
-  #navigator-toolbox[tabsontop="false"] > #nav-bar:not(:-moz-lwtheme),
+  #navigator-toolbox[tabsontop=false] > #nav-bar:not(:-moz-lwtheme),
-  #nav-bar + #customToolbars + #PersonalToolbar[collapsed="true"] + #TabsToolbar[tabsontop="false"]:last-child:not(:-moz-lwtheme) {
+  #nav-bar + #customToolbars + #PersonalToolbar[collapsed=true] + #TabsToolbar[tabsontop=false]:last-child:not(:-moz-lwtheme) {
-    background: transparent !important;
+    background-color: transparent !important;
     color: black;
     text-shadow: 0 0 .5em white, 0 0 .5em white, 0 1px 0 rgba(255,255,255,.4);
   }
+  #toolbar-menubar:not(:-moz-lwtheme),
+  #navigator-toolbox[tabsontop=false] > #nav-bar:not(:-moz-lwtheme) {
+    background-image: none !important;
+  }
 
+  /* Vertical toolbar border */
   #main-window[sizemode="normal"] #navigator-toolbox:not([inFullscreen="true"])::after,
   #main-window[sizemode="normal"] #navigator-toolbox[tabsontop="true"] > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not([inFullscreen="true"]):not(:-moz-lwtheme) {
-    border-left: 1px solid @glassToolbarBorderColor@;
+    border-left: 1px solid @toolbarShadowColor@;
-    border-right: 1px solid @glassToolbarBorderColor@;
+    border-right: 1px solid @toolbarShadowColor@;
     background-clip: padding-box;
   }
-  #navigator-toolbox > toolbar {
-    border-color: @glassToolbarBorderColor@ !important;
-    background-clip: padding-box;
-  }
-  #navigator-toolbox[tabsontop="false"]::after,
-  #main-window[disablechrome] #navigator-toolbox[tabsontop="true"]::after {
-    background-color: @glassToolbarBorderColor@;
-  }
   #main-window[sizemode="normal"]:not([inFullscreen="true"]) #browser-border-start,
   #main-window[sizemode="normal"]:not([inFullscreen="true"]) #browser-border-end {
     display: -moz-box;
-    background-color: @glassToolbarBorderColor@;
+    background-color: @toolbarShadowColor@;
     width: 1px;
   }
   #main-window[sizemode="normal"] #browser-bottombox {
-    border: 1px solid @glassToolbarBorderColor@;
+    border: 1px solid @toolbarShadowColor@;
     border-top-style: none;
   }
 
-  #main-window[sizemode="normal"] #navigator-toolbox[tabsontop="true"] > #nav-bar:not([inFullscreen="true"]):not(:-moz-lwtheme),
+  #main-window[sizemode=normal][tabsontop=false] #PersonalToolbar:not(:-moz-lwtheme) {
-  #main-window[sizemode="normal"] #navigator-toolbox[tabsontop="true"]:not([customizing]) > #nav-bar[collapsed="true"] + toolbar:not([inFullscreen="true"]):not(:-moz-lwtheme),
-  #main-window[sizemode="normal"] #navigator-toolbox[tabsontop="true"]:not([customizing]) > #nav-bar[collapsed="true"] + #customToolbars + #PersonalToolbar:not(:-moz-lwtheme),
-  #main-window[sizemode="normal"] #navigator-toolbox:not([tabsontop="true"]) > #PersonalToolbar:not(:-moz-lwtheme) {
     border-top-left-radius: 3.5px;
     border-top-right-radius: 3.5px;
   }
 
-  #tabbrowser-tabs[tabsontop="true"] > .tabbrowser-tab[selected="true"]:not(:-moz-lwtheme),
+  /* Toolbar shadow behind tabs */
-  #navigator-toolbox[tabsontop="true"] > #nav-bar:not(:-moz-lwtheme),
+  /* This code is only needed for restored windows (i.e. sizemode=normal)
-  #navigator-toolbox[tabsontop="true"]:not([customizing]) > #nav-bar[collapsed="true"] + toolbar:not(:-moz-lwtheme),
+     because of the border radius on the toolbar below the tab bar.
-  #navigator-toolbox[tabsontop="true"]:not([customizing]) > #nav-bar[collapsed="true"] + #customToolbars + #PersonalToolbar:not(:-moz-lwtheme) {
+     :not([inFullscreen=true]) is added to ease the transition to and from
+     fullscreen mode, as the sidemode attribute isn't updated immediately. */
+  #main-window[sizemode=normal]:not([inFullscreen=true])[tabsontop=true] #nav-bar:not(:-moz-lwtheme),
+  #main-window[sizemode=normal][tabsontop=true] > #nav-bar[collapsed=true]:not([customizing]) + toolbar:not(:-moz-lwtheme),
+  #main-window[sizemode=normal][tabsontop=true] > #nav-bar[collapsed=true]:not([customizing]) + #customToolbars + #PersonalToolbar:not(:-moz-lwtheme) {
+    border-top: 1px solid @toolbarShadowColor@;
+    border-top-left-radius: 3.5px;
+    border-top-right-radius: 3.5px;
+    background-clip: padding-box;
+  }
+  #main-window[sizemode=normal]:not([inFullscreen=true])[disablechrome] #navigator-toolbox::after {
+    display: -moz-box;
+    background-color: @toolbarShadowColor@;
+  }
+  #main-window[sizemode=normal]:not([inFullscreen=true]) #TabsToolbar[tabsontop=true]:not(:-moz-lwtheme),
+  #main-window[sizemode=normal]:not([inFullscreen=true])[disablechrome] #TabsToolbar {
+    margin-bottom: -1px;
     position: relative;
-    z-index: 1;
+    background-image: none !important;
   }
 
   #navigator-toolbox:not([tabsontop="true"]) > #PersonalToolbar {

browser/themes/winstripe/browser/browser.css

@@ -51,9 +51,12 @@
 %include ../../browserShared.inc
 %filter substitution
 %define toolbarHighlight rgba(255,255,255,.5)
+%define selectedTabHighlight rgba(255,255,255,.7)
+%define toolbarShadowColor rgba(10%,10%,10%,.4)
+%define toolbarShadowOnTab -moz-linear-gradient(bottom, rgba(10%,10%,10%,.4) 1px, transparent 1px)
+%define bgTabTexture -moz-linear-gradient(transparent, hsla(0,0%,36%,.15) 1px, hsla(0,0%,0%,.3))
+%define bgTabTextureHover -moz-linear-gradient(transparent, hsla(0,0%,70%,.15) 1px, hsla(0,0%,20%,.3))
 %define navbarTextboxCustomBorder border-color: rgba(0,0,0,.25) rgba(0,0,0,.32) rgba(0,0,0,.37);
-%define genericBgTabTexture -moz-linear-gradient(transparent, hsla(0,0%,36%,.15) 1px, hsla(0,0%,0%,.3) 60%)
-%define genericBgTabTextureHover -moz-linear-gradient(transparent, hsla(0,0%,70%,.15) 1px, hsla(0,0%,20%,.3) 60%)
 
 #menubar-items {
   -moz-box-orient: vertical; /* for flex hack */
@@ -76,6 +79,10 @@
   height: 1px;
   background-color: ThreeDShadow;
 }
+#navigator-toolbox[tabsontop=false]::after,
+#main-window[disablechrome] #navigator-toolbox::after {
+  display: none;
+}
 
 #navigator-toolbox > toolbar:not(:-moz-lwtheme) {
   -moz-appearance: none;
@@ -127,12 +134,6 @@
   background-image: -moz-linear-gradient(@toolbarHighlight@, @toolbarHighlight@);
 }
 
-#navigator-toolbox[tabsontop="true"] > #nav-bar:not(:-moz-lwtheme),
-#navigator-toolbox[tabsontop="true"]:not([customizing]) > #nav-bar[collapsed="true"] + toolbar:not(:-moz-lwtheme),
-#navigator-toolbox[tabsontop="true"]:not([customizing]) > #nav-bar[collapsed="true"] + #customToolbars + #PersonalToolbar:not(:-moz-lwtheme) {
-  border-top: 1px solid ThreeDShadow;
-}
-
 #personal-bookmarks {
   min-height: 24px;
 }
@@ -1475,45 +1476,27 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
 }
 
 /* Tabstrip */
+
 #TabsToolbar {
   min-height: 0;
   padding: 0;
 }
 
 #TabsToolbar:not(:-moz-lwtheme),
-#TabsToolbar[tabsontop="false"] {
+#TabsToolbar[tabsontop=false] {
-  background-image: -moz-linear-gradient(transparent, transparent 50%,
+  background-image:
-                                         rgba(0,0,0,.05) 90%, rgba(0,0,0,.1));
+    -moz-linear-gradient(bottom, @toolbarShadowColor@ 1px, rgba(0,0,0,.05) 1px, transparent 50%);
 }
 
-#tabbrowser-tabs[tabsontop="true"] > .tabbrowser-arrowscrollbox > scrollbox:not(:-moz-lwtheme) {
-  margin-bottom: -1px;
-}
-
-%ifdef WINSTRIPE_AERO
-@media not all and (-moz-windows-compositor) {
-%endif
-  #tabbrowser-tabs[tabsontop="true"] > .tabbrowser-arrowscrollbox > scrollbox:not(:-moz-lwtheme) {
-    padding-bottom: 1px;
-    position: relative;
-  }
-
-  #tabbrowser-tabs[tabsontop="true"] > .tabbrowser-tab[selected="true"]:not(:-moz-lwtheme) {
-    margin-bottom: -1px;
-    padding-bottom: 1px;
-  }
-%ifdef WINSTRIPE_AERO
-}
-%endif
-
-/* Tabs */
 .tabbrowser-tab,
 .tabs-newtab-button {
   -moz-appearance: none;
-  background: @genericBgTabTexture@, -moz-linear-gradient(-moz-dialog, -moz-dialog);
+  background: @toolbarShadowOnTab@, @bgTabTexture@,
-  background-position: -5px -2px;
+              -moz-linear-gradient(-moz-dialog, -moz-dialog);
+  background-origin: border-box;
+  background-position: 1px 2px;
+  background-size: 100% -moz-calc(100% - 2px);
   background-repeat: no-repeat;
-  background-size: 200%;
   margin: 0;
   padding: 0;
   -moz-border-image: url(tabbrowser/tab.png) 4 5 3 6 / 4px 5px 3px 6px repeat stretch;
@@ -1522,25 +1505,34 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
 
 .tabbrowser-tab:hover,
 .tabs-newtab-button:hover {
-  background-image: @genericBgTabTextureHover@, -moz-linear-gradient(-moz-dialog, -moz-dialog);
+  background-image: @toolbarShadowOnTab@, @bgTabTextureHover@,
+                    -moz-linear-gradient(-moz-dialog, -moz-dialog);
 }
 
 %ifndef WINSTRIPE_AERO
 @media all and (-moz-windows-theme: luna-blue) {
   .tabbrowser-tab,
   .tabs-newtab-button {
-    background-image: -moz-linear-gradient(hsla(51,34%,89%,.9), hsla(51,15%,79%,.9) 1px, hsla(51,9%,68%,.9) 60%);
+    background-image: @toolbarShadowOnTab@,
+                      -moz-linear-gradient(hsla(51,34%,89%,.9), hsla(51,15%,79%,.9) 1px, hsla(51,9%,68%,.9));
   }
 
   .tabbrowser-tab:hover,
   .tabs-newtab-button:hover {
-    background-image: -moz-linear-gradient(hsla(51,34%,100%,.9), hsla(51,15%,94%,.9) 1px, hsla(51,9%,83%,.9) 60%);
+    background-image: @toolbarShadowOnTab@,
+                      -moz-linear-gradient(hsla(51,34%,100%,.9), hsla(51,15%,94%,.9) 1px, hsla(51,9%,83%,.9));
   }
 }
 %endif
 
 .tabbrowser-tab[selected="true"] {
-  background-image: -moz-linear-gradient(rgba(255,255,255,.7), @toolbarHighlight@ 30%),
+  background-image: -moz-linear-gradient(@selectedTabHighlight@, @toolbarHighlight@ 50%),
+                    -moz-linear-gradient(-moz-dialog, -moz-dialog);
+}
+
+#main-window[tabsontop=false]:not([disablechrome]) .tabbrowser-tab[selected=true]:not(:-moz-lwtheme) {
+  background-image: @toolbarShadowOnTab@,
+                    -moz-linear-gradient(@selectedTabHighlight@, @toolbarHighlight@ 50%),
                     -moz-linear-gradient(-moz-dialog, -moz-dialog);
 }
 
@@ -1549,35 +1541,35 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
 }
 
 .tabbrowser-tab[selected="true"]:-moz-lwtheme {
-  background-image: -moz-linear-gradient(rgba(255,255,255,.7), @toolbarHighlight@ 30%);
+  background-image: -moz-linear-gradient(@selectedTabHighlight@, @toolbarHighlight@ 50%);
 }
 
 .tabbrowser-tab:-moz-lwtheme-brighttext:not([selected="true"]),
 .tabs-newtab-button:-moz-lwtheme-brighttext {
-  background-image: -moz-linear-gradient(hsla(0,0%,40%,.6), hsla(0,0%,30%,.6) 50%);
+  background-image: -moz-linear-gradient(hsla(0,0%,40%,.6), hsla(0,0%,30%,.6) 80%);
 }
 
 .tabbrowser-tab:-moz-lwtheme-brighttext:not([selected="true"]):hover,
 .tabs-newtab-button:-moz-lwtheme-brighttext:hover {
-  background-image: -moz-linear-gradient(hsla(0,0%,60%,.6), hsla(0,0%,45%,.6) 50%);
+  background-image: -moz-linear-gradient(hsla(0,0%,60%,.6), hsla(0,0%,45%,.6) 80%);
 }
 
 .tabbrowser-tab:-moz-lwtheme-darktext:not([selected="true"]),
 .tabs-newtab-button:-moz-lwtheme-darktext {
-  background-image: -moz-linear-gradient(hsla(0,0%,60%,.5), hsla(0,0%,45%,.5) 50%);
+  background-image: -moz-linear-gradient(hsla(0,0%,60%,.5), hsla(0,0%,45%,.5) 80%);
 }
 
 .tabbrowser-tab:-moz-lwtheme-darktext:not([selected="true"]):hover,
 .tabs-newtab-button:-moz-lwtheme-darktext:hover {
-  background-image: -moz-linear-gradient(hsla(0,0%,80%,.5), hsla(0,0%,60%,.5) 50%);
+  background-image: -moz-linear-gradient(hsla(0,0%,80%,.5), hsla(0,0%,60%,.5) 80%);
 }
 
 .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) {
-  background-image: -moz-radial-gradient(40% 3px, circle cover, rgba(255,255,255,1) 2%, rgba(186,221,251,.75) 25%, rgba(127,179,255,.5) 50%, rgba(127,179,255,.25));
+  background-image: -moz-radial-gradient(center 3px, circle cover, rgba(255,255,255,1) 3%, rgba(186,221,251,.75) 40%, rgba(127,179,255,.5) 80%, rgba(127,179,255,.25));
 }
 .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]):hover {
-  background-image: -moz-linear-gradient(hsla(0,0%,100%,.4), hsla(0,0%,75%,.4) 50%),
+  background-image: -moz-linear-gradient(hsla(0,0%,100%,.4), hsla(0,0%,75%,.4) 80%),
-                    -moz-radial-gradient(40% 3px, circle cover, rgba(255,255,255,1) 2%, rgba(186,221,251,.75) 25%, rgba(127,179,255,.5) 50%, rgba(127,179,255,.25));
+                    -moz-radial-gradient(center 3px, circle cover, rgba(255,255,255,1) 3%, rgba(186,221,251,.75) 40%, rgba(127,179,255,.5) 80%, rgba(127,179,255,.25));
 }
 
 .tab-throbber,