mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
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:
parent
5bc03e4132
commit
468608bd3e
@ -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;
|
||||
}
|
||||
|
@ -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)
|
||||
|
28
browser/themes/osx/browser-lightweightTheme.css
Normal file
28
browser/themes/osx/browser-lightweightTheme.css
Normal 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;
|
||||
}
|
@ -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;
|
||||
|
@ -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)
|
||||
|
@ -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;
|
||||
|
BIN
browser/themes/osx/tabbrowser/tab-active-middle-lwtheme.png
Normal file
BIN
browser/themes/osx/tabbrowser/tab-active-middle-lwtheme.png
Normal file
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 |
@ -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 {
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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@
|
||||
|
Loading…
Reference in New Issue
Block a user