Commit | Line | Data |
---|---|---|
dadba0f2 RK |
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 | /* CSS Variables specific to the devtools toolbar that aren't defined by the themes */ | |
7 | .theme-light, | |
7d6161c5 RK |
8 | .theme-dark, |
9 | .theme-firebug { | |
10 | --toolbar-tab-hover: #FFCF00; | |
11 | --toolbar-tab-hover-active: #FF9F00; | |
dadba0f2 RK |
12 | --searchbox-background-color: #000000; |
13 | --searchbox-border-color: #9C9CFF; | |
14 | --searcbox-no-match-background-color: #400000; | |
15 | --searcbox-no-match-border-color: #FF0000; | |
1e9e1791 RK |
16 | --magnifying-glass-image: url(images/search.svg); |
17 | --filter-image: url(images/filter.svg); | |
18 | --tool-options-image: url(images/tool-options-tbutton.svg); | |
7d6161c5 | 19 | --icon-filter: invert(1); |
6f751fd1 | 20 | --checked-icon-filter: url(images/filters.svg#checked-icon-state); |
7d6161c5 | 21 | --toolbar-button-border-color: #A09090; |
1e9e1791 RK |
22 | } |
23 | ||
dadba0f2 RK |
24 | /* Toolbars */ |
25 | .devtools-toolbar, | |
26 | .devtools-sidebar-tabs tabs { | |
60156ae2 RK |
27 | padding: 0; |
28 | border-width: 0; | |
29 | /* border-bottom-width: 1px;*/ | |
30 | border-style: solid; | |
31 | /* height: 24px; | |
32 | line-height: 24px;*/ | |
33 | box-sizing: border-box; | |
34 | font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; | |
35 | } | |
36 | .devtools-toolbar { | |
37 | height: 24px; | |
dadba0f2 RK |
38 | } |
39 | ||
40 | .devtools-toolbar { | |
1e9e1791 | 41 | border-bottom: 3px solid var(--theme-body-background); |
dadba0f2 RK |
42 | } |
43 | ||
44 | .devtools-toolbar checkbox { | |
45 | /* LCARStrek checkbox colors don't work well against toolbar background */ | |
46 | background-color: var(--theme-toolbar-background); | |
47 | padding: 2px; | |
48 | line-height: -moz-block-height; | |
49 | } | |
50 | .devtools-toolbar checkbox .checkbox-check { | |
51 | } | |
52 | .devtools-toolbar checkbox .checkbox-label-box { | |
53 | } | |
54 | .devtools-toolbar checkbox .checkbox-label-box .checkbox-label { | |
55 | } | |
56 | ||
60156ae2 RK |
57 | /* HTML Checkboxes - a lot copied from global/in-content/common.css */ |
58 | /* Hide the actual checkbox */ | |
dd0069b7 | 59 | input[type="checkbox"] { |
60156ae2 RK |
60 | opacity: 0; |
61 | width: 0; | |
62 | pointer-events: none; | |
63 | position: absolute; | |
64 | } | |
65 | ||
dd0069b7 RK |
66 | label > input[type="checkbox"] { /* old placement of checkbox in label, undo above */ |
67 | opacity: 1; | |
68 | width: auto; | |
69 | pointer-events: auto; | |
70 | position: static; | |
71 | } | |
72 | ||
60156ae2 RK |
73 | /* Create a box to style as the checkbox */ |
74 | input[type="checkbox"] + label::before { | |
75 | display: inline-block; | |
76 | content: ""; | |
77 | vertical-align: middle; | |
78 | } | |
79 | ||
80 | .devtools-searchbox + #browser-style-checkbox-label, /* workaround for old placement of checkbox in label */ | |
81 | input[type="checkbox"] + label { | |
82 | line-height: 0px; | |
83 | color: var(--theme-capped-toolbar-text); | |
84 | } | |
85 | ||
86 | input[type="checkbox"] + label::before { | |
87 | -moz-appearance: none; | |
88 | width: 13px; | |
89 | height: 13px; | |
90 | border-radius: 0; | |
91 | border: 1px solid var(--theme-body-color); | |
92 | margin-inline-end: 3px; | |
93 | margin-inline-start: 2px; | |
94 | background-color: var(--theme-toolbar-background); | |
95 | background-position: center center; | |
96 | background-repeat: no-repeat; | |
97 | } | |
98 | ||
99 | input[type="checkbox"]:not(:disabled) + label:hover::before { | |
100 | border-color: var(--theme-hover-background); | |
101 | } | |
102 | .devtools-searchbox + #browser-style-checkbox-label:hover, /* workaround for old placement of checkbox in label */ | |
103 | input[type="checkbox"]:not(:disabled) + label:hover { | |
104 | color: var(--theme-hover-background); | |
105 | } | |
106 | input[type="checkbox"]:checked + label::before { | |
107 | background-image: url("chrome://global/skin/in-content/check.svg#check"); | |
108 | } | |
109 | ||
110 | input[type="checkbox"]:checked:disabled + label::before { | |
111 | background-image: url("chrome://global/skin/in-content/check.svg#check-disabled"); | |
112 | } | |
113 | input[type="checkbox"]:checked:not(:disabled) + label:hover::before { | |
114 | background-image: url("chrome://global/skin/in-content/check.svg#check-hover"); | |
115 | } | |
116 | input[type="checkbox"]:disabled + label::before { | |
117 | border-color: var(--theme-body-color-inactive); | |
118 | } | |
119 | input[type="checkbox"]:disabled + label { | |
120 | color: var(--theme-body-color-inactive); | |
121 | } | |
122 | ||
6f751fd1 RK |
123 | .devtools-separator { |
124 | margin: 0 2px; | |
125 | width: 2px; | |
126 | background-image: linear-gradient(transparent 15%, var(--theme-splitter-color) 15%, var(--theme-splitter-color) 85%, transparent 85%); | |
127 | background-size: 1px 100%; | |
128 | background-repeat: no-repeat; | |
129 | background-position: 0, 1px, 2px; | |
130 | } | |
131 | ||
60156ae2 RK |
132 | /* HTML toolbars - style them LCARStrek-like */ |
133 | ||
dd0069b7 RK |
134 | div.devtools-toolbar, |
135 | div.devtools-tabbar { | |
60156ae2 RK |
136 | background-size: calc(100% - 30px); |
137 | background-image: linear-gradient(90deg, var(--theme-capped-toolbar-background), var(--theme-capped-toolbar-background)); | |
138 | background-repeat: no-repeat; | |
139 | background-position: center center; | |
140 | display: flex; | |
141 | } | |
142 | ||
143 | div.devtools-toolbar::before, | |
dd0069b7 RK |
144 | div.devtools-toolbar::after, |
145 | div.devtools-tabbar::before, | |
146 | div.devtools-tabbar::after { | |
60156ae2 RK |
147 | display: flex; |
148 | content: ""; | |
149 | width: 12px; | |
150 | min-height: 16px; | |
151 | background-color: var(--theme-toolbar-caps); | |
152 | } | |
153 | ||
dd0069b7 RK |
154 | div.devtools-toolbar::before, |
155 | div.devtools-tabbar::before { | |
60156ae2 RK |
156 | border-radius: 8px 0px 0px 8px; |
157 | border: none; | |
158 | border-inline-end: 3px solid black; | |
159 | margin-inline-end: 2px; | |
160 | } | |
161 | ||
dd0069b7 RK |
162 | div.devtools-toolbar::after, |
163 | div.devtools-tabbar::after { | |
60156ae2 RK |
164 | border-radius: 0px 8px 8px 0px; |
165 | border: none; | |
166 | border-inline-start: 3px solid black; | |
167 | margin-inline-start: auto; /* originally 2px, but auto makes us able to get flexible free space */ | |
168 | } | |
169 | ||
dadba0f2 RK |
170 | /* In-tools sidebar */ |
171 | ||
6f751fd1 | 172 | .devtools-sidebar-tabs { |
1e9e1791 | 173 | height: 100%; |
dadba0f2 RK |
174 | } |
175 | ||
176 | .devtools-sidebar-tabs > tabpanels { | |
177 | padding: 0; | |
178 | border: 0; | |
179 | } | |
180 | ||
181 | .devtools-sidebar-tabs tabs { | |
182 | position: static; | |
183 | overflow: hidden; | |
184 | } | |
185 | ||
186 | .devtools-sidebar-alltabs { | |
7d6161c5 RK |
187 | /* -moz-appearance: none; |
188 | height: 24px; | |
dadba0f2 RK |
189 | line-height: 24px; |
190 | padding: 0 4px; | |
191 | margin: 0; | |
192 | border-width: 0 0 1px 0; | |
dae45075 | 193 | border-inline-start-width: 1px; |
dadba0f2 RK |
194 | border-style: solid;*/ |
195 | } | |
196 | ||
197 | .devtools-sidebar-alltabs .toolbarbutton-icon { | |
198 | display: none; | |
199 | } | |
200 | ||
201 | .devtools-sidebar-tabs tabs > .tabs-right, | |
202 | .devtools-sidebar-tabs tabs > .tabs-left { | |
203 | display: none; | |
204 | } | |
205 | ||
206 | .devtools-sidebar-tabs tabs > tab { | |
207 | min-width: 78px; | |
208 | text-align: center; | |
209 | -moz-box-flex: 1; | |
210 | position: static; | |
211 | margin-top: 0; | |
212 | } | |
213 | ||
214 | .devtools-sidebar-tabs tabs > tab:-moz-focusring { | |
215 | position: static; | |
216 | } | |
217 | ||
218 | .devtools-sidebar-tabs tabs > tab:first-of-type { | |
dae45075 | 219 | margin-inline-start: 0; |
dadba0f2 RK |
220 | } |
221 | ||
222 | .devtools-sidebar-tabs tabs > tab:last-of-type { | |
dae45075 | 223 | border-inline-end-width: 0; |
dadba0f2 RK |
224 | } |
225 | ||
226 | .devtools-sidebar-tabs tabs > tab { | |
227 | } | |
228 | ||
229 | .devtools-sidebar-tabs tabs > tab[selected], | |
230 | .devtools-sidebar-tabs tabs > tab[selected] + tab { | |
231 | } | |
232 | ||
233 | .devtools-sidebar-tabs tabs > tab:first-child { | |
234 | } | |
235 | ||
236 | .devtools-sidebar-tabs tabs > tab:hover { | |
237 | } | |
238 | ||
239 | .devtools-sidebar-tabs tabs > tab:hover:active { | |
240 | } | |
241 | ||
dadba0f2 RK |
242 | .devtools-sidebar-tabs tabs > tab[selected], |
243 | .devtools-sidebar-tabs tabs > tab[selected]:hover:active { | |
244 | } | |
245 | ||
dadba0f2 RK |
246 | .hidden-labels-box:not(.visible) > label, |
247 | .hidden-labels-box.visible ~ .hidden-labels-box > label:last-child { | |
248 | display: none; | |
249 | } | |
250 | ||
7d6161c5 RK |
251 | .devtools-invisible-splitter { |
252 | border-color: transparent; | |
253 | background-color: transparent; | |
254 | } | |
255 | ||
6f751fd1 RK |
256 | .devtools-horizontal-splitter, |
257 | .devtools-side-splitter { | |
258 | /* background-color: var(--theme-splitter-color);*/ | |
259 | } | |
260 | ||
60156ae2 RK |
261 | /* HACK around hardcoded stylings for the HTML-based sidebar tabs */ |
262 | .tabs .tabs-menu-item, | |
263 | .theme-dark .tabs .tabs-menu-item, | |
264 | .theme-light .tabs .tabs-menu-item { | |
265 | margin: 0; | |
266 | margin-inline-end: 3px !important; | |
267 | padding: 0 !important; | |
268 | border-radius: 8px 8px 0 0; | |
269 | border: 0 !important; | |
270 | background-color: var(--theme-button-background); | |
271 | } | |
272 | .tabs .tabs-menu-item a { | |
273 | color: var(--theme-button-color) !important; | |
274 | padding: 0px 3px !important; | |
275 | } | |
276 | .tabs .tabs-menu-item.is-active { | |
277 | height: auto !important; | |
278 | } | |
279 | .tabs .tabs-navigation { | |
280 | height: auto !important; | |
281 | border: 0 !important; | |
282 | border-bottom: 3px solid var(--theme-body-background) !important; | |
283 | } |