Web Inspector: Dark Mode: commas in CSS selectors are too dim
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / SpreadsheetCSSStyleDeclarationSection.css
1 /*
2  * Copyright (C) 2017 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 .spreadsheet-css-declaration {
27     margin: 0;
28     padding: 0 0 var(--css-declaration-vertical-padding);
29     font-family: Menlo, monospace;
30     font-size: 11px;
31     color: var(--text-color-tertiary);
32     background: var(--background-color-code);
33     border-bottom: 0.5px solid var(--text-color-quaternary);
34     -webkit-user-select: text;
35 }
36
37 .spreadsheet-css-declaration.selecting,
38 .spreadsheet-css-declaration.selecting .spreadsheet-style-declaration-editor {
39     -webkit-user-select: none;
40 }
41
42 .spreadsheet-css-declaration :matches(.header, .header-media) {
43     padding: 0 var(--css-declaration-horizontal-padding);
44 }
45
46 .spreadsheet-css-declaration :matches(.header, .header-media):first-child {
47     padding-top: var(--css-declaration-vertical-padding);
48 }
49
50 .spreadsheet-css-declaration .header.editing-selector .origin {
51     position: absolute;
52     right: var(--css-declaration-horizontal-padding);
53 }
54
55 .spreadsheet-css-declaration .media-label {
56     color: var(--text-color);
57 }
58
59 .spreadsheet-css-declaration .origin {
60     float: right;
61     max-width: 100%;
62     font: 11px sans-serif;
63     color: hsl(0, 0%, 50%);
64     overflow: hidden;
65     text-overflow: ellipsis;
66     white-space: nowrap;
67 }
68
69 .spreadsheet-css-declaration.locked .origin::after {
70     display: inline-block;
71     position: relative;
72     top: 1px;
73     width: 8px;
74     height: 10px;
75     margin-left: 4px;
76     content: url(../Images/Locked.svg);
77 }
78
79 .spreadsheet-css-declaration .origin .go-to-link {
80     color: hsl(0, 0%, 50%);
81 }
82
83 .spreadsheet-css-declaration .origin .go-to-link:hover {
84     color: hsl(0, 0%, 33%);
85 }
86
87 .spreadsheet-css-declaration .styles-source {
88     float: right;
89 }
90
91 .spreadsheet-css-declaration .selector {
92     position: relative;
93     z-index: 1;
94 }
95
96 .spreadsheet-css-declaration .selector.style-attribute {
97     font: 12px sans-serif;
98     color: hsl(0, 0%, 30%);
99     -webkit-user-modify: read-only;
100 }
101
102 .spreadsheet-css-declaration .selector > span {
103     color: var(--text-color-secondary);
104 }
105
106 .spreadsheet-css-declaration .selector:focus,
107 .spreadsheet-css-declaration .selector > .matched {
108     color: var(--text-color);
109 }
110
111 .spreadsheet-css-declaration.locked {
112     background-color: hsl(0, 0%, 97%)
113 }
114
115 .spreadsheet-css-declaration .locked-icon {
116     width: 8px;
117     height: 10px;
118     content: url(../Images/Locked.svg);
119 }
120
121 .spreadsheet-css-declaration .selector.spreadsheet-selector-field {
122     outline-offset: -3px;
123 }
124
125 .spreadsheet-css-declaration .selector.spreadsheet-selector-field.editing {
126     display: inline-block;
127     box-shadow: hsla(0, 0%, 0%, 0.5) 0 1px 3px;
128     outline: none !important;
129 }
130
131 .spreadsheet-css-declaration .close-brace {
132     display: inline-block;
133     padding-left: var(--css-declaration-horizontal-padding);
134 }
135
136 @media (prefers-color-scheme: dark) {
137     .spreadsheet-css-declaration.locked {
138         background: var(--background-color);
139     }
140
141     .spreadsheet-css-declaration .selector.style-attribute {
142         color: var(--text-color-secondary);
143     }
144
145     .spreadsheet-css-declaration.locked .origin::after {
146         filter: var(--filter-invert);
147     }
148
149     .spreadsheet-css-declaration .origin .go-to-link,
150     .spreadsheet-css-declaration .origin .go-to-link:hover {
151         color: var(--text-color-secondary);
152     }
153 }