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