Web Inspector: AXI: node-link-list should be collapsible
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / Main.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 * {
27     box-sizing: border-box;
28 }
29
30 body {
31     display: flex;
32     flex-direction: column;
33
34     font-family: -apple-system, sans-serif;
35     font-size: 11px;
36
37     position: absolute;
38     top: 0;
39     left: 0;
40     right: 0;
41     bottom: 0;
42
43     padding: 0;
44     margin: 0;
45
46     overflow: hidden;
47
48     -webkit-user-select: none;
49     -webkit-user-drag: none;
50
51     cursor: default;
52
53     -webkit-font-smoothing: subpixel-antialiased;
54
55     tab-size: 4; /* FIXME: This should be controlled by a setting. <rdar://problem/10593948> */
56 }
57
58 body:not(.mavericks) {
59     background-color: white;
60 }
61
62 body.docked.bottom {
63     border-top: 1px solid hsl(0, 0%, 78%);
64 }
65
66 body.docked.right {
67     border-left: 1px solid hsl(0, 0%, 70%);
68 }
69
70 body.window-inactive.docked.bottom {
71     border-top-color: hsl(0, 0%, 85%);
72 }
73
74 body.window-inactive.docked.right {
75     border-left-color: hsl(0, 0%, 85%);
76 }
77
78 #docked-resizer {
79     display: none;
80
81     z-index: var(--z-index-resizer);
82 }
83
84 body.docked #docked-resizer {
85     display: block;
86 }
87
88 body.docked.bottom #docked-resizer {
89     position: absolute;
90     top: 0;
91     left: 0;
92     right: 0;
93     height: 3px;
94
95     cursor: row-resize;
96 }
97
98 body.docked.right #docked-resizer {
99     position: absolute;
100     top: 0;
101     left: 0;
102     bottom: 0;
103     width: 3px;
104
105     cursor: col-resize;
106 }
107
108 body.docked.bottom #toolbar {
109     cursor: row-resize;
110 }
111
112 body.docked.bottom #toolbar .item:not(.flexible-space) {
113     cursor: default;
114 }
115
116 input[type=range] {
117     -webkit-appearance: none;
118 }
119
120 input[type=range]::-webkit-slider-runnable-track::before {
121     content: "";
122     display: block;
123     background: hsl(212, 92%, 54%);
124     height: 1px;
125     margin: 8px 2px -8px 2px;
126 }
127
128 #main {
129     display: flex;
130     flex: 1;
131     min-height: 0;
132
133     background-color: white;
134
135     /* The position and z-index are needed to make negative z-index work in the DOM tree. */
136     position: relative;
137     z-index: 0;
138 }
139
140 #navigation-sidebar {
141     width: 300px;
142 }
143
144 body.docked.right #navigation-sidebar.collapsed > .resizer {
145     pointer-events: none;
146 }
147
148 #content {
149     display: flex;
150     flex-direction: column;
151     flex: 1;
152 }
153
154 #tab-browser {
155     flex: 1;
156 }
157
158 #split-content-browser {
159     border-top: 1px solid hsl(0, 0%, 70%);
160 }
161
162 body.window-inactive #split-content-browser {
163     border-top-color: hsl(0, 0%, 85%);
164 }
165
166 #split-content-browser > .navigation-bar {
167     cursor: row-resize;
168
169     background-color: hsl(0, 0%, 94%);
170 }
171
172 #split-content-browser > .navigation-bar .item:not(.flexible-space) {
173     cursor: default;
174 }
175
176 #split-content-browser .hierarchical-path-component.log-icon .icon {
177     margin-left: 6px;
178     margin-right: 6px;
179     opacity: 0.7;
180 }
181
182 #split-content-browser .hierarchical-path-component.log-icon .title {
183     color: hsla(0, 0%, 0%, 0.75);
184 }
185
186 #split-content-browser .hierarchical-path-component.log-icon select {
187     display: none;
188 }
189
190 #split-content-browser > .navigation-bar > :matches(.hierarchical-path, .log-scope-bar) {
191     pointer-events: none;
192 }
193
194 #split-content-browser > .navigation-bar > .log-scope-bar > li {
195     pointer-events: all;
196 }
197
198 #details-sidebar {
199     width: 300px;
200 }
201
202 .message-text-view {
203     display: flex;
204     z-index: var(--z-index-popover);
205
206     position: absolute;
207     top: 0;
208     left: 0;
209     right: 0;
210     bottom: 0;
211
212     padding-left: 20%;
213     padding-right: 20%;
214
215     justify-content: center;
216     align-items: center;
217
218     line-height: 20px;
219     white-space: pre-wrap;
220     text-align: center;
221
222     font-size: 18px;
223     font-weight: bold;
224
225     color: hsl(0, 0%, 74%);
226     background-color: white;
227 }
228
229 .message-text-view.error {
230     color: hsl(0, 86%, 47%);
231 }
232
233 .message-text-view.error::before {
234     display: inline-block;
235
236     width: 20px;
237     height: 20px;
238     margin-right: 4px;
239     vertical-align: bottom;
240
241     background-image: url(../Images/Error.svg);
242     background-size: 100% 100%;
243     content: "";
244 }
245
246 .resource-link {
247     display: block;
248 }
249
250 .resource-link + .resource-link {
251     margin-top: 2px;
252 }
253
254 .resource-link,
255 .go-to-link {
256     color: hsl(0, 0%, 33%);
257     text-decoration: underline;
258     cursor: pointer;
259 }
260
261 .go-to-link:not(.dont-float) {
262     float: right;
263     margin-left: 5px;
264     max-width: 100%;
265     text-overflow: ellipsis;
266     overflow: hidden;
267     white-space: nowrap;
268 }
269
270 .go-to-arrow {
271     -webkit-appearance: none;
272
273     padding: 0;
274     margin: 0;
275     border: none;
276
277     background-color: transparent;
278     background-image: url(../Images/GoToArrow.svg#normal);
279     background-repeat: no-repeat;
280     background-position: center;
281     background-size: 10px 10px;
282
283     width: 16px;
284     height: 16px;
285
286  /* Workaround: for text boxes overlapping float:right. Give go-to arrows a z-index to ensure they are clickable.
287     <rdar://problem/11536832> Cannot access content view from Instruments navigator if name of file is truncated */
288     position: relative;
289     z-index: 1;
290 }
291
292 .go-to-arrow:active {
293     background-image: url(../Images/GoToArrow.svg#active);
294 }
295
296 :matches(:focus, .force-focus) .selected .go-to-arrow {
297     background-image: url(../Images/GoToArrow.svg#selected);
298 }
299
300 :matches(:focus, .force-focus) .selected .go-to-arrow:active {
301     background-image: url(../Images/GoToArrow.svg#selected-active);
302 }
303
304 .hidden {
305     display: none !important;
306 }
307
308 .expand-list-button {
309     -webkit-appearance: none;
310     text-decoration: underline;
311     background-color: transparent;
312     padding: 0;
313     margin: 0;
314     border: 0;
315     cursor: pointer;
316     color: black;
317 }
318
319 .node-link {
320     text-decoration: underline;
321     cursor: pointer;
322 }
323
324 .node-link-list, .node-link-list li:not([hidden]) {
325     display: block;
326     margin: 0;
327     padding: 0;
328     line-height: 1.2;
329 }
330
331 .node-link-list li {
332     margin: 0 0 0.4em;
333 }
334
335 .node-link-list li:last-child {
336     margin: 0;
337 }
338
339 .value-with-clarification .clarification {
340     color: hsl(0, 0%, 40%);
341 }
342
343 .bouncy-highlight {
344     position: absolute;
345     z-index: var(--z-index-highlight);
346
347     box-shadow: inset hsl(50, 91%, 76%) 0 -1px 0, hsl(52, 56%, 60%) 0 1px 1px, hsla(0, 0%, 0%, 0.33) 0 1px 2px 1px;
348     text-shadow: white 0 0 2px;
349
350     background: linear-gradient(to bottom, hsl(54, 93%, 70%), hsl(50, 84%, 67%));
351     border-radius: 7px;
352
353     padding: 2px 4px;
354     margin-top: -2px;
355     margin-left: -4px;
356
357     -webkit-user-select: none;
358     pointer-events: none;
359
360     animation-name: bouncy-highlight-animation;
361     animation-duration: 750ms;
362     animation-timing-function: ease-in-out;
363
364     opacity: 0;
365 }
366
367 @keyframes bouncy-highlight-animation {
368     0% {
369         transform: scale(1);
370         opacity: 1;
371     }
372
373     12.5% {
374         transform: scale(1.25);
375     }
376
377     25% {
378         transform: scale(1);
379     }
380
381     62.5% {
382         opacity: 1;
383     }
384
385     100% {
386         opacity: 0;
387     }
388 }