1/* vim:set ts=2 sw=2 sts=2 et: */
2/* This Source Code Form is subject to the terms of the Mozilla Public
3 * License, v. 2.0. If a copy of the MPL was not distributed with this
4 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
5
6/* Tabs General Styles */
7
8.tabs {
9  height: 100%;
10  background: var(--theme-sidebar-background);
11  display: flex;
12  flex-direction: column;
13}
14
15.tabs .tabs-menu {
16  list-style: none;
17  padding: 0;
18  margin: 0;
19}
20
21.tabs .tabs-menu-item {
22  display: inline-block;
23  position: relative;
24}
25
26.tabs .tabs-menu-item a {
27  display: flex;
28  justify-content: center;
29  padding: 4px 8px;
30  border: 1px solid transparent;
31  font-size: 12px;
32  text-decoration: none;
33  white-space: nowrap;
34}
35
36.tabs .tabs-menu-item .tab-badge {
37  color: var(--theme-highlight-blue);
38  font-size: 80%;
39  font-style: italic;
40  /* Tabs have a 15px padding start/end, so we set the margins here in order to center the
41     badge after the tab title, with a 5px effective margin. */
42  margin-inline-start: 5px;
43  margin-inline-end: -10px;
44}
45
46.tabs .tabs-menu-item.is-active .tab-badge {
47  /* Use the same color as the tab-item when active */
48  color: inherit;
49}
50
51/* To avoid "select all" commands from selecting content in hidden tabs */
52.tabs .hidden,
53.tabs .hidden * {
54  -moz-user-select: none !important;
55}
56
57.tabs .tabs-menu-item a {
58  cursor: default;
59  -moz-user-select: none;
60}
61
62/* Make sure panel content takes entire vertical space. */
63.tabs .panels {
64  flex: 1;
65  overflow: hidden;
66}
67
68.tabs .tab-panel {
69  height: 100%;
70  overflow-x: hidden;
71  overflow-y: auto;
72}
73
74.tabs .tabs-navigation,
75.tabs .tabs-navigation {
76  position: relative;
77  border-bottom: 1px solid var(--theme-splitter-color);
78  background: var(--theme-tab-toolbar-background);
79}
80
81.theme-dark .tabs .tabs-menu-item,
82.theme-light .tabs .tabs-menu-item {
83  margin: 0;
84  padding: 0;
85  color: var(--theme-toolbar-color);
86}
87
88.theme-dark .tabs .tabs-menu-item.is-active,
89.theme-light .tabs .tabs-menu-item.is-active {
90  color: var(--theme-toolbar-selected-color);
91}
92
93.theme-dark .tabs .tabs-menu-item:last-child,
94.theme-light:not(.theme-firebug) .tabs .tabs-menu-item:last-child {
95  border-inline-end-width: 1px;
96}
97
98.theme-dark .tabs .tabs-menu-item a,
99.theme-light .tabs .tabs-menu-item a {
100  padding: 3px 10px;
101}
102
103.theme-dark .tabs .tabs-menu-item:hover,
104.theme-light .tabs .tabs-menu-item:hover {
105  background-color: var(--theme-toolbar-hover);
106}
107
108.theme-dark .tabs .tabs-menu-item:hover:active:not(.is-active),
109.theme-light .tabs .tabs-menu-item:hover:active:not(.is-active) {
110  background-color: var(--theme-toolbar-hover-active);
111}
112
113/* Firebug Theme */
114
115.theme-firebug .tabs .tabs-navigation {
116  padding-top: 3px;
117  padding-left: 3px;
118}
119
120.theme-firebug .tabs .tabs-menu {
121  margin-bottom: -1px;
122}
123
124.theme-firebug .tabs .tabs-menu-item.is-active,
125.theme-firebug .tabs .tabs-menu-item.is-active:hover {
126  background-color: transparent;
127}
128
129.theme-firebug .tabs .tabs-menu-item {
130  position: relative;
131  border-inline-start-width: 0;
132}
133
134.theme-firebug .tabs .tabs-menu-item a {
135  font-family: var(--proportional-font-family);
136  font-weight: bold;
137  color: var(--theme-body-color);
138  border-radius: 4px 4px 0 0;
139}
140
141.theme-firebug .tabs .tabs-menu-item:hover:not(.is-active) a {
142  border: 1px solid var(--theme-splitter-color);
143  border-bottom: 1px solid transparent;
144  background-color: transparent;
145}
146
147.theme-firebug .tabs .tabs-menu-item.is-active a {
148  background-color: var(--theme-toolbar-tab-selected-background);
149  border: 1px solid var(--theme-splitter-color);
150  border-bottom-color: transparent;
151  color: var(--theme-body-color);
152}
153
154.theme-firebug .tabs .tabs-menu-item:hover:active a {
155  background-color: var(--theme-toolbar-hover-active);
156}
157
158.theme-firebug .tabs .tabs-menu-item.is-active:hover:active a {
159  background-color: var(--theme-selection-background);
160  color: var(--theme-selection-color);
161}
162
163.theme-firebug .tabs .tabs-menu-item a {
164  border: 1px solid transparent;
165  padding: 4px 8px;
166}
167