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(chrome://devtools/skin/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} 78