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