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/. */
5 /* Animation-inspector specific theme variables */
9 --even-animation-timeline-background-color: rgba(160,144,144,0.03);
13 /* How high should toolbars be */
14 --toolbar-height: 20px;
15 /* How wide should the sidebar be */
16 --timeline-sidebar-width: 150px;
17 /* How high should animations displayed in the timeline be */
18 --timeline-animation-height: 20px;
29 flex-direction: column;
32 color: var(--theme-content-color3);
35 /* The top toolbar, containing the toggle-all button. And the timeline toolbar,
36 containing playback control buttons, shown only when there are animations
37 displayed in the timeline */
41 border-bottom: 1px solid var(--theme-splitter-color);
45 justify-content: flex-end;
46 height: var(--toolbar-height);
53 [timeline] #global-toolbar {
57 [timeline] #timeline-toolbar {
61 #global-toolbar .label {
65 /* The main animations container */
68 height: calc(100% - var(--toolbar-height));
76 /* The error message, shown when an invalid/unanimated element is selected */
84 /* The error message is hidden by default */
88 [empty] #error-message {
92 /* Element picker, toggle-all buttons, timeline pause button, ... */
94 #global-toolbar .devtools-button,
95 #timeline-toolbar .devtools-button {
96 border-width: 0 0 0 1px;
97 min-height: var(--toolbar-height);
104 .devtools-button::before {
112 margin: -8px 0 0 -8px;
115 #element-picker::before {
116 background-image: url("chrome://devtools/skin/command-pick.png");
119 .pause-button::before {
120 background-image: url("debugger-pause.png");
123 #element-picker[checked]::before {
124 background-position: -48px 0;
125 filter: none; /* Icon is blue when checked, don't invert for light theme */
128 .pause-button.paused::before {
129 background-image: url("debugger-play.png");
132 @media (min-resolution: 1.1dppx) {
133 #element-picker::before {
134 background-image: url("chrome://devtools/skin/command-pick@2x.png");
135 background-size: 64px;
138 .pause-button::before {
139 background-image: url("debugger-pause@2x.png");
142 .pause-button.paused::before {
143 background-image: url("debugger-play@2x.png");
147 /* Animation timeline component */
149 .animation-timeline {
153 /* The timeline gets its background-image from a canvas element created in
154 /browser/devtools/animationinspector/utils.js drawGraphElementBackground
155 thanks to document.mozSetImageElement("time-graduations", canvas)
156 This is done so that the background can be built dynamically from script */
157 background-image: -moz-element(#time-graduations);
158 background-repeat: repeat-y;
159 /* The animations are drawn 150px from the left edge so that animated nodes
160 can be displayed in a sidebar */
161 background-position: var(--timeline-sidebar-width) 0;
163 flex-direction: column;
166 .animation-timeline .scrubber {
169 width: var(--timeline-sidebar-width);
170 border-right: 1px solid #FF0000;
171 box-sizing: border-box;
173 pointer-events: none;
176 .animation-timeline .scrubber::before {
182 border-top: 5px solid #FF0000;
183 border-left: 5px solid transparent;
184 border-right: 5px solid transparent;
187 .animation-timeline .time-header {
188 margin-left: var(--timeline-sidebar-width);
189 height: var(--toolbar-height);
192 /* This is the same color as the time graduations in
193 browser/devtools/animationinspector/utils.js */
194 border-bottom: 1px solid var(--theme-splitter-color);
196 -moz-user-select: none;
199 .animation-timeline .time-header .time-tick {
204 .animation-timeline .animations {
210 list-style-type: none;
213 /* Animation block widgets */
215 .animation-timeline .animation {
217 height: var(--timeline-animation-height);
221 .animation-timeline .animation:nth-child(2n) {
222 background-color: var(--even-animation-timeline-background-color);
225 .animation-timeline .animation .target {
226 width: var(--timeline-sidebar-width);
231 .animation-timeline .animation-target {
232 background-color: transparent;
235 .animation-timeline .animation .time-block {
238 left: var(--timeline-sidebar-width);
243 /* Animation iterations */
245 .animation-timeline .animation .iterations {
248 box-sizing: border-box;
249 --timelime-border-color: var(--theme-body-color);
250 --timeline-background-color: var(--theme-splitter-color);
252 /* Iterations of the animation are displayed with a repeating linear-gradient
253 which size is dynamically changed from JS. The gradient only draws 1px
254 borders between each iteration. These borders must have the same color as
255 the border of this element */
257 linear-gradient(to right,
258 var(--timelime-border-color) 0,
259 var(--timelime-border-color) 1px,
262 background-repeat: repeat-x;
263 background-position: -1px 0;
264 border: 1px solid var(--timelime-border-color);
266 /* The background color is set independently */
267 background-color: var(--timeline-background-color);
270 .animation-timeline .animation .cssanimation {
271 --timelime-border-color: var(--theme-highlight-lightorange);
272 --timeline-background-color: var(--theme-contrast-background);
275 .animation-timeline .animation .csstransition {
276 --timelime-border-color: var(--theme-highlight-bluegrey);
277 --timeline-background-color: var(--theme-highlight-blue);
280 .animation-timeline .animation .iterations.infinite {
281 border-right-width: 0;
284 .animation-timeline .animation .iterations.infinite::before,
285 .animation-timeline .animation .iterations.infinite::after {
292 border-right: 4px solid var(--theme-body-background);
293 border-top: 4px solid transparent;
294 border-bottom: 4px solid transparent;
297 .animation-timeline .animation .iterations.infinite::after {
302 .animation-timeline .animation .name {
303 color: var(--theme-selection-color);
307 text-overflow: ellipsis;
313 .animation-timeline .animation .delay {
316 /* Make sure the delay covers up the animation border */
317 transform: translate(-1px, -1px);
318 box-sizing: border-box;
319 height: calc(100% + 2px);
321 border: 1px solid var(--timelime-border-color);
322 border-width: 1px 0 1px 1px;
323 background-image: repeating-linear-gradient(45deg,
326 var(--theme-selection-color) 1px,
327 var(--theme-selection-color) 4px);
328 background-color: var(--timelime-border-color);
331 .animation-timeline .animation .delay.negative {
332 /* Negative delays are displayed on top of the animation, so they need a
333 right border. Whereas normal delays are displayed just before the
334 animation, so there's already the animation's left border that serves as
339 .animation-timeline .animation .delay::before {
347 background: var(--timelime-border-color);
350 /* Animation target node gutter, contains a preview of the dom node */
353 background-color: var(--theme-toolbar-background);
355 box-sizing: border-box;
357 text-overflow: ellipsis;
361 .animation-target .attribute-name {
365 .animation-target .node-selector {
366 background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
372 .animation-target .node-selector:hover {
373 background-position: -32px 0;
376 .animation-target .node-selector:active {
377 background-position: -16px 0;
380 /* Animation title gutter, contains the name, duration, iteration */
383 background-color: var(--theme-toolbar-background);
384 border-bottom: 1px solid var(--theme-splitter-color);
386 word-wrap: break-word;
390 .animation-title .meta-data {
394 .animation-title strong {
398 .animation-title .meta-data .compositor-icon {
400 background-image: url("animation-fast-track.svg");
401 background-repeat: no-repeat;
403 /* Make sure the icon is positioned above the timeline range input so that
404 its tooltip appears on hover */
412 height: var(--timeline-animation-height);
416 border-bottom: 1px solid var(--theme-splitter-color);
419 .timeline .playback-controls {
424 /* Playback control buttons */
426 .timeline .playback-controls button {
428 border-width: 0 1px 0 0;
431 .timeline .toggle::before {
432 background-image: url(debugger-pause.png);
435 .paused .timeline .toggle::before,
436 .finished .timeline .toggle::before {
437 background-image: url(debugger-play.png);
440 .timeline .ff::before {
441 background-image: url(fast-forward.png);
444 .timeline .rw::before {
445 background-image: url(rewind.png);
448 @media (min-resolution: 1.1dppx) {
449 .timeline .toggle::before {
450 background-image: url(debugger-pause@2x.png);
453 .paused .timeline .toggle::before,
454 .finished .timeline .toggle::before {
455 background-image: url(debugger-play@2x.png);
458 .timeline .ff::before {
459 background-image: url(fast-forward@2x.png);
462 .timeline .rw::before {
463 background-image: url(rewind@2x.png);
468 -moz-appearance: none;
470 color: var(--theme-body-color);
471 border-right: 1px solid var(--theme-splitter-color);
474 /* Slider (input type range) container */
476 .timeline .sliders-container {
483 .timeline .sliders-container .current-time {
492 .timeline .sliders-container .current-time::-moz-range-thumb {
497 background: var(--theme-highlight-blue);
500 .timeline .sliders-container .current-time::-moz-range-track {
503 background: transparent;
506 /* Current time label */
508 .timeline .time-display {
511 justify-content: center;
513 border-left: 1px solid var(--theme-splitter-color);
514 background: var(--theme-toolbar-background);