Bug 1525193 - HTML ghost button styles r=dao
authorMark Striemer <mstriemer@mozilla.com>
Fri, 15 Mar 2019 19:19:15 +0000
changeset 464429 77dbfa3a6e55
parent 464428 e08f9ad9fcbb
child 464430 0fb1354119e7
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;
 }