toolkit/themes/shared/close-icon.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 .close-icon {
   6   appearance: none;
   7   -moz-context-properties: fill, fill-opacity;
   8   list-style-image: url(chrome://global/skin/icons/close.svg);
   9   border-radius: 4px;
  10   color: inherit;
  11   fill: currentColor;
  12   padding: 2px;
  13   width: 20px;
  14   height: auto;
  15   outline: var(--toolbarbutton-outline);
  16
  17   &:hover {
  18     outline-color: var(--toolbarbutton-hover-outline-color);
  19   }
  20
  21   &:hover:active {
  22     outline-color: var(--toolbarbutton-active-outline-color);
  23   }
  24 }
  25
  26 @media not (forced-colors) {
  27   .close-icon:hover {
  28     background-color: color-mix(in srgb, currentColor 10%, transparent);
  29   }
  30
  31   .close-icon:hover:active {
  32     background-color: color-mix(in srgb, currentColor 20%, transparent);
  33   }
  34 }
  35
  36 .close-icon > .button-icon,
  37 .close-icon > .button-box > .button-icon,
  38 .close-icon > .toolbarbutton-icon {
  39   margin: 0;
  40 }
  41
  42 .close-icon > .button-box > .button-text,
  43 .close-icon > .toolbarbutton-text {
  44   display: none;
  45 }