Bug 1525193 - HTML ghost button styles r=dao
authorMark Striemer <mstriemer@mozilla.com>
Fri, 15 Mar 2019 19:19:15 +0000
changeset 522318 77dbfa3a6e551cac15d2d30ee9ce608efb0645b9
parent 522317 e08f9ad9fcbb171e7fa001d021b68a9103d431b4
child 522319 0fb1354119e7fbc2da3bc65b360c930f394c1bae
push id10871
push usercbrindusan@mozilla.com
push dateMon, 18 Mar 2019 15:49:32 +0000
treeherdermozilla-beta@018abdd16060 [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;
 }