From a49066b2f4d96f154d1564db831134e468eb8394 Mon Sep 17 00:00:00 2001 From: MrOtherGuy Date: Fri, 17 Jun 2022 16:26:00 +0300 Subject: [PATCH] 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. --- chrome/non_floating_sharp_tabs.css | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/chrome/non_floating_sharp_tabs.css b/chrome/non_floating_sharp_tabs.css index fd1467f..51e7aad 100644 --- a/chrome/non_floating_sharp_tabs.css +++ b/chrome/non_floating_sharp_tabs.css @@ -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; } /* 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{ border-radius: 0 !important; - width: initial !important; + width: var(--tab-min-height) !important; height: initial !important; - padding: 9px !important; -} -:root[uidensity="compact"] #tabs-newtab-button > .toolbarbutton-icon{ - padding: 7px !important; + list-style-image: none; + background-image: url(chrome://global/skin/icons/plus.svg); + background-position: center; + background-repeat: no-repeat; } #scrollbutton-up,