Start using the new :not() and :matches() in the Web Inspector
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / DetailsSection.css
1 /*
2  * Copyright (C) 2013 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 .details-section {
27     font-size: 10px;
28     background-color: rgb(242, 242, 242);
29     border-bottom: 1px solid rgb(179, 179, 179);
30 }
31
32 body.mac-platform.legacy .details-section {
33     margin-top: -1px;
34     margin-bottom: -1px;
35
36     border-bottom: none;
37     background-color: transparent;
38 }
39
40 .details-section .details-section {
41     background-color: rgb(255, 255, 255);
42 }
43
44 body.mac-platform.legacy .details-section .details-section {
45     background-color: transparent;
46 }
47
48 .details-section .details-section:last-child {
49     border-bottom: none;
50 }
51
52 .details-section .details-section:first-child {
53     border-top: 1px solid rgb(179, 179, 179);
54 }
55
56 body.mac-platform.legacy .details-section .details-section:first-child {
57     border-top: none;
58 }
59
60 .details-section > .header {
61     position: -webkit-sticky;
62     top: -1px;
63     height: 23px;
64
65     background-color: rgb(242, 242, 242);
66     color: rgb(57, 57, 57);
67
68     white-space: nowrap;
69     overflow: hidden;
70     text-overflow: ellipsis;
71
72     font-size: 11px;
73     font-weight: bold;
74
75     padding: 4px 5px 4px 0;
76
77     /* Ensure the headers are displayed above scrollbars. */
78     z-index: 200;
79 }
80
81 body.mac-platform.legacy .details-section > .header {
82     border-bottom: 1px solid rgb(179, 179, 179);
83     box-shadow: inset rgba(255, 255, 255, 0.2) 0 1px 0;
84     background-color: transparent;
85     background-image: linear-gradient(to bottom, rgb(238, 240, 244), rgb(224, 226, 230));
86
87     border-top: 1px solid rgb(179, 179, 179);
88
89     text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
90 }
91
92 .details-section .details-section > .header {
93     top: 21px;
94     background-color: rgb(255, 255, 255);
95
96     /* Ensure these headers are displayed below the parent header but above scrollbars. */
97     z-index: 100;
98 }
99
100 .details-section .details-section:not(.collapsed) > .header {
101     border-bottom: 1px solid rgb(222, 222, 222);
102 }
103
104 body.mac-platform.legacy .details-section .details-section > .header {
105     background-color: transparent;
106     background-image: linear-gradient(to bottom, rgb(250, 250, 250), rgb(240, 240, 240));
107     box-shadow: none;
108 }
109
110 body.mac-platform.legacy .details-section .details-section.collapsed > .header {
111     box-shadow: none;
112 }
113
114 body.mac-platform.legacy .details-section:not(.collapsed) .data-grid.inline {
115     border-top: none;
116 }
117
118 .details-section.computed-style-properties:not(.collapsed) > .header {
119     background-color: rgb(255, 255, 255);
120 }
121
122 body.mac-platform.legacy .details-section.computed-style-properties:not(.collapsed) > .header {
123     background-color: transparent;
124 }
125
126 .details-section > .header::before {
127     display: block;
128     float: left;
129
130     width: 21px;
131     height: 100%;
132
133     background-image: -webkit-canvas(details-section-disclosure-triangle-open-normal);
134     background-repeat: no-repeat;
135     background-position: center;
136     background-size: 13px 13px;
137
138     content: "";
139 }
140
141 .details-section > .header:not(.mouse-over-options-element):active::before {
142     background-image: -webkit-canvas(details-section-disclosure-triangle-open-active);
143 }
144
145 .details-section.collapsed > .header::before {
146     background-image: -webkit-canvas(details-section-disclosure-triangle-closed-normal);
147 }
148
149 .details-section.collapsed > .header:not(.mouse-over-options-element):active::before {
150     background-image: -webkit-canvas(details-section-disclosure-triangle-closed-active);
151 }
152
153 .details-section > .header > label {
154     float: right;
155     font-size: 10px;
156     color: rgba(0, 0, 0, 0.6);
157     text-align: right;
158 }
159
160 .details-section.collapsed  > .header > label {
161     display: none;
162 }
163
164 .details-section > .header > label > input[type="checkbox"] {
165     margin: 0 0 0 5px;
166     vertical-align: 1px;
167     font-size: 10px;
168 }
169
170 .details-section > .header > :matches(.node-link, .go-to-arrow) {
171     float: right;
172 }
173
174 .details-section > .header .go-to-arrow {
175     width: 10px;
176     height: 12px;
177     margin-left: 3px;
178 }
179
180 .details-section > .content {
181     display: table;
182     width: 100%;
183     border-spacing: 0;
184     border-collapse: collapse;
185 }
186
187 .details-section.collapsed > .content {
188     display: none;
189 }
190
191 .details-section > .content > .group {
192     display: table-row-group;
193     border-bottom: 1px solid rgb(179, 179, 179);
194 }
195
196 body.mac-platform.legacy .details-section > .content > .group {
197     border-bottom: none;
198 }
199
200 .details-section > .content > .group:last-child {
201     border-bottom: none;
202 }
203
204 .details-section > .content > .group:nth-child(even) {
205     background-color: rgb(233, 233, 233);
206 }
207
208 body.mac-platform.legacy .details-section > .content > .group:nth-child(even) {
209     background-color: rgb(222, 222, 222);
210 }
211
212 .details-section > .content > .group:nth-child(even) > .row:matches(.simple:first-child > *, :not(.simple):first-child) {
213     border-top: 1px solid rgb(179, 179, 179);
214 }
215
216 body.mac-platform.legacy .details-section > .content > .group:matches(:nth-child(even), :last-child) > .row:not(.simple):last-child,
217 body.mac-platform.legacy .details-section > .content > .group:matches(:nth-child(even), :last-child) > .row.simple:last-child > * {
218     border-bottom: 1px solid rgb(179, 179, 179);
219 }
220
221 .details-section > .content > .group > .row.simple {
222     display: table-row;
223 }
224
225 .details-section > .content > .group > .row.simple:last-child > * {
226     padding-bottom: 5px !important;
227 }
228
229 .details-section > .content > .group > .row.simple.empty {
230     display: none;
231 }
232
233 .details-section > .content > .group > .row.empty.syntax-highlighted {
234     font-size: 10px;
235 }
236
237 .details-section > .content > .group > .row.simple.empty:last-child {
238     display: table-row;
239 }
240
241 .details-section > .content > .group > .row.simple.empty:last-child > * {
242     display: table-cell;
243     height: 1px;
244     font-size: 0;
245     color: transparent;
246     padding-top: 0;
247     padding-bottom: 3px !important;
248 }
249
250 .details-section > .content > .group > .row.simple.empty:last-child > * > * {
251     display: none;
252 }
253
254 .details-section > .content > .group > .row.simple > * {
255     display: table-cell;
256     vertical-align: top;
257     padding: 5px 4px 2px;
258 }
259
260 .details-section > .content > .group:first-child > .row.simple:first-child > * {
261     padding: 0px 4px 2px 4px;
262 }
263
264 body.mac-platform.legacy .details-section > .content > .group:first-child > .row.simple:first-child > * {
265     padding: 5px 4px 2px;
266 }
267
268 .details-section > .content > .group > .row.simple > .label {
269     color: rgb(51, 51, 51);
270
271     text-align: right;
272
273     padding-left: 6px;
274
275     width: 85px;
276 }
277
278 .details-section > .content > .group > .row.simple > .value {
279     word-wrap: break-word;
280
281     padding-right: 6px;
282
283     -webkit-user-select: text;
284     cursor: text;
285 }
286
287 .details-section > .content > .group > .row.simple > .value .go-to-arrow {
288     width: 10px;
289     height: 12px;
290     margin-left: 5px;
291 }
292
293 .details-section > .content > .group > .row.simple.data > .value {
294     word-break: break-all;
295 }
296
297 .details-section > .content > .group > .row:matches(.empty, .text) {
298     padding: 0 6px 7px 6px;
299     text-align: center;
300     color: gray;
301 }
302
303 body.mac-platform.legacy .details-section > .content > .group > .row:matches(.empty, .text) {
304     padding: 6px;
305 }
306
307 .details-section > .content > .group > .row.text {
308     -webkit-user-select: text;
309 }
310
311 .details-section > .content > .group > .row.properties:not(.empty) {
312     padding: 0 4px 6px 4px;
313 }
314
315 body.mac-platform.legacy .details-section > .content > .group > .row.properties:not(.empty) {
316     padding: 4px 6px;
317 }
318
319 .details-section > .content .data-grid {
320     border-left: none;
321     border-right: none;
322     border-bottom: none;
323 }
324
325 .details-section > .content .data-grid table.data {
326     background-image: none;
327 }
328
329 .details-section > .content .data-grid tr:nth-child(even) {
330     background-color: white;
331 }
332
333 .details-section > .content .data-grid tr:nth-child(odd) {
334     background-color: rgb(243, 246, 250);
335 }
336
337 .details-section > .content .data-grid td.value-column {
338     height: auto;
339     line-height: initial;
340     white-space: normal;
341 }
342
343 .details-section > .content .data-grid td.value-column > div {
344     white-space: normal;
345     word-break: break-all;
346 }