Bug 1429288 - Fix up app menu warning stripe colors. r?gijs
MozReview-Commit-ID: EudPyH5Nt8
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -16,22 +16,21 @@
%define buttonStateHover :not(:-moz-any([disabled],[open],:active)):-moz-any(:hover,:focus)
%define menuStateHover :not(:-moz-any([disabled],:active))[_moz-menuactive]
%define buttonStateActive :not([disabled]):-moz-any([open],:hover:active)
%define menuStateActive :not([disabled])[_moz-menuactive]:active
%define menuStateMenuActive :not([disabled])[_moz-menuactive]
%define inAnyPanel :-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
%define panelPaletteIconSize 16px
-:root {
- --appmenu-yellow-warning-border-color: hsl(45, 100%, 77%);
- --appmenu-yellow-warning-color: #FFEFBF;
- --appmenu-yellow-warning-hover-color: #FFE8A2;
- --appmenu-yellow-warning-active-color: #FFE38F;
-}
+%define appmenuWarningBackgroundColor #FFEFBF
+%define appmenuWarningBackgroundColorHover #FFE8A2
+%define appmenuWarningBackgroundColorActive #FFE38F
+%define appmenuWarningColor black
+%define appmenuWarningBorderColor hsl(45,100%,77%)
:root:not([uidensity=compact]):not([chromehidden~="toolbar"]) #PanelUI-button {
margin-inline-start: 3px;
border-inline-start: 1px solid;
border-image: linear-gradient(transparent 4px, rgba(0,0,0,.1) 4px, rgba(0,0,0,.1) calc(100% - 4px), transparent calc(100% - 4px));
border-image-slice: 1;
}
@@ -432,33 +431,34 @@ toolbarbutton[constrain-size="true"][cui
width: 16px;
height: 16px;
margin-inline-start: 10px;
margin-inline-end: 12px;
display: -moz-box;
}
.addon-banner-item {
- background-color: var(--appmenu-yellow-warning-color);
+ background-color: @appmenuWarningBackgroundColor@;
+ color: @appmenuWarningColor@;
/* Force border to override `.addon-banner-item` selector below */
- border-top: 1px solid var(--appmenu-yellow-warning-border-color) !important;
+ border-top: 1px solid @appmenuWarningBorderColor@ !important;
display: flex;
flex: 1 1 0%;
width: calc(@menuPanelWidth@ + 30px);
padding-inline-start: 15px;
border-inline-start-style: none;
-moz-image-region: rect(0, 16px, 16px, 0);
}
.addon-banner-item:hover {
- background-color: var(--appmenu-yellow-warning-hover-color);
+ background-color: @appmenuWarningBackgroundColorHover@;
}
-.addon-banner-item:active {
- background-color: var(--appmenu-yellow-warning-active-color);
+.addon-banner-item:hover:active {
+ background-color: @appmenuWarningBackgroundColorActive@;
}
.addon-banner-item > .toolbarbutton-icon {
width: 16px;
height: 16px;
}
.addon-banner-item::after {
@@ -559,29 +559,30 @@ toolbarbutton[constrain-size="true"][cui
#appMenu-fxa-container[fxastatus="unverified"] > #appMenu-fxa-status > #appMenu-fxa-label,
#appMenu-fxa-container[fxastatus="login-failed"] > #appMenu-fxa-status > #appMenu-fxa-label {
list-style-image: url(chrome://browser/skin/warning.svg);
-moz-image-region: rect(0, 16px, 16px, 0);
}
#appMenu-fxa-container[fxastatus="login-failed"],
#appMenu-fxa-container[fxastatus="unverified"] {
- background-color: var(--appmenu-yellow-warning-color);
- border-top: 1px solid var(--appmenu-yellow-warning-border-color);
- border-bottom: 1px solid var(--appmenu-yellow-warning-border-color);
+ background-color: @appmenuWarningBackgroundColor@;
+ color: @appmenuWarningColor@;
+ border-top: 1px solid @appmenuWarningBorderColor@;
+ border-bottom: 1px solid @appmenuWarningBorderColor@;
}
#appMenu-fxa-container[fxastatus="login-failed"] > #appMenu-fxa-status:hover,
#appMenu-fxa-container[fxastatus="unverified"] > #appMenu-fxa-status:hover {
- background-color: var(--appmenu-yellow-warning-hover-color);
+ background-color: @appmenuWarningBackgroundColorHover@;
}
#appMenu-fxa-container[fxastatus="login-failed"] > #appMenu-fxa-status:hover:active,
#appMenu-fxa-container[fxastatus="unverified"] > #appMenu-fxa-status:hover:active {
- background-color: var(--appmenu-yellow-warning-active-color);
+ background-color: @appmenuWarningBackgroundColorActive@;
}
.addon-banner-item > .toolbarbutton-text,
.panel-banner-item > .toolbarbutton-text {
margin: 0;
padding: 0 6px;
text-align: start;
}