Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-20 00:35:44 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1551202 - Support dark theme at HTML about:addons r=jaws

Browse Source 
Most colors have been replaced with a variable that has the same color
value.

The exception is the border color at the add-on details.
`--grey-90-a20` was replaced with `--in-content-box-border-color`,
whose value is `--grey-90-a30`. This is close enough.

Differential Revision: https://phabricator.services.mozilla.com/D31508

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Rob Wu 2019-05-18 05:47:15 +00:00
parent 0fa8d73826
commit af19ba5704
4 changed files with 11 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
toolkit/mozapps/extensions/content/aboutaddons.css
View File

@ -216,7 +216,7 @@ recommended-addon-card .addon-description:not(:empty) {
}
addon-details {
color: var(--grey-60);
color: var(--in-content-deemphasized-text);
}
.addon-detail-description {
@ -225,7 +225,7 @@ addon-details {
.addon-detail-contribute {
padding: var(--card-padding);
border: 1px solid var(--grey-90-a20);
border: 1px solid var(--in-content-box-border-color);
border-radius: var(--panel-border-radius);
margin-bottom: var(--card-padding);
display: flex;
@ -252,15 +252,15 @@ addon-details {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--grey-90-a20);
border-top: 1px solid var(--in-content-box-border-color);
margin: 0 calc(var(--card-padding) * -1);
padding: var(--card-padding);
color: var(--grey-90);
color: var(--in-content-text-color);
}
.addon-detail-row.addon-detail-help-row {
display: block;
color: var(--grey-60);
color: var(--in-content-deemphasized-text);
padding-top: 4px;
padding-bottom: var(--card-padding);
border: none;

4
toolkit/mozapps/extensions/content/abuse-report-panel.css
View File

@ -31,7 +31,7 @@ html {
}
.modal-overlay-outer {
background: rgba(12, 12, 13, 0.6);
background: var(--grey-90-a60);
width: 100%;
height: 100%;
position: fixed;
@ -102,7 +102,7 @@ button.abuse-report-close-icon:hover:active {
}
.abuse-report-note {
color: var(--grey-50);
color: var(--in-content-deemphasized-text);
font-size: var(--note-font-size);
font-weight: var(--note-font-weight);
line-height: var(--line-height);

6
toolkit/mozapps/extensions/content/message-bar.css
View File

@ -8,7 +8,7 @@
}
/* MessageBar colors by message type */
/* Colors from: https://design.firefox.com/photon/components/message-bars.html#type-specific-style */
:host([type=warning]) {
background-color: var(--yellow-50);
color: var(--yellow-90);
@ -27,8 +27,8 @@
:host {
border-radius: 4px;
/* Colors used by default, and for [type=generic] message bars.*/
background-color: var(--grey-20);
color: var(--grey-90);
background-color: var(--in-content-box-info-background);
color: var(--in-content-text-color);
}
/* Make the host to behave as a block by default, but allow hidden to hide it. */

1
toolkit/mozapps/extensions/content/panel-item.css
View File

@ -1,5 +1,6 @@
button {
background-color: transparent;
color: inherit;
background-image: var(--icon);
background-position: 16px center;
background-repeat: no-repeat;