Web Inspector: Dark Mode: Media query names are unreadable
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / DarkMode.css
1 /*
2  * Copyright (C) 2018 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 @media (prefers-dark-interface) {
27
28     /* FIXME: Use CSS4 color functions once they're available. */
29
30     :root {
31         color: var(--text-color);
32
33         --text-color: hsl(0, 0%, 88%);
34         --text-color-active: white;
35         --text-color-secondary: hsl(0, 0%, 65%);
36
37         /* Disabled text/glyphs */
38         --text-color-tertiary: hsl(0, 0%, 50%);
39
40         /* Dividers, separators, background fills */
41         --text-color-quaternary: hsl(0, 0%, 33%);
42
43         /* Deprecated */
44         --text-color-gray-dark: hsl(0, 0%, 75%);
45         --text-color-gray-medium: var(--text-color-secondary);
46
47         --background-color: hsl(0, 0%, 24%);
48         --background-color-secondary: hsl(0, 0%, 27%);
49         --background-color-tertiary: hsl(0, 0%, 31%);
50
51         --background-color-content: hsl(0, 0%, 21%);
52         --background-color-code: hsl(0, 0%, 21%);
53
54         --background-color-alternate: hsla(0, 0%, var(--foreground-lightness), 0.05);
55         --background-color-selected: hsla(0, 0%, var(--foreground-lightness), 0.1);
56
57         --color-button: hsl(0, 0%, 99%);
58         --color-button-active: var(--text-color-active);
59
60         --selected-foreground-color: var(--text-color-active);
61         --selected-secondary-text-color: hsla(0, 0%, var(--foreground-lightness), 0.7);
62         --selected-secondary-text-color-active: hsla(0, 0%, var(--foreground-lightness), 0.85);
63         --selected-background-color: hsl(210, 96%, 43%);
64         --selected-background-color-unfocused: hsla(0, 0%, var(--foreground-lightness), 0.15);
65         --selected-background-color-active: hsl(218, 85%, 62%);
66         --selected-background-color-hover: hsla(212, 92%, 54%, 0.5);
67         --selected-background-color-highlight: hsla(0, 0%, 100%, 0.3);
68
69         --glyph-color: hsl(0, 0%, 80%);
70         --glyph-color-pressed: hsl(0, 0%, 100%);
71         --glyph-color-disabled: hsla(0, 0%, 80%, 0.4);
72         --glyph-color-active: hsl(212, 100%, 71%);
73         --glyph-color-active-pressed: hsl(212, 92%, 74%);
74         --glyph-color-inactive: hsl(0, 0%, 36%);
75
76         --border-color: hsl(0, 0%, 33%);
77         --border-color-dark: hsl(0, 0%, 37%); /* non-semantic variable names */
78
79         --border-color-secondary: hsl(0, 0%, 27%);
80
81         --button-background-color: hsl(0, 0%, 43%);
82         --button-background-color-hover: var(--button-background-color);
83         --button-background-color-pressed: hsl(0, 0%, 55%);
84         --button-background-color-inactive: hsl(0, 0%, 28%);
85
86         --dashboard-background-color: hsl(0, 0%, 36%);
87
88         --panel-background-color: hsl(0, 0%, 24%);
89         --panel-background-color-light: hsl(0, 0%, 29%);
90
91         --error-text-color: hsl(0, 86%, 65%);
92
93         --green-highlight-background-color: hsl(120, 15%, 28%);
94         --green-highlight-text-color: hsl(80, 75%, 80%);
95
96         --yellow-highlight-background-color: hsl(3, 20%, 26%);
97         --yellow-highlight-text-color: hsl(50, 96%, 87%);
98
99         --value-changed-highlight: var(--green-highlight-background-color);
100         --value-visual-highlight: var(--yellow-highlight-background-color);
101
102         --syntax-highlight-number-color: hsl(276, 100%, 85%);
103         --syntax-highlight-boolean-color: hsl(299, 71%, 80%);
104         --syntax-highlight-string-color: hsl(28, 84%, 63%);
105         --syntax-highlight-link-color: hsl(223, 100%, 77%);
106         --syntax-highlight-regexp-color: hsl(20, 100%, 64%);
107         --syntax-highlight-symbol-color: hsl(172, 45%, 65%);
108         --syntax-highlight-comment-color: hsl(119, 40%, 72%);
109         --syntax-highlight-regex-group-color: var(--text-color-gray-medium);
110
111         --console-secondary-text-color: hsla(0, 0%, 100%, 0.45);
112
113         --warning-background-color: hsla(21, 100%, 51%, 0.12);
114         --error-background-color: hsla(0, 100%, 50%, 0.15);
115
116         --network-header-color: hsl(204, 52%, 55%);
117         --network-system-color: hsl(79, 95%, 50%);
118         --network-pseudo-header-color: hsl(312, 55%, 61%);
119         --network-error-color: hsl(0, 54%, 55%);
120
121         --even-zebra-stripe-row-background-color: var(--background-color);
122         --odd-zebra-stripe-row-background-color: var(--background-color-secondary);
123         --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;
124
125         --search-highlight-text-color: hsl(60, 100%, 50%);
126         --search-highlight-text-color-active: hsl(0, 0%, 0%);
127         --search-highlight-background-color: hsla(53, 83%, 53%, 0.2);
128         --search-highlight-background-color-active: hsl(60, 100%, 50%);
129         --search-highlight-underline-color: hsla(60, 100%, 50%, 0.5);
130
131         /* Invert colors yet preserve the hue */
132         --filter-invert: invert(100%) hue-rotate(180deg);
133
134         --foreground-lightness: 100%;
135
136         /* TODO: Use the same variable for the default theme */
137         --overlay-background: hsla(0, 0%, 24%, 0.9);
138
139         --console-message-separator: var(--text-color-quaternary);
140     }
141
142     body.window-inactive {
143         --selected-background-color: hsla(212, 92%, 64%, 0.5);
144
145         --glyph-color-active: var(--selected-background-color);
146         --glyph-color: hsl(0, 0%, 52%);
147         --glyph-color-disabled: hsla(0, 0%, 52%, 0.4);
148     }
149
150     body.window-inactive * {
151         /* FIXME: these properties are duplicated so that they have higher specificity than WebKit's stylesheet.
152         Otherwise, the variable definition inside 'body.window-inactive *' in OpenSource overrides with a lighter color.
153         When merging to open source, we should guard the existing .window-inactive style with 
154         '@media not (prefers-dark-interface)' to avoid applying the definition too broadly. */
155         --border-color: hsl(0, 0%, 33%);
156         --border-color-dark: hsl(0, 0%, 37%); /* non-semantic variable names */
157     }
158
159     /*
160     FIXME: Selectively invert images
161     Images that should not be inverted:
162     - User data from websites;
163     - Most colored icons;
164
165     Images that should be inverted:
166     - Grayscale icons.
167
168     img {
169         filter: var(--filter-invert);
170     }
171     */
172
173     #main {
174         background-color: var(--background-color-content);
175     }
176
177     .tree-outline.dom li.selected .selection-area {
178         background-color: var(--background-color-selected);
179     }
180
181     .tab-bar > .item > .icon {
182         filter: var(--filter-invert);
183     }
184
185
186     /* Main.css */
187     .go-to-arrow {
188         filter: invert();
189     }
190
191     .resource-link,
192     .go-to-link {
193         color: var(--text-color-secondary);
194     }
195
196     .expand-list-button {
197         color: inherit;
198     }
199
200     :matches(img, canvas).show-grid {
201         background-color: white;
202         --checkerboard-dark-square: hsl(0, 0%, 80%);
203         background-image: linear-gradient(315deg, transparent 75%, var(--checkerboard-dark-square) 75%), linear-gradient(45deg, transparent 75%, var(--checkerboard-dark-square) 75%), linear-gradient(315deg, var(--checkerboard-dark-square) 25%, transparent 25%), linear-gradient(45deg, var(--checkerboard-dark-square) 25%, transparent 25%);
204     }
205
206
207     /* FormattedValue.css */
208     .formatted-object,
209     .formatted-node,
210     .formatted-error,
211     .formatted-map,
212     .formatted-set,
213     .formatted-weakmap,
214     .formatted-weakset {
215         color: var(--text-color);
216     }
217     .formatted-null,
218     .formatted-undefined {
219         color: var(--text-color-secondary);
220     }
221
222
223     /* Editing.css */
224     .editing {
225         background-color: var(--background-color-secondary);
226         outline-color: var(--text-color-tertiary) !important;
227     }
228
229     .editing, .editing * {
230         color: var(--text-color-active) !important;
231     }
232
233
234     /* TextEditor.css */
235     .text-editor > .CodeMirror .execution-line {
236         background-color: hsla(99, 100%, 51%, 0.3) !important;
237     }
238     .text-editor > .CodeMirror .execution-range-highlight:not(.CodeMirror-selectedtext),
239     .text-editor > .CodeMirror .execution-range-highlight:not(.CodeMirror-selectedtext) + .CodeMirror-widget {
240         background-color: hsl(99, 96%, 19%);
241     }
242
243
244     /* DetailsSection.css */
245     .details-section > .header {
246         color: var(--text-color);
247     }
248     .details-section > .header > label {
249         color: var(--text-color-secondary);
250     }
251     .details-section .details-section,
252     .details-section .details-section > .header,
253     .details-section.computed-style-properties:not(.collapsed) > .header{
254         background-color: var(--background-color);
255     }
256     .details-section .details-section:not(.collapsed) > .header {
257         border-bottom-color: var(--border-color-secondary);
258     }
259     .details-section > .content > .group > .row.simple > .label {
260         color: var(--text-color-secondary);
261     }
262     .details-section > .content > .group:nth-child(even) {
263         background-color: unset;
264     }
265     .details-section > .content > .group > .row:matches(.empty, .text) {
266         color: var(--text-color-secondary);
267     }
268
269
270     /* DataGrid.css */
271     .data-grid th {
272         background-color: var(--background-color);
273     }
274
275     .data-grid td .subtitle {
276         color: var(--selected-secondary-text-color);
277     }
278
279     .data-grid:matches(:focus, .force-focus) tr.selected td .subtitle {
280         color: hsla(0, 0%, var(--foreground-lightness), 0.9);
281     }
282
283     body:not(.window-inactive, .window-docked-inactive) .data-grid:matches(:focus, .force-focus) tr.editable.selected .cell-content > input {
284         color: var(--text-color);
285     }
286
287     .data-grid tr.editable .cell-content > input {
288         color: inherit;
289     }
290
291     .data-grid td.spanning {
292         color: var(--text-color-secondary);
293         background-color: unset;
294     }
295
296
297     /* ObjectTreeView.css */
298     .object-tree,
299     .object-preview {
300         color: var(--text-color);
301     }
302     .object-preview .name {
303         color: var(--syntax-highlight-boolean-color);
304     }
305     .object-preview > .size {
306         color: var(--console-secondary-text-color);
307     }
308
309
310     /* TabBar.css */
311     .tab-bar {
312         background-image: none;
313         background-color: hsl(0, 0%, 23%);
314
315         --tab-item-border-color: hsl(0, 0%, 36%);
316
317         /* FIXME: Use semantic colors */
318         --tab-item-dark-border-color: var(--tab-item-border-color);
319         --tab-item-medium-border-color: var(--tab-item-border-color);
320         --tab-item-light-border-color: var(--tab-item-border-color);
321         --tab-item-extra-light-border-color: var(--tab-item-border-color);
322     }
323
324     .tab-bar > .item {
325         background-image: none;
326         background-color: hsl(0, 0%, 17%);
327     }
328
329     .tab-bar > .item > .title {
330         color: white !important;
331     }
332
333     .tab-bar > .item:not(.disabled).selected {
334         background-image: none;
335         background-color: hsl(0, 0%, 21%);
336         border-top-color: hsl(0, 0%, 37%);
337     }
338
339     .tab-bar:not(.animating) > .item:not(.selected):hover {
340         background-color: hsl(0, 0%, 15%);
341     }
342
343     .tab-bar > .item > .close {
344         filter: var(--filter-invert);
345     }
346
347     body.window-inactive .tab-bar {
348         --tab-item-border-color: hsl(0, 0%, 34%);
349         border-bottom-color: var(--tab-item-border-color);
350
351         background-image: none !important;
352         background-color: hsl(0, 0%, 17%) !important;
353     }
354
355     body.window-inactive .tab-bar > .item {
356         background-image: none !important;
357         background-color: hsl(0, 0%, 17%) !important;
358     }
359
360     body.window-inactive .tab-bar > .item.selected {
361         background-color: var(--background-color) !important;
362     }
363
364     body.window-inactive .tab-bar > .item > .title {
365         color: hsl(0, 0%, 58%) !important;
366     }
367
368
369     /* Toolbar.css */
370     body .toolbar {
371         background-image: linear-gradient(to bottom, hsl(0, 0%, 25%), hsl(0, 0%, 22%));
372         border-top: 1px solid hsla(0, 0%, 100%, 0.3);
373         box-shadow: none;
374     }
375
376     body.window-inactive .toolbar {
377         background-color: var(--background-color);
378     }
379
380     body.latest-mac .toolbar .item.button,
381     body.latest-mac .toolbar .search-bar > input[type="search"] {
382         background-image: none;
383         background-color: var(--button-background-color);
384         border-color: var(--button-background-color);
385         border-top-color: hsla(0, 100%, 100%, 0.2);
386         box-shadow: none;
387     }
388
389     body.latest-mac .toolbar .search-bar > input[type="search"] {
390         color: var(--text-color);
391     }
392
393     body.latest-mac .toolbar .search-bar > input[type="search"]:focus {
394         color: var(--text-color-active);
395
396         /* FIXME: Use native outline for the default theme as well. */
397         box-shadow: unset;
398         transition: unset;
399         outline: -webkit-focus-ring-color auto 5px;
400         outline-offset: -3px;
401     }
402
403     body.latest-mac .toolbar .search-bar > input[type="search"]::placeholder {
404         color: var(--text-color-secondary);
405     }
406
407     body.latest-mac.window-inactive .toolbar .search-bar > input[type="search"]::placeholder {
408         color: var(--text-color-tertiary);
409     }
410
411     body.latest-mac.window-inactive .toolbar .search-bar > input[type="search"]::-webkit-search-results-button {
412         /* Setting `color` has no effect on the magnifying glass icon. */
413         opacity: 0.5;
414     }
415
416     body.latest-mac .toolbar .dashboard-container {
417         background-image: none;
418         background-color: var(--dashboard-background-color);
419         border-color: var(--dashboard-background-color);
420         border-top-color: hsla(0, 100%, 100%, 0.1);
421         box-shadow: none;
422     }
423
424     body.latest-mac .toolbar .item.button:active {
425         background-image: none;
426         border-top-color: hsla(0, 100%, 100%, 0.2);
427         box-shadow: none;
428     }
429
430     body.latest-mac.window-inactive .toolbar .item.button,
431     body.latest-mac.window-inactive .toolbar .search-bar > input[type="search"],
432     body.latest-mac.window-inactive .toolbar .dashboard-container {
433         opacity: 1;
434         color: var(--glyph-color);
435         border-color: transparent;
436         border-top-color: hsla(0, 100%, 100%, 0.1);
437         background-image: none;
438         background: var(--button-background-color-inactive);
439     }
440
441
442     /* DividerNavigationItem.css */
443     .navigation-bar .item.divider {
444         --divider-background: hsl(0, 0%, 40%);
445         background-image: linear-gradient(var(--divider-background), var(--divider-background));
446     }
447
448
449     /* ButtonToolbarItem.css */
450     .toolbar .item.button {
451         color: var(--color-button);
452     }
453
454     .toolbar .item.button:not(.disabled):active {
455         color: var(--color-button-active);
456         background-image: none;
457         background: var(--button-background-color-pressed);
458     }
459
460     .toolbar .item.button:not(.disabled):matches(:focus, .activate.activated) {
461         color: var(--glyph-color-active);
462     }
463
464     .toolbar .item.button:not(.disabled):active:matches(:focus, .activate.activated) {
465         color: var(--glyph-color-active-pressed);
466     }
467
468
469     /* DefaultDashboardView.css */
470     .toolbar .dashboard.default > .item > div {
471         /* FIXME: introduce a variable for opacity and use it for both text and icons */
472         color: hsla(0, 100%, 100%, 0.2);
473     }
474
475     .toolbar .dashboard.default > .item.enabled > div {
476         color: var(--glyph-color);
477     }
478
479     .toolbar .dashboard.default > .item.enabled:hover {
480         border-color: hsla(0, 0%, var(--foreground-lightness), 0.1);
481     }
482
483     .toolbar .dashboard.default > .item.enabled:hover > div {
484         color: hsla(0, 100%, 100%, 0.85);
485     }
486
487     .toolbar .dashboard.default > .resourcesCount > img,
488     .toolbar .dashboard.default > .resourcesSize > img,
489     .toolbar .dashboard.default > .time > img,
490     .toolbar .dashboard.default > .logs > img,
491     .toolbar .dashboard.default > .errors:not(.enabled) > img,
492     .toolbar .dashboard.default > .issues:not(.enabled) > img {
493         filter: var(--filter-invert);
494     }
495
496     body.latest-mac .toolbar .dashboard .item.button {
497         background: unset;
498     }
499
500     .dashboard-container .advance-arrow {
501         filter: var(--filter-invert);
502     }
503
504
505     /* DebuggerDashboardView.css */
506     .toolbar .dashboard.debugger {
507         color: var(--text-color);
508     }
509
510     .dashboard.debugger .navigation-bar .item.button > .glyph {
511         color: var(--glyph-color-active);
512     }
513
514     .dashboard.debugger > .location .function-name {
515         color: var(--text-color-active);
516     }
517
518     .dashboard.debugger > .location .go-to-link {
519         padding-bottom: 1px;
520         -webkit-text-decoration-color: var(--text-color-secondary);
521     }
522
523     .dashboard.debugger > .divider {
524         background-image: linear-gradient(var(--text-color-tertiary), var(--text-color-tertiary));
525     }
526
527
528     /* BreakpointPopoverController.css */
529     .popover .edit-breakpoint-popover-content > label.toggle {
530         color: unset;
531     }
532
533     .popover .edit-breakpoint-popover-content > table > tr > th {
534         color: var(--text-color-secondary);
535     }
536
537
538     /* BreakpointActionView.css */
539     .breakpoint-action-block-body {
540         border-color: var(--text-color-quaternary);
541         background-color: unset;
542         box-shadow: unset;
543     }
544
545     .breakpoint-action-block-body > .description {
546         color: var(--text-color-secondary);
547     }
548
549     .breakpoint-action-append-button,
550     .breakpoint-action-remove-button {
551         filter: invert();
552     }
553
554
555     /* XHRBreakpointPopover.css */
556     .popover .xhr-breakpoint-content > .editor-wrapper > .editor {
557         -webkit-appearance: unset;
558         border-color: var(--text-color-quaternary);
559         background: var(--background-color-code);
560     }
561
562
563     /* ButtonNavigationItem.css */
564     .navigation-bar .item.button {
565         color: var(--text-color-secondary);
566     }
567
568
569     /* SpreadsheetStyle*.css */
570     .spreadsheet-style-declaration-editor .property:not(.disabled) .value {
571         color: rgb(227, 227, 227)
572     }
573
574     .spreadsheet-css-declaration {
575         color: hsl(0, 0%, 30%);
576         border-bottom-color: var(--text-color-quaternary);
577     }
578
579     .spreadsheet-css-declaration .selector:focus,
580     .spreadsheet-css-declaration .selector > .matched {
581         color: var(--text-color);
582     }
583
584     .spreadsheet-css-declaration.locked .origin::after {
585         filter: var(--filter-invert);
586     }
587
588     .spreadsheet-css-declaration .origin .go-to-link,
589     .spreadsheet-css-declaration .origin .go-to-link:hover {
590         color: var(--text-color-secondary);
591     }
592
593     .spreadsheet-style-declaration-editor :matches(.name, .value).editing {
594         outline-color: var(--background-color-secondary) !important;
595     }
596
597     .spreadsheet-style-declaration-editor .property.has-warning {
598         background-color: hsl(2, 50%, 25%);
599     }
600
601     .spreadsheet-style-declaration-editor .property.has-warning .warning {
602         filter: invert(100%) hue-rotate(150deg);
603     }
604
605     .spreadsheet-css-declaration .media-label {
606         color: var(--text-color);
607     }
608
609
610     /* QuickConsole.css */
611     .quick-console {
612         background-color: var(--background-color-code);
613         color: var(--text-color);
614         border-top: 1px solid var(--border-color);
615     }
616
617
618     .syntax-highlighted,
619     .cm-s-default,
620     .CodeMirror {
621         color: var(--text-color);
622     }
623
624     .cm-s-default,
625     .CodeMirror {
626         background-color: var(--background-color-code);
627     }
628
629     .CodeMirror .jump-to-symbol-highlight,
630     .meta-key-pressed .spreadsheet-css-declaration:not(.locked) :matches(.name, .value):not(.editing):hover {
631         color: var(--syntax-highlight-link-color) !important;
632     }
633
634
635     /* ConsolePrompt.css */
636     .console-prompt {
637         background-color: var(--background-color-code);
638     }
639
640
641     /* CompletionSuggestionsView.css */
642     .completion-suggestions {
643         background-color: var(--overlay-background);
644     }
645
646     .completion-suggestions-container > .item {
647         color: var(--text-color);
648     }
649
650
651     /* CodeMirrorOverrides.css */
652     .CodeMirror-cursor {
653         border-left-color: hsl(0, 0%, var(--foreground-lightness));
654     }
655
656     .CodeMirror .CodeMirror-gutters {
657         background-color: var(--background-color);
658         border-right-color: var(--text-color-quaternary);
659     }
660
661     .cm-s-default .cm-link {
662         color: var(--syntax-highlight-link-color);
663     }
664
665     .CodeMirror .CodeMirror-lines .CodeMirror-matchingbracket {
666         background-color: hsla(232, 100%, 72%, 0.4);
667         border-bottom-color: hsl(206, 100%, 65%);
668     }
669
670
671     /* SyntaxHighlightingDefaultTheme.css */
672     .cm-s-default .cm-attribute {
673         color: hsl(222, 100%, 72%);
674     }
675
676     .cm-s-default .cm-m-xml.cm-attribute,
677     .syntax-highlighted .html-attribute-name {
678         color: hsl(27, 100%, 80%);
679     }
680
681     .cm-s-default .cm-meta {
682         color: hsl(0, 0%, 60%);
683     }
684
685     .cm-s-default .cm-variable-3 {
686         color: hsl(160, 69%, 64%);
687     }
688
689     .cm-s-default .cm-builtin {
690         color: hsl(218, 64%, 76%);
691     }
692
693
694     /* TreeOutline.css */
695     .tree-outline .item .subtitle {
696         color: var(--text-color-secondary);
697     }
698
699
700     /* ObjectTreePropertyTreeElement.css */
701     .object-tree-property .getter,
702     .object-tree-property .setter {
703         filter: invert();
704     }
705
706     .item.object-tree-property.prototype-property {
707         border-color: hsla(0, 0%, var(--foreground-lightness), 0.06);
708         background-color: hsla(0, 0%, var(--foreground-lightness), 0.03);
709     }
710
711     .object-tree-property.prototype-property:hover,
712     .object-tree-property.prototype-property:focus {
713         border-color: hsla(0, 0%, var(--foreground-lightness), 0.1);
714     }
715
716     .object-tree-property .value.error {
717         color: hsl(0, 100%, 60%);
718     }
719
720
721     /* DOMTreeOutline.css */
722     .tree-outline.dom {
723         color: var(--text-color);
724     }
725
726     .tree-outline.dom li.selected + ol.children.expanded {
727         border-color: hsl(0, 0%, 27%);
728     }
729
730     .tree-outline.dom .shadow {
731         color: var(--text-color);
732     }
733
734     /* FIXME: extract this as a variable. It's slightly different from var(background-color-secondary),
735     but close enough for now. It needs to use partial translucency so that the selection area shines through. */
736     .tree-outline.dom li.parent.shadow + ol.children.expanded,
737     .tree-outline.dom li.parent.shadow::after {
738         background-color: hsla(0, 0%, 90%, 0.1);
739     }
740
741     .showing-find-banner .tree-outline.dom .search-highlight {
742         /* FIXME: This should use a variable. */
743         background-color: hsla(53, 83%, 53%, 0.8);
744     }
745
746     /* DOMNodeDetailsSidebarPanel.css */
747     .sidebar > .panel.dom-node-details .details-section.dom-node-event-listeners > .header > .filter:hover {
748         filter: brightness(1.25);
749     }
750
751
752     /* GeneralStyleDetailsSidebarPanel.css */
753     .sidebar > .panel.details.css-style > .content > .pseudo-classes > .group > label {
754         color: var(--text-color-secondary);
755     }
756
757
758     /* SpreadsheetCSSStyleDeclarationSection.css */
759     .spreadsheet-css-declaration {
760         background: var(--background-color-code);
761         color: var(--text-color-tertiary);
762     }
763
764     .spreadsheet-css-declaration.locked {
765         background: var(--background-color);
766     }
767
768     .spreadsheet-css-declaration .selector.style-attribute {
769         color: var(--text-color-secondary);
770     }
771
772
773     /* SpreadsheetCSSStyleDeclarationEditor.css */
774     .spreadsheet-style-declaration-editor .property:matches(.invalid-name, .other-vendor, .overridden):not(.disabled) .content > * {
775         text-decoration: line-through;
776         -webkit-text-decoration-color: hsla(0, 0%, var(--text-color), 0.6);
777     }
778
779
780     /* InlineSwatch.css */
781     .inline-swatch {
782         background: var(--background-color);
783     }
784
785
786     /* SpreadsheetRulesStyleDetailsPanel.css */
787     .spreadsheet-style-panel .section-header {
788         color: var(--text-color-secondary);
789         border-bottom: 0.5px solid hsla(0, 0%, var(--background-color), 0.2);
790     }
791
792     .spreadsheet-style-panel .section-header .node-link:hover {
793         color: var(--text-color);
794     }
795
796
797     /* ComputedStyleDetailsPanel.css */
798     .computed-style-properties.details-section {
799         background-color: var(--background-color);
800     }
801
802     .details-section.style-box-model:not(.collapsed) > :matches(.header, .content) {
803         background-color: var(--background-color);
804     }
805
806
807     /* Table.css */
808     .table,
809     .table > .header {
810         background: var(--background-color);
811     }
812
813     .table > .header > .sortable:active {
814         background-color: hsla(0, 0%, var(--foreground-lightness), 0.2);
815     }
816
817     .table > .header > :matches(.sort-ascending, .sort-descending) {
818         background: var(--background-color-selected);
819     }
820
821     .table > .header > :matches(.sort-ascending, .sort-descending)::after {
822         filter: invert();
823     }
824
825
826     /* ScopeBar.css */
827     .scope-bar > li {
828         color: var(--text-color);
829     }
830
831
832     /* TimelineOverview.css */
833     .timeline-overview > .navigation-bar.timelines {
834         background-color: var(--background-color);
835     }
836
837     .timeline-overview:not(.frames) > .graphs-container > .timeline-overview-graph:nth-child(even) {
838         background: var(--background-color-alternate);
839     }
840
841     .timeline-overview.edit-instruments > .tree-outline.timelines .item:not(:first-child),
842     .timeline-overview > .tree-outline.timelines .item:not(.selected):not(:first-child) {
843         border-top-color: hsla(0, 0%, var(--foreground-lightness), 0.09);
844     }
845
846
847     /* TimelineIcons.css */
848     .time-icon .icon {
849         filter: invert();
850     }
851
852
853     /* TimelineDataGrid.css */
854     .data-grid th:matches(.sort-ascending, .sort-descending) {
855         background: var(--background-color-selected);
856     }
857
858
859     /* TimelineRecordingContentView.css */
860     .content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple {
861         color: var(--text-color);
862     }
863
864     .content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple .arrows {
865         color: unset;
866     }
867
868
869     /* SettingsTabContentView.css */
870     .content-view.settings .navigation-bar {
871         background-color: var(--background-color-content);
872     }
873
874     .content-view.settings .navigation-bar .item.radio.button.text-only.selected {
875         color: var(--glyph-color-active);
876     }
877
878
879     /* NewTabContentView.css */
880     .new-tab.tab.content-view {
881         background-color: var(--background-color-content);
882     }
883
884
885     /* FontResourceContentView.css */
886     .content-view.resource.font .preview > .line {
887         border-left-color: var(--text-color-quaternary);
888         border-right-color: var(--text-color-quaternary);
889     }
890
891     .content-view.resource.font .metric.top {
892         background-color: var(--text-color-quaternary);
893     }
894
895     .content-view.resource.font .metric.baseline {
896         background-color: hsl(195, 100%, 37%);
897     }
898
899     .content-view.resource.font .metric.middle {
900         background-color: hsl(120, 100%, 35%);
901     }
902
903     .content-view.resource.font .metric.xheight {
904         background-color: hsl(350, 100%, 40%);
905     }
906
907     .content-view.resource.font .metric.bottom {
908         background-color: var(--text-color-quaternary);
909     }
910
911
912     /* FilterBar.css */
913     .filter-bar > input[type="search"] {
914         border-color: var(--background-color-selected);
915         background-color: var(--background-color-alternate);
916     }
917
918     .filter-bar > input[type="search"]::placeholder {
919         color: var(--text-color-secondary);
920     }
921
922     .filter-bar > input[type="search"]:focus {
923         background-color: hsla(0, 0%, var(--foreground-lightness), 0.2);
924         color: var(--text-color-active);
925     }
926
927
928     /* ImageResourceContentView.css */
929     .content-view.resource.image {
930         background: var(--background-color-content);
931     }
932
933
934     /* LogContentView.css */
935     .console-messages {
936         background-color: var(--background-color-code);
937     }
938
939     .console-item {
940         border-top-color: var(--console-message-separator);
941     }
942
943     .console-messages {
944         --background-color-selected: hsl(233, 30%, 30%);
945         --border-color-selected: hsl(224, 30%, 35%);
946         --border-color-error: hsla(20, 100%, 50%, 0.12);
947         --border-color-warning: hsla(40, 100%, 50%, 0.12);
948     }
949
950     .console-messages:focus .console-item.selected {
951         background-color: var(--background-color-selected);
952         border-color: var(--border-color-selected);
953     }
954
955     .console-messages:focus .console-item.selected + .console-item {
956         border-color: var(--border-color-selected);
957     }
958
959     .console-session:first-of-type .console-session-header {
960         color: var(--text-color-tertiary);
961     }
962
963     .console-session:not(:first-of-type) .console-session-header {
964         color: unset;
965         background-color: unset;
966     }
967
968     .console-messages a {
969         color: var(--selected-secondary-text-color);
970         cursor: pointer;
971     }
972
973     .console-messages a:hover {
974         color: var(--selected-secondary-text-color-active);
975     }
976
977     .console-messages:focus .console-item.selected::after {
978         background: hsl(210, 100%, 75%);
979     }
980
981     .console-error-level {
982         background-color: var(--error-background-color);
983         border-color: var(--border-color-error);
984     }
985
986     .console-error-level:not(.filtered-out, .filtered-out-by-search), .console-error-level:not(.filtered-out, .filtered-out-by-search) + .console-item {
987         border-top-color: var(--border-color-error);
988     }
989
990     .console-warning-level {
991         background-color: var(--warning-background-color);
992         border-color: var(--border-color-warning);
993     }
994
995     .console-warning-level:not(.filtered-out, .filtered-out-by-search), .console-warning-level:not(.filtered-out, .filtered-out-by-search) + .console-item {
996         border-top-color: var(--border-color-warning);
997     }
998
999     .search-in-progress .console-item:not(.filtered-out-by-search) .highlighted {
1000         color: var(--search-highlight-text-color);
1001         background-color: var(--search-highlight-background-color);
1002         border-bottom-color: var(--search-highlight-underline-color);
1003     }
1004
1005     .search-in-progress .console-item:not(.filtered-out-by-search) .highlighted.selected {
1006         color: var(--search-highlight-text-color-active);
1007         background-color: var(--search-highlight-background-color-active);
1008     }
1009
1010
1011     /* SourceCodeTextEditor.css */
1012     .source-code.text-editor > .CodeMirror .error {
1013         background-color: var(--error-background-color);
1014     }
1015
1016     .source-code.text-editor > .CodeMirror .warning {
1017         background-color: var(--warning-background-color);
1018     }
1019
1020     .source-code.text-editor > .CodeMirror .issue-widget {
1021         color: hsl(0, 0%, var(--foreground-lightness));
1022         --warning-background-color: hsl(43, 100%, 23%);
1023         --error-background-color: hsl(11, 70%, 32%);
1024     }
1025
1026     .source-code.text-editor > .CodeMirror .issue-widget.inline.warning {
1027         background-color: var(--warning-background-color);
1028     }
1029
1030     .source-code.text-editor > .CodeMirror .issue-widget.inline.warning > .arrow {
1031         border-right-color: var(--warning-background-color);
1032     }
1033
1034     .source-code.text-editor > .CodeMirror .issue-widget.inline.error {
1035         background-color: var(--error-background-color);
1036     }
1037
1038     .source-code.text-editor > .CodeMirror .issue-widget.inline.error > .arrow {
1039         border-right-color: var(--error-background-color);
1040     }
1041
1042
1043     /* ConsoleMessageView.css */
1044     .console-message .syntax-highlighted {
1045         background-color: unset;
1046     }
1047
1048     .console-warning-level .console-message-text {
1049         color: hsl(53, 80%, 55%);
1050     }
1051
1052     .console-error-level .console-message-text {
1053         color: hsl(10, 100%, 70%);
1054     }
1055
1056     .console-user-command > .console-message-text {
1057         color: hsl(209, 100%, 70%);
1058     }
1059
1060     .console-message .repeat-count {
1061         background-color: hsl(218, 70%, 48%);
1062     }
1063
1064
1065     /* CallFrameView.css */
1066     .call-frame .subtitle,
1067     .call-frame .subtitle .source-link {
1068         color: hsla(0, 0%, var(--foreground-lightness), 0.6);
1069     }
1070
1071     .call-frame:hover .subtitle .source-link,
1072     .call-frame:focus .subtitle .source-link {
1073         color: hsl(0, 0%, var(--foreground-lightness));
1074     }
1075
1076     .call-frame .separator {
1077         color: hsla(0, 0%, var(--foreground-lightness), 0.2);
1078     }
1079
1080
1081     /* QuickConsole.css */
1082     .quick-console.showing-log {
1083         border-top-color: var(--console-message-separator) !important;
1084     }
1085
1086
1087     /* FindBanner.css */
1088     .find-banner.console-find-banner > input[type=search]:not(:placeholder-shown) {
1089         color: unset;
1090         background-color: unset;
1091     }
1092
1093
1094     /* NetworkResourceDetailView.css */
1095     .network-resource-detail {
1096         background-color: var(--background-color);
1097     }
1098
1099     .network-resource-detail .item.close > .glyph {
1100         background-color: hsla(0, 0%, 100%, 0.2);
1101     }
1102
1103     .network .network-resource-detail .navigation-bar .item.radio.button.text-only.selected {
1104         background-color: unset;
1105         color: var(--glyph-color-active);
1106     }
1107
1108     .resource-headers .value {
1109         color: var(--text-color);
1110     }
1111
1112
1113     /* NetworkTableContentView.css */
1114     .network-table .cell.domain > .lock {
1115         filter: var(--filter-invert);
1116     }
1117
1118
1119     /* ResourceSizesContentView.css */
1120     .resource-sizes > .content .label {
1121         color: var(--text-color-secondary);
1122     }
1123
1124
1125     /* ResourceTimingBreakdownView.css */
1126     .popover.waterfall-popover {
1127         --popover-background-color: var(--panel-background-color);
1128     }
1129
1130     .resource-timing-breakdown > table > tr.header:not(.total-row) > td {
1131         color: var(--text-color);
1132     }
1133
1134     .resource-timing-breakdown > table > tr > td.label,
1135     .resource-timing-breakdown > table > tr > td.time {
1136         color: var(--text-color-secondary);
1137     }
1138
1139     .resource-timing-breakdown > table hr {
1140         border-color: var(--text-color-quaternary);
1141     }
1142
1143
1144     /* GeneralStyleDetailsSidebarPanel.css */
1145     .sidebar > .panel.details.css-style > .content ~ .options-container > .new-rule {
1146         filter: var(--filter-invert);
1147     }
1148
1149
1150     /* CanvasTabContentView.css */
1151     .content-view.tab.canvas .navigation-bar > .item .canvas-overview .icon {
1152         filter: invert(88%);
1153     }
1154
1155
1156     /* WebSocketContentView.css */
1157     .web-socket.content-view .data-grid table.data tr.revealed {
1158         border-bottom-color: hsla(0, 0%, var(--foreground-lightness), 0.1);
1159     }
1160
1161     .web-socket.content-view .data-grid.variable-height-rows table.data tr.outgoing {
1162         background-color: var(--green-highlight-background-color);
1163         color: var(--green-highlight-text-color);
1164     }
1165
1166     .web-socket.content-view .data-grid.variable-height-rows table.data tr.non-text-frame {
1167         background-color: var(--yellow-highlight-background-color);
1168         color: var(--yellow-highlight-text-color);
1169     }
1170
1171
1172     /* RecordingActionTreeElement.css */
1173     .item.action:not(.initial-state)::before {
1174         color: unset;
1175         opacity: 0.4;
1176     }
1177
1178     .tree-outline .item.action.visual:not(.selected, .invalid) {
1179         color: var(--green-highlight-text-color);
1180     }
1181
1182     .item.action:not(.initial-state) > .icon {
1183         filter: invert();
1184     }
1185
1186     .tree-outline:not(.hide-disclosure-buttons) .item.action:not(.initial-state, .parent) > .icon {
1187         filter: invert();
1188         opacity: 0.8;
1189     }
1190
1191
1192     /* CanvasTabContentView.css */
1193     .content-view.tab.canvas .navigation-bar > .item .canvas-overview .icon,
1194     .content-view.tab.canvas .navigation-bar > .item .canvas.canvas-2d .icon,
1195     .content-view.tab.canvas .navigation-bar > .item .canvas.webgl .icon,
1196     .content-view.tab.canvas .navigation-bar > .item .recording > .icon {
1197         filter: invert();
1198     }
1199
1200     .content-view.canvas > .preview > img,
1201     .content-view.canvas .preview-container > canvas {
1202         background-color: white;
1203     }
1204
1205
1206     /* CanvasOverviewContentView.css */
1207     .content-view.canvas-overview {
1208         background-color: unset;
1209     }
1210
1211     .content-view.canvas-overview .content-view.canvas {
1212         background-color: var(--background-color-secondary);
1213     }
1214
1215     .content-view.canvas-overview .content-view.canvas.is-recording {
1216         --recording-color: hsl(0, 100%, 39%);
1217         border-color: var(--recording-color);
1218     }
1219
1220     .content-view.canvas-overview .content-view.canvas.is-recording > header {
1221         background-color: var(--recording-color);
1222     }
1223
1224     .content-view.canvas-overview .content-view.canvas > header > .titles > .title {
1225         color: var(--text-color);
1226     }
1227
1228     .content-view.canvas-overview .content-view.canvas > header > .titles > .subtitle,
1229     .content-view.canvas-overview .content-view.canvas > footer .memory-cost {
1230         color: var(--text-color-secondary);
1231     }
1232
1233     .content-view.canvas-overview .content-view.canvas > footer > .recordings::before {
1234         filter: invert();
1235     }
1236
1237     .content-view.canvas-overview .content-view.canvas.is-recording > header > .titles > .subtitle {
1238         color: unset;
1239         opacity: 0.5
1240     }
1241
1242
1243     /* CanvasContentView.css */
1244     .content-view.canvas:not(.tab) {
1245         background-color: unset;
1246     }
1247
1248
1249     /* RecordingContentView.css */
1250     .content-view:not(.tab).recording {
1251         background-color: unset;
1252     }
1253
1254     .content-view:not(.tab).recording > header > .slider-container {
1255         background-color: unset;
1256         border-color: var(--border-color-secondary);
1257     }
1258
1259     .content-view:not(.tab).recording > header > .slider-container > input[type=range] {
1260         background: none;
1261     }
1262
1263
1264     /* RecordingStateDetailsSidebarPanel.css */
1265     .sidebar > .panel.details.recording-state > .content > .data-grid tr.modified {
1266         color: var(--green-highlight-text-color);
1267     }
1268
1269
1270     /* ProgressView.css */
1271     .progress-view > .titles > .title {
1272         color: var(--text-color-secondary);
1273     }
1274
1275     .progress-view > .titles > .subtitle {
1276         color: var(--text-color-tertiary);
1277     }
1278
1279     .indeterminate-progress-spinner {
1280         filter: invert();
1281     }
1282
1283
1284     /* ShaderProgramContentView.css */
1285     .content-view.shader-program > .text-editor.shader {
1286         --border-start-style: 1px solid var(--text-color-quaternary);
1287     }
1288
1289     .content-view.shader-program > .text-editor.shader > .type-title {
1290         background-color: var(--background-color);
1291         border-bottom-color: var(--text-color-quaternary);
1292     }
1293
1294
1295     /* ShaderProgramTreeElement.css */
1296     .item.shader-program .status > img {
1297         filter: invert();
1298     }
1299
1300
1301     /* OpenResourceDialog.css */
1302     .open-resource-dialog {
1303         background-color: var(--overlay-background);
1304         border-color: hsla(0, 0%, var(--foreground-lightness), 0.2);
1305     }
1306
1307     .open-resource-dialog > .field > input {
1308         color: var(--text-color-active);
1309     }
1310
1311     .open-resource-dialog > .field > input::placeholder {
1312         color: var(--text-color-secondary);
1313     }
1314
1315     .open-resource-dialog > .tree-outline .item.selected {
1316         background-color: var(--selected-background-color);
1317         color: white;
1318     }
1319
1320     .open-resource-dialog > .field::before {
1321         filter: invert();
1322     }
1323
1324 }