Web Inspector: UI fonts should pull from system fonts automatically to whatever degre...
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / NavigationSidebarPanel.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 .sidebar > .panel.navigation > .content {
27     position: absolute;
28     top: 0;
29     left: 0;
30     right: 0;
31     bottom: 22px;
32
33     overflow-x: hidden;
34     overflow-y: auto;
35 }
36
37 .sidebar > .panel.navigation > .filter-bar {
38     position: absolute;
39     bottom: 0;
40     left: 0;
41     right: 0;
42 }
43
44 .sidebar > .panel.navigation > .overflow-shadow {
45     position: absolute;
46     bottom: 21px;
47     left: 0;
48     right: 0;
49     height: 5px;
50
51     pointer-events: none;
52
53     background-image: radial-gradient(center, ellipse closest-side, rgba(0, 0, 0, 0.2) 25%, transparent),
54         linear-gradient(to right, rgba(0, 0, 0, 0.0125), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.0125));
55     background-size: 125% 15px, 100% 1px;
56     background-position: top center, bottom center;
57     background-repeat: no-repeat;
58
59     opacity: 0;
60 }
61
62 .sidebar > .panel.navigation > .overflow-shadow.top {
63     top: 21px;
64     bottom: initial;
65     background-position: bottom center, top center;
66 }
67
68 .sidebar > .panel.navigation > .empty-content-placeholder {
69     position: absolute;
70     top: 0;
71     left: 0;
72     right: 0;
73     bottom: 21px;
74
75     display: -webkit-flex;
76
77     -webkit-justify-content: center;
78     -webkit-align-items: center;
79 }
80
81 .sidebar > .panel.navigation > .empty-content-placeholder > .message {
82     display: inline-block;
83     white-space: nowrap;
84
85     font-size: 13px;
86
87     color: white;
88     background-color: rgba(0, 0, 0, 0.15);
89     text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0;
90     box-shadow: inset rgba(0, 0, 0, 0.2) 0 1px 0, rgba(255, 255, 255, 0.4) 0 1px 0;
91
92     border-radius: 6px;
93     padding: 5px 15px 6px;
94 }
95
96 .navigation-sidebar-panel-content-tree-outline,
97 .navigation-sidebar-panel-content-tree-outline .children {
98     position: relative;
99
100     padding: 0;
101     margin: 0;
102
103     outline: none;
104
105     list-style: none;
106 }
107
108 .navigation-sidebar-panel-content-tree-outline .children {
109     display: none;
110 }
111
112 .navigation-sidebar-panel-content-tree-outline .children.expanded {
113     display: block;
114 }
115
116 .navigation-sidebar-panel-content-tree-outline .item {
117     position: relative;
118
119     height: 36px;
120     line-height: 34px;
121
122  /* The item depth padding style rules are generated by NavigationSidebarPanel.js.
123     Any changes to this padding needs to be changed there too. */
124
125     padding: 0 5px;
126
127     border-top: 1px solid transparent;
128
129     white-space: nowrap;
130 }
131
132 .navigation-sidebar-panel-content-tree-outline.hide-disclosure-buttons > .children {
133     display: none;
134 }
135
136 .navigation-sidebar-panel-content-tree-outline > .children.hide-disclosure-buttons > .children {
137     display: none;
138 }
139
140 .navigation-sidebar-panel-content-tree-outline:not(.hide-disclosure-buttons) .item:not(.parent) .icon {
141     margin-left: 16px;
142 }
143
144 .navigation-sidebar-panel-content-tree-outline.hide-disclosure-buttons .item.small {
145     padding-left: 8px;
146 }
147
148 .navigation-sidebar-panel-content-tree-outline .item .disclosure-button {
149     display: none;
150
151     float: left;
152
153     width: 16px;
154     height: 100%;
155
156     border: 0;
157
158     background-color: transparent;
159     background-image: -webkit-canvas(navigation-sidebar-panel-disclosure-triangle-closed-normal);
160     background-repeat: no-repeat;
161     background-position: center;
162     background-size: 13px 13px;
163
164     -webkit-appearance: none;
165 }
166
167 .navigation-sidebar-panel-content-tree-outline.hide-disclosure-buttons .item .disclosure-button {
168     display: none;
169 }
170
171 .navigation-sidebar-panel-content-tree-outline .item.parent .disclosure-button {
172     display: block;
173 }
174
175 .navigation-sidebar-panel-content-tree-outline .item.selected .disclosure-button {
176     background-image: -webkit-canvas(navigation-sidebar-panel-disclosure-triangle-closed-selected) !important;
177 }
178
179 .navigation-sidebar-panel-content-tree-outline .item.expanded .disclosure-button {
180     background-image: -webkit-canvas(navigation-sidebar-panel-disclosure-triangle-open-normal);
181 }
182
183 .navigation-sidebar-panel-content-tree-outline .item.selected.expanded .disclosure-button {
184     background-image: -webkit-canvas(navigation-sidebar-panel-disclosure-triangle-open-selected) !important;
185 }
186
187 .navigation-sidebar-panel-content-tree-outline .item .icon {
188     float: left;
189     position: relative;
190
191     width: 32px;
192     height: 32px;
193
194     margin-top: 1px;
195     margin-right: 3px;
196 }
197
198 .navigation-sidebar-panel-content-tree-outline .item .status {
199     float: right;
200
201     height: 16px;
202
203     margin-top: 9px;
204     margin-left: 4px;
205
206     line-height: 1em;
207 }
208
209 .navigation-sidebar-panel-content-tree-outline .item .status:empty {
210     display: none;
211 }
212
213 .navigation-sidebar-panel-content-tree-outline .item.selected {
214     color: white;
215
216     border-top: 1px solid rgb(162, 177, 201);
217
218     background-image: linear-gradient(to bottom, rgb(175, 190, 213), rgb(130, 151, 182));
219     background-origin: padding;
220     background-clip: padding;
221 }
222
223 .navigation-sidebar-panel-content-tree-outline:focus .item.selected {
224     border-top: 1px solid rgb(148, 174, 193);
225     background-image: linear-gradient(to bottom, rgb(154, 180, 203), rgb(112, 139, 176));
226 }
227
228 body.window-inactive .navigation-sidebar-panel-content-tree-outline .item.selected {
229     border-top: 1px solid rgb(168, 168, 168);
230     background-image: linear-gradient(to bottom, rgb(194, 194, 194), rgb(158, 158, 158));
231 }
232
233 .navigation-sidebar-panel-content-tree-outline .item .titles {
234     position: relative;
235     top: 5px;
236
237     line-height: 11px;
238
239     padding-bottom: 1px;
240
241     text-overflow: ellipsis;
242     overflow: hidden;
243     white-space: nowrap;
244 }
245
246 .navigation-sidebar-panel-content-tree-outline .item .highlighted {
247     background-color: rgba(235, 215, 38, 0.2);
248     border-bottom: 1px solid rgb(237, 202, 71);
249 }
250
251 .navigation-sidebar-panel-content-tree-outline .item .titles.no-subtitle {
252     top: 10px;
253 }
254
255 .navigation-sidebar-panel-content-tree-outline .item .title::after {
256     content: "\A"; /* Newline */
257     white-space: pre;
258 }
259
260 .navigation-sidebar-panel-content-tree-outline .item .subtitle {
261     font-size: 9px;
262     color: rgba(0, 0, 0, 0.7);
263 }
264
265 .navigation-sidebar-panel-content-tree-outline .item.selected .subtitle {
266     color: rgba(255, 255, 255, 0.9);
267 }
268
269 .navigation-sidebar-panel-content-tree-outline .item .titles.no-subtitle .subtitle,
270 .navigation-sidebar-panel-content-tree-outline .item .subtitle:empty {
271     display: none;
272 }
273
274 .navigation-sidebar-panel-content-tree-outline.small .item,
275 .navigation-sidebar-panel-content-tree-outline .children.small .item,
276 .navigation-sidebar-panel-content-tree-outline .item.small {
277     height: 20px;
278 }
279
280 .navigation-sidebar-panel-content-tree-outline.small.two-line .item,
281 .navigation-sidebar-panel-content-tree-outline .children.small.two-line .item,
282 .navigation-sidebar-panel-content-tree-outline .item.small.two-line {
283     height: 26px;
284 }
285
286 .navigation-sidebar-panel-content-tree-outline.small .item .icon,
287 .navigation-sidebar-panel-content-tree-outline .children.small .item .icon,
288 .navigation-sidebar-panel-content-tree-outline .item.small .icon {
289     width: 16px;
290     height: 16px;
291 }
292
293 .navigation-sidebar-panel-content-tree-outline.small .item .status,
294 .navigation-sidebar-panel-content-tree-outline .children.small .item .status,
295 .navigation-sidebar-panel-content-tree-outline .item.small .status {
296     margin-top: 1px;
297 }
298
299 .navigation-sidebar-panel-content-tree-outline.small .item .status .indeterminate-progress-spinner,
300 .navigation-sidebar-panel-content-tree-outline .children.small .item .status .indeterminate-progress-spinner,
301 .navigation-sidebar-panel-content-tree-outline .item.small .status .indeterminate-progress-spinner {
302     margin-top: 1px;
303     width: 14px;
304     height: 14px;
305 }
306
307 .navigation-sidebar-panel-content-tree-outline.small .item .titles,
308 .navigation-sidebar-panel-content-tree-outline .children.small .item .titles,
309 .navigation-sidebar-panel-content-tree-outline .item.small .titles {
310     top: 2px;
311     line-height: normal;
312 }
313
314 .navigation-sidebar-panel-content-tree-outline.small.two-line .item .status,
315 .navigation-sidebar-panel-content-tree-outline .children.small.two-line .item .status,
316 .navigation-sidebar-panel-content-tree-outline .item.small.two-line .status {
317     margin-top: 4px;
318 }
319
320 .navigation-sidebar-panel-content-tree-outline.small.two-line .item .titles,
321 .navigation-sidebar-panel-content-tree-outline .children.small.two-line .item .titles,
322 .navigation-sidebar-panel-content-tree-outline .item.small.two-line .titles {
323     top: 0;
324     line-height: 11px;
325 }
326
327 .navigation-sidebar-panel-content-tree-outline .item.small.two-line .titles.no-subtitle {
328     top: 6px;
329 }
330
331 .navigation-sidebar-panel-content-tree-outline.small .item .subtitle,
332 .navigation-sidebar-panel-content-tree-outline .children.small .item .subtitle,
333 .navigation-sidebar-panel-content-tree-outline .item.small .subtitle {
334     font-size: inherit;
335 }
336
337 .navigation-sidebar-panel-content-tree-outline.small.two-line .item .icon,
338 .navigation-sidebar-panel-content-tree-outline .children.small.two-line .item .icon,
339 .navigation-sidebar-panel-content-tree-outline .item.small.two-line .icon {
340     margin-top: 4px;
341 }
342
343 .navigation-sidebar-panel-content-tree-outline.small:not(.two-line) .item .title::after,
344 .navigation-sidebar-panel-content-tree-outline .children.small:not(.two-line) .item .title::after,
345 .navigation-sidebar-panel-content-tree-outline .item.small:not(.two-line) .title::after {
346     content: "";
347 }
348
349 .navigation-sidebar-panel-content-tree-outline.small:not(.two-line) .item .subtitle::before,
350 .navigation-sidebar-panel-content-tree-outline .children.small:not(.two-line) .item .subtitle::before,
351 .navigation-sidebar-panel-content-tree-outline .item.small:not(.two-line) .subtitle::before {
352     content: " — ";
353 }