devtools/client/themes/accessibility-color-contrast.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 /* Classes used to style the color contrast section in the Accessibility
   6  * Checks panel and color picker tooltip across the Inspector panel.
   7  *
   8  * The section consists of:
   9  *   - contrast ratio value (numeric + score badge (AA/AAA/FAIL)):
  10  *       Only shows up if contrast ratio can be calculated.
  11  *   - large text indicator badge:
  12  *       Only shows up if the selected text node contains large text.
  13  */
  14 .accessibility-color-contrast {
  15   position: relative;
  16   display: flex;
  17   cursor: default;
  18   height: inherit;
  19   align-items: baseline;
  20 }
  21
  22 .accessibility-color-contrast .accessibility-contrast-value:empty:after {
  23   display: none;
  24 }
  25
  26 .accessibility-color-contrast .accessibility-contrast-value:after {
  27   margin-inline-start: 4px;
  28 }
  29
  30 .accessibility-color-contrast
  31   .accessibility-contrast-value.AA:after,
  32 .accessibility-color-contrast
  33   .accessibility-contrast-value.AAA:after {
  34   color: var(--theme-highlight-green);
  35 }
  36
  37 .accessibility-color-contrast
  38   .accessibility-contrast-value.FAIL:after {
  39   color: var(--theme-icon-error-color);
  40   display: inline-block;
  41   width: 12px;
  42   height: 12px;
  43   content: "";
  44   vertical-align: -2px;
  45   background-image: url(resource://devtools-shared-images/error-small.svg);
  46   background-position: center;
  47   background-repeat: no-repeat;
  48   -moz-context-properties: fill;
  49   fill: currentColor;
  50 }
  51
  52 .accessibility-color-contrast
  53   .accessibility-contrast-value.AA:after {
  54   content: "AA\2713";
  55   unicode-bidi: isolate;
  56 }
  57
  58 .accessibility-color-contrast
  59   .accessibility-contrast-value.AAA:after {
  60   content: "AAA\2713";
  61   unicode-bidi: isolate;
  62 }
  63
  64 .accessibility-color-contrast .accessibility-color-contrast-separator:before {
  65   content: "–";
  66   margin-inline-start: 4px;
  67 }
  68
  69 .accessibility-color-contrast-large-text {
  70   background-color: var(--badge-background-color);
  71   color: var(--badge-color);
  72   outline: 1px solid var(--badge-border-color);
  73   padding: 0px 2px;
  74   margin-inline-start: 6px;
  75   line-height: initial;
  76   user-select: none;
  77 }