tm24fan8/firefox-csshacks
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

tab separator lines: draw line as .tabbrowser-tab background-image

Browse Source 
This makes the line not reserve any space which is great for tab-groups
support. This patch also adds some new selectors for other tab-group
related things.

Fixes #494
This commit is contained in:
MrOtherGuy
2024-12-22 10:42:11 +02:00
parent c2db2eb76d
commit 9987cdb464
1 changed files with 14 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
chrome/tab_separator_lines.css
View File

@@ -2,23 +2,26 @@
See the above repository for updates as well as full license text. */
/* Bring back tab separator lines that were removed in Proton */
.tabbrowser-tab{
border-inline-start: 1px solid transparent !important;
border-image: 0 1 linear-gradient(
background-image: linear-gradient(
transparent 20%,
color-mix(in srgb, currentColor 20%, transparent) 20%,
color-mix(in srgb, currentColor 20%, transparent) 80%,
transparent 80%
) !important;
);
background-size: 1px 100%;
background-repeat: no-repeat;
}
.tab-group-label-container{
padding-inline-start: 2px;
}
.tabbrowser-tab:hover,
#tabbrowser-tabs:not([movingtab]) .tabbrowser-tab:hover + .tabbrowser-tab:not([first-visible-unpinned-tab]),
.tabbrowser-tab:first-child,
.tabbrowser-tab[selected],
.tabbrowser-tab[multiselected],
.tabbrowser-tab:is(:hover,:first-child,[selected],[multiselected]),
.tabbrowser-tab:is([selected],[multiselected]) + .tabbrowser-tab[hidden] + .tabbrowser-tab,
#tabbrowser-arrowscrollbox[overflowing] > .tabbrowser-tab[first-visible-unpinned-tab],
#tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[multiselected] + .tabbrowser-tab,
#tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[selected] + .tabbrowser-tab { border-image: none !important; }
#tabbrowser-tabs:not([movingtab]) .tabbrowser-tab:is([multiselected],[selected]) + .tabbrowser-tab,
tab-group[collapsed] + .tabbrowser-tab,
tab-group > .tabbrowser-tab:first-of-type,
tab-group:has(> .tabbrowser-tab:last-child:is(:hover,[selected],[multiselected])) + .tabbrowser-tab{
background-image: none;
}