From af60686fd4d3c1b9b40429a269e32d6d7db0cf90 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?D=C3=A3o=20Gottwald?= Date: Fri, 11 Jun 2010 14:15:37 +0200 Subject: [PATCH] Bug 568037 - Adjust toolbar backgrounds and gradients for the new theme. rs=gavin --- .../themes/winstripe/browser/browser-aero.css | 39 ++++++++----- browser/themes/winstripe/browser/browser.css | 58 +++++++++++++++---- 2 files changed, 72 insertions(+), 25 deletions(-) diff --git a/browser/themes/winstripe/browser/browser-aero.css b/browser/themes/winstripe/browser/browser-aero.css index 096169d1213..dcccc1e6dab 100644 --- a/browser/themes/winstripe/browser/browser-aero.css +++ b/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, diff --git a/browser/themes/winstripe/browser/browser.css b/browser/themes/winstripe/browser/browser.css index 4e90f66ef9d..f7391fd50cd 100644 --- a/browser/themes/winstripe/browser/browser.css +++ b/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; }