Bug 1429288 - Fix up app menu warning stripe colors. r?gijs draft
authorDão Gottwald <dao@mozilla.com>
Thu, 11 Jan 2018 14:40:48 +0100
changeset 719105 d25eb130b9ae8de3e4274005ab939904dd96cbc0
parent 719102 c4e4613dbe32bb218957a140e5d0bd4fe7d1e98c
child 745700 7be5ce869eeab2571164a2ba55784b4cc5d10793
push id95153
push userdgottwald@mozilla.com
push dateThu, 11 Jan 2018 13:41:10 +0000
reviewersgijs
bugs1429288
milestone59.0a1
Bug 1429288 - Fix up app menu warning stripe colors. r?gijs MozReview-Commit-ID: EudPyH5Nt8
browser/themes/shared/customizableui/panelUI.inc.css
--- 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;
 }