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