2021-02-27 09:21:50 +00:00
/ * Source file https : / / github . com / MrOtherGuy / firefox-csshacks / tree / master / chrome / buttonlike_toolbarbuttons . css made available under Mozilla Public License v . 2 . 0
See the above repository for updates as well as full license text . * /
2023-04-07 05:32:23 +00:00
/* This style makes buttons look like real buttons with border and background. Color of border and background use the same colors as unselected urlbar to make them fit together. */
2021-02-27 09:21:50 +00:00
2021-08-26 07:01:45 +00:00
: root {
2022-12-26 10:29:31 +00:00
--uc-toolbarbutton-vertical-padding : var ( --toolbarbutton-inner-padding ) ;
2021-02-27 09:21:50 +00:00
--uc-toolbarbutton-horizontal-padding : calc ( var ( --toolbarbutton-inner-padding ) + 10px ) ;
--toolbarbutton-border-radius : 3px ! important ;
}
2022-12-26 10:29:31 +00:00
: root [ uidensity = "compact" ] {
2021-02-27 09:21:50 +00:00
--uc-toolbarbutton-vertical-padding : calc ( var ( --toolbarbutton-inner-padding ) - 1px ) ;
--uc-toolbarbutton-horizontal-padding : calc ( var ( --toolbarbutton-inner-padding ) + 6px ) ;
}
2023-04-07 05:32:23 +00:00
. browser-toolbar {
2022-12-26 10:29:31 +00:00
--toolbarbutton-icon-fill : var ( --toolbar-field-color ) ;
}
2021-02-27 09:21:50 +00:00
/* size of buttons */
2023-04-07 05:32:23 +00:00
2022-12-26 10:29:31 +00:00
findbar toolbarbutton ,
2023-04-07 05:32:23 +00:00
. toolbarbutton-1 > . toolbarbutton-icon ,
. toolbarbutton-1 > . toolbarbutton-badge-stack {
2021-08-26 07:01:45 +00:00
background-color : var ( --toolbar-field-background-color , hsla ( 0 , 0 % , 100 % , . 8 ) ) ;
2021-02-27 09:21:50 +00:00
width : calc ( 2 * var ( --uc-toolbarbutton-horizontal-padding ) + 16px ) ! important ;
height : calc ( 2 * var ( --uc-toolbarbutton-vertical-padding ) + 16px ) ! important ;
fill-opacity : 0 . 8 ;
margin-inline : 2px ;
}
2023-04-07 05:32:23 +00:00
. toolbarbutton-1 . toolbarbutton-combined > : is ( . toolbarbutton-icon , . toolbarbutton-badge-stack ) {
margin-inline : 0 ! important ;
border-radius : 0 ! important ;
border-inline-end-width : 0 ! important ;
2022-12-26 10:29:31 +00:00
}
2023-04-07 05:32:23 +00:00
. toolbarbutton-1 . toolbarbutton-combined : first-child > : is ( . toolbarbutton-icon , . toolbarbutton-badge-stack ) {
border-top-left-radius : var ( --toolbarbutton-border-radius ) ! important ;
border-bottom-left-radius : var ( --toolbarbutton-border-radius ) ! important ;
}
. toolbarbutton-1 . toolbarbutton-combined : last-child > : is ( . toolbarbutton-icon , . toolbarbutton-badge-stack ) {
border-top-right-radius : var ( --toolbarbutton-border-radius ) ! important ;
border-bottom-right-radius : var ( --toolbarbutton-border-radius ) ! important ;
border-inline-end-width : 1px ! important ;
2022-12-26 10:29:31 +00:00
}
2023-04-07 05:32:23 +00:00
. toolbarbutton-1 . toolbarbutton-combined-buttons-dropmarker > . toolbarbutton-icon {
padding-inline : 3px ! important ;
margin-inline : 0 ! important ;
border-top-left-radius : 0 ! important ;
border-bottom-left-radius : 0 ! important ;
width : revert ! important ;
}
2021-02-27 09:21:50 +00:00
/* borders */
2022-12-26 10:29:31 +00:00
findbar toolbarbutton ,
2023-04-07 05:32:23 +00:00
. toolbarbutton-1 > . toolbarbutton-icon {
2021-08-26 06:24:21 +00:00
border : 1px solid var ( --toolbar-field-border-color , hsla ( 240 , 5 % , 5 % , . 55 ) ) ;
2021-02-27 09:21:50 +00:00
}
/* stacks use box-shadow as a border to prevent size from changing */
2023-04-07 05:32:23 +00:00
. toolbarbutton-1 > . toolbarbutton-badge-stack {
2022-12-26 10:29:31 +00:00
box-shadow : inset 0 0 0 1px var ( --toolbar-field-border-color , hsla ( 240 , 5 % , 5 % , . 55 ) ) ;
}
2021-02-27 09:21:50 +00:00
/* modify paddings within buttons */
2023-04-07 05:32:23 +00:00
. toolbarbutton-1 > . toolbarbutton-icon ,
. toolbarbutton-1 > . toolbarbutton-badge-stack {
2021-02-27 09:21:50 +00:00
padding : var ( --uc-toolbarbutton-vertical-padding ) var ( --uc-toolbarbutton-horizontal-padding ) ! important ;
}
2023-04-07 05:32:23 +00:00
/* Special cases */
# tabs-newtab-button > . toolbarbutton-icon {
background-color : transparent ;
2021-02-27 09:21:50 +00:00
}
2023-04-07 05:32:23 +00:00
# zoom-reset-button > . toolbarbutton-text {
background-color : var ( --toolbar-field-background-color , hsla ( 0 , 0 % , 100 % , . 8 ) ) ;
border : 1px solid var ( --toolbar-field-border-color , hsla ( 240 , 5 % , 5 % , . 55 ) ) ;
border-right-width : 0 ;
border-radius : 0 ! important ;
}
findbar toolbarbutton {
background-color : var ( --input-bgcolor , var ( --toolbarbutton-bgcolor ) ) ;
2022-12-26 10:29:31 +00:00
}
2021-02-27 09:21:50 +00:00
2023-04-07 05:32:23 +00:00
# profiler-button-button : not ( . profiler-active ) > image {
border-radius : 0 var ( --toolbarbutton-border-radius ) var ( --toolbarbutton-border-radius ) 0 ! important ;
border-inline-width : 0 1px ! important ;
}
# tabs-newtab-button > . toolbarbutton-icon {
width : revert ! important ;
height : revert ! important ;
border : revert ! important ;
padding : var ( --toolbarbutton-inner-padding ) ! important ;
}
findbar toolbarbutton {
padding-inline : var ( --uc-toolbarbutton-horizontal-padding ) ! important ;
height : revert ! important ;
margin-inline : 1px 0px ! important ;
border-width : 1px ! important ;
}
. findbar-closebutton {
margin-inline-end : 8px ! important ;
2022-12-26 10:29:31 +00:00
}