/ * 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 ] {
--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 ;
--lwt-selected-tab-background-color : var ( --toolbar-bgcolor ) ! important ; /* this is same for fx < 119 */
}
/* Uncomment next line to force specific color for tab top line */
/* #tabbrowser-tabs{ --lwt-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 ;
border-bottom-color : transparent ! important ;
}
# TabsToolbar {
--toolbarbutton-inner-padding : 7px ! important ;
}
/* Few exceptions for default light theme */
: root [ lwtheme ] # navigator-toolbox : not ( [ movingtab ] ) > # titlebar > # TabsToolbar {
--toolbar-bgcolor : transparent ;
}
/ * Uncomment this for Fx < 119
. tab-background [ selected ] : not ( : -moz-lwtheme ) { background : var ( - - toolbar - bgcolor ) !important ; }
* /
# TabsToolbar-customization-target > . toolbarbutton-1 > . toolbarbutton-badge-stack ,
# TabsToolbar-customization-target > . toolbarbutton-1 > . toolbarbutton-icon { border-radius : 2 px !important ; }
/* tabs newtab button needs some special styling... */
# tabs-newtab-button {
padding-inline : 0 ! important ;
align-items : stretch ! important ;
}
/* We draw the icon as background-image to get correct scaling regardless of toolbar height */
# tabs-newtab-button > . toolbarbutton-icon {
border-radius : 0 ! important ;
width : var ( --tab-min-height ) ! important ;
height : initial ! important ;
list-style-image : none ;
background-image : url ( chrome : / / global / skin / icons / plus . svg ) ;
background-position : center ;
background-repeat : no-repeat ;
}
# scrollbutton-up ,
# scrollbutton-down {
border-radius : 0 ! important ;
border-width : 0 ! important ;
padding-inline : 3px ! important ;
margin-bottom : var ( --uc-compat-scrollbutton-margin , 0px ) ! important ; /* set in hide_tabs_scrollbuttons.css */
}
/* This is for hide_tabs_scrollbuttons.css compatibility since we modify scrollbutton width */
# tabbrowser-tabs [ overflow ] {
--uc-scrollbox-base-margin : -22px ! important ;
}
/* Selected tab needs to be relative so it gets drawn over nav-bar top "border" */
. tabbrowser-tab [ selected ] {
position : relative ;
z-index : 1 ;
}
/* 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 : 11 px !important ; }
. tab-background {
border-radius : 0 ! important ;
box-shadow : none ! important ;
border-top : 0 ! important ;
outline : none ! 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-arrowscrollbox > . tabbrowser-tab > . tab-stack > . tab-background : is ( [ selected ] , [ multiselected ] ) {
background-attachment : scroll , fixed , fixed ! important ;
background-color : transparent ! important ;
background-image : linear-gradient ( var ( --tab-selected-bgcolor , transparent ) , var ( --tab-selected-bgcolor , transparent ) ) , var ( --lwt-additional-images , none ) , var ( --lwt-header-image , none ) ! important ; ;
background-position : 0 0 , var ( --lwt-background-alignment ) , right top ! important ;
background-repeat : repeat-x , var ( --lwt-background-tiling ) , no-repeat ! important ;
background-size : auto 100 % , var ( --lwt-background-size , auto auto ) , auto auto ! 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 : flex ;
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 ( --lwt-tab-line-color ) , var ( --lwt-tab-line-color ) ) ;
}
/* Photon-like tab on hover animation for the top line */
@ keyframes tab-onhover-line-anim { from { margin-inline : 20 px } to { margin-inline : 0 } }
. tab-stack : hover > . tab-background :: before { animation : tab-onhover-line-anim 160 ms }
/* 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 {
order : 2 ;
margin-inline : 10px ! important ;
}
# titlebar {
will-change : unset ! important ;
transition : none ! important ;
opacity : 1 ! important ;
}