fix tab separators not hidden from adjacent tabs

This commit is contained in:
bmFtZQ 2023-11-23 13:43:32 +08:00
parent 3b7eac9793
commit 49c270bd10

View file

@ -294,26 +294,44 @@ toolbarbutton[part="scrollbutton-down"] {
max-width: 240px !important;
}
/* tab separators */
.tabbrowser-tab:not([last-visible-tab="true"]) {
margin-inline-end: 3px !important;
/* Tab separators */
.tabbrowser-tab .tab-stack {
&::before,
&::after {
content: "";
position: absolute;
height: 20px;
inset: 0 auto;
margin-block: auto;
border-left: 1px solid transparent;
}
&::before {
left: 0;
}
&::after {
right: 0;
}
}
.tabbrowser-tab:not([selected="true"], :hover, [beforeselected-visible], [beforehovered]) .tab-stack::after {
content: "";
position: absolute;
display: block;
height: 20px;
right: -1px;
top: 6px;
border-right: 1px solid color-mix(in srgb, currentColor 34%, transparent);
/* Set separator color */
.tabbrowser-tab:not([selected], [multiselected], :hover) {
& .tab-stack::before,
&:last-of-type .tab-stack::after {
border-color: color-mix(in srgb, currentColor 34%, transparent);
}
}
/* need layout.css.has-selector.enabled */
.tabbrowser-tab:has(+ .tabbrowser-tab:is([selected="true"], :hover, [beforeselected-visible], [beforehovered])) .tab-stack::after {
display: none;
/* Hide separator when previous sibling is hovered or selected */
.tabbrowser-tab:where([selected], [multiselected], :hover) + .tabbrowser-tab:not([selected], [multiselected], :hover) .tab-stack::before {
border-color: transparent !important;
}
/* .tabbrowser-tab:not([last-visible-tab="true"]) {
margin-inline-end: -1px !important;
} */
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])>#tabbrowser-arrowscrollbox>.tabbrowser-tab[first-visible-unpinned-tab] {
margin-inline-start: 0 !important;
}