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