diff --git a/browser/themes/linux/browser-lightweightTheme.css b/browser/themes/linux/browser-lightweightTheme.css index 201e1a4486b0..012b7191ce96 100644 --- a/browser/themes/linux/browser-lightweightTheme.css +++ b/browser/themes/linux/browser-lightweightTheme.css @@ -15,7 +15,7 @@ #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-end[selected=true]:-moz-lwtheme::before { background-attachment: scroll, fixed; background-color: transparent; - background-image: @fgTabTexture@;/*, lwtHeader;*/ + background-image: @fgTabTextureLWT@;/*, lwtHeader;*/ background-position: 0 0, right top; } @@ -23,7 +23,7 @@ background-attachment: scroll, scroll, fixed; background-color: transparent; background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png), - @fgTabTexture@;/*, + @fgTabTextureLWT@;/*, lwtHeader;*/ background-position: 0 0, 0 0, right top; } diff --git a/browser/themes/linux/linuxShared.inc b/browser/themes/linux/linuxShared.inc index 97d8e2d8f249..79be97dffb16 100644 --- a/browser/themes/linux/linuxShared.inc +++ b/browser/themes/linux/linuxShared.inc @@ -6,4 +6,5 @@ %define toolbarHighlight rgba(255,255,255,.3) %define fgTabTexture linear-gradient(transparent 0px, transparent 1px, hsla(0,0%,100%,0.35) 1px, hsla(0,0%,100%,0.35) 2px, hsla(0,0%,100%,0.65) 2px, hsla(0,0%,100%,0.65) 3px, @toolbarHighlight@) +%define fgTabTextureLWT @fgTabTexture@ %define fgTabBackgroundMiddle @fgTabTexture@, linear-gradient(transparent 0px, transparent 2px, -moz-dialog 2px, -moz-dialog) diff --git a/browser/themes/osx/browser-lightweightTheme.css b/browser/themes/osx/browser-lightweightTheme.css new file mode 100644 index 000000000000..bf796936437f --- /dev/null +++ b/browser/themes/osx/browser-lightweightTheme.css @@ -0,0 +1,28 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +%include shared.inc + +/* + * LightweightThemeListener will append the current lightweight theme's header + * image to the background-image for each of the following rulesets. + */ + +/* Lightweight theme on tabs */ +#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-start[selected=true]:-moz-lwtheme::before, +#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-end[selected=true]:-moz-lwtheme::before { + background-attachment: scroll, fixed; + background-color: transparent; + background-image: @fgTabTextureLWT@;/*, lwtHeader;*/ + background-position: 0 0, right top; +} + +#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-middle[selected=true]:-moz-lwtheme { + background-attachment: scroll, scroll, fixed; + background-color: transparent; + background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle-lwtheme.png), + @fgTabTextureLWT@;/*, + lwtHeader;*/ + background-position: 0 0, 0 0, right top; +} diff --git a/browser/themes/osx/browser.css b/browser/themes/osx/browser.css index 52cc83e985e2..83e138496c51 100644 --- a/browser/themes/osx/browser.css +++ b/browser/themes/osx/browser.css @@ -6,8 +6,6 @@ %include shared.inc %filter substitution -%define fgTabTexture linear-gradient(hsla(0,0%,100%,0.6), hsla(0,0%,100%,0.6) 0px, hsl(0,0%,99%) 1px, hsl(0,0%,92%)) -%define fgTabBackgroundMiddle linear-gradient(transparent, transparent) %define forwardTransitionLength 150ms %define conditionalForwardWithUrlbar window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large] > :-moz-any(#nav-bar[currentset*="unified-back-forward-button,urlbar-container"],#nav-bar:not([currentset])) > #nav-bar-customizationtarget > #unified-back-forward-button %define conditionalForwardWithUrlbarWidth 27 @@ -20,19 +18,26 @@ opacity: .9; } +#navigator-toolbox::after { + -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */ + background-image: linear-gradient(to top, hsla(0,0%,0%,.15), hsla(0,0%,0%,.15) 1px, hsla(0,0%,100%,.15) 1px, hsla(0,0%,100%,.15) 2px, transparent 3px); + content: ""; + display: -moz-box; + height: 2px; + margin-top: -2px; +} +#navigator-toolbox[tabsontop=false]::after, +#main-window[disablechrome] #navigator-toolbox::after { + visibility: collapse; +} + #navigator-toolbox toolbarbutton:-moz-lwtheme { color: inherit; text-shadow: inherit; } -#PersonalToolbar:-moz-lwtheme, -#nav-bar:-moz-lwtheme, #main-window[privatebrowsingmode=temporary] #nav-bar[tabsontop=false] { -moz-appearance: none !important; - background: none !important; - /* Switching to a lightweight theme shouldn't move the content area, - so avoid changing border widths here. */ - border-color: transparent !important; } #main-window { @@ -71,12 +76,6 @@ toolbarseparator { min-height: 22px; } -toolbox[tabsontop=true] > toolbar:not(#TabsToolbar):not(#nav-bar):not(#toolbar-menubar), -toolbox[tabsontop=false] > toolbar:not(#nav-bar) { - margin-top: -2px; /* overlay the bottom border of the toolbar above us */ - padding-top: 1px !important; -} - toolbox[tabsontop=true] > toolbar:not(#TabsToolbar):not(#nav-bar):not(:-moz-lwtheme) { -moz-appearance: none; background: url(chrome://browser/skin/Toolbar-background-noise.png) hsl(0,0%,83%); @@ -86,33 +85,20 @@ toolbox[tabsontop=true] > toolbar:not(#TabsToolbar):not(#nav-bar):not(:-moz-lwth padding-bottom: 4px !important; } -#PersonalToolbar { - -moz-appearance: none; - background-color: -moz-mac-chrome-active; - border-bottom: 2px solid; - -moz-border-bottom-colors: hsla(0,0%,0%,.15) hsla(0,0%,100%,.15); -} - #nav-bar[tabsontop=true], #nav-bar[tabsontop=true][collapsed=true]:not([customizing]) + toolbar, #nav-bar[tabsontop=true][collapsed=true]:not([customizing]) + #customToolbars + #PersonalToolbar { -moz-appearance: none; - margin-top: 0; /* don't overlay the bottom border of the tabs toolbar */ padding-top: 4px !important; - border-bottom: 2px solid; - -moz-border-bottom-colors: hsla(0,0%,0%,.15) hsla(0,0%,100%,.15); background: url(chrome://browser/skin/Toolbar-background-noise.png), - linear-gradient(hsl(0,0%,93%), hsl(0,0%,83%)); !important; /* override lwtheme style */ + linear-gradient(hsl(0,0%,93%), hsl(0,0%,83%)); background-clip: border-box; background-origin: border-box !important; } -#PersonalToolbar:-moz-lwtheme, -#nav-bar[tabsontop=true]:-moz-lwtheme, -#nav-bar[tabsontop=true][collapsed=true]:not([customizing]) + toolbar:-moz-lwtheme, -#nav-bar[tabsontop=true][collapsed=true]:not([customizing]) + #customToolbars + #PersonalToolbar:-moz-lwtheme { - background-color: transparent; - border-bottom-color: transparent; +#navigator-toolbox[tabsontop=true] > toolbar:not(#TabsToolbar):-moz-lwtheme { + background-color: @toolbarColorLWT@; + background-image: url(chrome://browser/skin/Toolbar-background-noise.png); } #PersonalToolbar:not(:-moz-lwtheme):-moz-window-inactive, @@ -2159,12 +2145,6 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker { %define TABSONTOP_NEWTAB_BUTTON #tabbrowser-tabs[tabsontop="true"] > .tabbrowser-arrowscrollbox > .tabs-newtab-button %define TABSONBOTTOM_NEWTAB_BUTTON #tabbrowser-tabs[tabsontop="false"] > .tabbrowser-arrowscrollbox > .tabs-newtab-button -.tab-background-start[selected=true]::before, -.tab-background-end[selected=true]::before { - /* The fill is in the image of ::after on OS X */ - background: none; -} - .tabbrowser-tabs[closebuttons="hidden"] > * > * > * > .tab-close-button:not([pinned]) { display: -moz-box; visibility: hidden; @@ -2212,7 +2192,7 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker { /* * Draw the bottom border of the tabstrip: */ -#TabsToolbar[tabsontop="true"]:not(:-moz-lwtheme)::after { +#TabsToolbar::after { content: ''; position: absolute; bottom: 0; diff --git a/browser/themes/osx/jar.mn b/browser/themes/osx/jar.mn index 366e271971da..0a1784aaebab 100644 --- a/browser/themes/osx/jar.mn +++ b/browser/themes/osx/jar.mn @@ -20,6 +20,7 @@ browser.jar: skin/classic/browser/actionicon-tab@2x.png skin/classic/browser/appmenu.png * skin/classic/browser/browser.css (browser.css) +* skin/classic/browser/browser-lightweightTheme.css skin/classic/browser/click-to-play-warning-stripes.png skin/classic/browser/customizableui/customization-mode-background.jpg (customizableui/customization-mode-background.jpg) * skin/classic/browser/engineManager.css (engineManager.css) @@ -184,6 +185,7 @@ browser.jar: skin/classic/browser/tabbrowser/loading.png (tabbrowser/loading.png) skin/classic/browser/tabbrowser/loading@2x.png (tabbrowser/loading@2x.png) skin/classic/browser/tabbrowser/tab-active-middle.png (tabbrowser/tab-active-middle.png) + skin/classic/browser/tabbrowser/tab-active-middle-lwtheme.png (tabbrowser/tab-active-middle-lwtheme.png) skin/classic/browser/tabbrowser/tab-arrow-left.png (tabbrowser/tab-arrow-left.png) skin/classic/browser/tabbrowser/tab-arrow-left@2x.png (tabbrowser/tab-arrow-left@2x.png) skin/classic/browser/tabbrowser/tab-arrow-right.png (tabbrowser/tab-arrow-right.png) diff --git a/browser/themes/osx/shared.inc b/browser/themes/osx/shared.inc index 2e8a8f269f46..3a5e5411196b 100644 --- a/browser/themes/osx/shared.inc +++ b/browser/themes/osx/shared.inc @@ -1,6 +1,10 @@ %include ../../../toolkit/themes/osx/global/shared.inc %include ../shared/browser.inc +%define fgTabTexture linear-gradient(hsla(0,0%,100%,0.6), hsla(0,0%,100%,0.6) 0px, hsl(0,0%,99%) 1px, hsl(0,0%,92%)) +%define toolbarColorLWT rgba(253,253,253,0.45) +%define fgTabTextureLWT linear-gradient(transparent, transparent 2px, rgba(254,254,254,0.72) 2px, @toolbarColorLWT@) +%define fgTabBackgroundMiddle linear-gradient(transparent, transparent) %define hudButton -moz-appearance: none; color: #434343; border-radius: 4px; border: 1px solid #b5b5b5; background: linear-gradient(#fff, #f2f2f2); box-shadow: inset 0 1px rgba(255,255,255,.8), inset 0 0 1px rgba(255,255, 255,.25), 0 1px rgba(255,255,255,.3); background-clip: padding-box; background-origin: padding-box; padding: 2px 6px; %define hudButtonPressed box-shadow: inset 0 1px 4px -3px #000, 0 1px rgba(255,255,255,.3); %define hudButtonFocused box-shadow: 0 0 1px -moz-mac-focusring inset, 0 0 4px 1px -moz-mac-focusring, 0 0 2px 1px -moz-mac-focusring; diff --git a/browser/themes/osx/tabbrowser/tab-active-middle-lwtheme.png b/browser/themes/osx/tabbrowser/tab-active-middle-lwtheme.png new file mode 100644 index 000000000000..ec7c84e3476d Binary files /dev/null and b/browser/themes/osx/tabbrowser/tab-active-middle-lwtheme.png differ diff --git a/browser/themes/osx/tabbrowser/tab-stroke-end.png b/browser/themes/osx/tabbrowser/tab-stroke-end.png index 3efb44726fa1..b1b7cc014552 100755 Binary files a/browser/themes/osx/tabbrowser/tab-stroke-end.png and b/browser/themes/osx/tabbrowser/tab-stroke-end.png differ diff --git a/browser/themes/osx/tabbrowser/tab-stroke-start.png b/browser/themes/osx/tabbrowser/tab-stroke-start.png index 8e0cd509f524..08941c8a7834 100755 Binary files a/browser/themes/osx/tabbrowser/tab-stroke-start.png and b/browser/themes/osx/tabbrowser/tab-stroke-start.png differ diff --git a/browser/themes/shared/tabs.inc.css b/browser/themes/shared/tabs.inc.css index ed1dbfbd0957..00a78c2999a1 100644 --- a/browser/themes/shared/tabs.inc.css +++ b/browser/themes/shared/tabs.inc.css @@ -170,15 +170,25 @@ background-color: transparent; background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png), @fgTabBackgroundMiddle@; - background-size: 100% 100%; background-repeat: repeat-x; + background-size: 100% 100%; +} + +/* Selected tab lightweight theme styles */ +.tab-background-middle[selected=true]:-moz-lwtheme { + /* Don't stretch the LWT header images */ + background-size: 100% 100%, 100% 100%, auto auto; +} + +.tab-background-start[selected=true]:-moz-lwtheme::before, +.tab-background-end[selected=true]:-moz-lwtheme::before { + background-image: @fgTabTextureLWT@; } .tab-background-middle[selected=true]:-moz-lwtheme { - background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png); + background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle-lwtheme.png), @fgTabTextureLWT@; } -/* Same as above but without border or -moz-dialog background */ .tab-background-start[selected=true]:-moz-lwtheme::before, .tab-background-end[selected=true]:-moz-lwtheme::before, .tab-background-middle[selected=true]:-moz-lwtheme { diff --git a/browser/themes/windows/browser-lightweightTheme.css b/browser/themes/windows/browser-lightweightTheme.css index 840a9ae6947e..a486b442aa96 100644 --- a/browser/themes/windows/browser-lightweightTheme.css +++ b/browser/themes/windows/browser-lightweightTheme.css @@ -15,7 +15,7 @@ #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-end[selected=true]:-moz-lwtheme::before { background-attachment: scroll, fixed; background-color: transparent; - background-image: @fgTabTexture@;/*, lwtHeader;*/ + background-image: @fgTabTextureLWT@;/*, lwtHeader;*/ background-position: 0 0, right top; } @@ -23,7 +23,7 @@ background-attachment: scroll, scroll, fixed; background-color: transparent; background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle-lwtheme.png), - @fgTabTexture@;/*, + @fgTabTextureLWT@;/*, lwtHeader;*/ background-position: 0 0, 0 0, right top; } diff --git a/browser/themes/windows/windowsShared.inc b/browser/themes/windows/windowsShared.inc index 9f76d90c2b88..4a26b63a2dcf 100644 --- a/browser/themes/windows/windowsShared.inc +++ b/browser/themes/windows/windowsShared.inc @@ -6,3 +6,4 @@ %define toolbarHighlight rgba(253,253,253,0.45) %define fgTabTexture linear-gradient(transparent, transparent 2px, rgba(254,254,254,0.72) 2px, rgba(254,254,254,0.72) 2px, rgba(250,250,250,0.88) 3px, rgba(250,250,250,0.88) 3px, rgba(254,254,254,0.72) 4px, rgba(254,254,254,0.72) 4px, @toolbarHighlight@) +%define fgTabTextureLWT @fgTabTexture@