775f1f6105f828206141732ee7f1501378dbea73
[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     /* Dividers, separators, background fills */
43     --text-color-quaternary: hsl(0, 0%, 85%);
44
45     --background-color: white;
46
47     --background-color-content: white;
48     --background-color-code: white;
49
50     --selected-foreground-color: white;
51     --selected-secondary-text-color: hsla(0, 100%, 100%, 0.7);
52     --selected-background-color: hsl(212, 92%, 54%);
53     --selected-background-color-unfocused: hsl(0, 0%, 83%);
54     --selected-background-color-active: hsl(218, 85%, 52%);
55     --selected-background-color-hover: hsla(212, 92%, 54%, 0.5);
56     --selected-background-color-highlight: hsla(0, 0%, 100%, 0.3);
57
58     --glyph-color: hsl(0, 0%, 30%);
59     --glyph-color-pressed: hsl(0, 0%, 15%);
60     --glyph-color-disabled: hsla(0, 0%, 30%, 0.55);
61     --glyph-color-active: hsl(212, 92%, 54%);
62     --glyph-color-active-pressed: hsl(218, 85%, 52%);
63
64     --border-color: hsl(0, 0%, 70%);
65     --border-color-dark: hsl(0, 0%, 57%);
66
67     --button-background-color: white;
68     --button-background-color-hover: hsl(0, 0%, 88%);
69     --button-background-color-pressed: hsl(0, 0%, 85%);
70
71     --panel-background-color: hsl(0, 0%, 93%);
72     --panel-background-color-light: hsl(0, 0%, 96%);
73
74     --warning-background-color: hsl(43, 97%, 84%);
75     --warning-background-color-secondary: hsl(51, 87%, 93%);
76     --error-background-color: hsl(11, 100%, 80%);
77     --error-background-color-secondary: hsl(15, 100%, 90%);
78
79     --console-secondary-text-color: hsla(0, 0%, 0%, 0.33);
80     --console-prompt-min-height: 30px;
81
82     --message-text-view-font-size: 16px;
83     --message-text-view-large-font-size: 28px;
84
85     --text-color-gray-dark: hsl(0, 0%, 20%);
86     --text-color-gray-medium: hsl(0, 0%, 52%);
87     --error-text-color: hsl(0, 86%, 47%);
88
89     --value-changed-highlight: hsla(83, 100%, 48%, 0.4);
90
91     --breakpoint-fill-color: hsl(212, 45%, 54%);
92     --breakpoint-stroke-color: hsl(212, 45%, 48%);
93     --breakpoint-disabled-fill-color: hsl(212, 40%, 84%);
94     --breakpoint-disabled-stroke-color: hsl(212, 40%, 78%);
95     --breakpoint-unresolved-fill-color: hsl(0, 0%, 60%);
96     --breakpoint-unresolved-stroke-color: hsl(0, 0%, 54%);
97     --breakpoint-unresolved-disabled-fill-color: hsl(0, 0%, 84%);
98     --breakpoint-unresolved-disabled-stroke-color: hsl(0, 0%, 78%);
99
100     --syntax-highlight-number-color: hsl(248, 100%, 40%);
101     --syntax-highlight-boolean-color: hsl(309, 85%, 35%);
102     --syntax-highlight-string-color: hsl(1, 79%, 42%);
103     --syntax-highlight-link-color: hsl(240, 100%, 52%);
104     --syntax-highlight-regexp-color: hsl(20, 100%, 44%);
105     --syntax-highlight-symbol-color: hsl(172, 45%, 45%);
106     --syntax-highlight-comment-color: hsl(119, 100%, 22%);
107
108     --syntax-highlight-regex-group-color: var(--text-color-gray-medium);
109
110     --timeline-marker-z-index: 4;
111     --timeline-record-z-index: 8;
112     --timeline-selection-z-index: 16;
113
114     --memory-javascript-fill-color: hsl(269, 65%, 75%);
115     --memory-javascript-stroke-color: hsl(269, 33%, 50%);
116     --memory-images-fill-color: hsl(0, 65%, 75%);
117     --memory-images-stroke-color: hsl(0, 54%, 50%);
118     --memory-layers-fill-color: hsl(76, 49%, 75%);
119     --memory-layers-stroke-color: hsl(79, 45%, 50%);
120     --memory-page-fill-color: hsl(22, 60%, 70%);
121     --memory-page-stroke-color: hsl(22, 40%, 50%);
122     --memory-max-comparison-fill-color: hsl(220, 10%, 75%);
123     --memory-max-comparison-stroke-color: hsl(220, 10%, 55%);
124
125     --cpu-stroke-color: hsl(118, 33%, 42%);
126     --cpu-fill-color: hsl(118, 43%, 55%);
127
128     --network-header-color: hsl(204, 52%, 55%);
129     --network-system-color: hsl(79, 32%, 50%);
130     --network-pseudo-header-color: hsl(312, 35%, 51%);
131     --network-error-color: hsl(0, 54%, 50%);
132
133     --network-redirect-color: lightgrey;
134     --network-queue-color: hsl(0, 0%, 54%);
135     --network-dns-color: hsl(265, 82%, 60%);
136     --network-connect-color: hsl(46, 92%, 62%);
137     --network-secure-color: hsl(352, 81%, 59%);
138     --network-request-color: hsl(118, 56%, 65%);
139     --network-response-color: hsl(202, 61%, 59%);
140
141     --even-zebra-stripe-row-background-color: white;
142     --odd-zebra-stripe-row-background-color: hsl(0, 0%, 95%);
143     --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;
144
145     --toolbar-height: 36px;
146     --tab-bar-height: 24px;
147     --navigation-bar-height: 29px;
148
149     --slider-height: 11px;
150
151     --css-declaration-vertical-padding: 4px;
152     --css-declaration-horizontal-padding: 6px;
153 }
154
155 body.window-inactive {
156     /* FIXME: Use CSS4 color blend functions once they're available. */
157     --selected-background-color: hsla(212, 92%, 54%, 0.5);
158
159     --glyph-color-active: hsla(212, 92%, 54%, 0.5);
160     --glyph-color: hsla(0, 0%, 30%, 0.65);
161     --glyph-color-disabled: hsla(0, 0%, 30%, 0.35);
162 }
163
164 body.window-inactive * {
165     --border-color: hsl(0, 0%, 85%);
166     --border-color-dark: hsl(0, 0%, 72%);
167 }
168
169 @media (prefers-color-scheme: dark) {
170
171     :root {
172         color: var(--text-color);
173
174         --foreground-lightness: 100%;
175
176         --text-color: hsl(0, 0%, 88%);
177         --text-color-active: white;
178         --text-color-secondary: hsl(0, 0%, 65%);
179
180         /* Disabled text/glyphs */
181         --text-color-tertiary: hsl(0, 0%, 50%);
182
183         /* Dividers, separators, background fills */
184         --text-color-quaternary: hsl(0, 0%, 33%);
185
186         /* Deprecated */
187         --text-color-gray-dark: hsl(0, 0%, 75%);
188         --text-color-gray-medium: var(--text-color-secondary);
189
190         --background-color: hsl(0, 0%, 24%);
191         --background-color-secondary: hsl(0, 0%, 27%);
192         --background-color-tertiary: hsl(0, 0%, 31%);
193
194         --background-color-content: hsl(0, 0%, 21%);
195         --background-color-code: hsl(0, 0%, 21%);
196
197         --background-color-alternate: hsla(0, 0%, var(--foreground-lightness), 0.05);
198         --background-color-selected: hsla(0, 0%, var(--foreground-lightness), 0.1);
199
200         --color-button: hsl(0, 0%, 99%);
201         --color-button-active: var(--text-color-active);
202
203         --selected-foreground-color: var(--text-color-active);
204         --selected-secondary-text-color: hsla(0, 0%, var(--foreground-lightness), 0.7);
205         --selected-secondary-text-color-active: hsla(0, 0%, var(--foreground-lightness), 0.85);
206         --selected-background-color: hsl(219, 80%, 43%);
207         --selected-background-color-unfocused: hsla(0, 0%, var(--foreground-lightness), 0.15);
208         --selected-background-color-active: hsl(218, 85%, 62%);
209         --selected-background-color-hover: hsla(212, 92%, 54%, 0.5);
210         --selected-background-color-highlight: hsla(0, 0%, 100%, 0.3);
211
212         --glyph-color: hsl(0, 0%, 80%);
213         --glyph-color-pressed: hsl(0, 0%, 100%);
214         --glyph-color-disabled: hsla(0, 0%, 80%, 0.4);
215         --glyph-color-active: hsl(212, 100%, 71%);
216         --glyph-color-active-pressed: hsl(212, 92%, 74%);
217         --glyph-color-inactive: hsl(0, 0%, 36%);
218
219         --border-color: hsl(0, 0%, 33%);
220         --border-color-dark: hsl(0, 0%, 37%); /* non-semantic variable names */
221
222         --border-color-secondary: hsl(0, 0%, 27%);
223
224         --button-background-color: hsl(0, 0%, 43%);
225         --button-background-color-hover: var(--button-background-color);
226         --button-background-color-pressed: hsl(0, 0%, 55%);
227         --button-background-color-inactive: hsl(0, 0%, 28%);
228
229         --dashboard-background-color: hsl(0, 0%, 36%);
230
231         --panel-background-color: hsl(0, 0%, 24%);
232         --panel-background-color-light: hsl(0, 0%, 29%);
233
234         --error-text-color: hsl(0, 86%, 65%);
235
236         --green-highlight-background-color: hsl(120, 15%, 28%);
237         --green-highlight-text-color: hsl(80, 75%, 80%);
238
239         --yellow-highlight-background-color: hsl(13, 20%, 26%);
240         --yellow-highlight-text-color: hsl(50, 96%, 87%);
241
242         --value-changed-highlight: var(--green-highlight-background-color);
243         --value-visual-highlight: var(--yellow-highlight-background-color);
244
245         --syntax-highlight-number-color: hsl(276, 100%, 85%);
246         --syntax-highlight-boolean-color: hsl(299, 71%, 80%);
247         --syntax-highlight-string-color: hsl(28, 84%, 63%);
248         --syntax-highlight-link-color: hsl(223, 100%, 77%);
249         --syntax-highlight-regexp-color: hsl(20, 100%, 64%);
250         --syntax-highlight-symbol-color: hsl(172, 45%, 65%);
251         --syntax-highlight-comment-color: hsl(119, 40%, 72%);
252         --syntax-highlight-regex-group-color: var(--text-color-gray-medium);
253
254         --console-secondary-text-color: hsla(0, 0%, 100%, 0.45);
255
256         --warning-background-color: hsl(43, 100%, 23%);
257         --warning-background-color-secondary: hsl(21, 18%, 25%);
258         --error-background-color: hsl(11, 70%, 32%);
259         --error-background-color-secondary: hsl(6, 23%, 25%);
260
261         --memory-max-comparison-fill-color: hsl(225, 5%, 45%);
262         --memory-max-comparison-stroke-color: hsl(225, 5%, 65%);
263
264         --network-header-color: hsl(204, 52%, 55%);
265         --network-system-color: hsl(79, 95%, 50%);
266         --network-pseudo-header-color: hsl(312, 55%, 61%);
267         --network-error-color: hsl(0, 54%, 55%);
268
269         --even-zebra-stripe-row-background-color: var(--background-color);
270         --odd-zebra-stripe-row-background-color: var(--background-color-secondary);
271         --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;
272
273         --search-highlight-text-color: hsl(60, 100%, 50%);
274         --search-highlight-text-color-active: hsl(0, 0%, 0%);
275         --search-highlight-background-color: hsla(53, 83%, 53%, 0.2);
276         --search-highlight-background-color-active: hsl(60, 100%, 50%);
277         --search-highlight-underline-color: hsla(60, 100%, 50%, 0.5);
278
279         /* Invert colors yet preserve the hue */
280         --filter-invert: invert(100%) hue-rotate(180deg);
281
282         /* TODO: Use the same variable for the default theme */
283         --overlay-background: hsla(0, 0%, 24%, 0.9);
284
285         --console-message-separator: var(--text-color-quaternary);
286     }
287
288     body.window-inactive {
289         --selected-background-color: hsla(212, 92%, 64%, 0.5);
290
291         --glyph-color-active: var(--selected-background-color);
292         --glyph-color: hsl(0, 0%, 52%);
293         --glyph-color-disabled: hsla(0, 0%, 52%, 0.4);
294     }
295
296     body.window-inactive * {
297         /* These properties are duplicated so that they have higher specificity than WebKit's stylesheet.
298         Otherwise, the variable definition inside 'body.window-inactive *' in OpenSource overrides with a lighter color.
299         When merging to open source, we should guard the existing .window-inactive style with
300         '@media not all' to avoid applying the definition too broadly. */
301         --border-color: hsl(0, 0%, 33%);
302         --border-color-dark: hsl(0, 0%, 37%); /* non-semantic variable names */
303     }
304 }