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