Bug 1397285 - Set standard toolbarbutton-1 icon size as width rather than max-width to reserve space for icons while they're loading. r?johannh
MozReview-Commit-ID: 28cKHeOamDh
--- a/browser/themes/shared/toolbarbuttons.inc.css
+++ b/browser/themes/shared/toolbarbuttons.inc.css
@@ -52,17 +52,17 @@ toolbar[brighttext] {
}
.toolbarbutton-1 > .toolbarbutton-icon {
margin-inline-end: 0;
}
.toolbarbutton-1 > .toolbarbutton-icon,
.toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon {
- max-width: 16px;
+ width: 16px;
}
#TabsToolbar .toolbarbutton-1,
.tabbrowser-arrowscrollbox > .scrollbutton-up,
.tabbrowser-arrowscrollbox > .scrollbutton-down {
margin: 0 0 var(--tab-toolbar-navbar-overlap);
}
@@ -113,17 +113,17 @@ toolbar .toolbarbutton-1 > .toolbarbutto
padding: var(--toolbarbutton-inner-padding);
border-radius: var(--toolbarbutton-border-radius);
transition-property: background-color, border-color, box-shadow;
transition-duration: var(--toolbarbutton-hover-transition-duration);
}
toolbar .toolbarbutton-1 > .toolbarbutton-icon {
/* horizontal padding + actual icon width */
- max-width: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
+ width: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
}
.bookmark-item > .toolbarbutton-menu-dropmarker,
toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
display: none;
}
toolbar .toolbarbutton-1 > .toolbarbutton-text {
@@ -209,27 +209,27 @@ toolbar .toolbarbutton-1[checked]:not(:a
}
:root:not([uidensity=compact]) #back-button > .toolbarbutton-icon {
background-color: var(--backbutton-background);
background-origin: padding-box;
background-clip: padding-box;
border: 1px solid var(--backbutton-border-color);
border-radius: 10000px;
- max-width: 32px;
+ width: 32px;
padding: 7px;
}
:root[uidensity=touch] #back-button {
padding-top: 1px;
padding-bottom: 1px;
}
:root[uidensity=touch] #back-button > .toolbarbutton-icon {
- max-width: 38px;
+ width: 38px;
padding: 10px;
}
:root:not([uidensity=compact]) #back-button:not([disabled]):not([open]):hover > .toolbarbutton-icon {
background-color: var(--backbutton-hover-background) !important;
box-shadow: 0 1px 6px hsla(0,0%,0%,.1);
border-color: hsla(240,5%,5%,.35);
}