1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* Tabs General Styles */
.tabs {
--tab-height: var(--theme-toolbar-height);
height: 100%;
background: var(--theme-sidebar-background);
display: flex;
flex-direction: column;
}
.tabs.tabs-tall {
--tab-height: var(--theme-toolbar-tall-height);
}
/* Hides the tab strip in the TabBar */
div[hidetabs="true"] .tabs .tabs-navigation {
display: none;
}
.tabs .tabs-navigation {
box-sizing: border-box;
display: flex;
/* Reserve 1px for the border */
height: calc(var(--tab-height) + 1px);
position: relative;
border-bottom: 1px solid var(--theme-splitter-color);
background: var(--theme-tab-toolbar-background);
}
.tabs .tabs-menu {
list-style: none;
padding: 0;
margin: 0;
margin-inline-end: 15px;
flex-grow: 1;
/* Adjust outline so it's not clipped */
outline-offset: -2px;
}
/* The tab takes entire horizontal space and individual tabs
should stretch accordingly. Use flexbox for the behavior.
Use also `overflow: hidden` so, 'overflow' and 'underflow'
events are fired (it's utilized by the all-tabs-menu). */
.tabs .tabs-navigation .tabs-menu {
overflow: hidden;
display: flex;
overflow-x: scroll;
scrollbar-width: none;
}
.tabs .tabs-menu-item {
display: inline-block;
position: relative;
margin: 0;
padding: 0;
color: var(--theme-toolbar-color);
}
.tabs .tabs-menu-item:hover {
background-color: var(--theme-toolbar-hover);
color: var(--theme-toolbar-hover-color);
}
.tabs .tabs-menu-item.is-active {
color: var(--theme-toolbar-selected-color);
background-color: var(--theme-toolbar-selected-background);
&:hover {
background-color: var(--theme-toolbar-selected-hover);
color: var(--theme-toolbar-selected-hover-color);
}
}
.tabs .tabs-menu-item:hover:active:not(.is-active) {
background-color: var(--theme-toolbar-hover-active);
}
.tabs .tabs-menu-item:has(a:focus-visible) {
z-index: 1;
}
.tabs .tabs-menu-item a {
--text-height: 16px;
--devtools-tab-border-width: 1px;
display: flex;
justify-content: center;
/* Vertically center text, calculate space remaining by taking the full height and removing
the block borders and text. Divide by 2 to distribute above and below. */
padding: calc((var(--tab-height) - var(--text-height) - (var(--devtools-tab-border-width) * 2)) / 2) 10px;
border: var(--devtools-tab-border-width) solid transparent;
font-size: 12px;
line-height: var(--text-height);
text-decoration: none;
white-space: nowrap;
cursor: default;
user-select: none;
text-align: center;
}
.tabs .tabs-menu-item a:focus-visible {
/* Override the box-shadow from the `:focus-visible` style of common.css. In
the tabbar, the focus ring should always be visible so we don't need to
force a box-shadow, which will otherwise overlap with the siblings of the
focused tab. */
box-shadow: unset;
}
.tabs .tabs-navigation .tabs-menu-item > a {
outline-offset: -2px;
}
.tabs .tabs-menu-item .tab-badge {
color: var(--theme-highlight-blue);
font-size: 80%;
font-style: italic;
/* Tabs have a 15px padding start/end, so we set the margins here in order to center the
badge after the tab title, with a 5px effective margin. */
margin-inline-start: 5px;
margin-inline-end: -10px;
}
.tabs .tabs-menu-item.is-active .tab-badge {
/* Use the same color as the tab-item when active */
color: inherit;
}
/* To avoid "select all" commands from selecting content in hidden tabs */
.tabs .hidden,
.tabs .hidden * {
user-select: none !important;
}
/* Make sure panel content takes entire vertical space. */
.tabs .panels {
flex: 1;
overflow: hidden;
}
.tabs .tab-panel {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
|
