sharp_tabs: draw tabs-newtab-button icon as background-image

This is done because we want the button background to fill toolbar
height, but we don't actually know how tall the toolbar is and thus
working with list-style-image + padding is going to produce stretced
icon on some systems.
This commit is contained in:
MrOtherGuy 2022-06-17 16:26:00 +03:00
parent 8dc4e1c795
commit a49066b2f4

View file

@ -40,15 +40,19 @@ See the above repository for updates as well as full license text. */
#TabsToolbar-customization-target > .toolbarbutton-1 > .toolbarbutton-icon{ border-radius: 2px !important; } #TabsToolbar-customization-target > .toolbarbutton-1 > .toolbarbutton-icon{ border-radius: 2px !important; }
/* tabs newtab button needs some special styling... */ /* tabs newtab button needs some special styling... */
#tabs-newtab-button{ padding-inline: 0 !important; } #tabs-newtab-button{
padding-inline: 0 !important;
-moz-box-align: stretch !important;
}
/* We draw the icon as background-image to get correct scaling regardless of toolbar height */
#tabs-newtab-button > .toolbarbutton-icon{ #tabs-newtab-button > .toolbarbutton-icon{
border-radius: 0 !important; border-radius: 0 !important;
width: initial !important; width: var(--tab-min-height) !important;
height: initial !important; height: initial !important;
padding: 9px !important; list-style-image: none;
} background-image: url(chrome://global/skin/icons/plus.svg);
:root[uidensity="compact"] #tabs-newtab-button > .toolbarbutton-icon{ background-position: center;
padding: 7px !important; background-repeat: no-repeat;
} }
#scrollbutton-up, #scrollbutton-up,