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

non floating sharp tabs: improve looks when using split view

Browse Source
This commit is contained in:
MrOtherGuy
2026-03-28 14:13:46 +02:00
parent d7b50d6c97
commit 875a83e8b8
1 changed files with 21 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
chrome/non_floating_sharp_tabs.css
View File

@@ -8,7 +8,6 @@ See the above repository for updates as well as full license text. */
:root[id]{
--tab-block-margin: 0px !important;
--tabs-shadow-size: 1px !important;
/* Remove next line if you want selected tab to have color other than toolbar background - then it follows your theme color */
--tab-selected-bgcolor: var(--toolbar-bgcolor) !important;
}
@@ -68,6 +67,7 @@ See the above repository for updates as well as full license text. */
}
/* Selected tab needs to be relative so it gets drawn over nav-bar top "border" */
tab-split-view-wrapper[hasactivetab],
.tabbrowser-tab[selected]{
position: relative;
z-index: 1;
@@ -78,12 +78,28 @@ See the above repository for updates as well as full license text. */
.tab-content[pinned]{ padding-inline: 11px !important; }
tab-split-view-wrapper,
.tab-background{
border-radius: 0 !important;
box-shadow: none !important;
border-top: 0 !important;
outline: none !important;
}
tab-split-view-wrapper{
padding-block: 0 !important;
align-items: stretch !important;
background-size: calc(100% - 40px) 2px;
background-position-x: center;
}
tab-split-view-wrapper .tab-background{
margin-inline: 0 !important;
}
tab-split-view-wrapper:is(:hover,[hasactivetab]){
background-image: linear-gradient(90deg, var(--tab-hover-background-color));
background-size: 100% 2px;
background-repeat: no-repeat;
transition: background-size 160ms ease !important;
}
/* This next rule set is needed for Fx 120, otherwise themes with translucent tabs would seem to have extra border separating them from toolbar below. */
:root[lwtheme] #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab > .tab-stack > .tab-background:is([selected], [multiselected]){
@@ -98,7 +114,6 @@ See the above repository for updates as well as full license text. */
background: color-mix(in srgb, currentColor 11%, transparent) !important;
margin-inline-start: -1px;
}
/* Line to mark selected tab */
.tab-background[selected]::before,
.tabbrowser-tab:hover > stack > .tab-background::before{
@@ -119,6 +134,7 @@ See the above repository for updates as well as full license text. */
.tab-stack:hover > .tab-background::before{ animation: tab-onhover-line-anim 160ms }
/* Disable animation for selected and pinned tabs */
tab-split-view-wrapper > .tabbrowser-tab > .tab-stack > .tab-background::before,
.tabbrowser-tab:is([pinned],[selected]) > .tab-stack > .tab-background::before{ animation: none }
/* moves context-line to the bottom */