Web Inspector: Dark Mode: commas in CSS selectors are too dim
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / Variables.css
1 /*
2  * Copyright (C) 2015-2016 Apple Inc. All rights reserved.
3  *
4  * Redistribution and use in source and binary forms, with or without
5  * modification, are permitted provided that the following conditions
6  * are met:
7  * 1. Redistributions of source code must retain the above copyright
8  *    notice, this list of conditions and the following disclaimer.
9  * 2. Redistributions in binary form must reproduce the above copyright
10  *    notice, this list of conditions and the following disclaimer in the
11  *    documentation and/or other materials provided with the distribution.
12  *
13  * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
14  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
15  * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
16  * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
17  * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
18  * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
19  * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
20  * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
21  * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
22  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
23  * THE POSSIBILITY OF SUCH DAMAGE.
24  */
25
26 :root {
27     --z-index-highlight: 64;
28     --z-index-header: 128;
29     --z-index-resizer: 256;
30     --z-index-popover: 512;
31     --z-index-tooltip: 1024;
32     --z-index-glass-pane-for-drag: 2048;
33     --z-index-uncaught-exception-sheet: 4096;
34
35     --foreground-lightness: 0%;
36
37     --text-color: black;
38     --text-color-active: black;
39
40     --text-color-secondary: hsl(0, 0%, 50%);
41
42     /* Disabled text/glyphs */
43     --text-color-tertiary: hsl(0, 0%, 70%);
44
45     /* Dividers, separators, background fills */
46     --text-color-quaternary: hsl(0, 0%, 85%);
47
48     --background-color: white;
49
50     --background-color-content: white;
51     --background-color-code: white;
52
53     --selected-foreground-color: white;
54     --selected-secondary-text-color: hsla(0, 100%, 100%, 0.7);
55     --selected-background-color: hsl(212, 92%, 54%);
56     --selected-background-color-unfocused: hsl(0, 0%, 83%);
57     --selected-background-color-active: hsl(218, 85%, 52%);
58     --selected-background-color-hover: hsla(212, 92%, 54%, 0.5);
59     --selected-background-color-highlight: hsla(0, 0%, 100%, 0.3);
60
61     --glyph-color: hsl(0, 0%, 30%);
62     --glyph-color-pressed: hsl(0, 0%, 15%);
63     --glyph-color-disabled: hsla(0, 0%, 30%, 0.55);
64     --glyph-color-active: hsl(212, 92%, 54%);
65     --glyph-color-active-pressed: hsl(218, 85%, 52%);
66
67     --border-color: hsl(0, 0%, 70%);
68     --border-color-dark: hsl(0, 0%, 57%);
69
70     --button-background-color: white;
71     --button-background-color-hover: hsl(0, 0%, 88%);
72     --button-background-color-pressed: hsl(0, 0%, 85%);
73
74     --panel-background-color: hsl(0, 0%, 93%);
75     --panel-background-color-light: hsl(0, 0%, 96%);
76
77     --warning-background-color: hsl(43, 97%, 84%);
78     --warning-background-color-secondary: hsl(51, 87%, 93%);
79     --error-background-color: hsl(11, 100%, 80%);
80     --error-background-color-secondary: hsl(15, 100%, 90%);
81
82     --console-secondary-text-color: hsla(0, 0%, 0%, 0.33);
83     --console-prompt-min-height: 30px;
84
85     --message-text-view-font-size: 16px;
86     --message-text-view-large-font-size: 28px;
87
88     --text-color-gray-dark: hsl(0, 0%, 20%);
89     --text-color-gray-medium: hsl(0, 0%, 52%);
90     --error-text-color: hsl(0, 86%, 47%);
91
92     --value-changed-highlight: hsla(83, 100%, 48%, 0.4);
93
94     --breakpoint-fill-color: hsl(212, 45%, 54%);
95     --breakpoint-stroke-color: hsl(212, 45%, 48%);
96     --breakpoint-disabled-fill-color: hsl(212, 40%, 84%);
97     --breakpoint-disabled-stroke-color: hsl(212, 40%, 78%);
98     --breakpoint-unresolved-fill-color: hsl(0, 0%, 60%);
99     --breakpoint-unresolved-stroke-color: hsl(0, 0%, 54%);
100     --breakpoint-unresolved-disabled-fill-color: hsl(0, 0%, 84%);
101     --breakpoint-unresolved-disabled-stroke-color: hsl(0, 0%, 78%);
102
103     --syntax-highlight-number-color: hsl(248, 100%, 40%);
104     --syntax-highlight-boolean-color: hsl(309, 85%, 35%);
105     --syntax-highlight-string-color: hsl(1, 79%, 42%);
106     --syntax-highlight-link-color: hsl(240, 100%, 52%);
107     --syntax-highlight-regexp-color: hsl(20, 100%, 44%);
108     --syntax-highlight-symbol-color: hsl(172, 45%, 45%);
109     --syntax-highlight-comment-color: hsl(119, 100%, 22%);
110
111     --syntax-highlight-regex-group-color: var(--text-color-gray-medium);
112
113     --timeline-marker-z-index: 4;
114     --timeline-record-z-index: 8;
115     --timeline-selection-z-index: 16;
116
117     --memory-javascript-fill-color: hsl(269, 65%, 75%);
118     --memory-javascript-stroke-color: hsl(269, 33%, 50%);
119     --memory-images-fill-color: hsl(0, 65%, 75%);
120     --memory-images-stroke-color: hsl(0, 54%, 50%);
121     --memory-layers-fill-color: hsl(76, 49%, 75%);
122     --memory-layers-stroke-color: hsl(79, 45%, 50%);
123     --memory-page-fill-color: hsl(22, 60%, 70%);
124     --memory-page-stroke-color: hsl(22, 40%, 50%);
125     --memory-max-comparison-fill-color: hsl(220, 10%, 75%);
126     --memory-max-comparison-stroke-color: hsl(220, 10%, 55%);
127
128     --cpu-stroke-color: hsl(118, 33%, 42%);
129     --cpu-fill-color: hsl(118, 43%, 55%);
130
131     --network-header-color: hsl(204, 52%, 55%);
132     --network-system-color: hsl(79, 32%, 50%);
133     --network-pseudo-header-color: hsl(312, 35%, 51%);
134     --network-error-color: hsl(0, 54%, 50%);
135
136     --network-redirect-color: lightgrey;
137     --network-queue-color: hsl(0, 0%, 54%);
138     --network-dns-color: hsl(265, 82%, 60%);
139     --network-connect-color: hsl(46, 92%, 62%);
140     --network-secure-color: hsl(352, 81%, 59%);
141     --network-request-color: hsl(118, 56%, 65%);
142     --network-response-color: hsl(202, 61%, 59%);
143
144     --even-zebra-stripe-row-background-color: white;
145     --odd-zebra-stripe-row-background-color: hsl(0, 0%, 95%);
146     --transparent-stripe-background-gradient: linear-gradient(to bottom, transparent, transparent 50%, hsla(0, 0%, 0%, 0.03) 50%, hsla(0, 0%, 0%, 0.03)) top left / 100% 40px;
147
148     --toolbar-height: 36px;
149     --tab-bar-height: 24px;
150     --navigation-bar-height: 29px;
151
152     --slider-height: 11px;
153
154     --css-declaration-vertical-padding: 4px;
155     --css-declaration-horizontal-padding: 6px;
156 }
157
158 body.window-inactive {
159     /* FIXME: Use CSS4 color blend functions once they're available. */
160     --selected-background-color: hsla(212, 92%, 54%, 0.5);
161
162     --glyph-color-active: hsla(212, 92%, 54%, 0.5);
163     --glyph-color: hsla(0, 0%, 30%, 0.65);
164     --glyph-color-disabled: hsla(0, 0%, 30%, 0.35);
165 }
166
167 body.window-inactive * {
168     --border-color: hsl(0, 0%, 85%);
169     --border-color-dark: hsl(0, 0%, 72%);
170 }
171
172 @media (prefers-color-scheme: dark) {
173
174     :root {
175         color: var(--text-color);
176
177         --foreground-lightness: 100%;
178
179         --text-color: hsl(0, 0%, 88%);
180         --text-color-active: white;
181         --text-color-secondary: hsl(0, 0%, 65%);
182
183         /* Disabled text/glyphs */
184         --text-color-tertiary: hsl(0, 0%, 50%);
185
186         /* Dividers, separators, background fills */
187         --text-color-quaternary: hsl(0, 0%, 33%);
188
189         /* Deprecated */
190         --text-color-gray-dark: hsl(0, 0%, 75%);
191         --text-color-gray-medium: var(--text-color-secondary);
192
193         --background-color: hsl(0, 0%, 24%);
194         --background-color-secondary: hsl(0, 0%, 27%);
195         --background-color-tertiary: hsl(0, 0%, 31%);
196
197         --background-color-content: hsl(0, 0%, 21%);
198         --background-color-code: hsl(0, 0%, 21%);
199
200         --background-color-alternate: hsla(0, 0%, var(--foreground-lightness), 0.05);
201         --background-color-selected: hsla(0, 0%, var(--foreground-lightness), 0.1);
202
203         --color-button: hsl(0, 0%, 99%);
204         --color-button-active: var(--text-color-active);
205
206         --selected-foreground-color: var(--text-color-active);
207         --selected-secondary-text-color: hsla(0, 0%, var(--foreground-lightness), 0.7);
208         --selected-secondary-text-color-active: hsla(0, 0%, var(--foreground-lightness), 0.85);
209         --selected-background-color: hsl(219, 80%, 43%);
210         --selected-background-color-unfocused: hsla(0, 0%, var(--foreground-lightness), 0.15);
211         --selected-background-color-active: hsl(218, 85%, 62%);
212         --selected-background-color-hover: hsla(212, 92%, 54%, 0.5);
213         --selected-background-color-highlight: hsla(0, 0%, 100%, 0.3);
214
215         --glyph-color: hsl(0, 0%, 80%);
216         --glyph-color-pressed: hsl(0, 0%, 100%);
217         --glyph-color-disabled: hsla(0, 0%, 80%, 0.4);
218         --glyph-color-active: hsl(212, 100%, 71%);
219         --glyph-color-active-pressed: hsl(212, 92%, 74%);
220         --glyph-color-inactive: hsl(0, 0%, 36%);
221
222         --border-color: hsl(0, 0%, 33%);
223         --border-color-dark: hsl(0, 0%, 37%); /* non-semantic variable names */
224
225         --border-color-secondary: hsl(0, 0%, 27%);
226
227         --button-background-color: hsl(0, 0%, 43%);
228         --button-background-color-hover: var(--button-background-color);
229         --button-background-color-pressed: hsl(0, 0%, 55%);
230         --button-background-color-inactive: hsl(0, 0%, 28%);
231
232         --dashboard-background-color: hsl(0, 0%, 36%);
233
234         --panel-background-color: hsl(0, 0%, 24%);
235         --panel-background-color-light: hsl(0, 0%, 29%);
236
237         --error-text-color: hsl(0, 86%, 65%);
238
239         --green-highlight-background-color: hsl(120, 15%, 28%);
240         --green-highlight-text-color: hsl(80, 75%, 80%);
241
242         --yellow-highlight-background-color: hsl(13, 20%, 26%);
243         --yellow-highlight-text-color: hsl(50, 96%, 87%);
244
245         --value-changed-highlight: var(--green-highlight-background-color);
246         --value-visual-highlight: var(--yellow-highlight-background-color);
247
248         --syntax-highlight-number-color: hsl(276, 100%, 85%);
249         --syntax-highlight-boolean-color: hsl(299, 71%, 80%);
250         --syntax-highlight-string-color: hsl(28, 84%, 63%);
251         --syntax-highlight-link-color: hsl(223, 100%, 77%);
252         --syntax-highlight-regexp-color: hsl(20, 100%, 64%);
253         --syntax-highlight-symbol-color: hsl(172, 45%, 65%);
254         --syntax-highlight-comment-color: hsl(119, 40%, 72%);
255         --syntax-highlight-regex-group-color: var(--text-color-gray-medium);
256
257         --console-secondary-text-color: hsla(0, 0%, 100%, 0.45);
258
259         --warning-background-color: hsl(43, 100%, 23%);
260         --warning-background-color-secondary: hsl(21, 18%, 25%);
261         --error-background-color: hsl(11, 70%, 32%);
262         --error-background-color-secondary: hsl(6, 23%, 25%);
263
264         --memory-max-comparison-fill-color: hsl(225, 5%, 45%);
265         --memory-max-comparison-stroke-color: hsl(225, 5%, 65%);
266
267         --network-header-color: hsl(204, 52%, 55%);
268         --network-system-color: hsl(79, 95%, 50%);
269         --network-pseudo-header-color: hsl(312, 55%, 61%);
270         --network-error-color: hsl(0, 54%, 55%);
271
272         --even-zebra-stripe-row-background-color: var(--background-color);
273         --odd-zebra-stripe-row-background-color: var(--background-color-secondary);
274         --transparent-stripe-background-gradient: linear-gradient(to bottom, transparent, transparent 50%, hsla(0, 0%, 100%, 0.03) 50%, hsla(0, 0%, 100%, 0.03)) top left / 100% 40px;
275
276         --search-highlight-text-color: hsl(60, 100%, 50%);
277         --search-highlight-text-color-active: hsl(0, 0%, 0%);
278         --search-highlight-background-color: hsla(53, 83%, 53%, 0.2);
279         --search-highlight-background-color-active: hsl(60, 100%, 50%);
280         --search-highlight-underline-color: hsla(60, 100%, 50%, 0.5);
281
282         /* Invert colors yet preserve the hue */
283         --filter-invert: invert(100%) hue-rotate(180deg);
284
285         /* TODO: Use the same variable for the default theme */
286         --overlay-background: hsla(0, 0%, 24%, 0.9);
287
288         --console-message-separator: var(--text-color-quaternary);
289     }
290
291     body.window-inactive {
292         --selected-background-color: hsla(212, 92%, 64%, 0.5);
293
294         --glyph-color-active: var(--selected-background-color);
295         --glyph-color: hsl(0, 0%, 52%);
296         --glyph-color-disabled: hsla(0, 0%, 52%, 0.4);
297     }
298
299     body.window-inactive * {
300         /* These properties are duplicated so that they have higher specificity than WebKit's stylesheet.
301         Otherwise, the variable definition inside 'body.window-inactive *' in OpenSource overrides with a lighter color.
302         When merging to open source, we should guard the existing .window-inactive style with
303         '@media not all' to avoid applying the definition too broadly. */
304         --border-color: hsl(0, 0%, 33%);
305         --border-color-dark: hsl(0, 0%, 37%); /* non-semantic variable names */
306     }
307 }