Bug 1694384 - Separate Proton AppMenu colors into a separate rule block in an include file. r=harry

This also intentionally avoids loading those colours for Linux users.

Differential Revision: https://phabricator.services.mozilla.com/D106540
This commit is contained in:
Mike Conley 2021-02-26 23:13:29 +00:00
parent 8aee77179e
commit a424f79676
10 changed files with 76 additions and 50 deletions

View File

@ -7,6 +7,12 @@
@namespace html url("http://www.w3.org/1999/xhtml");
%include ../shared/browser.inc.css
/**
* We intentionally do not include browser-custom-colors.inc.css,
* instead choosing to fall back to system colours and transparencies
* in order to accomodate the wider variety of system themes on that
* platform.
*/
:root {
--toolbar-non-lwt-bgcolor: -moz-dialog;

View File

@ -3,6 +3,12 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
%include ../../shared/customizableui/panelUI.inc.css
/**
* We intentionally do not include panelUI-custom-colors.inc.css,
* instead choosing to fall back to system colours and transparencies
* in order to accomodate the wider variety of system themes on that
* platform.
*/
#BMB_bookmarksPopup menupopup {
appearance: none;

View File

@ -5,6 +5,7 @@
@namespace html url("http://www.w3.org/1999/xhtml");
%include ../shared/browser.inc.css
%include ../shared/browser-custom-colors.inc.css
:root {
--toolbar-non-lwt-bgcolor: #f9f9fa;

View File

@ -3,6 +3,7 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
%include ../../shared/customizableui/panelUI.inc.css
%include ../../shared/customizableui/panelUI-custom-colors.inc.css
.restoreallitem > .toolbarbutton-icon {
display: none;

View File

@ -0,0 +1,14 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
@supports -moz-bool-pref("browser.proton.appmenu.enabled") {
@media not (prefers-contrast) {
:root:not(:-moz-lwtheme) {
--buttons-secondary-bgcolor: rgb(240,240,244);
--buttons-secondary-hover-bgcolor: rgb(224,224,230);
--buttons-secondary-active-bgcolor: rgb(207,207,216);
--buttons-secondary-color: rgb(91,91,102);
}
}
} /** END Proton **/

View File

@ -18,6 +18,11 @@
--tabs-navbar-shadow-size: 1px;
--short-notification-background: #0250BB;
--short-notification-gradient: #9059FF;
--buttons-secondary-bgcolor: hsla(0,0%,80%,.3);
--buttons-secondary-hover-bgcolor: hsla(0,0%,80%,.5);
--buttons-secondary-active-bgcolor: hsla(0,0%,80%,.8);
--buttons-secondary-color: currentColor;
}
@supports not -moz-bool-pref("browser.proton.enabled") {

View File

@ -0,0 +1,30 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
@supports -moz-bool-pref("browser.proton.appmenu.enabled") {
@media not (prefers-contrast) {
:root:not(:-moz-lwtheme) {
--panelview-toolbarbutton-hover-bgcolor: rgb(224,224,230);
--panelview-toolbarbutton-hover-color: inherit;
--panelview-toolbarbutton-active-bgcolor: rgb(207,207,216);
--panelview-toolbarbutton-active-color: inherit;
--panel-banner-item-color: rgb(8,64,63);
--panel-banner-item-background-color: rgb(209,255,238);
/**
* --panel-banner-item-hover-bgcolor, --panel-banner-item-active-bgcolor
* and --panel-banner-item-update-unsupported-bgcolor are temporary
* colours until the right ones are determined, which is tracked by
* bug 1692040.
*/
--panel-banner-item-hover-bgcolor: hsla(96,65%,75%,.8);
--panel-banner-item-active-bgcolor: hsl(96,65%,75%);
--panel-banner-item-update-unsupported-bgcolor: #FFE900;
--panel-banner-item-update-supported-bgcolor: rgb(0,135,135);
--panel-separator-zap-gradient: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%);
--panel-shortcut-color: rgb(91,91,102);
--panelview-toolbarbutton-focus-box-shadow: inset 0 0 0 2px rgb(0,97,224);
--panel-disabled-color: rgba(21,20,26,0.4);
}
}
} /** END Proton **/

View File

@ -32,6 +32,8 @@
--arrowpanel-menuitem-margin: 0;
--arrowpanel-menuitem-padding: 4px 12px;
--arrowpanel-menuitem-border-radius: unset;
--panel-separator-margin: 6px 0;
--panel-subview-body-padding: 6px 0;
--panelview-toolbarbutton-hover-bgcolor: var(--arrowpanel-dimmed);
--panelview-toolbarbutton-hover-color: inherit;
@ -43,9 +45,9 @@
--panel-banner-item-active-bgcolor: hsl(96,65%,75%);
--panel-banner-item-update-supported-bgcolor: #74BF43;
--panel-banner-item-update-unsupported-bgcolor: #FFE900;
--panel-separator-margin: 6px 0;
--panel-separator-zap-gradient: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%);
--panel-shortcut-color: inherit;
--panel-subview-body-padding: 6px 0;
--panelview-toolbarbutton-focus-box-shadow: inset 0 0 0 2px -moz-accent-color;
}
:root[lwt-popup-brighttext] {
@ -60,49 +62,8 @@
--arrowpanel-menuitem-margin: 0 8px;
--arrowpanel-menuitem-padding: 8px;
--arrowpanel-menuitem-border-radius: 4px;
--panelview-toolbarbutton-hover-bgcolor: rgb(224,224,230);
--panelview-toolbarbutton-hover-color: inherit;
--panelview-toolbarbutton-active-bgcolor: rgb(207,207,216);
--panelview-toolbarbutton-active-color: inherit;
--panel-banner-item-color: rgb(8,64,63);
--panel-banner-item-background-color: rgb(209,255,238);
/**
* --panel-banner-item-hover-bgcolor, --panel-banner-item-active-bgcolor
* and --panel-banner-item-update-unsupported-bgcolor are temporary
* colours until the right ones are determined, which is tracked by
* bug 1692040.
*/
--panel-banner-item-hover-bgcolor: hsla(96,65%,75%,.8);
--panel-banner-item-active-bgcolor: hsl(96,65%,75%);
--panel-banner-item-update-unsupported-bgcolor: #FFE900;
--panel-banner-item-update-supported-bgcolor: rgb(0,135,135);
--panel-separator-margin: 4px 8px;
--panel-separator-zap-gradient: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%);
--panel-shortcut-color: rgb(91,91,102);
--panel-subview-body-padding: 8px 0;
--panelview-toolbarbutton-focus-box-shadow: inset 0 0 0 2px rgb(0,97,224);
--panel-disabled-color: rgba(21,20,26,0.4);
}
:root[lwt-popup-brighttext] {
--panelview-toolbarbutton-hover-bgcolor: #00B4F5;
--panelview-toolbarbutton-hover-color: #FFFFFF;
--panelview-toolbarbutton-active-bgcolor: #008DEB;
--panelview-toolbarbutton-active-color: #FFFFFF;
/**
* --panel-banner-item-color, --panel-banner-item-background-color,
* --panel-banner-item-hover-bgcolor and --panel-banner-item-active-bgcolor
* are temporary colours until the right ones are determined, which is
* tracked by bug 1692040.
*/
--panel-banner-item-color: @appmenuWarningColorBrightText@;
--panel-banner-item-background-color: rgba(48,230,11,.1);
--panel-banner-item-hover-bgcolor: rgba(48,230,11,.15);
--panel-banner-item-active-bgcolor: rgba(48,230,11,.2);
}
} /*** END proton ***/
@ -819,17 +780,17 @@ toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton
#appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2 {
padding: 6px 12px;
background-color: rgb(240,240,244); /** Named color: Theme Buttons / Secondary **/
background-color: var(--buttons-secondary-bgcolor);
font-size: 11px;
font-weight: 600;
}
#appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2:hover {
background-color: rgb(224,224,230); /** Named color: Theme Buttons / Secondary Hover **/
background-color: var(--buttons-secondary-hover-bgcolor);
}
#appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2:active {
background-color: rgb(207,207,216); /** Named color: Light Theme Buttons / Secondary Pressed **/
background-color: var(--buttons-secondary-active-bgcolor);
}
#fxa-manage-account-button > vbox > label,
@ -1336,7 +1297,7 @@ panelview .toolbarbutton-1,
#appMenu-zoomEnlarge-button2 > .toolbarbutton-icon,
#appMenu-fullscreen-button2 > .toolbarbutton-icon {
-moz-context-properties: fill;
fill: rgb(91,91,102); /** Named color: Dark Grey / 05 **/
fill: var(--buttons-secondary-color);
}
#appMenu-zoomReduce-button2 > .toolbarbutton-icon,
@ -1351,19 +1312,19 @@ panelview .toolbarbutton-1,
#appMenu-zoomReduce-button2 > .toolbarbutton-icon,
#appMenu-zoomEnlarge-button2 > .toolbarbutton-icon,
#appMenu-fullscreen-button2 > .toolbarbutton-icon {
background-color: rgb(240,240,244); /** Named color: Theme Buttons / Secondary **/
background-color: var(--buttons-secondary-bgcolor);
}
#appMenu-zoomReduce-button2@buttonStateHover@ > .toolbarbutton-icon,
#appMenu-zoomEnlarge-button2@buttonStateHover@ > .toolbarbutton-icon,
#appMenu-fullscreen-button2@buttonStateHover@ > .toolbarbutton-icon {
background-color: rgb(224,224,230); /** Named color: Theme Buttons / Secondary Hover **/
background-color: var(--buttons-secondary-hover-bgcolor);
}
#appMenu-zoomReduce-button2@buttonStateActive@ > .toolbarbutton-icon,
#appMenu-zoomEnlarge-button2@buttonStateActive@ > .toolbarbutton-icon,
#appMenu-fullscreen-button2@buttonStateActive@ > .toolbarbutton-icon {
background-color: rgb(207,207,216); /** Named color: Light Theme Buttons / Secondary Pressed **/
background-color: var(--buttons-secondary-active-bgcolor);
}
#appMenu-zoomReduce-button2@buttonStateFocus@ > .toolbarbutton-icon,

View File

@ -5,6 +5,7 @@
@namespace html url("http://www.w3.org/1999/xhtml");
%include ../shared/browser.inc.css
%include ../shared/browser-custom-colors.inc.css
%filter substitution
%define glassShadowColor hsla(240,5%,5%,0.3)

View File

@ -3,6 +3,7 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
%include ../../shared/customizableui/panelUI.inc.css
%include ../../shared/customizableui/panelUI-custom-colors.inc.css
/* bookmark panel submenus */