toolkit/components/reader/color-input.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 .color-input-container {
   6   display: flex;
   7   position: relative;
   8   justify-content: flex-start;
   9   align-items: center;
  10   gap: var(--space-small);
  11   min-height: 46px;
  12   border: 1px solid rgba(0, 0, 0, 0.2);
  13   padding: 0 var(--space-small);
  14   border-radius: var(--border-radius-small);
  15 }
  16
  17 .color-input-container:hover {
  18   background-color: var(--toolbar-button-background-hover);
  19 }
  20
  21 #color-swatch:focus-visible {
  22   outline: none;
  23 }
  24
  25 .color-input-container:focus-within {
  26   outline: 2px solid var(--primary-color);
  27   outline-offset: var(--focus-outline-offset);
  28 }
  29
  30 .icon-container {
  31   display: flex;
  32   margin-inline: auto var(--space-xsmall);
  33 }
  34
  35 #color-swatch {
  36   appearance: none;
  37   width: 34px;
  38   height: 34px;
  39   background-color: transparent;
  40   border: none;
  41   cursor: pointer;
  42 }
  43
  44 #color-swatch::-moz-color-swatch {
  45   border-radius: var(--border-radius-circle);
  46   border: 1px solid rgba(0, 0, 0, 0.25);
  47 }