Web Inspector: UI fonts should pull from system fonts automatically to whatever degre...
[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     margin-top: -1px;
28     margin-bottom: -1px;
29
30     font-size: 10px;
31 }
32
33 .details-section > .header {
34     position: -webkit-sticky;
35     top: -1px;
36     height: 23px;
37
38     border-top: 1px solid rgb(153, 153, 153);
39     border-bottom: 1px solid rgb(153, 153, 153);
40     box-shadow: inset rgba(255, 255, 255, 0.2) 0 1px 0;
41     background-image: linear-gradient(to bottom, rgb(238, 240, 244), rgb(224, 226, 230));
42
43     color: rgb(57, 57, 57);
44     text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
45
46     white-space: nowrap;
47     overflow: hidden;
48     text-overflow: ellipsis;
49
50     font-size: 11px;
51     font-weight: bold;
52
53     padding: 4px 5px 4px 0;
54
55     /* Ensure the headers are displayed above scrollbars. */
56     z-index: 200;
57 }
58
59 .details-section .details-section > .header {
60     background-image: linear-gradient(to bottom, rgb(250, 250, 250), rgb(240, 240, 240));
61
62     top: 21px;
63
64     /* Ensure these headers are displayed below the parent header but above scrollbars. */
65     z-index: 100;
66 }
67
68 .details-section > .header::before {
69     display: block;
70     float: left;
71
72     width: 21px;
73     height: 100%;
74
75     background-image: -webkit-canvas(details-section-disclosure-triangle-open-normal);
76     background-repeat: no-repeat;
77     background-position: center;
78     background-size: 13px 13px;
79
80     content: "";
81 }
82
83 .details-section > .header:not(.mouse-over-options-element):active::before {
84     background-image: -webkit-canvas(details-section-disclosure-triangle-open-active);
85 }
86
87 .details-section.collapsed > .header::before {
88     background-image: -webkit-canvas(details-section-disclosure-triangle-closed-normal);
89 }
90
91 .details-section.collapsed > .header:not(.mouse-over-options-element):active::before {
92     background-image: -webkit-canvas(details-section-disclosure-triangle-closed-active);
93 }
94
95 .details-section > .header > label {
96     float: right;
97     font-size: 10px;
98     color: rgba(0, 0, 0, 0.6);
99     text-align: right;
100 }
101
102 .details-section.collapsed  > .header > label {
103     display: none;
104 }
105
106 .details-section > .header > label > input[type="checkbox"] {
107     margin: 0 0 0 5px;
108     vertical-align: 1px;
109     font-size: 10px;
110 }
111
112 .details-section > .header > .node-link,
113 .details-section > .header > .go-to-arrow {
114     float: right;
115 }
116
117 .details-section > .header .go-to-arrow {
118     width: 10px;
119     height: 12px;
120     margin-left: 3px;
121 }
122
123 .details-section > .content {
124     display: table;
125     width: 100%;
126     border-spacing: 0;
127     border-collapse: collapse;
128 }
129
130 .details-section.collapsed > .content {
131     display: none;
132 }
133
134 .details-section > .content > .group {
135     display: table-row-group;
136 }
137
138 .details-section > .content > .group:nth-child(even) {
139     background-color: rgb(222, 222, 222);
140 }
141
142 .details-section > .content > .group:nth-child(even) > .row:not(.simple):first-child,
143 .details-section > .content > .group:nth-child(even) > .row.simple:first-child > * {
144     border-top: 1px solid rgb(153, 153, 153);
145 }
146
147 .details-section > .content > .group:nth-child(even) > .row:not(.simple):last-child,
148 .details-section > .content > .group:last-child > .row:not(.simple):last-child,
149 .details-section > .content > .group:nth-child(even) > .row.simple:last-child > *,
150 .details-section > .content > .group:last-child > .row.simple:last-child > * {
151     border-bottom: 1px solid rgb(153, 153, 153);
152 }
153
154 .details-section > .content > .group > .row.simple {
155     display: table-row;
156 }
157
158 .details-section > .content > .group > .row.simple:last-child > * {
159     padding-bottom: 5px !important;
160 }
161
162 .details-section > .content > .group > .row.simple.empty {
163     display: none;
164 }
165
166 .details-section > .content > .group > .row.empty.syntax-highlighted {
167     font-size: 10px;
168 }
169
170 .details-section > .content > .group > .row.simple.empty:last-child {
171     display: table-row;
172 }
173
174 .details-section > .content > .group > .row.simple.empty:last-child > * {
175     display: table-cell;
176     height: 1px;
177     font-size: 0;
178     color: transparent;
179     padding-top: 0;
180     padding-bottom: 3px !important;
181 }
182
183 .details-section > .content > .group > .row.simple.empty:last-child > * > * {
184     display: none;
185 }
186
187 .details-section > .content > .group > .row.simple > * {
188     display: table-cell;
189     vertical-align: top;
190     padding: 5px 4px 2px;
191 }
192
193 .details-section > .content > .group > .row.simple > .label {
194     color: rgb(51, 51, 51);
195
196     text-align: right;
197
198     padding-left: 6px;
199
200     width: 85px;
201 }
202
203 .details-section > .content > .group > .row.simple > .value {
204     word-wrap: break-word;
205
206     padding-right: 6px;
207
208     -webkit-user-select: text;
209     cursor: text;
210 }
211
212 .details-section > .content > .group > .row.simple > .value .go-to-arrow {
213     width: 10px;
214     height: 12px;
215     margin-left: 5px;
216 }
217
218 .details-section > .content > .group > .row.simple.data > .value {
219     word-break: break-all;
220 }
221
222 .details-section > .content > .group > .row.empty {
223     padding: 6px;
224     text-align: center;
225     color: gray;
226 }
227
228 .details-section > .content > .group > .row.properties:not(.empty) {
229     padding: 4px 6px;
230 }
231
232 .details-section > .content .data-grid {
233     border: none;
234 }
235
236 .details-section > .content .data-grid table.data {
237     background-image: none;
238 }
239
240 .details-section > .content .data-grid tr:nth-child(even) {
241     background-color: white;
242 }
243
244 .details-section > .content .data-grid tr:nth-child(odd) {
245     background-color: rgb(243, 246, 250);
246 }
247
248 .details-section > .content .data-grid td.value-column {
249     height: auto;
250     line-height: initial;
251     white-space: normal;
252 }
253
254 .details-section > .content .data-grid td.value-column > div {
255     white-space: normal;
256     word-break: break-all;
257 }