7801318d78
This makes the tabs to draw 1px on top of each other which should make multiselected tabs look better with and without tab separators
97 lines
3.9 KiB
CSS
97 lines
3.9 KiB
CSS
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/non_floating_sharp_tabs.css made available under Mozilla Public License v. 2.0
|
|
See the above repository for updates as well as full license text. */
|
|
|
|
/* This style makes tabs and related items non-rounded and connects tabs to toolbars like in previous Firefox versions.
|
|
* You should set layout.css.color-mix.enabled to true in about:config to make colors apply properly.
|
|
* It's not strictly a requirement, but this style expects compact_proton.css to be loaded before it. */
|
|
|
|
:root[id]{
|
|
--proton-tab-block-margin: 0px !important;
|
|
--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 */
|
|
--lwt-selected-tab-background-color: var(--toolbar-bgcolor) !important;
|
|
}
|
|
|
|
/* Uncomment next line to force specific color for tab top line */
|
|
/* #tabbrowser-tabs{ --tab-line-color: blue !important; } */
|
|
|
|
/* These next two rules set a color for border around tabs and between tabs & navigation toolbars. Set to transparent to remove the border.*/
|
|
#nav-bar{
|
|
/* This overrides value in compact_proton.css */
|
|
box-shadow: 0 -1px 0 0 color-mix(in srgb, currentcolor 30%, transparent) !important;
|
|
}
|
|
.tab-background[selected]{
|
|
border-inline: 1px solid color-mix(in srgb, currentcolor 30%, transparent) !important;
|
|
}
|
|
|
|
#TabsToolbar{
|
|
--toolbarbutton-inner-padding: 7px !important;
|
|
}
|
|
/* Few exceptions for default light theme */
|
|
#navigator-toolbox:not([movingtab]):-moz-lwtheme > #titlebar > #TabsToolbar{
|
|
--toolbar-bgcolor: transparent;
|
|
}
|
|
#TabsToolbar:not(:-moz-lwtheme){ --tab-line-color: transparent; }
|
|
.tab-background[selected]:not(:-moz-lwtheme){ background: var(--toolbar-bgcolor) !important; }
|
|
|
|
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack,
|
|
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon{ border-radius: 2px !important; }
|
|
|
|
/* tabs newtab button needs some special styling... */
|
|
#tabs-newtab-button{ padding-inline: 0 !important; }
|
|
#tabbrowser-arrowscrollbox > #tabs-newtab-button > .toolbarbutton-icon{
|
|
border-radius: 0 !important;
|
|
width: initial !important;
|
|
height: initial !important;
|
|
padding: 9px !important;
|
|
}
|
|
:root[uidensity="compact"] #tabbrowser-arrowscrollbox > #tabs-newtab-button > .toolbarbutton-icon{
|
|
padding: 7px !important;
|
|
}
|
|
|
|
#scrollbutton-up,
|
|
#scrollbutton-down{ border-radius: 0 !important; border-width: 0 !important; padding-inline: 3px !important; }
|
|
|
|
/* tab shaping */
|
|
.tabbrowser-tab{ padding-inline: 0 !important; }
|
|
|
|
:root[uidensity="compact"] #tabbrowser-tabs[positionpinnedtabs] .tabbrowser-tab[pinned]{ min-height: calc(var(--tab-min-height) + 2px) !important; }
|
|
|
|
.tab-content[pinned]{ padding-inline: 11px !important; }
|
|
|
|
.tab-background{
|
|
border-radius: 0 !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.tab-background:not([selected])[multiselected]{
|
|
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{
|
|
display: -moz-box;
|
|
height: 2px;
|
|
content: "";
|
|
}
|
|
.tab-stack:hover > .tab-background::before{
|
|
background-color: inherit;
|
|
}
|
|
.tab-stack > .tab-background[selected]::before{
|
|
background-color: highlight;
|
|
background-image: linear-gradient(var(--tab-line-color),var(--tab-line-color));
|
|
}
|
|
/* Photon-like tab on hover animation for the top line */
|
|
@keyframes tab-onhover-line-anim{ from{ margin-inline: 20px } to { margin-inline: 0 } }
|
|
|
|
.tab-stack:hover > .tab-background::before{ animation: tab-onhover-line-anim 160ms }
|
|
|
|
/* Disable animation for selected and pinned tabs */
|
|
.tabbrowser-tab:is([pinned],[selected]) > .tab-stack > .tab-background::before{ animation: none }
|
|
|
|
/* moves context-line to the bottom */
|
|
.tab-context-line{ -moz-box-ordinal-group: 2; margin-inline: 10px !important; }
|