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