--- a/browser/themes/shared/toolbarbuttons.inc.css
+++ b/browser/themes/shared/toolbarbuttons.inc.css
@@ -1,15 +1,14 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
:root {
--toolbarbutton-hover-transition-duration: 150ms;
- --toolbarbutton-active-transition-duration: 10ms;
--toolbarbutton-inner-padding: 6px;
/* These hover and active colors should work on both light and dark
backgrounds. We'll later set colors that cater for light and dark
backgrounds specifically when we can detect them. */
--toolbarbutton-hover-background: hsla(0,0%,70%,.4);
--toolbarbutton-active-background: hsla(0,0%,70%,.6);
@@ -168,35 +167,36 @@ toolbar .toolbaritem-combined-buttons:no
background-size: 1px 16px;
opacity: .2;
}
toolbar[brighttext] .toolbaritem-combined-buttons > separator {
opacity: .3;
}
+#PersonalToolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover,
.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover,
.findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([disabled="true"]):not([open]),
toolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
toolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
toolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack {
background-color: var(--toolbarbutton-hover-background);
color: inherit;
}
+#PersonalToolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active),
.findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
toolbarbutton.bookmark-item:not(.subviewbutton):hover:active:not([disabled="true"]),
toolbarbutton.bookmark-item[open="true"],
toolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
toolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
toolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
background-color: var(--toolbarbutton-active-background);
- transition-duration: var(--toolbarbutton-active-transition-duration);
color: inherit;
}
toolbar .toolbarbutton-1[checked]:not(:active):hover > .toolbarbutton-icon {
background-color: var(--toolbarbutton-hover-background);
transition: background-color .4s;
}
@@ -287,16 +287,18 @@ toolbarbutton.bookmark-item {
}
/* Not in a :not(...) clause in the rule above to avoid unduly increasing
* that rule's specificity. */
#bookmarks-toolbar-placeholder {
max-width: unset;
}
+#PersonalToolbar .toolbarbutton-1 > .toolbarbutton-icon,
+#PersonalToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack,
.bookmark-item > .toolbarbutton-icon {
width: 16px;
height: 16px;
}
/* Force the display of the label for bookmarks */
.bookmark-item > .toolbarbutton-text {
display: -moz-box !important;
@@ -306,8 +308,25 @@ toolbarbutton.bookmark-item {
margin-inline-end: 4px;
}
/* Remove a pixel of margin on the end so that the badge doesn't
* overflow the toolbar and push the button into the overflow menu. */
:root[uidensity=compact] .toolbarbutton-badge {
margin-inline-end: -7px !important;
}
+
+/* To allow toolbarbuttons in the bookmarks toolbar to grow in
+ * height with the toolbar (like bookmark items), we apply background
+ * and padding to the buttons, not the button contents. This rule
+ * overrides attributes that would otherwise be duplicated. */
+#PersonalToolbar .toolbarbutton-1 > .toolbarbutton-icon,
+#PersonalToolbar .toolbarbutton-1 > .toolbarbutton-text,
+#PersonalToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack {
+ padding: 0 !important;
+ background: none !important;
+ min-height: 16px;
+}
+
+#PersonalToolbar .toolbarbutton-1 {
+ padding: 0 var(--toolbarbutton-inner-padding);
+ border-radius: var(--toolbarbutton-border-radius);
+}