Bug 1298449 - Add hover effect to the zoom indicator in the location bar r=dao
For the :hover state, I used the background color that was currently being used
for the :active state. For the :active state, I bumped up the alpha from .1 to .15
to make it darker, and checked that it passes the WCAG tests.
MozReview-Commit-ID: DLeSf6XAmhp
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -972,18 +972,22 @@ toolbaritem[cui-areatype="menu-panel"] >
border: 1px solid ThreeDLightShadow;
}
#urlbar-zoom-button[animate="true"] {
animation-name: urlbar-zoom-reset-pulse;
animation-duration: 250ms;
}
+#urlbar-zoom-button:hover {
+ background-color: hsla(0,0%,0%,.1);
+}
+
#urlbar-zoom-button:hover:active {
- background-color: hsla(0,0%,0%,.1);
+ background-color: hsla(0,0%,0%,.15);
}
#urlbar-zoom-button > .toolbarbutton-text {
display: -moz-box;
}
#urlbar-zoom-button > .toolbarbutton-icon {
display: none;
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -1684,18 +1684,23 @@ toolbar .toolbarbutton-1 > .toolbarbutto
background-color: hsla(0,0%,0%,.05);
border: 1px solid hsla(0,0%,0%,.1);
}
#urlbar-zoom-button[animate="true"] {
animation-name: urlbar-zoom-reset-pulse;
animation-duration: 250ms;
}
+
+#urlbar-zoom-button:hover {
+ background-color: hsla(0,0%,0%,.1);
+}
+
#urlbar-zoom-button:hover:active {
- background-color: hsla(0,0%,0%,.1);
+ background-color: hsla(0,0%,0%,.15);
}
#urlbar-zoom-button > .toolbarbutton-text {
display: -moz-box;
}
#urlbar-zoom-button > .toolbarbutton-icon {
display: none;
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -1417,18 +1417,22 @@ html|*.urlbar-input:-moz-lwtheme::placeh
border: 1px solid ThreeDLightShadow;
}
#urlbar-zoom-button[animate="true"] {
animation-name: urlbar-zoom-reset-pulse;
animation-duration: 250ms;
}
+#urlbar-zoom-button:hover {
+ background-color: hsla(0,0%,0%,.1);
+}
+
#urlbar-zoom-button:hover:active {
- background-color: hsla(0,0%,0%,.1);
+ background-color: hsla(0,0%,0%,.15);
}
#urlbar-zoom-button > .toolbarbutton-text {
display: -moz-box;
}
#urlbar-zoom-button > .toolbarbutton-icon {
display: none;