@ -18,6 +18,10 @@ See the above repository for updates as well as full license text. */
padding-inline : 0px ! important ; /* By default, proton tabs have 2px + 2px = 4px space between them */
overflow : visible ! important ;
}
. tabbrowser-tab [ visuallyselected = "true" ] {
position : relative ;
z-index : 2 ;
}
. tab-background {
overflow : hidden ! important ;
outline : none ! important ;
@ -39,7 +43,7 @@ See the above repository for updates as well as full license text. */
content : "" ;
fill : color-mix ( in srgb , currentColor 11 % , transparent ) ;
-moz-context-properties : fill , stroke , stroke-opacity ;
left : calc ( 1 px - var ( --uc-tab-curve-size ) ) ;
left : calc ( 0 px - var ( --uc-tab-curve-size ) ) ;
background-image : url ( "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgc3Ryb2tlLXdpZHRoPSIxLjEiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgbWVldCIgdmlld0JveD0iMCAwIDE3IDE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KICA8cGF0aCBkPSJNMCAxNyBMMCAxNiBBMTYgMTYgMCAwIDAgMTYgMCBMIDE4IDAgTCAxOCAxNyBaIiBmaWxsPSJjb250ZXh0LWZpbGwiPjwvcGF0aD4NCiAgPHBhdGggZD0iTTAgMTYgQTE2IDE2IDAgMCAwIDE2IDAiIHN0cm9rZT0iY29udGV4dC1zdHJva2UiIHN0cm9rZS1vcGFjaXR5PSJjb250ZXh0LXN0cm9rZS1vcGFjaXR5IiBmaWxsPSJ0cmFuc3BhcmVudCI+PC9wYXRoPg0KPC9zdmc+" ) , var ( --lwt-header-image , none ) ;
background-size : var ( --uc-tab-curve-size ) , 0 ;
background-repeat : no-repeat , no-repeat ;
@ -51,13 +55,13 @@ See the above repository for updates as well as full license text. */
pointer-events : none ;
background-origin : border-box ;
}
. tabbrowser-tab : hover > . tab-stack :: before {
left : calc ( 0px - var ( --uc-tab-curve-size ) ) ;
}
: root [ lwtheme-image ] . tabbrowser-tab [ selected ] > . tab-stack :: before ,
: root [ lwtheme-image ] . tabbrowser-tab [ selected ] > . tab-stack :: after {
background-attachment : scroll , fixed ;
background-size : var ( --uc-tab-curve-size ) , auto ;
}
: root [ lwtheme-image ] . tabbrowser-tab [ selected ] > . tab-stack :: after {
background-position-y : bottom , calc ( var ( --tab-min-height ) - 1px ) ;
}
@ -71,17 +75,12 @@ See the above repository for updates as well as full license text. */
. tabbrowser-tab [ selected ] > . tab-stack : -moz-lwtheme :: after {
fill : var ( --lwt-selected-tab-background-color , var ( --toolbar-bgcolor ) ) ! important ;
}
. tabbrowser-tab [ selected ] > . tab-stack :: after ,
. tabbrowser-tab : hover > . tab-stack :: after {
left : auto ;
right : calc ( 0px - var ( --uc-tab-curve-size ) ) ;
transform : scaleX ( -1 ) ;
}
. tabbrowser-tab [ selected ] > . tab-stack :: after {
left : auto ;
right : calc ( 1px - var ( --uc-tab-curve-size ) ) ;
transform : scaleX ( -1 ) ;
}
. tabbrowser-tab : hover > stack > . tab-background ,
. tab-background [ selected ] {
@ -112,51 +111,51 @@ See the above repository for updates as well as full license text. */
/* OPTIONAL - COLORS - show tabs border, selected tab line and make selected tab match the main toolbar color. Also disables tab shadow */
/* Using these color options requires you to set layout.css.color-mix.enabled to true in about:config */
/ *
# navigator-toolbox { --lwt-tabs-border-color : color-mix ( in srgb , currentcolor , white 50 % ) !important ; }
: root [ lwtheme-brighttext ] # navigator-toolbox { --lwt-tabs-border-color : color-mix ( in srgb , currentcolor , black 50 % ) !important ; }
# tabbrowser-tabs { --lwt-selected-tab-background-color : var ( - - toolbar - bgcolor ) }
. tab-background [ selected ] {
border-top : none ! important ;
--toolbar-bgcolor : transparent ;
}
. tab-background : not ( : -moz-lwtheme ) {
background-color : var ( --lwt-selected-tab-background-color ) ! important ;
}
. tabbrowser-tab [ selected ] > . tab-stack :: before ,
. tabbrowser-tab [ selected ] > . tab-stack :: after {
fill : var ( --lwt-selected-tab-background-color , var ( --toolbar-bgcolor ) ) ! important ;
}
. tabbrowser-tab [ selected ] > . tab-stack :: before {
left : calc ( 1px - var ( --uc-tab-curve-size ) ) ;
/* Using these color options requires you to set layout.css.color-mix.enabled to true in about:config */
@ supports -moz-bool-pref ( "userchrome.curved_tabs.extra-border.enabled" ) {
# navigator-toolbox { --lwt-tabs-border-color : color-mix ( in srgb , currentcolor , white 50 % ) !important ; }
: root [ lwtheme-brighttext ] # navigator-toolbox { --lwt-tabs-border-color : color-mix ( in srgb , currentcolor , black 50 % ) !important ; }
# tabbrowser-tabs { --lwt-selected-tab-background-color : var ( - - toolbar - bgcolor ) }
. tab-background [ selected ] {
border-top : none ! important ;
--toolbar-bgcolor : transparent ;
}
. tab-background : not ( : -moz-lwtheme ) {
background-color : var ( --lwt-selected-tab-background-color ) ! important ;
}
. tabbrowser-tab [ selected ] > . tab-stack :: before ,
. tabbrowser-tab [ selected ] > . tab-stack :: after {
fill : var ( --lwt-selected-tab-background-color , var ( --toolbar-bgcolor ) ) ! important ;
}
. tabbrowser-tab [ selected ] > . tab-stack :: before {
left : calc ( 1px - var ( --uc-tab-curve-size ) ) ;
}
. tabbrowser-tab [ selected ] > . tab-stack :: after {
right : calc ( 1px - var ( --uc-tab-curve-size ) ) ;
}
. tab-background [ selected ] :: before {
content : "" ;
display : -moz-box ;
height : 2px ;
background : var ( --uc-tab-line-color ) ! important ;
}
# nav-bar { box-shadow : 0 -1 px 0 var ( - - lwt - tabs - border - color ) }
}
. tabbrowser-tab [ selected ] > . tab-stack :: after {
right : calc ( 1px - var ( --uc-tab-curve-size ) ) ;
}
. tab-background [ selected ] :: before {
content : "" ;
display : -moz-box ;
height : 2px ;
background : var ( --uc-tab-line-color ) ! important ;
}
# nav-bar { box-shadow : 0 -1 px 0 var ( - - lwt - tabs - border - color ) }
* /
/* OPTIONAL - Make some of the buttons in tabs toolbar rounded, which might look nicer especially with large curve size */
/ *
# tabs-newtab-button > . toolbarbutton-icon ,
# TabsToolbar # new-tab-button > . toolbarbutton-icon ,
# alltabs-button > . toolbarbutton-badge-stack ,
. tab-close-button { border-radius : 30 px !important ; }
* /
@ supports -moz-bool-pref ( "userchrome.curved_tabs.round-buttons.enabled" ) {
# tabs-newtab-button > . toolbarbutton-icon ,
# TabsToolbar # new-tab-button > . toolbarbutton-icon ,
# alltabs-button > . toolbarbutton-badge-stack ,
. tab-close-button { border-radius : 30 px !important ; }
}
/* OPTIONAL - uncomment the following to flip the curves vertically - maybe useful for tabs on bottom ? */
/ *
. tab-background { -moz- box-direction : reverse }
. tabbrowser-tab : hover > . tab-stack > . tab-background ,
. tab-background [ selected ] { border-radius : 0 0 var ( - - uc - tab - curve - size ) var ( - - uc - tab - curve - size ) !important }
. tabbrowser-tab > . tab-stack :: before { transform : scaleY ( -1 ) !important ; }
. tabbrowser-tab > . tab-stack :: after { transform : scaleY ( -1 ) scaleX ( -1 ) !important ; }
* /
@ supports -moz-bool-pref ( "userchrome.curved_tabs.flipped-curve.enabled" ) {
. tab-background { -moz- box-direction : reverse }
. tabbrowser-tab : hover > . tab-stack > . tab-background ,
. tab-background [ selected ] { border-radius : 0 0 var ( - - uc - tab - curve - size ) var ( - - uc - tab - curve - size ) !important }
. tabbrowser-tab > . tab-stack :: before { transform : scaleY ( -1 ) !important ; }
. tabbrowser-tab > . tab-stack :: after { transform : scaleY ( -1 ) scaleX ( -1 ) !important ; }
}