Bug 878023 - [Australis] Use repeating instead of stretching for the middle background of hovered tabs in order to avoid seams on OS X due to CoreGraphics not supporting ExtendMode::CLAMP. r=MattN

This commit is contained in:
Markus Stange 2014-02-04 21:03:12 +01:00
Родитель 09985b3f13
Коммит 6bee199c1b
2 изменённых файлов: 33 добавлений и 2 удалений

Просмотреть файл

@ -2575,13 +2575,24 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
url(chrome://browser/skin/tabbrowser/tab-background-start@2x.png);
}
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
.tabs-newtab-button:hover {
background-image: url(chrome://browser/skin/tabbrowser/tab-background-start@2x.png),
url(chrome://browser/skin/tabbrowser/tab-background-middle@2x.png),
url(chrome://browser/skin/tabbrowser/tab-background-end@2x.png);
}
.tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-background-middle:not([selected=true]) {
background-image: url(chrome://browser/skin/tabbrowser/tab-background-middle@2x.png);
}
.tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-background-start:not([selected=true]) {
background-image: url(chrome://browser/skin/tabbrowser/tab-background-start@2x.png);
}
.tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-background-end:not([selected=true]) {
background-image: url(chrome://browser/skin/tabbrowser/tab-background-end@2x.png);
}
.tab-background-middle[selected=true] {
background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle@2x.png),
@fgTabTexture@,

Просмотреть файл

@ -223,7 +223,6 @@
/* End selected tab */
/* new tab button border and gradient on hover */
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
.tabs-newtab-button:hover {
background-image: url(chrome://browser/skin/tabbrowser/tab-background-start.png),
url(chrome://browser/skin/tabbrowser/tab-background-middle.png),
@ -233,6 +232,27 @@
background-size: @tabCurveWidth@ 100%, calc(100% - (2 * @tabCurveWidth@)) 100%, @tabCurveWidth@ 100%;
}
/* normal tab border and gradient on hover */
.tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-background-middle:not([selected=true]) {
background-image: url(chrome://browser/skin/tabbrowser/tab-background-middle.png);
background-repeat: repeat-x;
background-size: auto 100%;
}
.tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-background-start:not([selected=true]),
.tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-background-end:not([selected=true]) {
background-repeat: no-repeat;
background-size: 100% 100%;
}
.tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-background-start:not([selected=true]) {
background-image: url(chrome://browser/skin/tabbrowser/tab-background-start.png);
}
.tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-background-end:not([selected=true]) {
background-image: url(chrome://browser/skin/tabbrowser/tab-background-end.png);
}
/* Tab pointer-events */
.tabbrowser-tab {
pointer-events: none;