diff --git a/browser/themes/gnomestripe/browser/browser.css b/browser/themes/gnomestripe/browser/browser.css index 235faae8c763..2a4a98db63d9 100644 --- a/browser/themes/gnomestripe/browser/browser.css +++ b/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"] { - background-image: -moz-linear-gradient(transparent, transparent 50%, - rgba(0,0,0,.05) 90%, rgba(0,0,0,.1)); -} - -#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; +#TabsToolbar[tabsontop=false] { + background-image: + -moz-linear-gradient(bottom, rgba(0,0,0,.3) 1px, rgba(0,0,0,.05) 1px, transparent 50%); } .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-position: -5px -2px; + background: -moz-linear-gradient(hsla(0,0%,100%,.2), hsla(0,0%,45%,.2) 2px, hsla(0,0%,32%,.2) 80%); + 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%), - -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-linear-gradient(hsla(0,0%,100%,.8), hsla(0,0%,100%,.6) 2px, hsla(0,0%,75%,.2) 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] { diff --git a/browser/themes/winstripe/browser/browser-aero.css b/browser/themes/winstripe/browser/browser-aero.css index 5052c7ae3fa0..6aa847ae435b 100644 --- a/browser/themes/winstripe/browser/browser-aero.css +++ b/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), - #navigator-toolbox[tabsontop="false"] > #nav-bar:not(:-moz-lwtheme), - #nav-bar + #customToolbars + #PersonalToolbar[collapsed="true"] + #TabsToolbar[tabsontop="false"]:last-child:not(:-moz-lwtheme) { - background: transparent !important; + #TabsToolbar[tabsontop=true]: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) { + 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-right: 1px solid @glassToolbarBorderColor@; + border-left: 1px solid @toolbarShadowColor@; + 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"] #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) { + #main-window[sizemode=normal][tabsontop=false] #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), - #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) { + /* Toolbar shadow behind tabs */ + /* This code is only needed for restored windows (i.e. sizemode=normal) + because of the border radius on the toolbar below the tab bar. + :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 { diff --git a/browser/themes/winstripe/browser/browser.css b/browser/themes/winstripe/browser/browser.css index 34fd9711c7d6..d9f077562d8a 100644 --- a/browser/themes/winstripe/browser/browser.css +++ b/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"] { - background-image: -moz-linear-gradient(transparent, transparent 50%, - rgba(0,0,0,.05) 90%, rgba(0,0,0,.1)); +#TabsToolbar[tabsontop=false] { + background-image: + -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-position: -5px -2px; + background: @toolbarShadowOnTab@, @bgTabTexture@, + -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%), - -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-linear-gradient(hsla(0,0%,100%,.4), hsla(0,0%,75%,.4) 80%), + -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,