Commit | Line | Data |
---|---|---|
6f751fd1 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 | :root { | |
7 | --close-button-image: url(chrome://devtools/skin/images/close.svg); | |
8 | --dock-bottom-image: url(chrome://devtools/skin/images/dock-bottom.svg); | |
9 | --dock-side-image: url(chrome://devtools/skin/images/dock-side.svg); | |
10 | --dock-undock-image: url(chrome://devtools/skin/images/dock-undock.svg); | |
11 | ||
12 | --command-paintflashing-image: url(images/command-paintflashing.svg); | |
13 | --command-screenshot-image: url(images/command-screenshot.svg); | |
14 | --command-responsive-image: url(images/command-responsivemode.svg); | |
15 | --command-scratchpad-image: url(images/command-scratchpad.svg); | |
16 | --command-pick-image: url(images/command-pick.svg); | |
17 | --command-frames-image: url(images/command-frames.svg); | |
18 | --command-splitconsole-image: url(images/command-console.svg); | |
19 | --command-noautohide-image: url(images/command-noautohide.svg); | |
20 | --command-rulers-image: url(images/command-rulers.svg); | |
21 | --command-measure-image: url(images/command-measure.svg); | |
22 | } | |
23 | ||
24 | #toolbox-container { | |
25 | padding-top: 3px; | |
26 | } | |
27 | ||
28 | /* Toolbox tabbar */ | |
29 | ||
30 | .devtools-tabbar { | |
31 | /* -moz-appearance: none; | |
32 | min-height: 24px; | |
33 | border: 0px solid; | |
34 | border-bottom-width: 1px; | |
35 | padding: 0; | |
dd0069b7 | 36 | background: var(--theme-capped-toolbar-background); |
6f751fd1 RK |
37 | border-bottom-color: var(--theme-splitter-color);*/ |
38 | } | |
dd0069b7 RK |
39 | div.devtools-tabbar { |
40 | border-bottom: 3px solid #000000; | |
41 | display: flex; | |
42 | } | |
43 | ||
44 | .toolbox-tabs-wrapper { | |
45 | position: relative; | |
46 | display: flex; | |
47 | flex: 1; | |
48 | } | |
6f751fd1 | 49 | |
dd0069b7 RK |
50 | #toolbox-tabs, |
51 | .toolbox-tabs { | |
6f751fd1 RK |
52 | margin: 0; |
53 | padding-inline-start: 3px; | |
54 | margin-inline-start: 2px; | |
55 | background-color: #000000; | |
56 | color: #FFCF00; | |
dd0069b7 RK |
57 | display: flex; |
58 | flex: 1; | |
6f751fd1 RK |
59 | } |
60 | ||
60156ae2 RK |
61 | /* Set flex attribute to Toolbox buttons and Picker container so, |
62 | they don't overlapp with the tab bar */ | |
63 | #toolbox-buttons { | |
64 | display: flex; | |
65 | } | |
dd0069b7 RK |
66 | hbox#toolbox-buttons { |
67 | margin-inline-end: 2px; | |
68 | } | |
60156ae2 RK |
69 | |
70 | #toolbox-picker-container { | |
71 | display: flex; | |
72 | } | |
73 | ||
dd0069b7 RK |
74 | #toolbox-buttons-end { |
75 | display: flex; | |
76 | margin-inline-end: 2px; | |
77 | } | |
78 | ||
79 | #toolbox-picker-container { | |
80 | display: flex; | |
81 | } | |
82 | ||
83 | #toolbox-buttons-start { | |
84 | border: solid 0 var(--theme-splitter-color); | |
85 | /* border-inline-end-width: 1px;*/ | |
86 | display: flex; | |
87 | } | |
88 | ||
6f751fd1 RK |
89 | /* Toolbox tabs */ |
90 | ||
91 | .devtools-tab { | |
92 | /* -moz-appearance: none; | |
93 | -moz-binding: url("chrome://global/content/bindings/general.xml#control-item"); | |
94 | -moz-box-align: center;*/ | |
95 | min-width: 32px; | |
96 | /* min-height: 24px;*/ | |
97 | max-width: 100px; | |
98 | margin: 0; | |
99 | margin-inline-end: 3px; | |
100 | padding: 1px; | |
101 | padding-inline-start: 3px; | |
dd0069b7 | 102 | padding-inline-end: 3px; |
6f751fd1 | 103 | border-radius: 8px 8px 0 0; |
dd0069b7 RK |
104 | border-width: 0; |
105 | /* border-inline-start-width: 1px;*/ | |
6f751fd1 RK |
106 | -moz-box-align: center; |
107 | -moz-user-focus: normal; | |
108 | -moz-box-flex: 1; | |
109 | ||
60156ae2 RK |
110 | color: var(--theme-button-color); |
111 | background-color: var(--theme-button-background); | |
dd0069b7 RK |
112 | |
113 | font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; | |
114 | white-space: nowrap; | |
115 | overflow: hidden; | |
116 | text-overflow: ellipsis; | |
117 | flex: 1; | |
118 | align-content: flex-start; | |
119 | display: flex; | |
120 | align-items: center; | |
6f751fd1 RK |
121 | } |
122 | ||
123 | .devtools-tab:hover, | |
124 | .devtools-tab:hover:active { | |
125 | background-color: var(--theme-hover-background); | |
126 | color: var(--theme-hover-color); | |
127 | } | |
128 | ||
dd0069b7 RK |
129 | .devtools-tab:not([selected])[highlighted], |
130 | .devtools-tab:not(.selected).highlighted { | |
6f751fd1 RK |
131 | background-color: var(--theme-highlight-pink); |
132 | } | |
133 | ||
134 | .devtools-tab > image { | |
135 | border: none; | |
136 | margin: 0; | |
137 | /* margin-inline-start: 4px; | |
138 | opacity: 0.6;*/ | |
139 | max-height: 16px; | |
140 | width: 16px; /* Prevents collapse during theme switching */ | |
141 | } | |
142 | ||
dd0069b7 RK |
143 | .devtools-tab > img { |
144 | border: none; | |
145 | margin: 0; | |
146 | /* margin-inline-start: 10px; | |
147 | opacity: 0.6;*/ | |
148 | max-height: 16px; | |
149 | width: 16px; /* Prevents collapse during theme switching */ | |
150 | vertical-align: middle; | |
151 | margin-inline-end: 3px; | |
152 | } | |
153 | ||
154 | ||
6f751fd1 RK |
155 | .devtools-tab > label { |
156 | white-space: nowrap; | |
157 | /* margin: 0 4px;*/ | |
158 | } | |
159 | ||
160 | .devtools-tab:hover > image { | |
161 | /* opacity: 0.8;*/ | |
162 | } | |
163 | ||
164 | .devtools-tab:active > image, | |
165 | .devtools-tab[selected] > image { | |
166 | /* opacity: 1;*/ | |
167 | } | |
168 | ||
169 | .devtools-tab > spacer { | |
170 | max-width: 0; | |
171 | -moz-box-flex: 0; | |
172 | } | |
173 | ||
dd0069b7 RK |
174 | .devtools-tabbar .devtools-tab[selected], |
175 | .devtools-tabbar .devtools-tab.selected { | |
6f751fd1 | 176 | color: var(--theme-selection-color); |
60156ae2 | 177 | background-color: var(--theme-selection-background); |
6f751fd1 RK |
178 | } |
179 | ||
180 | #toolbox-tabs .devtools-tab[selected], | |
181 | #toolbox-tabs .devtools-tab[highlighted] { | |
182 | } | |
183 | ||
184 | #toolbox-tabs .devtools-tab[selected]:last-child, | |
185 | #toolbox-tabs .devtools-tab[highlighted]:last-child { | |
186 | } | |
187 | ||
188 | #toolbox-tabs .devtools-tab[selected] + .devtools-tab, | |
189 | #toolbox-tabs .devtools-tab[highlighted] + .devtools-tab { | |
190 | } | |
191 | ||
192 | #toolbox-tabs .devtools-tab:first-child[selected] { | |
193 | } | |
194 | ||
195 | #toolbox-tabs .devtools-tab:last-child { | |
196 | } | |
197 | ||
198 | .devtools-tab:not([highlighted]) > .highlighted-icon, | |
199 | .devtools-tab[selected] > .highlighted-icon, | |
200 | .devtools-tab:not([selected])[highlighted] > .default-icon { | |
201 | visibility: collapse; | |
202 | } | |
dd0069b7 RK |
203 | .devtools-tab:not(.highlighted) > .highlighted-icon, |
204 | .devtools-tab.selected > .highlighted-icon, | |
205 | .devtools-tab:not(.selected).highlighted > .default-icon { | |
206 | display: none; | |
207 | } | |
208 | ||
6f751fd1 RK |
209 | |
210 | /* The options tab is special - it doesn't have the same parent | |
211 | as the other tabs (toolbox-option-container vs toolbox-tabs) */ | |
212 | #toolbox-option-container .devtools-tab:not([selected]) { | |
213 | /* background-color: transparent;*/ | |
214 | } | |
215 | #toolbox-option-container .devtools-tab { | |
216 | /* border-color: transparent; | |
217 | border-width: 0; | |
218 | padding-inline-start: 1px;*/ | |
219 | } | |
220 | #toolbox-tab-options > image { | |
221 | /* margin: 0 8px;*/ | |
222 | margin-inline-end: 3px; | |
223 | } | |
224 | #toolbox-tab-options { | |
225 | min-width: 20px; | |
226 | } | |
dd0069b7 RK |
227 | #toolbox-tab-options > img { |
228 | margin-inline-end: 0; | |
229 | } | |
6f751fd1 RK |
230 | #toolbox-option-container { |
231 | background-color: #000000; | |
232 | padding-inline-start: 3px; | |
233 | margin-inline-end: 1px; | |
234 | } | |
235 | ||
236 | /* Toolbox controls */ | |
237 | ||
dd0069b7 RK |
238 | #toolbox-controls, #toolbox-dock-buttons { |
239 | display: flex; | |
240 | } | |
241 | ||
242 | #toolbox-controls { | |
243 | margin-inline-end: 2px; | |
244 | } | |
245 | ||
6f751fd1 RK |
246 | #toolbox-controls > button, |
247 | #toolbox-dock-buttons > button { | |
248 | -moz-appearance: none; | |
249 | -moz-user-focus: normal; | |
250 | border: none; | |
251 | /* margin: 0 4px;*/ | |
252 | min-width: 18px; | |
253 | width: 18px; | |
254 | } | |
255 | ||
256 | #toolbox-close::before { | |
257 | background-image: var(--close-button-image); | |
258 | } | |
259 | ||
260 | #toolbox-dock-bottom::before { | |
261 | background-image: var(--dock-bottom-image); | |
262 | } | |
263 | ||
264 | #toolbox-dock-side::before { | |
265 | background-image: var(--dock-side-image); | |
266 | } | |
267 | ||
268 | #toolbox-dock-window::before { | |
269 | background-image: var(--dock-undock-image); | |
270 | } | |
271 | ||
272 | #toolbox-dock-bottom-minimize { | |
273 | /* Bug 1177463 - The minimize button is currently hidden until we agree on | |
274 | the UI for it, and until bug 1173849 is fixed too. */ | |
275 | display: none; | |
276 | } | |
277 | ||
278 | #toolbox-dock-bottom-minimize::before { | |
279 | background-image: url("chrome://devtools/skin/images/dock-bottom-minimize@2x.png"); | |
280 | } | |
281 | ||
282 | #toolbox-dock-bottom-minimize.minimized::before { | |
283 | background-image: url("chrome://devtools/skin/images/dock-bottom-maximize@2x.png"); | |
284 | } | |
285 | ||
286 | .devtools-separator { | |
287 | margin: 0 2px; | |
288 | width: 2px; | |
289 | } | |
290 | ||
291 | #toolbox-buttons:empty + .devtools-separator, | |
292 | .devtools-separator[invisible] { | |
293 | visibility: hidden; | |
294 | } | |
295 | ||
296 | #toolbox-controls-separator { | |
297 | margin: 0; | |
dd0069b7 | 298 | width: 0; |
6f751fd1 RK |
299 | } |
300 | ||
301 | /* Command buttons */ | |
302 | ||
303 | .command-button { | |
304 | padding: 0; | |
305 | margin: 0; | |
306 | position: relative; | |
307 | -moz-user-focus: normal; | |
308 | } | |
309 | ||
310 | .command-button::before { | |
311 | /* opacity: 0.7;*/ | |
312 | } | |
313 | ||
314 | .command-button:hover { | |
315 | /* background-color: var(--toolbar-tab-hover);*/ | |
316 | } | |
317 | ||
318 | .command-button:hover:active, | |
319 | .command-button[checked=true]:not(:hover) { | |
320 | /* background-color: var(--toolbar-tab-hover-active)*/ | |
321 | } | |
322 | ||
323 | .command-button:hover::before { | |
324 | /* opacity: 0.85;*/ | |
325 | } | |
326 | ||
327 | .command-button:hover:active::before, | |
328 | .command-button[checked=true]::before, | |
329 | .command-button[open=true]::before { | |
330 | /* opacity: 1;*/ | |
331 | } | |
332 | ||
333 | #toolbox-close:hover::before, | |
334 | #toolbox-close:hover:active::before, | |
335 | .toolbox-dock-button:hover::before, | |
336 | .toolbox-dock-button:hover:active::before, | |
337 | .command-button:hover::before, | |
338 | .command-button:hover:active::before, | |
339 | .command-button[checked=true]::before, | |
dd0069b7 RK |
340 | .command-button[open=true]::before, |
341 | .command-button.checked::before, | |
342 | .command-button.open::before { | |
6f751fd1 RK |
343 | filter: var(--checked-icon-filter); |
344 | } | |
345 | ||
346 | /* Command button images */ | |
347 | ||
348 | #command-button-paintflashing::before { | |
349 | background-image: var(--command-paintflashing-image); | |
350 | } | |
351 | ||
352 | #command-button-screenshot::before { | |
353 | background-image: var(--command-screenshot-image); | |
354 | } | |
355 | ||
356 | #command-button-responsive::before { | |
357 | background-image: var(--command-responsive-image); | |
358 | } | |
359 | ||
360 | #command-button-scratchpad::before { | |
361 | background-image: var(--command-scratchpad-image); | |
362 | } | |
363 | ||
364 | #command-button-pick::before { | |
365 | background-image: var(--command-pick-image); | |
366 | } | |
367 | ||
368 | #command-button-splitconsole::before { | |
369 | background-image: var(--command-splitconsole-image); | |
370 | } | |
371 | ||
372 | #command-button-noautohide::before { | |
373 | background-image: var(--command-noautohide-image); | |
374 | } | |
375 | ||
376 | #command-button-eyedropper::before { | |
377 | background-image: var(--command-eyedropper-image); | |
378 | } | |
379 | ||
380 | #command-button-rulers::before { | |
381 | background-image: var(--command-rulers-image); | |
382 | } | |
383 | ||
384 | #command-button-measure::before { | |
385 | background-image: var(--command-measure-image); | |
386 | } | |
387 | ||
388 | #command-button-frames::before { | |
389 | background-image: var(--command-frames-image); | |
390 | } | |
391 | ||
392 | #command-button-frames { | |
393 | background-image: url("chrome://devtools/skin/images/dropmarker.svg"); | |
394 | background-repeat: no-repeat; | |
395 | background-position: right; | |
396 | ||
397 | /* Override background-size from the command-button. | |
398 | The drop down arrow is smaller */ | |
399 | background-size: 8px 4px !important; | |
400 | min-width: 32px; | |
401 | } | |
402 | ||
403 | #command-button-frames:-moz-dir(rtl) { | |
404 | background-position: left; | |
405 | } | |
406 | ||
407 | /* Toolbox panels */ | |
408 | ||
409 | .toolbox-panel { | |
410 | display: -moz-box; | |
411 | -moz-box-flex: 1; | |
412 | visibility: collapse; | |
413 | } | |
414 | ||
415 | .toolbox-panel[selected] { | |
416 | visibility: visible; | |
417 | } | |
418 | ||
419 | /** | |
420 | * When panels are collapsed or hidden, making sure that they are also | |
421 | * inaccessible by keyboard. This is not the case by default because the are | |
422 | * predominantly hidden using visibility: collapse; style or collapsed | |
423 | * attribute. | |
424 | */ | |
425 | .toolbox-panel *, | |
426 | #toolbox-panel-webconsole[collapsed] * { | |
427 | -moz-user-focus: ignore; | |
428 | } | |
429 | ||
430 | /** | |
431 | * Enrure that selected toolbox panel's contents are keyboard accessible as they | |
432 | * are explicitly made not to be when hidden (default). | |
433 | */ | |
434 | .toolbox-panel[selected] * { | |
435 | -moz-user-focus: normal; | |
436 | } |