RegistrationDatabase::openSQLiteDatabase can spin
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / TabBar.css
1 /*
2  * Copyright (C) 2015-2018 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 .tab-bar {
27     position: absolute;
28     top: var(--undocked-title-area-height);
29     left: 0;
30     right: 0;
31     height: var(--tab-bar-height);
32
33     display: flex;
34
35     --tab-item-dark-border-color: hsl(0, 0%, 59%);
36     --tab-item-medium-border-color: hsl(0, 0%, 65%);
37     --tab-item-light-border-color: hsl(0, 0%, 85%);
38
39     --tab-item-medium-border-style: 1px solid var(--tab-item-medium-border-color);
40
41     --tab-bar-border-z-index: 10;
42 }
43
44 body.big-sur .tab-bar {
45     --tab-item-light-border-color: hsl(0, 0%, 85%);
46     --tab-item-medium-border-color: hsl(0, 0%, 85%);
47     --tab-item-dark-border-color: hsl(0, 0%, 75%);
48 }
49
50 body:not(.docked) .tab-bar {
51     background: var(--tab-bar-background);
52 }
53
54 body.big-sur:not(.docked) .tab-bar {
55     --tab-bar-background: hsl(0, 0%, 90%);
56 }
57
58 body:not(.big-sur):not(.docked) .tab-bar {
59     background-size: 100% 200%;
60     --tab-bar-background: linear-gradient(to bottom, hsl(0, 0%, 78%), hsl(0, 0%, 72%));
61 }
62
63 body.big-sur:not(.docked).window-inactive .tab-bar,
64 body:not(.big-sur):not(.docked).window-inactive .tab-bar {
65     --tab-bar-background: hsl(0, 0%, 92%);
66 }
67
68 body.docked.window-inactive .tab-bar {
69     background-color: var(--background-color-unfocused);
70 }
71
72 .tab-bar > .border {
73     position: absolute;
74     left: 0;
75     right: 0;
76     z-index: var(--tab-bar-border-z-index);
77     background-color: var(--tab-item-medium-border-color);
78 }
79
80 .tab-bar > .border.top {
81     top: 0;
82     height: calc(1px / var(--zoom-factor));
83 }
84
85 .tab-bar > .border.bottom {
86     bottom: 0;
87     height: 1px;
88 }
89
90 body.docked.bottom .tab-bar > .border.top {
91     filter: brightness(80%);
92 }
93
94 body.window-inactive .tab-bar > .border {
95     background-color: var(--tab-item-light-border-color);
96 }
97
98 .tab-bar > .navigation-bar {
99     height: var(--tab-bar-height);
100 }
101
102 .tab-bar > .navigation-bar > .item.group > .item {
103     width: auto;
104     margin: 0 4px;
105     padding: 0;
106 }
107
108 .tab-bar > .navigation-bar > .item.group > .item:nth-child(1 of :not(.hidden)) {
109     -webkit-margin-start: 8px;
110 }
111
112 .tab-bar > .navigation-bar > .item.group > .item:nth-last-child(1 of :not(.hidden)) {
113     -webkit-margin-end: 8px;
114 }
115
116 .tab-bar > .navigation-bar .item.divider {
117     margin-top: 1px;
118     background-color: var(--tab-item-medium-border-color);
119 }
120
121 body.window-inactive .tab-bar > .navigation-bar > .item.divider {
122     background-color: var(--tab-item-light-border-color);
123 }
124
125 .tab-bar > .tabs {
126     display: flex;
127     flex-wrap: wrap;
128     position: relative;
129     width: 100%;
130     height: 100%;
131 }
132
133 body.docked .tab-bar .tabs {
134     justify-content: space-around;
135     padding: 0 4px; /* Keep in sync with `WI.TabBar.horizontalPadding` */
136 }
137
138 body.docked .tab-bar > .tabs > .flexible-space {
139     flex-grow: 1;
140 }
141
142 body.docked.bottom .tab-bar > .tabs > .flexible-space {
143     cursor: row-resize;
144 }
145
146 .tab-bar > .tabs > .item {
147     display: flex;
148
149     position: relative;
150
151     z-index: calc(var(--tab-bar-border-z-index) + 1);
152
153     align-items: center;
154
155     padding: 0 8px;
156
157     height: var(--tab-bar-item-height);
158     overflow: hidden;
159
160     line-height: 15px;
161     outline: none;
162
163     /* FIXME: These cause noticeable transitions when focusing the window. Fix that with JavaScript? */
164     /* transition-property: background-position, border-color; */
165     /* transition-duration: 250ms; */
166     /* transition-delay: 50ms; */
167
168     --tab-bar-item-height: 100%;
169 }
170
171 body:not(.docked) .tab-bar > .tabs > .item {
172     border-top: var(--tab-item-medium-border-style);
173     border-bottom: var(--tab-item-medium-border-style);
174     background: var(--tab-item-background);
175 }
176
177 body.big-sur:not(.docked) .tab-bar > .tabs > .item {
178     --tab-item-background: var(--tab-bar-background);
179 }
180
181 body:not(.big-sur):not(.docked) .tab-bar > .tabs > .item {
182     background-size: 100% 200%;
183
184     --tab-item-background: linear-gradient(to bottom, hsl(0, 0%, 78%), hsl(0, 0%, 72%));
185 }
186
187 body:not(.docked) .tab-bar > .tabs:not(.calculate-width) > .item:not(.pinned) {
188     flex-grow: 1;
189 }
190
191 body.docked .tab-bar > .tabs > .item {
192     margin: var(--tab-bar-item-vertical-margin) 2px 0; /* Keep in sync with `WI.TabBarItem.horizontalMargin` */
193
194     --tab-bar-item-height: calc(var(--tab-bar-height) - (2 * var(--tab-bar-item-vertical-margin)));
195     --tab-bar-item-vertical-margin: 4px;
196 }
197
198 .tab-bar > .tabs.calculate-width > .item:not(.pinned) {
199     flex: initial;
200 }
201
202 body[dir=ltr]:not(.docked) .tab-bar > .tabs > .item:nth-child(n + 3 of :not(.hidden)),
203 body[dir=ltr]:not(.docked) .tab-bar > .tabs:not(.hide-border-start) > .item:nth-child(2 of :not(.hidden)),
204 body[dir=ltr]:not(.docked) .tab-bar > .tabs.dragging-tab > .item.selected,
205 body[dir=rtl]:not(.docked) .tab-bar > .tabs:not(.hide-border-end) > .item:nth-last-child(1 of :not(.hidden)) {
206     border-left: var(--tab-item-medium-border-style);
207 }
208
209 body[dir=ltr]:not(.docked) .tab-bar > .tabs:not(.hide-border-end) > .item:nth-last-child(1 of :not(.hidden)),
210 body[dir=rtl]:not(.docked) .tab-bar > .tabs > .item:nth-child(n + 3 of :not(.hidden)),
211 body[dir=rtl]:not(.docked) .tab-bar > .tabs:not(.hide-border-start) > .item:nth-child(2 of :not(.hidden)),
212 body[dir=rtl]:not(.docked) .tab-bar > .tabs.dragging-tab > .item.selected {
213     border-right: var(--tab-item-medium-border-style);
214 }
215
216 .tab-bar > .tabs > .item.pinned {
217     flex: none;
218     justify-content: center;
219     width: var(--tab-bar-height);
220     padding: 0;
221 }
222
223 body.docked .tab-bar > .tabs > .item.pinned {
224     width: var(--tab-bar-item-height); /* Make pinned tabs square */
225 }
226
227 body.big-sur:not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected {
228     border-top-color: var(--tab-item-background);
229
230     --tab-item-background: white;
231 }
232
233 body:not(.big-sur):not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected {
234     --tab-item-background: linear-gradient(to bottom, hsl(0, 0%, 87%), hsl(0, 0%, 82%));
235     background-size: 100% 100%;
236 }
237
238 body.docked .tab-bar > .tabs > .item:not(.disabled):matches(.selected, :hover) {
239     border-radius: var(--tab-bar-item-vertical-margin);
240 }
241
242 body.docked .tab-bar > .tabs > .item:not(.disabled).selected {
243     background-color: lightgrey;
244 }
245
246 body.big-sur:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover {
247     --tab-item-background: hsl(0, 0%, 84%);
248 }
249
250 body:not(.big-sur):not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover {
251     --tab-item-background: linear-gradient(to bottom, hsl(0, 0%, 67%), hsl(0, 0%, 64%));
252 }
253
254 body.docked .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover {
255     background-color: hsl(0, 0%, 95%);
256 }
257
258 body[dir=ltr]:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover,
259 body[dir=ltr]:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover + .item,
260 body[dir=rtl]:not(.docked) .tab-bar > .tabs:not(.animating) > .item:last-child:not(.selected, .disabled):hover {
261     border-left-color: var(--tab-item-dark-border-color);
262 }
263
264 body[dir=ltr]:not(.docked) .tab-bar > .tabs:not(.animating) > .item:last-child:not(.selected, .disabled):hover,
265 body[dir=rtl]:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover,
266 body[dir=rtl]:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover + .item {
267     border-right-color: var(--tab-item-dark-border-color);
268 }
269
270 body:not(.docked).window-inactive .tab-bar > .tabs > .item {
271     border-top-color: var(--tab-item-light-border-color);
272     border-bottom-color: var(--tab-item-light-border-color);
273     border-right-color: var(--tab-item-light-border-color) !important;
274     border-left-color: var(--tab-item-light-border-color) !important;
275
276     transition: none;
277 }
278
279 body.big-sur:not(.docked).window-inactive .tab-bar > .tabs > .item,
280 body:not(.big-sur):not(.docked).window-inactive .tab-bar > .tabs > .item {
281     --tab-item-background: hsl(0, 0%, 92%);
282 }
283
284 body:not(.docked).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected {
285     --tab-item-background: hsl(0, 0%, 96%);
286 }
287
288 body.docked .tab-bar > .tabs > .item:not(.disabled):matches(.selected, :hover) {
289     box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.15) inset;
290 }
291
292 body.docked.window-inactive .tab-bar > .tabs > .item:not(.disabled).selected {
293     background-color: hsl(0, 0%, 90%);
294 }
295
296 .tab-bar > .tabs > .item > .flex-space {
297     display: flex;
298     flex: 1;
299 }
300
301 .tab-bar > .tabs > .item > .icon {
302     width: 16px;
303     height: 16px;
304
305     min-width: 16px;
306     min-height: 16px;
307
308     opacity: 0.55; /* Assumes black glyphs. */
309
310     -webkit-user-drag: none;
311 }
312
313 .tab-bar > .tabs > .item.pinned > .icon {
314     width: 15px;
315     height: 15px;
316     min-width: 15px;
317     min-height: 15px;
318 }
319
320 .tab-bar > .tabs > .item:not(.selected):hover > .icon {
321     opacity: 0.6;
322 }
323
324 .tab-bar > .tabs > .item:not(.disabled).selected > .icon {
325     opacity: 0.7;
326 }
327
328 .tab-bar > .tabs > .item.disabled > .icon {
329     opacity: 0.35;
330 }
331
332 body.window-inactive .tab-bar > .tabs > .item > .icon {
333     opacity: 0.3;
334 }
335
336 body.window-inactive .tab-bar > .tabs > .item:not(.disabled).selected > .icon {
337     opacity: 0.4;
338 }
339
340 .tab-bar > .tabs > .item > .name {
341     color: hsla(0, 0%, var(--foreground-lightness), 0.6);
342
343     display: flex;
344
345     min-width: 0;
346     max-width: 400px;
347     -webkit-margin-start: 6px;
348 }
349
350 body.window-inactive .tab-bar > .tabs > .item > .name {
351     color: hsla(0, 0%, var(--foreground-lightness), 0.4);
352 }
353
354 .tab-bar > .tabs > .item > .name > .content {
355     min-width: 0;
356     width: 100%;
357     overflow: hidden;
358     text-overflow: ellipsis;
359     white-space: nowrap;
360 }
361
362 .tab-bar > .tabs > .item:not(.selected):hover > .name {
363     color: hsla(0, 0%, var(--foreground-lightness), 0.7);
364 }
365
366 .tab-bar > .tabs > .item:not(.disabled).selected > .name {
367     color: hsla(0, 0%, var(--foreground-lightness), 0.8);
368 }
369
370 body.window-inactive .tab-bar > .tabs > .item:not(.disabled).selected > .name {
371     color: hsla(0, 0%, var(--foreground-lightness), 0.5);
372 }
373
374 .tab-bar > .tabs.static-layout {
375     position: relative;
376 }
377
378 .tab-bar > .tabs.static-layout > :matches(.flexible-space, .item) {
379     position: absolute;
380     top: 0;
381 }
382
383 .tab-bar > .tabs.animating.closing-tab > .item {
384     transition-property: left;
385     transition-duration: 250ms;
386     transition-timing-function: ease-in-out;
387 }
388
389 .tab-bar > .tabs.animating:matches(.expanding-tabs, .inserting-tab) > .item {
390     transition-property: left, width;
391     transition-duration: 250ms;
392     transition-timing-function: ease-in-out;
393 }
394
395 .tab-bar > .tabs.animating.inserting-tab > .item.being-inserted {
396     z-index: calc(var(--tab-bar-border-z-index) + 2);
397     padding: 0;
398 }
399
400 body:not(.docked) .tab-bar > .tabs.dragging-tab > .item:not(.disabled).selected,
401 body:not(.docked) .tab-bar > .tabs.static-layout:not(.animating.inserting-tab):not(.dragging-tab) > .item:nth-last-child(1 of :not(.pinned)),
402 body:not(.docked) .tab-bar > .tabs.animating.closing-tab > .item:not(.disabled).selected {
403     border-right: var(--tab-item-medium-border-style);
404 }
405
406 body:not(.docked).window-inactive .tab-bar > .tabs.dragging-tab > .item:not(.disabled).selected,
407 body:not(.docked).window-inactive .tab-bar > .tabs.static-layout:not(.animating.inserting-tab):not(.dragging-tab) > .item:nth-last-child(1 of :not(.pinned)),
408 body:not(.docked).window-inactive .tab-bar > .tabs.animating.closing-tab > .item:not(.disabled).selected {
409     border-right-color: var(--tab-item-light-border-color);
410 }
411
412 .tab-bar > .tabs.dragging-tab > .item:not(.disabled).selected {
413     z-index: calc(var(--tab-bar-border-z-index) + 2);
414     pointer-events: none;
415 }
416
417 @media (prefers-color-scheme: dark) {
418     body.big-sur .tab-bar,
419     body:not(.big-sur) .tab-bar {
420         /* FIXME: <https://webkit.org/b/189769> Dark Mode: use semantic color names */
421         --tab-item-dark-border-color: var(--tab-item-border-color);
422         --tab-item-medium-border-color: var(--tab-item-border-color);
423         --tab-item-light-border-color: var(--tab-item-border-color);
424         --tab-item-border-color: hsl(0, 0%, 36%);
425     }
426
427     body.big-sur:not(.docked) .tab-bar {
428         --tab-bar-background: hsl(0, 0%, 8%);
429     }
430
431     body:not(.big-sur):not(.docked) .tab-bar {
432         background-image: linear-gradient(to bottom, hsl(0, 0%, 12%), hsl(0, 0%, 10%));
433     }
434
435     body.docked .tab-bar {
436         background-color: hsl(0, 0%, 10%);
437     }
438
439     body.docked.bottom .tab-bar > .border.top {
440         filter: brightness(120%);
441     }
442
443     body:not(.big-sur):not(.docked) .tab-bar > .tabs > .item {
444         --tab-item-background: linear-gradient(to bottom, hsl(0, 0%, 12%), hsl(0, 0%, 10%));
445     }
446
447     body.big-sur:not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected {
448         --tab-item-background: hsl(0, 0%, 19%);
449     }
450
451     body:not(.big-sur):not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected {
452         --tab-item-background: linear-gradient(to bottom, hsl(0, 0%, 23%), hsl(0, 0%, 21%));
453     }
454
455     body.big-sur:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover {
456         --tab-item-background: hsl(0, 0%, 7%);
457     }
458
459     body:not(.big-sur):not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover {
460         --tab-item-background: linear-gradient(to bottom, hsl(0, 0%, 11%), hsl(0, 0%, 9%));
461     }
462
463     body.docked .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover {
464         background-color: hsl(0, 0%, 15%);
465     }
466
467     body.docked .tab-bar > .tabs > .item:not(.disabled).selected {
468         background-color: var(--background-color);
469     }
470
471     body.docked.window-inactive .tab-bar > .tabs > .item:not(.disabled).selected {
472         background-color: hsl(0, 0%, 20%);
473     }
474
475     .tab-bar > .tabs > .item > .icon {
476         filter: var(--filter-invert);
477     }
478
479     body:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover > .icon {
480         opacity: 0.6;
481     }
482
483     body:not(.docked).window-inactive .tab-bar {
484         --tab-item-border-color: hsl(0, 0%, 34%);
485     }
486
487     body.big-sur:not(.docked).window-inactive .tab-bar,
488     body:not(.big-sur):not(.docked).window-inactive .tab-bar {
489         --tab-bar-background: hsl(0, 0%, 7%);
490     }
491
492     body.big-sur:not(.docked).window-inactive .tab-bar > .tabs > .item {
493         --tab-item-background: hsl(0, 0%, 7%);
494     }
495
496     body:not(.big-sur):not(.docked).window-inactive .tab-bar > .tabs > .item {
497         --tab-item-background: hsl(0, 0%, 13%);
498     }
499
500     body.big-sur:not(.docked).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected {
501         --tab-item-background: hsl(0, 0%, 11%);
502     }
503
504     body:not(.big-sur):not(.docked).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected {
505         --tab-item-background: hsl(0, 0%, 19%);
506     }
507 }