9b87b639d593a7493bbf9b774faf499e1b019a2e
[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 > .node-link,
171 .details-section > .header > .go-to-arrow {
172     float: right;
173 }
174
175 .details-section > .header .go-to-arrow {
176     width: 10px;
177     height: 12px;
178     margin-left: 3px;
179 }
180
181 .details-section > .content {
182     display: table;
183     width: 100%;
184     border-spacing: 0;
185     border-collapse: collapse;
186 }
187
188 .details-section.collapsed > .content {
189     display: none;
190 }
191
192 .details-section > .content > .group {
193     display: table-row-group;
194     border-bottom: 1px solid rgb(179, 179, 179);
195 }
196
197 body.mac-platform.legacy .details-section > .content > .group {
198     border-bottom: none;
199 }
200
201 .details-section > .content > .group:last-child {
202     border-bottom: none;
203 }
204
205 .details-section > .content > .group:nth-child(even) {
206     background-color: rgb(233, 233, 233);
207 }
208
209 body.mac-platform.legacy .details-section > .content > .group:nth-child(even) {
210     background-color: rgb(222, 222, 222);
211 }
212
213 .details-section > .content > .group:nth-child(even) > .row:not(.simple):first-child,
214 .details-section > .content > .group:nth-child(even) > .row.simple:first-child > * {
215     border-top: 1px solid rgb(179, 179, 179);
216 }
217
218 body.mac-platform.legacy .details-section > .content > .group:nth-child(even) > .row:not(.simple):last-child,
219 body.mac-platform.legacy .details-section > .content > .group:last-child > .row:not(.simple):last-child,
220 body.mac-platform.legacy .details-section > .content > .group:nth-child(even) > .row.simple:last-child > *,
221 body.mac-platform.legacy .details-section > .content > .group:last-child > .row.simple:last-child > * {
222     border-bottom: 1px solid rgb(179, 179, 179);
223 }
224
225 .details-section > .content > .group > .row.simple {
226     display: table-row;
227 }
228
229 .details-section > .content > .group > .row.simple:last-child > * {
230     padding-bottom: 5px !important;
231 }
232
233 .details-section > .content > .group > .row.simple.empty {
234     display: none;
235 }
236
237 .details-section > .content > .group > .row.empty.syntax-highlighted {
238     font-size: 10px;
239 }
240
241 .details-section > .content > .group > .row.simple.empty:last-child {
242     display: table-row;
243 }
244
245 .details-section > .content > .group > .row.simple.empty:last-child > * {
246     display: table-cell;
247     height: 1px;
248     font-size: 0;
249     color: transparent;
250     padding-top: 0;
251     padding-bottom: 3px !important;
252 }
253
254 .details-section > .content > .group > .row.simple.empty:last-child > * > * {
255     display: none;
256 }
257
258 .details-section > .content > .group > .row.simple > * {
259     display: table-cell;
260     vertical-align: top;
261     padding: 5px 4px 2px;
262 }
263
264 .details-section > .content > .group:first-child > .row.simple:first-child > * {
265     padding: 0px 4px 2px 4px;
266 }
267
268 body.mac-platform.legacy .details-section > .content > .group:first-child > .row.simple:first-child > * {
269     padding: 5px 4px 2px;
270 }
271
272 .details-section > .content > .group > .row.simple > .label {
273     color: rgb(51, 51, 51);
274
275     text-align: right;
276
277     padding-left: 6px;
278
279     width: 85px;
280 }
281
282 .details-section > .content > .group > .row.simple > .value {
283     word-wrap: break-word;
284
285     padding-right: 6px;
286
287     -webkit-user-select: text;
288     cursor: text;
289 }
290
291 .details-section > .content > .group > .row.simple > .value .go-to-arrow {
292     width: 10px;
293     height: 12px;
294     margin-left: 5px;
295 }
296
297 .details-section > .content > .group > .row.simple.data > .value {
298     word-break: break-all;
299 }
300
301 .details-section > .content > .group > .row.empty,
302 .details-section > .content > .group > .row.text {
303     padding: 0 6px 7px 6px;
304     text-align: center;
305     color: gray;
306 }
307
308 body.mac-platform.legacy .details-section > .content > .group > .row.empty,
309 body.mac-platform.legacy .details-section > .content > .group > .row.text {
310     padding: 6px;
311 }
312
313 .details-section > .content > .group > .row.text {
314     -webkit-user-select: text;
315 }
316
317 .details-section > .content > .group > .row.properties:not(.empty) {
318     padding: 0 4px 6px 4px;
319 }
320
321 body.mac-platform.legacy .details-section > .content > .group > .row.properties:not(.empty) {
322     padding: 4px 6px;
323 }
324
325 .details-section > .content .data-grid {
326     border-left: none;
327     border-right: none;
328     border-bottom: none;
329 }
330
331 .details-section > .content .data-grid table.data {
332     background-image: none;
333 }
334
335 .details-section > .content .data-grid tr:nth-child(even) {
336     background-color: white;
337 }
338
339 .details-section > .content .data-grid tr:nth-child(odd) {
340     background-color: rgb(243, 246, 250);
341 }
342
343 .details-section > .content .data-grid td.value-column {
344     height: auto;
345     line-height: initial;
346     white-space: normal;
347 }
348
349 .details-section > .content .data-grid td.value-column > div {
350     white-space: normal;
351     word-break: break-all;
352 }