mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-14 13:55:43 +00:00
Bug 547787 - New style for the tab bar on Mac. r=dao, a=beta8
This commit is contained in:
Markus Stange
parent
a02b9ba817
commit
6e16116aa3
@ -987,6 +987,42 @@
|
||||
</svg:mask>
|
||||
</svg:svg>
|
||||
#endif
|
||||
#ifdef XP_MACOSX
|
||||
<svg:svg height="0">
|
||||
<svg:mask id="pinstripe-tab-ontop-left-curve-mask" maskContentUnits="userSpaceOnUse">
|
||||
<svg:circle cx="9" cy="3" r="3" fill="white"/>
|
||||
<svg:rect x="9" y="0" width="3" height="3" fill="white"/>
|
||||
<svg:rect x="6" y="3" width="6" height="19" fill="white"/>
|
||||
<svg:rect x="1" y="17" width="5" height="5" fill="white"/>
|
||||
<svg:circle cx="1" cy="17" r="5"/>
|
||||
<svg:rect x="0" y="22" width="12" height="1" fill="white"/>
|
||||
</svg:mask>
|
||||
<svg:mask id="pinstripe-tab-ontop-right-curve-mask" maskContentUnits="userSpaceOnUse">
|
||||
<svg:circle cx="3" cy="3" r="3" fill="white"/>
|
||||
<svg:rect x="0" y="0" width="3" height="3" fill="white"/>
|
||||
<svg:rect x="0" y="3" width="6" height="19" fill="white"/>
|
||||
<svg:rect x="6" y="17" width="5" height="5" fill="white"/>
|
||||
<svg:circle cx="11" cy="17" r="5"/>
|
||||
<svg:rect x="0" y="22" width="12" height="1" fill="white"/>
|
||||
</svg:mask>
|
||||
<svg:mask id="pinstripe-tab-onbottom-left-curve-mask" maskContentUnits="userSpaceOnUse">
|
||||
<svg:circle cx="9" cy="20" r="3" fill="white"/>
|
||||
<svg:rect x="9" y="20" width="3" height="3" fill="white"/>
|
||||
<svg:rect x="6" y="1" width="6" height="19" fill="white"/>
|
||||
<svg:rect x="1" y="1" width="5" height="5" fill="white"/>
|
||||
<svg:circle cx="1" cy="6" r="5"/>
|
||||
<svg:rect x="0" y="0" width="12" height="1" fill="white"/>
|
||||
</svg:mask>
|
||||
<svg:mask id="pinstripe-tab-onbottom-right-curve-mask" maskContentUnits="userSpaceOnUse">
|
||||
<svg:circle cx="3" cy="20" r="3" fill="white"/>
|
||||
<svg:rect x="0" y="20" width="3" height="3" fill="white"/>
|
||||
<svg:rect x="0" y="1" width="6" height="19" fill="white"/>
|
||||
<svg:rect x="6" y="1" width="5" height="5" fill="white"/>
|
||||
<svg:circle cx="11" cy="6" r="5"/>
|
||||
<svg:rect x="0" y="0" width="12" height="1" fill="white"/>
|
||||
</svg:mask>
|
||||
</svg:svg>
|
||||
#endif
|
||||
|
||||
</vbox>
|
||||
# <iframe id="tab-view"> is dynamically appended as the 2nd child of #tab-view-deck.
|
||||
|
||||
@ -40,7 +40,7 @@ tabpanels {
|
||||
|
||||
.tab-drop-indicator {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tab-throbber:not([busy]),
|
||||
|
||||
@ -3388,7 +3388,17 @@
|
||||
|
||||
<content context="tabContextMenu" closetabtext="&closeTab.label;">
|
||||
<xul:stack class="tab-stack" flex="1">
|
||||
<xul:hbox class="tab-content" align="center">
|
||||
<xul:hbox xbl:inherits="pinned,selected,titlechanged"
|
||||
class="tab-background">
|
||||
<xul:hbox xbl:inherits="pinned,selected,titlechanged"
|
||||
class="tab-background-start"/>
|
||||
<xul:hbox xbl:inherits="pinned,selected,titlechanged"
|
||||
class="tab-background-middle"/>
|
||||
<xul:hbox xbl:inherits="pinned,selected,titlechanged"
|
||||
class="tab-background-end"/>
|
||||
</xul:hbox>
|
||||
<xul:hbox xbl:inherits="pinned,selected,titlechanged"
|
||||
class="tab-content" align="center">
|
||||
<xul:image xbl:inherits="fadein,pinned,busy,progress,selected"
|
||||
class="tab-throbber"
|
||||
role="presentation"/>
|
||||
|
||||
@ -68,39 +68,6 @@
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.tabbrowser-tab:-moz-lwtheme[selected="true"] {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.tabbrowser-tab:not(:hover) > * > * > .tab-label:not([selected="true"]):-moz-lwtheme {
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
#tabbrowser-tabs[tabsontop="false"] > .tabbrowser-arrowscrollbox > .tabs-newtab-button:-moz-lwtheme {
|
||||
width: auto;
|
||||
-moz-box-flex: 1;
|
||||
-moz-box-pack: start;
|
||||
border-style: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
#tabbrowser-tabs[tabsontop="false"] > .tabbrowser-arrowscrollbox > .tabs-newtab-button:-moz-lwtheme-darktext,
|
||||
#TabsToolbar[tabsontop="false"] .toolbarbutton-1:-moz-lwtheme-darktext,
|
||||
#TabsToolbar[tabsontop="false"] #tabs-closebutton:-moz-lwtheme-darktext,
|
||||
#tabbrowser-tabs[tabsontop="false"] > .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-darktext,
|
||||
#tabbrowser-tabs[tabsontop="false"] > .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-darktext,
|
||||
#tabbrowser-tabs[tabsontop="false"] > .tabbrowser-tab:-moz-lwtheme-darktext:not([selected="true"]) {
|
||||
box-shadow: inset 0 1px 0 rgba(50,50,50,.5);
|
||||
}
|
||||
|
||||
#tabbrowser-tabs[tabsontop="false"] > .tabbrowser-arrowscrollbox > .tabs-newtab-button:-moz-lwtheme-brighttext,
|
||||
#TabsToolbar[tabsontop="false"] .toolbarbutton-1:-moz-lwtheme-brighttext,
|
||||
#TabsToolbar[tabsontop="false"] #tabs-closebutton:-moz-lwtheme-brighttext,
|
||||
#tabbrowser-tabs[tabsontop="false"] > .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
|
||||
#tabbrowser-tabs[tabsontop="false"] > .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext,
|
||||
#tabbrowser-tabs[tabsontop="false"] > .tabbrowser-tab:-moz-lwtheme-brighttext:not([selected="true"]) {
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
|
||||
}
|
||||
|
||||
#main-window {
|
||||
-moz-appearance: none;
|
||||
background-color: #eeeeee;
|
||||
@ -132,8 +99,9 @@
|
||||
#navigator-toolbox[tabsontop="true"] > #nav-bar,
|
||||
#navigator-toolbox[tabsontop="true"]:not([customizing]) > #nav-bar[collapsed="true"] + toolbar,
|
||||
#navigator-toolbox[tabsontop="true"]:not([customizing]) > #nav-bar[collapsed="true"] + #customToolbars + #PersonalToolbar {
|
||||
margin-top: 0 !important; /* don't overlay the bottom border of the tabs toolbar */
|
||||
padding-top: 4px !important;
|
||||
background-image: -moz-linear-gradient(rgba(255,255,255,.58), rgba(255,255,255,0)) !important; /* override lwtheme style */
|
||||
background-image: -moz-linear-gradient(rgba(255,255,255,.43), rgba(255,255,255,0)) !important; /* override lwtheme style */
|
||||
}
|
||||
|
||||
/* ----- BOOKMARK TOOLBAR ----- */
|
||||
@ -1485,107 +1453,203 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
|
||||
list-style-image: url("chrome://browser/skin/tabbrowser/loading.png");
|
||||
}
|
||||
|
||||
.tabbrowser-tab:not(:hover) > * > * > .tab-icon-image:not([selected="true"]) {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.tab-label {
|
||||
margin-top: 1px;
|
||||
margin-bottom: 0;
|
||||
font: message-box;
|
||||
font-weight: bold;
|
||||
.tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-icon-image:not([selected="true"]) {
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.tab-stack {
|
||||
/* ensure stable tab height with and without toolbarbuttons on the tab bar */
|
||||
height: 19px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.tabbrowser-tab,
|
||||
.tabs-newtab-button {
|
||||
-moz-appearance: none;
|
||||
border-radius: 0 0 6px 6px;
|
||||
color: #222;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
|
||||
margin: 0 0 1px;
|
||||
padding: 2px 5px 0;
|
||||
border-style: none solid solid;
|
||||
border-width: 3px;
|
||||
-moz-border-top-colors: rgba(0,0,0,.04) rgba(0,0,0,.17) rgba(255,255,255,.35);
|
||||
-moz-border-bottom-colors: rgba(0,0,0,.04) rgba(0,0,0,.17) rgba(255,255,255,.25);
|
||||
-moz-border-right-colors: rgba(0,0,0,.04) rgba(0,0,0,.17) rgba(255,255,255,.1);
|
||||
-moz-border-left-colors: rgba(0,0,0,.04) rgba(0,0,0,.17) rgba(255,255,255,.1);
|
||||
background-clip: padding-box;
|
||||
font: message-box;
|
||||
font-weight: bold;
|
||||
text-shadow: @loweredShadow@;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
text-align: center;
|
||||
background-image: url(chrome://browser/skin/tabbrowser/tab-bkgnd.png);
|
||||
-moz-box-align: stretch;
|
||||
}
|
||||
|
||||
#tabbrowser-tabs[tabsontop="true"] > .tabbrowser-tab,
|
||||
#tabbrowser-tabs[tabsontop="true"] > .tabbrowser-arrowscrollbox > .tabs-newtab-button {
|
||||
border-top-style: solid;
|
||||
border-bottom-style: none;
|
||||
border-radius: 6px 6px 0 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 2px;
|
||||
margin-top: 1px;
|
||||
margin-bottom: 0;
|
||||
background-image: -moz-linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,0));
|
||||
%define TABSONTOP_TAB #tabbrowser-tabs[tabsontop="true"] > .tabbrowser-tab
|
||||
%define TABSONBOTTOM_TAB #tabbrowser-tabs[tabsontop="false"] > .tabbrowser-tab
|
||||
%define TABSONTOP_TAB_STACK #tabbrowser-tabs[tabsontop="true"] > .tabbrowser-tab > .tab-stack
|
||||
%define TABSONBOTTOM_TAB_STACK #tabbrowser-tabs[tabsontop="false"] > .tabbrowser-tab > .tab-stack
|
||||
%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
|
||||
|
||||
@TABSONTOP_TAB_STACK@ > .tab-background {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.tabs-newtab-button {
|
||||
width: 34px;
|
||||
@TABSONBOTTOM_TAB_STACK@ > .tab-background {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
@TABSONTOP_TAB_STACK@ > .tab-background:not([selected="true"]):not(:-moz-lwtheme) {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
@TABSONBOTTOM_TAB_STACK@ > .tab-background:not([selected="true"]) {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.tab-background,
|
||||
.tab-content,
|
||||
.tabs-newtab-button > .toolbarbutton-icon {
|
||||
margin-top: -1px;
|
||||
-moz-margin-start: -5px;
|
||||
-moz-margin-end: -4px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#tabbrowser-tabs[tabsontop="true"] > .tabbrowser-arrowscrollbox > .tabs-newtab-button > .toolbarbutton-icon {
|
||||
margin-top: 0;
|
||||
margin-bottom: -1px;
|
||||
.tab-close-button {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.tabs-newtab-button > .toolbarbutton-icon:-moz-window-inactive {
|
||||
opacity: 0.75;
|
||||
.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
|
||||
-moz-padding-start: 5px;
|
||||
-moz-padding-end: 4px;
|
||||
}
|
||||
|
||||
.tabbrowser-tab[selected="true"] {
|
||||
-moz-border-bottom-colors: rgba(0,0,0,.04) rgba(0,0,0,.17) rgba(255,255,255,.3);
|
||||
-moz-border-right-colors: rgba(0,0,0,.04) rgba(0,0,0,.17) rgba(255,255,255,.3);
|
||||
-moz-border-left-colors: rgba(0,0,0,.04) rgba(0,0,0,.17) rgba(255,255,255,.35);
|
||||
background-image: none;
|
||||
.tab-content,
|
||||
.tabs-newtab-button > .toolbarbutton-icon {
|
||||
-moz-box-align: center;
|
||||
border: solid transparent;
|
||||
border-width: 0 11px;
|
||||
}
|
||||
|
||||
.tab-background-start,
|
||||
.tab-background-end {
|
||||
width: 12px;
|
||||
height: 21px;
|
||||
}
|
||||
|
||||
.tab-background-middle {
|
||||
-moz-box-flex: 1;
|
||||
}
|
||||
|
||||
@TABSONTOP_TAB_STACK@ > .tab-background > .tab-background-start:-moz-locale-dir(ltr),
|
||||
@TABSONTOP_TAB_STACK@ > .tab-background > .tab-background-end:-moz-locale-dir(rtl) {
|
||||
mask: url(chrome://browser/content/browser.xul#pinstripe-tab-ontop-left-curve-mask);
|
||||
}
|
||||
|
||||
@TABSONTOP_TAB_STACK@ > .tab-background > .tab-background-end:-moz-locale-dir(ltr),
|
||||
@TABSONTOP_TAB_STACK@ > .tab-background > .tab-background-start:-moz-locale-dir(rtl) {
|
||||
mask: url(chrome://browser/content/browser.xul#pinstripe-tab-ontop-right-curve-mask);
|
||||
}
|
||||
|
||||
@TABSONBOTTOM_TAB_STACK@ > .tab-background > .tab-background-start:-moz-locale-dir(ltr),
|
||||
@TABSONBOTTOM_TAB_STACK@ > .tab-background > .tab-background-end:-moz-locale-dir(rtl) {
|
||||
mask: url(chrome://browser/content/browser.xul#pinstripe-tab-onbottom-left-curve-mask);
|
||||
}
|
||||
|
||||
@TABSONBOTTOM_TAB_STACK@ > .tab-background > .tab-background-end:-moz-locale-dir(ltr),
|
||||
@TABSONBOTTOM_TAB_STACK@ > .tab-background > .tab-background-start:-moz-locale-dir(rtl) {
|
||||
mask: url(chrome://browser/content/browser.xul#pinstripe-tab-onbottom-right-curve-mask);
|
||||
}
|
||||
|
||||
.tab-background-start[selected="true"]:not(:-moz-lwtheme),
|
||||
.tab-background-middle[selected="true"]:not(:-moz-lwtheme),
|
||||
.tab-background-end[selected="true"]:not(:-moz-lwtheme) {
|
||||
background-color: -moz-mac-chrome-active;
|
||||
}
|
||||
|
||||
.tabbrowser-tab[selected="true"]:-moz-window-inactive {
|
||||
.tab-background-start[selected="true"]:not(:-moz-lwtheme):-moz-window-inactive,
|
||||
.tab-background-middle[selected="true"]:not(:-moz-lwtheme):-moz-window-inactive,
|
||||
.tab-background-end[selected="true"]:not(:-moz-lwtheme):-moz-window-inactive {
|
||||
background-color: -moz-mac-chrome-inactive;
|
||||
}
|
||||
|
||||
#tabbrowser-tabs[tabsontop="true"] > .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) {
|
||||
background-image: -moz-radial-gradient(center 2px, circle cover, rgba(254,254,255,1) 3%, rgba(210,235,255,.9) 12%, rgba(148,205,253,.6) 30%, rgba(148,205,253,.2) 70%);
|
||||
.tab-background-start[pinned][titlechanged]:not([selected="true"]),
|
||||
.tab-background-end[pinned][titlechanged]:not([selected="true"]) {
|
||||
background-image: -moz-linear-gradient(rgba(148,205,253,.2), rgba(148,205,253,.2)) !important;
|
||||
}
|
||||
.tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) {
|
||||
|
||||
@TABSONBOTTOM_TAB_STACK@ > .tab-background > .tab-background-middle[pinned][titlechanged]:not([selected="true"]) {
|
||||
background-image: -moz-radial-gradient(center 99%, circle cover, rgba(254,254,255,1) 3%, rgba(210,235,255,.9) 12%, rgba(148,205,253,.6) 30%, rgba(148,205,253,.2) 70%);
|
||||
}
|
||||
|
||||
#tabbrowser-tabs[tabsontop="true"] > .tabbrowser-tab[selected="true"] {
|
||||
-moz-border-top-colors: rgba(0,0,0,.04) rgba(0,0,0,.17) rgba(255,255,255,.9);
|
||||
-moz-border-right-colors: rgba(0,0,0,.04) rgba(0,0,0,.17) rgba(255,255,255,.6);
|
||||
-moz-border-left-colors: rgba(0,0,0,.04) rgba(0,0,0,.17) rgba(255,255,255,.6);
|
||||
background-image: -moz-linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.58));
|
||||
@TABSONTOP_TAB_STACK@ > .tab-background > .tab-background-middle[pinned][titlechanged]:not([selected="true"]) {
|
||||
background-image: -moz-radial-gradient(center 2px, circle cover, rgba(254,254,255,1) 3%, rgba(210,235,255,.9) 12%, rgba(148,205,253,.6) 30%, rgba(148,205,253,.2) 70%);
|
||||
}
|
||||
|
||||
.tabbrowser-tab > .tab-stack > .tab-background > .tab-background-start:-moz-lwtheme-brighttext:not([selected="true"]),
|
||||
.tabbrowser-tab > .tab-stack > .tab-background > .tab-background-middle:-moz-lwtheme-brighttext:not([selected="true"]),
|
||||
.tabbrowser-tab > .tab-stack > .tab-background > .tab-background-end:-moz-lwtheme-brighttext:not([selected="true"]) {
|
||||
background-image: -moz-linear-gradient(hsla(0,0%,40%,.6), hsla(0,0%,30%,.6) 50%);
|
||||
}
|
||||
|
||||
.tabbrowser-tab > .tab-stack > .tab-background > .tab-background-start:-moz-lwtheme-darktext:not([selected="true"]),
|
||||
.tabbrowser-tab > .tab-stack > .tab-background > .tab-background-middle:-moz-lwtheme-darktext:not([selected="true"]),
|
||||
.tabbrowser-tab > .tab-stack > .tab-background > .tab-background-end:-moz-lwtheme-darktext:not([selected="true"]) {
|
||||
background-image: -moz-linear-gradient(hsla(0,0%,60%,.5), hsla(0,0%,45%,.5) 50%);
|
||||
}
|
||||
|
||||
@TABSONTOP_TAB_STACK@ > .tab-content,
|
||||
@TABSONTOP_NEWTAB_BUTTON@ > .toolbarbutton-icon {
|
||||
-moz-border-image: url(chrome://browser/skin/tabbrowser/tab-top-normal-active.png) 0 11 repeat stretch;
|
||||
}
|
||||
|
||||
@TABSONTOP_TAB@:hover > .tab-stack > .tab-content:not([selected="true"]),
|
||||
@TABSONTOP_NEWTAB_BUTTON@:hover > .toolbarbutton-icon {
|
||||
-moz-border-image: url(chrome://browser/skin/tabbrowser/tab-top-hover-active.png) 0 11 repeat stretch;
|
||||
}
|
||||
|
||||
@TABSONTOP_TAB_STACK@ > .tab-content[selected="true"] {
|
||||
-moz-border-image: url(chrome://browser/skin/tabbrowser/tab-top-selected-active.png) 0 11 repeat stretch;
|
||||
}
|
||||
|
||||
@TABSONBOTTOM_TAB_STACK@ > .tab-content,
|
||||
@TABSONBOTTOM_NEWTAB_BUTTON@ > .toolbarbutton-icon {
|
||||
-moz-border-image: url(chrome://browser/skin/tabbrowser/tab-bottom-normal-active.png) 0 11 repeat stretch;
|
||||
}
|
||||
|
||||
@TABSONBOTTOM_TAB@:hover > .tab-stack > .tab-content:not([selected="true"]),
|
||||
@TABSONBOTTOM_NEWTAB_BUTTON@:hover > .toolbarbutton-icon {
|
||||
-moz-border-image: url(chrome://browser/skin/tabbrowser/tab-bottom-hover-active.png) 0 11 repeat stretch;
|
||||
}
|
||||
|
||||
@TABSONBOTTOM_TAB_STACK@ > .tab-content[selected="true"] {
|
||||
-moz-border-image: url(chrome://browser/skin/tabbrowser/tab-bottom-selected-active.png) 0 11 repeat stretch;
|
||||
}
|
||||
|
||||
/* preloading hack */
|
||||
#TabsToolbar::after {
|
||||
content: '';
|
||||
display: block;
|
||||
background-image:
|
||||
url(chrome://browser/skin/tabbrowser/tab-top-normal-active.png),
|
||||
url(chrome://browser/skin/tabbrowser/tab-top-hover-active.png),
|
||||
url(chrome://browser/skin/tabbrowser/tab-top-selected-active.png),
|
||||
url(chrome://browser/skin/tabbrowser/tab-bottom-normal-active.png),
|
||||
url(chrome://browser/skin/tabbrowser/tab-bottom-hover-active.png),
|
||||
url(chrome://browser/skin/tabbrowser/tab-bottom-selected-active.png),
|
||||
url(chrome://browser/skin/tabbrowser/tabbar-top-bg-active.png),
|
||||
url(chrome://browser/skin/tabbrowser/tabbar-top-bg-inactive.png),
|
||||
url(chrome://browser/skin/tabbrowser/tabbar-bottom-bg-active.png),
|
||||
url(chrome://browser/skin/tabbrowser/tabbar-bottom-bg-inactive.png);
|
||||
}
|
||||
|
||||
.tabbrowser-tab:focus > .tab-stack {
|
||||
box-shadow: @focusRingShadow@;
|
||||
}
|
||||
|
||||
.tabbrowser-tab[selected="true"],
|
||||
.tabbrowser-tab:hover {
|
||||
color: #000000;
|
||||
.tabbrowser-tab:not([selected="true"]):not(:hover):not(:-moz-lwtheme) {
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.tabbrowser-tab:-moz-window-inactive {
|
||||
color: #575757;
|
||||
.tabbrowser-tab[selected="true"] {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tabbrowser-tab[selected="true"]:not([pinned]),
|
||||
#tabbrowser-tabs[pinnedonly="true"] > .tabbrowser-tab[selected="true"] {
|
||||
/* Don't overwrite position:fixed on pinned tabs. */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tabbrowser-tab:-moz-lwtheme {
|
||||
@ -1593,33 +1657,82 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
|
||||
text-shadow: inherit;
|
||||
}
|
||||
|
||||
#TabsToolbar[tabsontop="true"]:not(:-moz-lwtheme) {
|
||||
padding-bottom: 1px;
|
||||
box-shadow: 0 -6px 3.5px -5px rgba(0,0,0,.3) inset,
|
||||
0 -2px 0 rgba(0,0,0,.2) inset;
|
||||
#navigator-toolbox[tabsontop="true"]:not(:-moz-lwtheme)::before {
|
||||
/* We want the titlebar to be unified, but we still want to be able
|
||||
* to give #TabsToolbar a background. So we can't set -moz-appearance:
|
||||
* toolbar on #TabsToolbar itself. Instead, we set it on a box of the
|
||||
* right size which is put underneath #TabsToolbar.
|
||||
*/
|
||||
content: '';
|
||||
display: block;
|
||||
-moz-appearance: toolbar;
|
||||
height: 25px;
|
||||
margin-bottom: -25px;
|
||||
}
|
||||
|
||||
#TabsToolbar {
|
||||
-moz-appearance: none;
|
||||
height: 26px;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
#TabsToolbar:not(:-moz-lwtheme) {
|
||||
background-color: -moz-mac-chrome-active;
|
||||
}
|
||||
|
||||
#TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
|
||||
background-color: -moz-mac-chrome-inactive;
|
||||
}
|
||||
|
||||
#TabsToolbar[tabsontop="false"] {
|
||||
-moz-appearance: none;
|
||||
margin-top: -1px;
|
||||
border-bottom: 1px solid #404040;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
#TabsToolbar[tabsontop="true"]:not(:-moz-lwtheme) {
|
||||
padding-bottom: 2px;
|
||||
background-image: url(chrome://browser/skin/tabbrowser/tabbar-top-bg-active.png) ;
|
||||
}
|
||||
|
||||
#TabsToolbar[tabsontop="true"]:not(:-moz-lwtheme):-moz-window-inactive {
|
||||
background-image: url(chrome://browser/skin/tabbrowser/tabbar-top-bg-inactive.png);
|
||||
}
|
||||
|
||||
#TabsToolbar[tabsontop="false"]:not(:-moz-lwtheme) {
|
||||
background: #9B9B9B url("chrome://browser/skin/tabbrowser/tabbrowser-tabs-bkgnd.png") repeat-x;
|
||||
background-image: url(chrome://browser/skin/tabbrowser/tabbar-bottom-bg-active.png);
|
||||
}
|
||||
|
||||
#TabsToolbar[tabsontop="false"]:not(:-moz-lwtheme):-moz-window-inactive {
|
||||
background-color: #e2e2e2;
|
||||
background-image: url(chrome://browser/skin/tabbrowser/tabbar-bottom-bg-inactive.png);
|
||||
}
|
||||
|
||||
.tabbrowser-tabs {
|
||||
#tabbrowser-tabs {
|
||||
-moz-box-align: stretch;
|
||||
height: 25px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.tabbrowser-tabs:not([overflow="true"]) {
|
||||
-moz-margin-start: 3px;
|
||||
#tabbrowser-tabs[tabsontop="true"] > .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox:not(:-moz-lwtheme) {
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
|
||||
#tabbrowser-tabs[tabsontop="false"] > .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
@TABSONTOP_NEWTAB_BUTTON@ > .toolbarbutton-icon {
|
||||
padding: 4px 0 2px;
|
||||
}
|
||||
|
||||
@TABSONTOP_TAB_STACK@ > .tab-content {
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
@TABSONBOTTOM_NEWTAB_BUTTON@ > .toolbarbutton-icon {
|
||||
padding: 2px 0 4px;
|
||||
}
|
||||
|
||||
@TABSONBOTTOM_TAB_STACK@ > .tab-content {
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -110,9 +110,17 @@ browser.jar:
|
||||
skin/classic/browser/tabbrowser/loading.png (tabbrowser/loading.png)
|
||||
skin/classic/browser/tabbrowser/tab-arrow-left.png (tabbrowser/tab-arrow-left.png)
|
||||
skin/classic/browser/tabbrowser/tab-arrow-right.png (tabbrowser/tab-arrow-right.png)
|
||||
skin/classic/browser/tabbrowser/tabbrowser-tabs-bkgnd.png (tabbrowser/tabbrowser-tabs-bkgnd.png)
|
||||
skin/classic/browser/tabbrowser/tabbar-bottom-bg-active.png (tabbrowser/tabbar-bottom-bg-active.png)
|
||||
skin/classic/browser/tabbrowser/tabbar-bottom-bg-inactive.png (tabbrowser/tabbar-bottom-bg-inactive.png)
|
||||
skin/classic/browser/tabbrowser/tab-bottom-normal-active.png (tabbrowser/tab-bottom-normal-active.png)
|
||||
skin/classic/browser/tabbrowser/tab-bottom-hover-active.png (tabbrowser/tab-bottom-hover-active.png)
|
||||
skin/classic/browser/tabbrowser/tab-bottom-selected-active.png (tabbrowser/tab-bottom-selected-active.png)
|
||||
skin/classic/browser/tabbrowser/tabbar-top-bg-active.png (tabbrowser/tabbar-top-bg-active.png)
|
||||
skin/classic/browser/tabbrowser/tabbar-top-bg-inactive.png (tabbrowser/tabbar-top-bg-inactive.png)
|
||||
skin/classic/browser/tabbrowser/tab-top-normal-active.png (tabbrowser/tab-top-normal-active.png)
|
||||
skin/classic/browser/tabbrowser/tab-top-hover-active.png (tabbrowser/tab-top-hover-active.png)
|
||||
skin/classic/browser/tabbrowser/tab-top-selected-active.png (tabbrowser/tab-top-selected-active.png)
|
||||
skin/classic/browser/tabbrowser/tabDragIndicator.png (tabbrowser/tabDragIndicator.png)
|
||||
skin/classic/browser/tabbrowser/tab-bkgnd.png (tabbrowser/tab-bkgnd.png)
|
||||
skin/classic/browser/tabview/edit-light.png (tabview/edit-light.png)
|
||||
skin/classic/browser/tabview/edit.png (tabview/edit.png)
|
||||
skin/classic/browser/tabview/new-tab.png (tabview/new-tab.png)
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 149 B |
Binary file not shown.
|
After Width: | Height: | Size: 422 B |
Binary file not shown.
|
After Width: | Height: | Size: 405 B |
Binary file not shown.
|
After Width: | Height: | Size: 487 B |
Binary file not shown.
|
After Width: | Height: | Size: 466 B |
Binary file not shown.
|
After Width: | Height: | Size: 464 B |
Binary file not shown.
|
After Width: | Height: | Size: 691 B |
Binary file not shown.
|
After Width: | Height: | Size: 135 B |
Binary file not shown.
|
After Width: | Height: | Size: 137 B |
Binary file not shown.
|
After Width: | Height: | Size: 156 B |
Binary file not shown.
|
After Width: | Height: | Size: 151 B |
Binary file not shown.
|
Before Width: | Height: | Size: 155 B |
Loading…
Reference in New Issue
Block a user