Commit | Line | Data |
---|---|---|
2e389898 RK |
1 | /* This Source Code Form is subject to the terms of the Mozilla Public |
2 | * License, v. 2.0. If a copy of the MPL was not distributed with this | |
3 | * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | |
4 | ||
5 | /* Animation-inspector specific theme variables */ | |
6 | ||
7 | .theme-dark, | |
8 | .theme-light { | |
9 | --even-animation-timeline-background-color: rgba(160,144,144,0.03); | |
10 | } | |
11 | ||
20752032 RK |
12 | html { |
13 | height: 100%; | |
14 | } | |
15 | ||
16 | body { | |
17 | margin: 0; | |
18 | padding: 0; | |
19 | display : flex; | |
20 | flex-direction: column; | |
21 | height: 100%; | |
22 | overflow: hidden; | |
23 | color: var(--theme-content-color3); | |
24 | } | |
25 | ||
26 | /* The top toolbar, containing the toggle-all button */ | |
27 | ||
28 | #toolbar { | |
29 | border-bottom: 1px solid var(--theme-splitter-color); | |
30 | display: flex; | |
31 | flex-direction: row; | |
32 | align-items: center; | |
33 | justify-content: flex-end; | |
34 | height: 20px; | |
35 | } | |
36 | ||
37 | #toolbar .label { | |
38 | padding: 1px 4px; | |
39 | } | |
40 | ||
41 | #toggle-all { | |
42 | border-width: 0 0 0 1px; | |
43 | min-height: 20px; | |
44 | } | |
45 | ||
2e389898 RK |
46 | /* The main animations container */ |
47 | ||
48 | #players { | |
49 | height: calc(100% - 20px); | |
50 | overflow: auto; | |
51 | } | |
52 | ||
20752032 RK |
53 | /* The error message, shown when an invalid/unanimated element is selected */ |
54 | ||
55 | #error-message { | |
56 | padding-top: 10%; | |
57 | text-align: center; | |
58 | flex: 1; | |
59 | overflow: auto; | |
60 | ||
61 | /* The error message is hidden by default */ | |
62 | display: none; | |
63 | } | |
64 | ||
20752032 RK |
65 | /* Element picker and toggle-all buttons */ |
66 | ||
67 | #element-picker, | |
68 | #toggle-all { | |
69 | position: relative; | |
70 | } | |
71 | ||
72 | #element-picker::before, | |
73 | #toggle-all::before { | |
74 | content: ""; | |
75 | display: block; | |
76 | width: 16px; | |
77 | height: 16px; | |
78 | position: absolute; | |
79 | left: 50%; | |
80 | top: 50%; | |
81 | margin: -8px 0 0 -8px; | |
82 | background-image: url("chrome://browser/skin/devtools/command-pick.png"); | |
83 | } | |
84 | ||
85 | #toggle-all::before { | |
86 | background-image: url("debugger-pause.png"); | |
87 | } | |
88 | ||
89 | #element-picker[checked]::before { | |
90 | background-position: -48px 0; | |
91 | filter: none; /* Icon is blue when checked, don't invert for light theme */ | |
92 | } | |
93 | ||
94 | #toggle-all.paused::before { | |
95 | background-image: url("debugger-play.png"); | |
96 | } | |
97 | ||
d74db938 | 98 | @media (min-resolution: 1.25dppx) { |
20752032 RK |
99 | #element-picker::before { |
100 | background-image: url("chrome://browser/skin/devtools/command-pick@2x.png"); | |
101 | background-size: 64px; | |
102 | } | |
103 | ||
104 | #toggle-all::before { | |
105 | background-image: url("debugger-pause@2x.png"); | |
106 | } | |
107 | ||
108 | #toggle-all.paused::before { | |
109 | background-image: url("debugger-play@2x.png"); | |
110 | } | |
111 | } | |
112 | ||
2e389898 RK |
113 | /* Animation timeline component */ |
114 | ||
115 | .animation-timeline { | |
116 | height: 100%; | |
117 | overflow: hidden; | |
118 | /* The timeline gets its background-image from a canvas element created in | |
119 | /browser/devtools/animationinspector/utils.js drawGraphElementBackground | |
120 | thanks to document.mozSetImageElement("time-graduations", canvas) | |
121 | This is done so that the background can be built dynamically from script */ | |
122 | background-image: -moz-element(#time-graduations); | |
123 | background-repeat: repeat-y; | |
124 | /* The animations are drawn 150px from the left edge so that animated nodes | |
125 | can be displayed in a sidebar */ | |
126 | background-position: 150px 0; | |
127 | display: flex; | |
128 | flex-direction: column; | |
129 | } | |
130 | ||
131 | .animation-timeline .time-header { | |
132 | margin-left: 150px; | |
133 | height: 20px; | |
134 | overflow: hidden; | |
135 | position: relative; | |
136 | border-bottom: 1px solid var(--theme-splitter-color); | |
137 | } | |
138 | ||
139 | .animation-timeline .time-header .time-tick { | |
140 | position: absolute; | |
141 | top: 3px; | |
142 | } | |
143 | ||
144 | .animation-timeline .animations { | |
145 | width: 100%; | |
146 | overflow-y: auto; | |
147 | overflow-x: hidden; | |
148 | margin: 0; | |
149 | padding: 0; | |
150 | list-style-type: none; | |
151 | } | |
152 | ||
153 | /* Animation block widgets */ | |
154 | ||
155 | .animation-timeline .animation { | |
156 | margin: 4px 0; | |
157 | height: 20px; | |
158 | position: relative; | |
159 | } | |
160 | ||
161 | .animation-timeline .animation:nth-child(2n) { | |
162 | background-color: var(--even-animation-timeline-background-color); | |
163 | } | |
164 | ||
165 | .animation-timeline .animation .target { | |
166 | width: 150px; | |
167 | overflow: hidden; | |
168 | height: 100%; | |
169 | } | |
170 | ||
171 | .animation-timeline .animation-target { | |
172 | background-color: transparent; | |
173 | } | |
174 | ||
175 | .animation-timeline .animation .time-block { | |
176 | position: absolute; | |
177 | top: 0; | |
178 | left: 150px; | |
179 | right: 0; | |
180 | height: 100%; | |
181 | } | |
182 | ||
183 | /* Animation iterations */ | |
184 | ||
185 | .animation-timeline .animation .iterations { | |
186 | position: relative; | |
187 | height: 100%; | |
188 | border: 1px solid var(--theme-highlight-lightorange); | |
189 | box-sizing: border-box; | |
190 | background: var(--theme-contrast-background); | |
191 | /* Iterations are displayed with a repeating linear-gradient which size is | |
192 | dynamically changed from JS */ | |
193 | background-image: | |
194 | linear-gradient(to right, | |
195 | var(--theme-highlight-lightorange) 0, | |
196 | var(--theme-highlight-lightorange) 1px, | |
197 | transparent 1px, | |
198 | transparent 2px); | |
199 | background-repeat: repeat-x; | |
200 | background-position: -1px 0; | |
201 | } | |
202 | ||
203 | .animation-timeline .animation .iterations.infinite { | |
204 | border-right-width: 0; | |
205 | } | |
206 | ||
207 | .animation-timeline .animation .iterations.infinite::before, | |
208 | .animation-timeline .animation .iterations.infinite::after { | |
209 | content: ""; | |
210 | position: absolute; | |
211 | top: 0; | |
212 | right: 0; | |
213 | width: 0; | |
214 | height: 0; | |
215 | border-right: 4px solid var(--theme-body-background); | |
216 | border-top: 4px solid transparent; | |
217 | border-bottom: 4px solid transparent; | |
218 | } | |
219 | ||
220 | .animation-timeline .animation .iterations.infinite::after { | |
221 | bottom: 0; | |
222 | top: unset; | |
223 | } | |
224 | ||
225 | .animation-timeline .animation .animation-title { | |
226 | height: 1.5em; | |
227 | width: 100%; | |
228 | box-sizing: border-box; | |
229 | overflow: hidden; | |
230 | } | |
231 | ||
232 | .animation-timeline .animation .delay { | |
233 | position: absolute; | |
234 | top: 0; | |
235 | height: 100%; | |
236 | background-image: linear-gradient(to bottom, | |
237 | transparent, | |
238 | transparent 9px, | |
239 | var(--theme-highlight-lightorange) 9px, | |
240 | var(--theme-highlight-lightorange) 11px, | |
241 | transparent 11px, | |
242 | transparent); | |
243 | } | |
244 | ||
245 | .animation-timeline .animation .delay::before { | |
246 | position: absolute; | |
247 | content: ""; | |
248 | left: 0; | |
249 | width: 2px; | |
250 | height: 8px; | |
251 | top: 50%; | |
252 | margin-top: -4px; | |
253 | background: var(--theme-highlight-lightorange); | |
254 | } | |
255 | ||
256 | .animation-timeline .animation .name { | |
257 | position: absolute; | |
258 | z-index: 1; | |
259 | padding: 2px; | |
260 | white-space: nowrap; | |
261 | } | |
262 | ||
d74db938 RK |
263 | /* Animation target node gutter, contains a preview of the dom node */ |
264 | ||
265 | .animation-target { | |
266 | background-color: var(--theme-toolbar-background); | |
267 | padding: 1px 4px; | |
268 | box-sizing: border-box; | |
269 | overflow: hidden; | |
270 | text-overflow: ellipsis; | |
271 | white-space: nowrap; | |
272 | } | |
273 | ||
274 | .animation-target .attribute-name { | |
275 | padding-left: 4px; | |
276 | } | |
277 | ||
278 | .animation-target .node-selector { | |
279 | background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0; | |
280 | padding-left: 16px; | |
281 | margin-right: 5px; | |
282 | cursor: pointer; | |
283 | } | |
284 | ||
285 | .animation-target .node-selector:hover { | |
286 | background-position: -32px 0; | |
287 | } | |
288 | ||
289 | .animation-target .node-selector:active { | |
290 | background-position: -16px 0; | |
291 | } | |
292 | ||
20752032 RK |
293 | /* Animation title gutter, contains the name, duration, iteration */ |
294 | ||
295 | .animation-title { | |
296 | background-color: var(--theme-toolbar-background); | |
297 | border-bottom: 1px solid var(--theme-splitter-color); | |
298 | padding: 1px 4px; | |
299 | word-wrap: break-word; | |
300 | overflow: auto; | |
301 | } | |
302 | ||
303 | .animation-title .meta-data { | |
304 | float: right; | |
305 | } | |
306 | ||
307 | .animation-title strong { | |
308 | margin: 0 .5em; | |
309 | } | |
310 | ||
b336389b RK |
311 | .animation-title .meta-data .compositor-icon { |
312 | display: none; | |
313 | background-image: url("animation-fast-track.svg"); | |
314 | background-repeat: no-repeat; | |
315 | padding-left: 12px; | |
316 | /* Make sure the icon is positioned above the timeline range input so that | |
317 | its tooltip appears on hover */ | |
318 | z-index: 1; | |
319 | position: relative; | |
320 | } | |
321 | ||
20752032 RK |
322 | /* Timeline wiget */ |
323 | ||
324 | .timeline { | |
325 | height: 20px; | |
326 | width: 100%; | |
327 | display: flex; | |
328 | flex-direction: row; | |
329 | border-bottom: 1px solid var(--theme-splitter-color); | |
330 | } | |
331 | ||
332 | .timeline .playback-controls { | |
333 | display: flex; | |
334 | flex-direction: row; | |
335 | } | |
336 | ||
337 | /* Playback control buttons */ | |
338 | ||
339 | .timeline .playback-controls button { | |
340 | flex-grow: 1; | |
341 | border-width: 0 1px 0 0; | |
342 | } | |
343 | ||
344 | .timeline .toggle::before { | |
345 | background-image: url(debugger-pause.png); | |
346 | } | |
347 | ||
348 | .paused .timeline .toggle::before, | |
349 | .finished .timeline .toggle::before { | |
350 | background-image: url(debugger-play.png); | |
351 | } | |
352 | ||
353 | .timeline .ff::before { | |
354 | background-image: url(fast-forward.png); | |
355 | } | |
356 | ||
357 | .timeline .rw::before { | |
358 | background-image: url(rewind.png); | |
359 | } | |
360 | ||
d74db938 | 361 | @media (min-resolution: 1.25dppx) { |
20752032 RK |
362 | .timeline .toggle::before { |
363 | background-image: url(debugger-pause@2x.png); | |
364 | } | |
365 | ||
366 | .paused .timeline .toggle::before, | |
367 | .finished .timeline .toggle::before { | |
368 | background-image: url(debugger-play@2x.png); | |
369 | } | |
370 | ||
371 | .timeline .ff::before { | |
372 | background-image: url(fast-forward@2x.png); | |
373 | } | |
374 | ||
375 | .timeline .rw::before { | |
376 | background-image: url(rewind@2x.png); | |
377 | } | |
378 | } | |
379 | ||
380 | .timeline .rate { | |
381 | -moz-appearance: none; | |
382 | text-align: center; | |
a5cb6e53 | 383 | color: var(--theme-body-color); |
20752032 RK |
384 | border-right: 1px solid var(--theme-splitter-color); |
385 | } | |
386 | ||
387 | /* Slider (input type range) container */ | |
388 | ||
389 | .timeline .sliders-container { | |
390 | flex-grow: 1; | |
391 | height: 100%; | |
392 | position: relative; | |
393 | border-width: 1px 0; | |
394 | } | |
395 | ||
396 | .timeline .sliders-container .current-time { | |
397 | position: absolute; | |
398 | padding: 0; | |
399 | margin: 0; | |
400 | left: 0; | |
401 | width: 100%; | |
402 | height: 100%; | |
403 | } | |
404 | ||
405 | .timeline .sliders-container .current-time::-moz-range-thumb { | |
406 | height: 100%; | |
407 | width: 4px; | |
408 | border-radius: 0; | |
409 | border: none; | |
410 | background: var(--theme-highlight-blue); | |
411 | } | |
412 | ||
413 | .timeline .sliders-container .current-time::-moz-range-track { | |
414 | width: 100%; | |
415 | height: 50px; | |
416 | background: transparent; | |
417 | } | |
418 | ||
419 | /* Current time label */ | |
420 | ||
421 | .timeline .time-display { | |
422 | display: flex; | |
423 | align-items: center; | |
424 | justify-content: center; | |
425 | width: 50px; | |
426 | border-left: 1px solid var(--theme-splitter-color); | |
427 | background: var(--theme-toolbar-background); | |
428 | } |