toolkit/themes/shared/toolbarbutton.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 toolbarbutton {
   6   appearance: auto;
   7   -moz-default-appearance: toolbarbutton;
   8   background-color: transparent;
   9   margin: 0;
  10   padding: 3px;
  11
  12   @media (-moz-platform: macos) {
  13     appearance: none;
  14     margin-inline: 2px;
  15     padding-inline: 2px;
  16   }
  17
  18   @media (-moz-platform: windows) {
  19     &:focus-visible {
  20       outline: var(--default-focusring);
  21       outline-offset: calc(-1 * var(--default-focusring-width) - 1px);
  22     }
  23   }
  24
  25   @media (-moz-platform: linux) {
  26     &:where(:hover) {
  27       color: -moz-buttonhovertext;
  28     }
  29     &:where([checked="true"], :hover:active, [open="true"]) {
  30       color: ButtonText;
  31     }
  32   }
  33
  34   &:where([disabled="true"]) {
  35     color: GrayText;
  36     text-shadow: none;
  37   }
  38 }
  39
  40 .toolbarbutton-text {
  41   margin: 0;
  42   padding: 0;
  43   vertical-align: middle;
  44 }
  45
  46 /* ::::: toolbarbutton menu ::::: */
  47
  48 .toolbarbutton-menu-dropmarker,
  49 .toolbarbutton-combined-buttons-dropmarker {
  50   appearance: none;
  51   -moz-context-properties: fill;
  52   fill: currentColor;
  53 }
  54
  55 .toolbarbutton-menu-dropmarker {
  56   content: url("chrome://global/skin/icons/arrow-down-12.svg");
  57 }
  58
  59 .toolbarbutton-combined-buttons-dropmarker {
  60   list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
  61 }
  62
  63 /* ::::: toolbarbutton badged ::::: */
  64
  65 .toolbarbutton-badge {
  66   box-sizing: border-box;
  67   overflow: hidden;
  68   white-space: nowrap;
  69   background-color: #d90000;
  70   font-size: 10px;
  71   padding: 0 2px 1px;
  72   color: #fff;
  73   text-shadow: none;
  74   border-radius: 2px;
  75   box-shadow: 0 1px 0 hsla(0, 100%, 100%, .2) inset,
  76               0 -1px 0 hsla(0, 0%, 0%, .1) inset,
  77               0 1px 0 hsla(206, 50%, 10%, .2);
  78   margin: -5px 0 0 !important;
  79   margin-inline-end: -4px !important;
  80   min-width: 14px;
  81   max-width: 20px;
  82   line-height: 10px;
  83   text-align: center;
  84   align-self: start;
  85   justify-self: end;
  86
  87   @media (-moz-platform: windows) {
  88     font-weight: bold;
  89   }
  90
  91   @media (-moz-platform: macos) {
  92     font-size: 9px;
  93     padding-top: 1px;
  94
  95     toolbar[mode="icons"] > *|* > & {
  96       margin-inline-end: -10px !important;
  97     }
  98   }
  99 }