Bug 1576029 - Updates to login-list CSS. r=jaws

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

--HG--
extra : moz-landing-system : lando

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

@@ -229,7 +229,9 @@ input[type="url"][readOnly]:hover:active {
   background-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
   background-repeat: no-repeat;
   background-size: contain;
-  -moz-context-properties: fill;
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: 0.8;
 }
 
 .login-item-favicon-wrapper.hide-default-favicon {
@@ -243,6 +245,7 @@ input[type="url"][readOnly]:hover:active {
   background-image: url("chrome://global/skin/icons/warning.svg");
   background-repeat: no-repeat;
   background-position: left 10px top 10px;
+  color: #0C0C0D;
   -moz-context-properties: fill;
   fill: var(--red-90);
   box-shadow: 0 2px 8px 0 rgba(12,12,13,0.1);
@@ -278,9 +281,9 @@ a.breach-alert-link {
   min-width: 16px;
   -moz-context-properties: fill, fill-opacity;
   fill-opacity: 0;
-  fill: var(--grey-90);
+  fill: currentColor;
   inset-inline-end: 12px;
-  inset-block-start: 12px
+  inset-block-start: 12px;
 }
 
 .dismiss-breach-alert,
@@ -299,11 +302,6 @@ a.breach-alert-link {
 
     .breach-alert {
       box-shadow: 0 2px 8px 0 rgba(249,249,250,0.1);
-      color: #0C0C0D;
-    }
-
-    .login-item-favicon-wrapper {
-      fill: var(--in-content-border-hover);
     }
   }
 }

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

@@ -22,7 +22,9 @@
 
 #login-sort {
   background-color: transparent;
+  margin-inline-start: 0;
   padding-inline-start: 0;
+  padding-inline-end: 16px;
   min-height: initial;
   font: inherit;
   font-weight: 600;
@@ -68,7 +70,7 @@ ol {
   padding-inline-start: 0;
   overflow: hidden auto;
   flex-grow: 1;
-  box-shadow: inset 0 -10px 10px -10px var(--grey-90-a20);
+  box-shadow: inset 0 -1px var(--in-content-box-border-color);
 }
 
 .create-login-button {
@@ -83,6 +85,7 @@ ol {
   padding-inline-start: 12px;
   border-inline-start: 4px solid transparent;
   border-bottom: 1px solid var(--in-content-box-border-color);
+  user-select: none;
 }
 
 .login-list-item:hover {
@@ -125,7 +128,9 @@ ol {
   background-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
   background-repeat: no-repeat;
   margin-inline-end: 12px;
-  -moz-context-properties: fill;
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: 0.8;
 }
 
 .favicon-wrapper.hide-default-favicon {
@@ -159,9 +164,5 @@ ol {
     .login-list-item.breached {
       fill: var(--red-60);
     }
-
-    .favicon-wrapper {
-      fill: var(--in-content-border-hover);
-    }
   }
 }