Bug 1397278 - When typing in urlbar or search box, box size increases. r?dao
MozReview-Commit-ID: JWGC7MFY10j
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -150,48 +150,62 @@
}
#userContext-icons,
#urlbar-zoom-button {
margin-left: 6px;
margin-right: 6px;
}
+/* .urlbar-icon includes .urlbar-history-dropmarker, .urlbar-go-button,
+ .search-go-button, and the page actions, but not #pageActionSeparator. */
.urlbar-icon {
+ padding: 0 6px;
+ /* 16x16 icon with border-box sizing */
width: 28px;
- height: 28px;
- /* 28x28 box - 16x16 image = 12x12 padding, 6 on each side */
- padding: 6px;
+ height: 16px;
-moz-context-properties: fill, fill-opacity;
fill: currentColor;
fill-opacity: 0.6;
color: inherit;
+}
+
+.urlbar-icon.urlbar-page-action,
+.urlbar-icon-wrapper.urlbar-page-action > .urlbar-icon {
+ /* 28x28 box - 16x16 image = 12x12 padding, 6 on each side */
+ width: 28px;
+ height: 28px;
+ padding: 6px;
transition-property: background-color;
transition-duration: var(--toolbarbutton-hover-transition-duration);
}
-:root[uidensity=compact] .urlbar-icon {
+:root[uidensity=compact] .urlbar-icon.urlbar-page-action,
+:root[uidensity=compact] .urlbar-icon-wrapper.urlbar-page-action > .urlbar-icon {
+ /* 24x24 box - 16x16 image = 8x8 padding, 4 on each side */
width: 24px;
height: 24px;
- /* 24x24 box - 16x16 image = 8x8 padding, 4 on each side */
padding: 4px;
}
-:root[uidensity=touch] .urlbar-icon {
+:root[uidensity=touch] .urlbar-icon.urlbar-page-action,
+:root[uidensity=touch] .urlbar-icon-wrapper.urlbar-page-action > .urlbar-icon {
+ /* 30x30 box - 16x16 image = 14x14 padding, 7 on each side */
width: 30px;
height: 30px;
- /* 30x30 box - 16x16 image = 14x14 padding, 7 on each side */
padding: 7px;
}
-.urlbar-icon:hover {
+.urlbar-icon.urlbar-page-action:hover,
+.urlbar-icon-wrapper.urlbar-page-action:hover {
background-color: hsla(0,0%,80%,.4);
}
-.urlbar-icon:hover:active {
+.urlbar-icon.urlbar-page-action:hover:active,
+.urlbar-icon-wrapper.urlbar-page-action > .urlbar-icon:hover:active {
background-color: hsla(0,0%,80%,.45);
transition-duration: var(--toolbarbutton-active-transition-duration);
}
.urlbar-go-button,
.search-go-button {
list-style-image: url("chrome://browser/skin/back.svg");
width: 26px;