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