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