Web Inspector: Elements: Styles: add icons for various CSS rule types
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / ObjectTreePropertyTreeElement.css
1 /*
2  * Copyright (C) 2015 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 .tree-outline .item.object-tree-property {
27     margin-top: 0;
28     border-top: 0;
29 }
30
31 .object-tree-property.boolean > .icon {
32     content: url(../Images/TypeBoolean.svg);
33 }
34
35 .object-tree-property.function > .icon {
36     content: url(../Images/Function.svg);
37 }
38
39 .object-tree-property.number > .icon {
40     content: url(../Images/TypeNumber.svg);
41 }
42
43 .object-tree-property.object > .icon {
44     content: url(../Images/TypeObject.svg);
45 }
46
47 .object-tree-property.object.null > .icon {
48     content: url(../Images/TypeNull.svg);
49 }
50
51 .object-tree-property.object.node > .icon {
52     content: url(../Images/DOMElement.svg);
53 }
54
55 .object-tree-property.regex > .icon {
56     content: url(../Images/TypeRegex.svg);
57 }
58
59 .object-tree-property.string > .icon {
60     content: url(../Images/TypeString.svg);
61 }
62
63 .object-tree-property.symbol > .icon {
64     content: url(../Images/TypeSymbol.svg);
65 }
66
67 .object-tree-property.accessor > .icon,
68 .object-tree-property.undefined > .icon {
69     content: url(../Images/TypeUndefined.svg);
70 }
71
72 .object-tree-property.had-error > .icon {
73     content: url(../Images/TypeUndefined.svg) !important;
74 }
75
76 .object-tree-property .property-name,
77 .object-tree-property .function-parameters,
78 .object-tree-property .prototype-name {
79     font-family: -webkit-system-font, sans-serif;
80     font-size: 12px;
81 }
82
83 .object-tree-property .property-name.not-enumerable {
84     opacity: 0.6;
85 }
86
87 .item.object-tree-property.prototype-property {
88     display: inline-block;
89
90     border: 1px solid hsla(0, 0%, 0%, 0.06);
91     background-color: hsla(0, 0%, 0%, 0.03);
92     border-radius: 3px;
93
94     padding: 0 10px 1px 0;
95     margin: 3px 0 2px 0;
96 }
97
98 .object-tree-property.prototype-property:hover, .object-tree-property.prototype-property:focus {
99     border-color: hsla(0, 0%, 0%, 0.1);
100 }
101
102 .object-tree-property.prototype-property > .icon {
103     display: none;
104 }
105
106 .item.object-tree-property.prototype-property + ol {
107     -webkit-padding-start: 0px;
108 }
109
110 .object-tree-property :matches(.getter, .setter) {
111     position: relative;
112     opacity: 0.6;
113     vertical-align: top;
114 }
115
116 .object-tree-property .spacer {
117     margin-left: 4px;
118 }
119
120 .object-tree-property .getter {
121     top: 1px;
122
123     content: url(../Images/Eye.svg);
124
125     width: 16px;
126     height: 11px;
127 }
128
129 .object-tree-property .setter {
130     top: -1px;
131
132     content: url(../Images/Pencil.svg);
133
134     width: 13px;
135     height: 13px;
136 }
137
138 .object-tree-property .getter + .setter {
139     margin-left: 1px;
140 }
141
142 .object-tree-property :matches(.getter, .setter).disabled {
143     opacity: 0.35;
144 }
145
146 .object-tree-property .getter:not(.disabled):hover {
147     opacity: 1;
148 }
149
150 .object-tree-property .value.error {
151     color: red;
152 }
153
154 @media (prefers-color-scheme: dark) {
155     .object-tree-property .getter,
156     .object-tree-property .setter {
157         filter: invert();
158     }
159
160     .item.object-tree-property.prototype-property {
161         border-color: hsla(0, 0%, var(--foreground-lightness), 0.06);
162         background-color: hsla(0, 0%, var(--foreground-lightness), 0.03);
163     }
164
165     .object-tree-property.prototype-property:hover,
166     .object-tree-property.prototype-property:focus {
167         border-color: hsla(0, 0%, var(--foreground-lightness), 0.1);
168     }
169
170     .object-tree-property .value.error {
171         color: hsl(0, 100%, 60%);
172     }
173 }