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