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; max-width: 240px !important;
} }
/* tab separators */ /* Tab separators */
.tabbrowser-tab:not([last-visible-tab="true"]) { .tabbrowser-tab .tab-stack {
margin-inline-end: 3px !important; &::before,
} &::after {
.tabbrowser-tab:not([selected="true"], :hover, [beforeselected-visible], [beforehovered]) .tab-stack::after {
content: ""; content: "";
position: absolute; position: absolute;
display: block;
height: 20px; height: 20px;
right: -1px; inset: 0 auto;
top: 6px; margin-block: auto;
border-right: 1px solid color-mix(in srgb, currentColor 34%, transparent); border-left: 1px solid transparent;
} }
/* need layout.css.has-selector.enabled */ &::before {
.tabbrowser-tab:has(+ .tabbrowser-tab:is([selected="true"], :hover, [beforeselected-visible], [beforehovered])) .tab-stack::after { left: 0;
display: none;
} }
&::after {
right: 0;
}
}
/* 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);
}
}
/* 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] { #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])>#tabbrowser-arrowscrollbox>.tabbrowser-tab[first-visible-unpinned-tab] {
margin-inline-start: 0 !important; margin-inline-start: 0 !important;
} }