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

browser/components/aboutlogins/content/components/login-item.css

+2 −2
Original line number Diff line number Diff line
@@ -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);

}

browser/components/aboutlogins/content/components/login-list-item.css

+6 −13
Original line number Diff line number Diff line
@@ -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 {

browser/components/aboutlogins/content/components/login-list.css

+4 −3
Original line number Diff line number Diff line
@@ -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 {