Fix broken appearance of tabs on Firefox 51 and later.

See also: https://bugzilla.mozilla.org/show_bug.cgi?id=1297157
This commit is contained in:
Piro / YUKI Hiroshi 2016-08-31 02:59:56 +09:00
parent e19744e12f
commit f38461c378
4 changed files with 136 additions and 54 deletions

View File

@ -56,20 +56,28 @@
width: 0;
}
.tabbrowser-tabs:not([treestyletab-tabbar-position="top"])
.tabbrowser-tab:hover .tab-background:not([visuallyselected="true"]) {
.tabbrowser-tab:hover
.tab-background:not([selected="true"]):not([visuallyselected="true"]) {
background-image: none;
}
/* for Mac OS X */
.tabbrowser-tabs[treestyletab-mode="vertical"]
:-moz-any(.tab-content:not([pinned]):not([visuallyselected="true"]),
.tab-content[pinned]:not([titlechanged]):not([visuallyselected="true"]),
:-moz-any(.tab-content:not([pinned]):not([selected="true"]):not([visuallyselected="true"]),
.tab-content[pinned]:not([titlechanged]):not([selected="true"]):not([visuallyselected="true"]),
.tab-background-start:not([selected="true"]):not([visuallyselected="true"]),
.tab-background-middle:not([selected="true"]):not([visuallyselected="true"]):not([pinned]),
.tab-background-middle:not([selected="true"]):not([visuallyselected="true"])[pinned]:not([titlechanged]),
.tab-background-end:not([selected="true"]):not([visuallyselected="true"]),
/* Firefox 51 and later */
.tab-content:not([pinned])[selected="true"],
.tab-content[pinned]:not([titlechanged])[selected="true"],
.tab-background-start[selected="true"],
.tab-background-middle[selected="true"],
.tab-background-end[selected="true"],
/* old Firefox */
.tab-content:not([pinned])[visuallyselected="true"],
.tab-content[pinned]:not([titlechanged])[visuallyselected="true"],
.tab-background-start:not([visuallyselected="true"]),
.tab-background-middle:not([visuallyselected="true"]):not([pinned]),
.tab-background-middle:not([visuallyselected="true"])[pinned]:not([titlechanged]),
.tab-background-end:not([visuallyselected="true"]),
.tab-background-start[visuallyselected="true"],
.tab-background-middle[visuallyselected="true"],
.tab-background-end[visuallyselected="true"]) {
@ -77,9 +85,14 @@
background: transparent !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"]
:-moz-any(.tab-background-start:not([visuallyselected="true"]),
.tab-background-middle:not([visuallyselected="true"]),
.tab-background-end:not([visuallyselected="true"]),
:-moz-any(.tab-background-start:not([selected="true"]):not([visuallyselected="true"]),
.tab-background-middle:not([selected="true"]):not([visuallyselected="true"]),
.tab-background-end:not([selected="true"]):not([visuallyselected="true"]),
/* Firefox 51 and later */
.tab-background-start[selected="true"],
.tab-background-middle[selected="true"],
.tab-background-end[selected="true"],
/* old Firefox */
.tab-background-start[visuallyselected="true"],
.tab-background-middle[visuallyselected="true"],
.tab-background-end[visuallyselected="true"]) {
@ -205,11 +218,17 @@
.tabbrowser-tab:hover
.tab-content[pinned]:not([titlechanged]),
.tabbrowser-tabs[treestyletab-mode="vertical"]
.tabbrowser-tab:not(:hover)
.tab-content[pinned][visuallyselected],
.tabbrowser-tab[visuallyselected]:not(:hover)
:-moz-any(/* Firefox 51 and later */
.tab-content[pinned][selected],
/* old Firefox */
.tab-content[pinned][visuallyselected]),
.tabbrowser-tabs[treestyletab-mode="vertical"]
.tabbrowser-tab:hover
.tab-content[pinned][visuallyselected] {
.tabbrowser-tab[visuallyselected]:hover
:-moz-any(/* Firefox 51 and later */
.tab-content[pinned][selected],
/* old Firefox */
.tab-content[pinned][visuallyselected]) {
background: none !important;
}
@ -251,11 +270,17 @@
.tabbrowser-tab:hover
.tab-content[pinned],
.tabbrowser-tabs[treestyletab-mode="vertical"]
.tabbrowser-tab:not(:hover)
.tab-content[pinned][visuallyselected="true"],
.tabbrowser-tab[visuallyselected="true"]:not(:hover)
:-moz-any(/* Firefox 51 and later */
.tab-content[pinned][selected="true"],
/* old Firefox */
.tab-content[pinned][visuallyselected="true"]),
.tabbrowser-tabs[treestyletab-mode="vertical"]
.tabbrowser-tab:hover
.tab-content[pinned][visuallyselected="true"] {
.tabbrowser-tab[visuallyselected="true"]:hover
:-moz-any(/* Firefox 51 and later */
.tab-content[pinned][selected="true"],
/* old Firefox */
.tab-content[pinned][visuallyselected="true"]) {
line-height: 1 !important;
border: 1px solid #666666 !important;
border-radius: 4px !important;
@ -269,20 +294,32 @@
.tabbrowser-tab:hover
.tab-content[pinned]:not([titlechanged]),
.tabbrowser-tabs[treestyletab-mode="vertical"]
.tabbrowser-tab:not(:hover)
.tab-content[visuallyselected="true"][pinned],
.tabbrowser-tab[visuallyselected="true"]:not(:hover)
.tab-content[selected="true"][pinned], /* Firefox 51 and later */
.tabbrowser-tabs[treestyletab-mode="vertical"]
.tabbrowser-tab:hover
.tab-content[visuallyselected="true"][pinned] {
.tabbrowser-tab[visuallyselected="true"]:not(:hover)
.tab-content[visuallyselected="true"][pinned], /* old Firefox */
.tabbrowser-tabs[treestyletab-mode="vertical"]
.tabbrowser-tab[visuallyselected="true"]:hover
.tab-content[selected="true"][pinned], /* Firefox 51 and later */
.tabbrowser-tabs[treestyletab-mode="vertical"]
.tabbrowser-tab[visuallyselected="true"]:hover
.tab-content[visuallyselected="true"][pinned] /* old Firefox */ {
background: #9d9d9d !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"]
.tabbrowser-tab:not(:hover)
.tab-content[visuallyselected="true"][pinned],
.tabbrowser-tab[visuallyselected="true"]:not(:hover)
.tab-content[selected="true"][pinned], /* Firefox 51 and later */
.tabbrowser-tabs[treestyletab-mode="vertical"]
.tabbrowser-tab:hover
.tab-content[visuallyselected="true"][pinned] {
.tabbrowser-tab[visuallyselected="true"]:not(:hover)
.tab-content[visuallyselected="true"][pinned], /* old Firefox */
.tabbrowser-tabs[treestyletab-mode="vertical"]
.tabbrowser-tab[visuallyselected="true"]:hover
.tab-content[selected="true"][pinned], /* Firefox 51 and later */
.tabbrowser-tabs[treestyletab-mode="vertical"]
.tabbrowser-tab[visuallyselected="true"]:hover
.tab-content[visuallyselected="true"][pinned] /* old Firefox */ {
background-color: #b3b2b3 !important;
}
@ -347,12 +384,20 @@
:root:-moz-window-inactive
.tabbrowser-tabs[treestyletab-mode="vertical"]
.tabbrowser-tab
.tab-content[pinned][visuallyselected="true"],
.tabbrowser-tab[visuallyselected="true"]
.tab-content[pinned][selected="true"], /* Firefox 51 and later */
:root:-moz-window-inactive
.tabbrowser-tabs[treestyletab-mode="vertical"]
.tabbrowser-tab:hover
.tab-content[pinned][visuallyselected="true"] {
.tabbrowser-tab[visuallyselected="true"]
.tab-content[pinned][visuallyselected="true"], /* old Firefox */
:root:-moz-window-inactive
.tabbrowser-tabs[treestyletab-mode="vertical"]
.tabbrowser-tab[visuallyselected="true"]:hover
.tab-content[pinned][selected="true"], /* Firefox 51 and later */
:root:-moz-window-inactive
.tabbrowser-tabs[treestyletab-mode="vertical"]
.tabbrowser-tab[visuallyselected="true"]:hover
.tab-content[pinned][visuallyselected="true"] /* old Firefox */ {
background: #e4e4e4 !important;
}

View File

@ -68,7 +68,8 @@
width: 0;
}
.tabbrowser-tabs:not([treestyletab-tabbar-position="top"])
.tabbrowser-tab:hover .tab-background:not([visuallyselected="true"]) {
.tabbrowser-tab:hover
.tab-background:not([selected="true"]):not([visuallyselected="true"]) {
background-image: none;
}
@ -404,26 +405,39 @@ tabbrowser[treestyletab-mode="vertical"]
/* for Mac OS X */
.tabbrowser-tabs[treestyletab-mode="vertical"]
:-moz-any(.tab-content:not([visuallyselected="true"]):not([pinned]),
.tab-content:not([visuallyselected="true"])[pinned]:not([titlechanged]),
:-moz-any(.tab-content:not([selected="true"]):not([visuallyselected="true"]):not([pinned]),
.tab-content:not([selected="true"]):not([visuallyselected="true"])[pinned]:not([titlechanged]),
/* Firefox 51 and later */
.tab-content[selected="true"],
/* old Firefox */
.tab-content[visuallyselected="true"]) {
border: 0 none !important;
background: transparent !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"]
:-moz-any(.tab-background-start:not([visuallyselected="true"]),
.tab-background-middle:not([visuallyselected="true"]),
.tab-background-end:not([visuallyselected="true"]),
:-moz-any(.tab-background-start:not([selected="true"]):not([visuallyselected="true"]),
.tab-background-middle:not([selected="true"]):not([visuallyselected="true"]),
.tab-background-end:not([selected="true"]):not([visuallyselected="true"]),
/* Firefox 51 and later */
.tab-background-start[selected="true"],
.tab-background-middle[selected="true"],
.tab-background-end[selected="true"],
/* old Firefox */
.tab-background-start[visuallyselected="true"],
.tab-background-middle[visuallyselected="true"],
.tab-background-end[visuallyselected="true"]) {
mask: none !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"]
:-moz-any(.tab-background-start:not([visuallyselected="true"]),
.tab-background-middle:not([visuallyselected="true"]):not([pinned]),
.tab-background-middle:not([visuallyselected="true"])[pinned]:not([titlechanged]),
.tab-background-end:not([visuallyselected="true"]),
:-moz-any(.tab-background-start:not([selected="true"]):not([visuallyselected="true"]),
.tab-background-middle:not([selected="true"]):not([visuallyselected="true"]):not([pinned]),
.tab-background-middle:not([selected="true"]):not([visuallyselected="true"])[pinned]:not([titlechanged]),
.tab-background-end:not([selected="true"]):not([visuallyselected="true"]),
/* Firefox 51 and later */
.tab-background-start[selected="true"],
.tab-background-middle[selected="true"],
.tab-background-end[selected="true"],
/* old Firefox */
.tab-background-start[visuallyselected="true"],
.tab-background-middle[visuallyselected="true"],
.tab-background-end[visuallyselected="true"]) {

View File

@ -100,7 +100,8 @@
width: 0;
}
.tabbrowser-tabs:not([treestyletab-tabbar-position="top"])
.tabbrowser-tab:hover .tab-background:not([visuallyselected="true"]) {
.tabbrowser-tab:hover
.tab-background:not([selected="true"]):not([visuallyselected="true"]) {
background-image: none;
}
@ -180,25 +181,38 @@
/* for Mac OS X */
.tabbrowser-tabs[treestyletab-mode="vertical"]
:-moz-any(.tab-content:not([pinned="true"]):not([visuallyselected="true"]),
:-moz-any(.tab-content:not([pinned="true"]):not([selected="true"]):not([visuallyselected="true"]),
/* Firefox 51 and later */
.tab-content:not([pinned="true"])[selected="true"],
/+ old Firefox */
.tab-content:not([pinned="true"])[visuallyselected="true"]) {
border: 0 none !important;
background: transparent !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"]
:-moz-any(.tab-background-start:not([visuallyselected="true"]),
.tab-background-middle:not([visuallyselected="true"]),
.tab-background-end:not([visuallyselected="true"]),
:-moz-any(.tab-background-start:not([selected="true"]):not([visuallyselected="true"]),
.tab-background-middle:not([selected="true"]):not([visuallyselected="true"]),
.tab-background-end:not([selected="true"]):not([visuallyselected="true"]),
/* Firefox 51 and later */
.tab-background-start[selected="true"],
.tab-background-middle[selected="true"],
.tab-background-end[selected="true"],
/* old Firefox */
.tab-background-start[visuallyselected="true"],
.tab-background-middle[visuallyselected="true"],
.tab-background-end[visuallyselected="true"]) {
mask: none !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"]
:-moz-any(.tab-background-start:not([visuallyselected="true"]),
.tab-background-middle:not([visuallyselected="true"]):not([pinned]),
.tab-background-middle:not([visuallyselected="true"])[pinned]:not([titlechanged]),
.tab-background-end:not([visuallyselected="true"]),
:-moz-any(.tab-background-start:not([selected="true"]):not([visuallyselected="true"]),
.tab-background-middle:not([selected="true"]):not([visuallyselected="true"]):not([pinned]),
.tab-background-middle:not([selected="true"]):not([visuallyselected="true"])[pinned]:not([titlechanged]),
.tab-background-end:not([selected="true"]):not([visuallyselected="true"]),
/* Firefox 51 and later */
.tab-background-start[selected="true"],
.tab-background-middle[selected="true"],
.tab-background-end[selected="true"],
/* old Firefox */
.tab-background-start[visuallyselected="true"],
.tab-background-middle[visuallyselected="true"],
.tab-background-end[visuallyselected="true"]) {
@ -304,10 +318,13 @@
.tabbrowser-tab:not([visuallyselected="true"]):not([pinned]),
.tabbrowser-tabs:not([treestyletab-tabbar-position="top"])
.tabbrowser-tab
.tab-content[visuallyselected="true"]:not([pinned]),
:-moz-any(/* Firefox 51 and later */
.tab-content[selected="true"]:not([pinned]),
/* old Firefox */
.tab-content[visuallyselected="true"]:not([pinned])),
.tabbrowser-tabs:not([treestyletab-tabbar-position="top"])
.tabbrowser-tab
.tab-content:not([visuallyselected="true"]):not([pinned]) {
.tab-content:not([selected="true"]):not([visuallyselected="true"]):not([pinned]) {
padding: 0 0.2em !important;
}

View File

@ -22,8 +22,11 @@
.tabbrowser-tabs:not([treestyletab-tabbar-position="top"])
.tabbrowser-tab
.tab-background[visuallyselected="true"] {
.tabbrowser-tab[visuallyselected="true"]
:-moz-any(/* Firefox 51 and later */
.tab-background[selected="true"],
/* old Firefox */
.tab-background[visuallyselected="true"]) {
background-color: var(--tst-tab-surface-selected) !important;
background-image: -moz-linear-gradient(
top,
@ -49,7 +52,10 @@
.tabbrowser-tabs:not([treestyletab-tabbar-position="top"])
.tabbrowser-tab:hover
.tab-background[visuallyselected="true"] {
:-moz-any(/* Firefox 51 and later */
.tab-background[selected="true"],
/* old Firefox */
.tab-background[visuallyselected="true"]) {
background-color: var(--tst-tab-surface-selected-hover) !important;
background-image: -moz-linear-gradient(
top,