Commit 38da7100 authored by Jared Wein's avatar Jared Wein
Browse files

Bug 1549809 - Tweak the colors on the page and change to semantic CSS variable names. r=MattN

With this patch the page now works correctly with in-content dark mode. Tested by setting ui.systemUsesDarkTheme=1 in about:config.

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

--HG--
extra : moz-landing-system : lando
parent b13de681
......@@ -3,7 +3,7 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
h2 {
border-bottom: 1px solid var(--grey-30);
border-bottom: 1px solid var(--in-content-box-border-color);
}
.field-label {
......@@ -23,5 +23,5 @@ h2 {
}
.meta-info:first-of-type {
border-top: 1px solid var(--grey-30);
border-top: 1px solid var(--in-content-box-border-color);
}
......@@ -3,10 +3,10 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
:host {
border-inline-start: 4px solid transparent;
border-bottom: 1px solid var(--grey-30);
display: block;
padding: 10px;
border-bottom: 1px solid var(--in-content-box-border-color);
border-inline-start: 4px solid transparent;
}
/* [hidden] isn't applying to elements in Shadow DOM. */
......@@ -15,23 +15,16 @@
}
:host(:hover) {
background-color: var(--grey-90-a10);
background-color: var(--in-content-box-background-hover);
}
:host(:hover:active) {
background-color: var(--grey-90-a20);
background-color: var(--in-content-box-background-active);
}
:host(.selected) {
border-inline-start-color: var(--blue-40);
background-color: var(--grey-20);
}
:host(.selected:hover) {
}
:host(.selected:hover:active) {
background-color: var(--grey-30);
border-inline-start-color: var(--in-content-border-highlight);
background-color: var(--in-content-box-background-hover);
}
.hostname {
......
......@@ -3,14 +3,15 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
:host {
border-inline-end: 1px solid var(--grey-30);
border-inline-end: 1px solid var(--in-content-box-border-color);
background-color: var(--in-content-box-background);
}
.meta {
display: flex;
padding: 10px;
border-bottom: 1px solid var(--grey-30);
background-color: var(--grey-20);
border-bottom: 1px solid var(--in-content-box-border-color);
background-color: var(--in-content-box-info-background);
}
.count {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment