Bug 1525193 - HTML ghost button styles r=dao
authorMark Striemer <mstriemer@mozilla.com>
Fri, 15 Mar 2019 19:19:15 +0000
changeset 464429 77dbfa3a6e551cac15d2d30ee9ce608efb0645b9
parent 464428 e08f9ad9fcbb171e7fa001d021b68a9103d431b4
child 464430 0fb1354119e7fbc2da3bc65b360c930f394c1bae
push id35716
push useraciure@mozilla.com
push dateSun, 17 Mar 2019 09:42:17 +0000
treeherdermozilla-central@8ee97c045359 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1525193
milestone67.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1525193 - HTML ghost button styles r=dao Differential Revision: https://phabricator.services.mozilla.com/D21295
toolkit/mozapps/extensions/content/aboutaddons.html
toolkit/themes/shared/in-content/common.inc.css
--- a/toolkit/mozapps/extensions/content/aboutaddons.html
+++ b/toolkit/mozapps/extensions/content/aboutaddons.html
@@ -16,17 +16,17 @@
     <template name="card">
       <div class="card addon">
         <img class="card-heading-icon addon-icon"/>
         <div class="card-contents">
           <span class="addon-name"></span>
           <span class="addon-description"></span>
         </div>
         <div class="more-options-menu">
-          <button action="more-options"></button>
+          <button class="ghost-button" action="more-options"></button>
           <panel-list>
             <panel-item action="toggle-disabled"></panel-item>
             <panel-item data-l10n-id="remove-addon-button" action="remove"></panel-item>
             <panel-item-separator></panel-item-separator>
             <panel-item data-l10n-id="expand-addon-button" action="expand"></panel-item>
           </panel-list>
         </div>
       </div>
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -273,16 +273,28 @@ xul|button.primary:not([disabled="true"]
 }
 
 html|button[autofocus]:enabled:hover:active,
 html|button.primary:enabled:hover:active,
 xul|button.primary:not([disabled="true"]):hover:active {
   background-color: var(--in-content-primary-button-background-active);
 }
 
+html|button.ghost-button {
+  background-color: transparent;
+}
+
+html|button.ghost-button:enabled:hover {
+  background-color: var(--in-content-button-background);
+}
+
+html|button.ghost-button:enabled:hover:active {
+  background-color: var(--in-content-button-background-hover);
+}
+
 html|input[type="color"] {
   padding: 6px;
   width: 50px;
 }
 
 xul|menulist > xul|*.menulist-label-box > xul|*.menulist-icon[src] {
   margin-inline-end: 5px;
 }