Bug 865178 - Australis tabs OS X lightweight theme support. ui-r=shorlander, r=mconley

--HG--
rename : browser/themes/windows/browser-lightweightTheme.css => browser/themes/osx/browser-lightweightTheme.css
extra : rebase_source : bff72afa778aeec4789a81ec29e73e6df5cc18c9
This commit is contained in:
Matthew Noorenberghe 2013-05-04 03:25:59 -04:00
parent 5bc03e4132
commit 468608bd3e
12 changed files with 71 additions and 45 deletions

View File

@ -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;
}

View File

@ -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)

View File

@ -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;
}

View File

@ -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;

View File

@ -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)

View File

@ -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;

Binary file not shown.

After

Width:  |  Height:  |  Size: 148 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 932 B

After

Width:  |  Height:  |  Size: 439 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 903 B

After

Width:  |  Height:  |  Size: 433 B

View File

@ -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 {

View File

@ -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;
}

View File

@ -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@