1/* Tabs bar  */
2
3@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
4
5:root {
6	--space-above-tabbar: 0 !important;
7}
8
9#TabsToolbar {
10	--toolbarbutton-inner-padding: 0 !important;
11}
12
13#TabsToolbar:not([inFullscreen]) #tabbrowser-tabs {
14	margin-bottom: -1px !important;
15}
16
17/* Tabs bar height */
18#tabbrowser-tabs,
19#tabbrowser-tabs arrowscrollbox {
20	height: auto !important;
21	min-height: auto !important;
22}
23/* Extra margin for the first and last tabs */
24.tabbrowser-tab[first-tab]:not([pinned=true]) {
25	margin-left: 0 !important;
26}
27.tabbrowser-tab[last-tab]:not([pinned=true]) {
28	margin-right: 0 !important;
29}
30
31/* Remove hover effects on tab bar buttons */
32#TabsToolbar {
33	--toolbarbutton-active-background: transparent !important;
34	--toolbarbutton-hover-background: transparent !important;
35	padding: 0 3px !important;
36}
37
38/* New hover effect */
39#TabsToolbar toolbarbutton {
40	fill-opacity: .6 !important;
41}
42#TabsToolbar toolbarbutton:not([disabled]):hover,
43#TabsToolbar toolbarbutton[open=true] {
44	fill-opacity: 1 !important;
45}
46
47#TabsToolbar .toolbarbutton-1 {
48	margin: 3px !important;
49	padding: 0 6px !important;
50}
51
52/* Remove shadow next to tab scroll buttons */
53.arrowscrollbox-overflow-start-indicator,
54.arrowscrollbox-overflow-end-indicator {
55	display: none;
56}
57
58/* Remove tab separators */
59.tabbrowser-tab::after,
60.tabbrowser-tab::before {
61	border-color: transparent !important;
62	border-image: none !important;
63}
64
65/* Space between tabs */
66.tabbrowser-tab:not([pinned=true]) {
67	margin: 0 0 !important;
68}
69
70/* Tab labels */
71tab {
72	color: var(--gnome-tabbar-tab-color) !important;
73	font-family: Cantarell, inherit;
74	font-weight: normal;
75	font-size: 1em;
76}
77tab:hover {
78	color: var(--gnome-tabbar-tab-hover-color) !important;
79}
80tab[selected] {
81	color: var(--gnome-tabbar-tab-active-color) !important;
82	font-weight: bold;
83}
84tab:-moz-window-inactive {
85	color: var(--gnome-inactive-tabbar-tab-color) !important;
86}
87tab[selected]:-moz-window-inactive {
88	color: var(--gnome-inactive-tabbar-tab-active-color) !important;
89}
90
91/* Center all inside tab */
92.tab-content {
93	display: flex !important;
94	justify-content: center !important;
95	align-items: center !important;
96	margin-top: -1px;
97	min-width: 100% !important;
98	padding: 0 10px !important;
99}
100
101/* Prevent tab icons size breaking */
102.tab-icon-image, .tab-icon-sound, .tab-throbber, .tab-throbber-fallback, .tab-close-button {
103	min-width: 16px;
104}
105
106/* Adjust tab label width */
107.tab-label-container {
108	min-width: 0 !important;
109}
110
111/* Put tab close button and icon sound to the right */
112.tab-icon-sound[soundplaying="true"], .tab-icon-sound[muted="true"],
113.tab-icon-sound[activemedia-blocked="true"] {
114	margin-left: auto !important;
115}
116.tab-icon-sound {
117	margin-right: 6px;
118}
119
120/* Force tab favicon to the center */
121.tab-throbber, .tab-throbber-fallback,
122.tabbrowser-tab:not([busy]) .tab-icon-image,
123.tabbrowser-tab:not([class*="identity-color-"]) .tab-icon-stack {
124	margin-left: auto !important;
125}
126
127/* separate class for multi-tab alignment*/
128.tabbrowser-tab[class*="identity-color-"]>.tab-stack>.tab-content>.tab-icon-stack {
129	margin-left: auto !important;
130}
131
132/* If tab favicon is not present, force tab label to the center */
133.tabbrowser-tab .tab-label-container {
134	margin-left: 0 !important;
135	margin-right: auto !important;
136}
137
138.tabbrowser-tab:not([image]):not([busy]):not([progress]) .tab-label-container {
139	margin-left: auto !important;
140}
141
142/* Fix website with no favicon centred text */
143.tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]) .tab-icon-stack {
144	margin-left: 0 !important
145}
146
147.tabbrowser-tab:not([image], [busy]) .tab-icon-stack {
148	margin-left: 0 !important
149}
150
151.tabbrowser-tab[selected="true"]>.tab-stack>.tab-background {
152	margin-left: 0px !important;
153	margin-right: 0px !important;
154}
155
156/* centre text when audio is playing */
157.tabbrowser-tab:is([soundplaying]) .tab-label-container {
158	margin-left: 0 !important;
159	margin-right: auto !important
160}
161
162/* Remove tab icons */
163/* tab:not([pinned=true]) .tab-icon-image {
164	display: none;
165} */
166
167/* Close tab button */
168:root {
169	--gnome-fill-icon: red !important;
170}
171
172.close-icon {
173	height: 16px !important;
174	padding: 0 !important;
175	width: 16px !important;
176}
177
178.tab-close-button {
179	-moz-appearance: none !important;
180	border: none !important;
181	box-sizing: content-box; /* Avoid deformation on flexbox */
182	border-radius: 100px;
183	list-style-image: url("../icons/window-close-alt-symbolic.svg") !important;
184	height: 16px !important;
185	opacity: .3;
186	padding: 2px !important;
187	margin: 0 2px !important;
188	width: 16px !important;
189}
190
191@media (prefers-color-scheme: dark) {
192	.tab-close-button {
193		list-style-image: url("../icons/window-close-alt-symbolic-light.svg") !important;
194	}
195}
196:root:-moz-window-inactive .tab-close-button:not(#hack) {
197	opacity: .18 !important;
198}
199:root:not(:-moz-window-inactive) .tab-close-button:hover {
200	background: var(--gnome-flat-button-hover-background) !important;
201	border-radius: 100px !important;
202	opacity: 1;
203}
204:root:not(:-moz-window-inactive) .tab-close-button:active {
205	border-radius: 100px !important;
206	background: var(--gnome-flat-button-active-background) !important;
207}
208
209.tab-close-button:active:not(:hover) {
210	border-radius: 100px !important;
211	background-image: none !important;
212	box-shadow: none !important;
213}
214
215/* Tab close button etc. positioning */
216.tab-throbber, .tab-icon-image, .tab-sharing-icon-overlay, .tab-icon-sound, .tab-close-button {
217	margin-top: 0 !important;
218}
219
220/* Remove blue line above tabs */
221.tab-line {
222	display: none;
223}
224
225/* Firefox v89 beta tab fix */
226.tab-background {
227	margin-block: 0 !important;
228	border-radius: 0 !important;
229	padding: 0 12px !important;
230}
231
232/*Align personal bookmarks v89 */
233#personal-bookmarks {
234	-moz-box-align: center !important;
235}
236
237/* fix misc spacing between tabs */
238.tabbrowser-tab {
239	padding-inline: 0 !important;
240}
241
242/* Active tab */
243.tab-background[selected=true] {
244	background-color: var(--gnome-tabbar-tab-active-background) !important;
245	background-image: none !important;
246	border: 0 !important;
247	border-image: none !important;
248	box-shadow: none !important;
249	border-bottom: 2px solid var(--gnome-tabbar-tab-active-border-bottom-color) !important;
250}
251.tab-background[selected=true]:-moz-window-inactive {
252	background-color: var(--gnome-inactive-tabbar-tab-active-background) !important;
253	border-bottom-color: var(--gnome-inactive-tabbar-tab-active-border-bottom-color) !important;
254}
255
256/* Tab hover */
257:root:not(:-moz-window-inactive) .tabbrowser-tab:hover > .tab-stack > .tab-background[selected=true] {
258	background-color: var(--gnome-tabbar-tab-active-hover-background) !important;
259}
260.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
261#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
262#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line:not([selected=true]) {
263	background-color: transparent !important;
264}
265:root:not(:-moz-window-inactive) .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) {
266	background-color: var(--gnome-tabbar-tab-hover-background) !important;
267	border-image: none !important;
268	border-bottom: 2px solid var(--gnome-tabbar-tab-hover-border-bottom-color) !important;
269}
270
271/* Tabs scroll buttons hover */
272#TabsToolbar .scrollbutton-up:not([disabled]):hover, #TabsToolbar .scrollbutton-down:not([disabled]):hover {
273	background-color: var(--gnome-tabbar-tab-active-hover-background) !important;
274}
275
276/* Full width tabs */
277.tabbrowser-tab:not([style^="max-width"]):not([pinned]),
278.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]) {
279	max-width: 100% !important;
280}
281
282.tabbrowser-tab:not([style^="max-width"]):not([pinned]):not([fadein]),
283.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]):not([fadein]) {
284	max-width: .1px !important;
285}
286
287/* Remove blank spaces on tabs start and end */
288#TabsToolbar .titlebar-spacer {
289	display: none !important;
290}
291
292/* Remove container bottom line indicator */
293.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-bottom-line {
294	display: none;
295}
296
297/* Create new container tab indicator */
298.tabbrowser-tab[class*="identity-color-"] .tab-content::before {
299	content: "";
300	display: block;
301	background-image: var(#userContext-icons:--identity-icon);
302	background: var( --identity-tab-color);
303	-moz-context-properties: fill;
304	fill: var(--identity-icon-color);
305	background-size: contain;
306	background-repeat: no-repeat;
307	background-position: center center;
308	min-width: 10px;
309	height: 10px;
310	margin-right: 5px;
311	margin-left: auto !important;
312	border-radius: 100%;
313}
314
315.tabbrowser-tab[class*="identity-color-"][pinned] .tab-content::before,
316.tabbrowser-tab[class*="identity-color-"][image] .tab-content::before,
317.tabbrowser-tab[class*="identity-color-"][busy] .tab-content::before,
318.tabbrowser-tab[class*="identity-color-"][progress] .tab-content::before {
319	right: -10px;
320	top: -8px;
321	position: relative;
322	margin-right: -10px;
323}
324