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