Bug 1550135 - Introduce an .alternate-button class for buttons that should appear with a transparent background when not hovered. r=MattN

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

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

browser/components/aboutlogins/content/aboutLogins.html

@@ -82,11 +82,12 @@
 
     <template id="login-item-template">
       <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
+      <link rel="stylesheet" href="chrome://browser/content/aboutlogins/common.css">
       <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/login-item.css">
       <div class="header">
         <h2 class="title"></h2>
-        <button class="edit-button"></button>
-        <button class="delete-button"></button>
+        <button class="edit-button alternate-button"></button>
+        <button class="delete-button alternate-button"></button>
       </div>
       <div class="detail-row">
         <label>

browser/components/aboutlogins/content/common.css

@@ -0,0 +1,15 @@
+/* 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/. */
+
+.alternate-button {
+  background-color: transparent;
+}
+
+.alternate-button:hover {
+  background-color: var(--in-content-button-background-hover);
+}
+
+.alternate-button:hover:active {
+  background-color: var(--in-content-button-background-active);
+}

browser/components/aboutlogins/jar.mn

@@ -23,3 +23,4 @@ browser.jar:
   content/browser/aboutlogins/aboutLogins.css   (content/aboutLogins.css)
   content/browser/aboutlogins/aboutLogins.js    (content/aboutLogins.js)
   content/browser/aboutlogins/aboutLogins.html  (content/aboutLogins.html)
+  content/browser/aboutlogins/common.css        (content/common.css)