Bug 1363842 - Implement new toolbar button hover and active background styles. r=dao
MozReview-Commit-ID: HqGXr1a2BeG
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -23,24 +23,25 @@
rgba(255,255,255,0.7)) repeat-x;
--toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-vertical-inner-padding) + 1px);
%ifdef MOZ_PHOTON_THEME
--toolbarbutton-border-radius: 4px;
%else
--toolbarbutton-border-radius: 3px;
-%endif
--toolbarbutton-hover-background: hsla(0,0%,100%,.1) linear-gradient(hsla(0,0%,100%,.3), hsla(0,0%,100%,.1)) padding-box;
+ --toolbarbutton-active-background: hsla(0,0%,0%,.02) linear-gradient(hsla(0,0%,0%,.12), transparent) border-box;
+%endif
+
--toolbarbutton-hover-bordercolor: hsla(0,0%,0%,.2);
--toolbarbutton-hover-boxshadow: 0 1px 0 hsla(0,0%,100%,.5),
0 1px 0 hsla(0,0%,100%,.5) inset;
- --toolbarbutton-active-background: hsla(0,0%,0%,.02) linear-gradient(hsla(0,0%,0%,.12), transparent) border-box;
--toolbarbutton-active-bordercolor: hsla(0,0%,0%,.3);
--toolbarbutton-active-boxshadow: 0 1px 0 hsla(0,0%,100%,.5),
0 1px 0 hsla(0,0%,0%,.05) inset,
0 1px 1px hsla(0,0%,0%,.2) inset;
--toolbarbutton-checkedhover-backgroundcolor: hsla(0,0%,0%,.09);
--urlbar-dropmarker-url: url("chrome://browser/skin/urlbar-history-dropmarker.png");
--- a/browser/themes/shared/toolbarbuttons.inc.css
+++ b/browser/themes/shared/toolbarbuttons.inc.css
@@ -12,24 +12,30 @@
:root {
--toolbarbutton-vertical-inner-padding: 3px;
%ifndef MOZ_PHOTON_THEME
--backbutton-urlbar-overlap: 6px;
/* icon width + border + horizontal padding (without the overlap from backbutton-urlbar-overlap) */
--forwardbutton-width: 25px;
+%else
+ --toolbarbutton-hover-background: hsla(240, 5%, 5%, .1);
+ --toolbarbutton-active-background: hsla(240, 5%, 5%, .15);
%endif
}
toolbar:-moz-lwtheme {
+%ifndef MOZ_PHOTON_THEME
--toolbarbutton-hover-background: rgba(255,255,255,.25);
+ --toolbarbutton-active-background: rgba(70%,70%,70%,.25);
+%endif
+
--toolbarbutton-hover-bordercolor: rgba(0,0,0,.2);
- --toolbarbutton-active-background: rgba(70%,70%,70%,.25);
--toolbarbutton-active-bordercolor: rgba(0,0,0,.3);
--toolbarbutton-active-boxshadow: 0 0 2px rgba(0,0,0,.6) inset;
--toolbarbutton-checkedhover-backgroundcolor: rgba(85%,85%,85%,.25);
}
/* ::::: primary toolbar buttons ::::: */
@@ -264,31 +270,35 @@ toolbarbutton.bookmark-item:not(.subview
#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
%ifndef MOZ_PHOTON_THEME
@conditionalForwardWithUrlbar@ > #forward-button:not([open]):not(:active):not([disabled]):hover > .toolbarbutton-icon,
%endif
#nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon {
background: var(--toolbarbutton-hover-background);
+%ifndef MOZ_PHOTON_THEME
border-color: var(--toolbarbutton-hover-bordercolor);
box-shadow: var(--toolbarbutton-hover-boxshadow);
+%endif
}
.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"],
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
#nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
background: var(--toolbarbutton-active-background);
+%ifndef MOZ_PHOTON_THEME
border-color: var(--toolbarbutton-active-bordercolor);
box-shadow: var(--toolbarbutton-active-boxshadow);
+%endif
transition-duration: 10ms;
}
#nav-bar .toolbarbutton-1[checked]:not(:active):hover > .toolbarbutton-icon {
background-color: var(--toolbarbutton-checkedhover-backgroundcolor);
transition: background-color .4s;
}
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -18,23 +18,24 @@
--space-above-tabbar: 15px;
--toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-vertical-inner-padding) - 1px);
%ifdef MOZ_PHOTON_THEME
--toolbarbutton-border-radius: 2px;
%else
--toolbarbutton-border-radius: 1px;
+
+ --toolbarbutton-hover-background: rgba(0,0,0,.1);
+ --toolbarbutton-active-background: rgba(0,0,0,.15);
%endif
- --toolbarbutton-hover-background: rgba(0,0,0,.1);
--toolbarbutton-hover-bordercolor: rgba(0,0,0,.2);
--toolbarbutton-hover-boxshadow: none;
- --toolbarbutton-active-background: rgba(0,0,0,.15);
--toolbarbutton-active-bordercolor: rgba(0,0,0,.3);
--toolbarbutton-active-boxshadow: 0 0 0 1px rgba(0,0,0,.15) inset;
--toolbarbutton-checkedhover-backgroundcolor: rgba(0,0,0,.1);
--backbutton-border-color: var(--urlbar-border-color-hover);
--backbutton-background: rgba(255,255,255,.15);