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
32body.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
44body.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.details-section > .header {
57    position: -webkit-sticky;
58    top: -1px;
59    height: 23px;
60
61    background-color: rgb(242, 242, 242);
62    color: rgb(57, 57, 57);
63
64    white-space: nowrap;
65    overflow: hidden;
66    text-overflow: ellipsis;
67
68    font-size: 11px;
69    font-weight: bold;
70
71    padding: 4px 5px 4px 0;
72
73    /* Ensure the headers are displayed above scrollbars. */
74    z-index: 200;
75}
76
77body.mac-platform.legacy .details-section > .header {
78    border-bottom: 1px solid rgb(179, 179, 179);
79    box-shadow: inset rgba(255, 255, 255, 0.2) 0 1px 0;
80    background-color: transparent;
81    background-image: linear-gradient(to bottom, rgb(238, 240, 244), rgb(224, 226, 230));
82
83    border-top: 1px solid rgb(179, 179, 179);
84
85    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
86}
87
88.details-section .details-section > .header {
89    top: 21px;
90    background-color: rgb(255, 255, 255);
91
92    /* Ensure these headers are displayed below the parent header but above scrollbars. */
93    z-index: 100;
94}
95
96.details-section .details-section:not(.collapsed) > .header {
97    border-bottom: 1px solid rgb(222, 222, 222);
98}
99
100body.mac-platform.legacy .details-section .details-section > .header {
101    background-color: transparent;
102    background-image: linear-gradient(to bottom, rgb(250, 250, 250), rgb(240, 240, 240));
103    box-shadow: none;
104}
105
106body.mac-platform.legacy .details-section .details-section.collapsed > .header {
107    box-shadow: none;
108}
109
110body.mac-platform.legacy .details-section:not(.collapsed) .data-grid.inline {
111    border-top: none;
112}
113
114.details-section.computed-style-properties:not(.collapsed) > .header {
115    background-color: rgb(255, 255, 255);
116}
117
118body.mac-platform.legacy .details-section.computed-style-properties:not(.collapsed) > .header {
119    background-color: transparent;
120}
121
122.details-section > .header::before {
123    display: block;
124    float: left;
125
126    width: 21px;
127    height: 100%;
128
129    background-image: -webkit-canvas(details-section-disclosure-triangle-open-normal);
130    background-repeat: no-repeat;
131    background-position: center;
132    background-size: 13px 13px;
133
134    content: "";
135}
136
137.details-section > .header:not(.mouse-over-options-element):active::before {
138    background-image: -webkit-canvas(details-section-disclosure-triangle-open-active);
139}
140
141.details-section.collapsed > .header::before {
142    background-image: -webkit-canvas(details-section-disclosure-triangle-closed-normal);
143}
144
145.details-section.collapsed > .header:not(.mouse-over-options-element):active::before {
146    background-image: -webkit-canvas(details-section-disclosure-triangle-closed-active);
147}
148
149.details-section > .header > label {
150    float: right;
151    font-size: 10px;
152    color: rgba(0, 0, 0, 0.6);
153    text-align: right;
154}
155
156.details-section.collapsed  > .header > label {
157    display: none;
158}
159
160.details-section > .header > label > input[type="checkbox"] {
161    margin: 0 0 0 5px;
162    vertical-align: 1px;
163    font-size: 10px;
164}
165
166.details-section > .header > .node-link,
167.details-section > .header > .go-to-arrow {
168    float: right;
169}
170
171.details-section > .header .go-to-arrow {
172    width: 10px;
173    height: 12px;
174    margin-left: 3px;
175}
176
177.details-section > .content {
178    display: table;
179    width: 100%;
180    border-spacing: 0;
181    border-collapse: collapse;
182}
183
184.details-section.collapsed > .content {
185    display: none;
186}
187
188.details-section > .content > .group {
189    display: table-row-group;
190    border-bottom: 1px solid rgb(179, 179, 179);
191}
192
193body.mac-platform.legacy .details-section > .content > .group {
194    border-bottom: none;
195}
196
197.details-section > .content > .group:last-child {
198    border-bottom: none;
199}
200
201.details-section > .content > .group:nth-child(even) {
202    background-color: rgb(233, 233, 233);
203}
204
205body.mac-platform.legacy .details-section > .content > .group:nth-child(even) {
206    background-color: rgb(222, 222, 222);
207}
208
209.details-section > .content > .group:nth-child(even) > .row:not(.simple):first-child,
210.details-section > .content > .group:nth-child(even) > .row.simple:first-child > * {
211    border-top: 1px solid rgb(179, 179, 179);
212}
213
214body.mac-platform.legacy .details-section > .content > .group:nth-child(even) > .row:not(.simple):last-child,
215body.mac-platform.legacy .details-section > .content > .group:last-child > .row:not(.simple):last-child,
216body.mac-platform.legacy .details-section > .content > .group:nth-child(even) > .row.simple:last-child > *,
217body.mac-platform.legacy .details-section > .content > .group: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 > .row.simple > .label {
261    color: rgb(51, 51, 51);
262
263    text-align: right;
264
265    padding-left: 6px;
266
267    width: 85px;
268}
269
270.details-section > .content > .group > .row.simple > .value {
271    word-wrap: break-word;
272
273    padding-right: 6px;
274
275    -webkit-user-select: text;
276    cursor: text;
277}
278
279.details-section > .content > .group > .row.simple > .value .go-to-arrow {
280    width: 10px;
281    height: 12px;
282    margin-left: 5px;
283}
284
285.details-section > .content > .group > .row.simple.data > .value {
286    word-break: break-all;
287}
288
289.details-section > .content > .group > .row.empty {
290    padding: 6px;
291    text-align: center;
292    color: gray;
293}
294
295.details-section > .content > .group > .row.properties:not(.empty) {
296    padding: 4px 6px;
297}
298
299.details-section > .content .data-grid {
300    border-left: none;
301    border-right: none;
302    border-bottom: none;
303}
304
305.details-section > .content .data-grid table.data {
306    background-image: none;
307}
308
309.details-section > .content .data-grid tr:nth-child(even) {
310    background-color: white;
311}
312
313.details-section > .content .data-grid tr:nth-child(odd) {
314    background-color: rgb(243, 246, 250);
315}
316
317.details-section > .content .data-grid td.value-column {
318    height: auto;
319    line-height: initial;
320    white-space: normal;
321}
322
323.details-section > .content .data-grid td.value-column > div {
324    white-space: normal;
325    word-break: break-all;
326}
327