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);
20 flex-direction: column;
23 color: var(--theme-content-color3);
26 /* The top toolbar, containing the toggle-all button */
29 border-bottom: 1px solid var(--theme-splitter-color);
33 justify-content: flex-end;
42 border-width: 0 0 0 1px;
46 /* The main animations container */
49 height: calc(100% - 20px);
53 /* The error message, shown when an invalid/unanimated element is selected */
61 /* The error message is hidden by default */
65 /* Element picker and toggle-all buttons */
72 #element-picker::before,
81 margin: -8px 0 0 -8px;
82 background-image: url("chrome://browser/skin/devtools/command-pick.png");
86 background-image: url("debugger-pause.png");
89 #element-picker[checked]::before {
90 background-position: -48px 0;
91 filter: none; /* Icon is blue when checked, don't invert for light theme */
94 #toggle-all.paused::before {
95 background-image: url("debugger-play.png");
98 @media (min-resolution: 1.25dppx) {
99 #element-picker::before {
100 background-image: url("chrome://browser/skin/devtools/command-pick@2x.png");
101 background-size: 64px;
104 #toggle-all::before {
105 background-image: url("debugger-pause@2x.png");
108 #toggle-all.paused::before {
109 background-image: url("debugger-play@2x.png");
113 /* Animation timeline component */
115 .animation-timeline {
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;
128 flex-direction: column;
131 .animation-timeline .time-header {
136 border-bottom: 1px solid var(--theme-splitter-color);
139 .animation-timeline .time-header .time-tick {
144 .animation-timeline .animations {
150 list-style-type: none;
153 /* Animation block widgets */
155 .animation-timeline .animation {
161 .animation-timeline .animation:nth-child(2n) {
162 background-color: var(--even-animation-timeline-background-color);
165 .animation-timeline .animation .target {
171 .animation-timeline .animation-target {
172 background-color: transparent;
175 .animation-timeline .animation .time-block {
183 /* Animation iterations */
185 .animation-timeline .animation .iterations {
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 */
194 linear-gradient(to right,
195 var(--theme-highlight-lightorange) 0,
196 var(--theme-highlight-lightorange) 1px,
199 background-repeat: repeat-x;
200 background-position: -1px 0;
203 .animation-timeline .animation .iterations.infinite {
204 border-right-width: 0;
207 .animation-timeline .animation .iterations.infinite::before,
208 .animation-timeline .animation .iterations.infinite::after {
215 border-right: 4px solid var(--theme-body-background);
216 border-top: 4px solid transparent;
217 border-bottom: 4px solid transparent;
220 .animation-timeline .animation .iterations.infinite::after {
225 .animation-timeline .animation .animation-title {
228 box-sizing: border-box;
232 .animation-timeline .animation .delay {
236 background-image: linear-gradient(to bottom,
239 var(--theme-highlight-lightorange) 9px,
240 var(--theme-highlight-lightorange) 11px,
245 .animation-timeline .animation .delay::before {
253 background: var(--theme-highlight-lightorange);
256 .animation-timeline .animation .name {
263 /* Animation target node gutter, contains a preview of the dom node */
266 background-color: var(--theme-toolbar-background);
268 box-sizing: border-box;
270 text-overflow: ellipsis;
274 .animation-target .attribute-name {
278 .animation-target .node-selector {
279 background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0;
285 .animation-target .node-selector:hover {
286 background-position: -32px 0;
289 .animation-target .node-selector:active {
290 background-position: -16px 0;
293 /* Animation title gutter, contains the name, duration, iteration */
296 background-color: var(--theme-toolbar-background);
297 border-bottom: 1px solid var(--theme-splitter-color);
299 word-wrap: break-word;
303 .animation-title .meta-data {
307 .animation-title strong {
318 border-bottom: 1px solid var(--theme-splitter-color);
321 .timeline .playback-controls {
326 /* Playback control buttons */
328 .timeline .playback-controls button {
330 border-width: 0 1px 0 0;
333 .timeline .toggle::before {
334 background-image: url(debugger-pause.png);
337 .paused .timeline .toggle::before,
338 .finished .timeline .toggle::before {
339 background-image: url(debugger-play.png);
342 .timeline .ff::before {
343 background-image: url(fast-forward.png);
346 .timeline .rw::before {
347 background-image: url(rewind.png);
350 @media (min-resolution: 1.25dppx) {
351 .timeline .toggle::before {
352 background-image: url(debugger-pause@2x.png);
355 .paused .timeline .toggle::before,
356 .finished .timeline .toggle::before {
357 background-image: url(debugger-play@2x.png);
360 .timeline .ff::before {
361 background-image: url(fast-forward@2x.png);
364 .timeline .rw::before {
365 background-image: url(rewind@2x.png);
370 -moz-appearance: none;
372 color: var(--theme-body-color);
373 border-right: 1px solid var(--theme-splitter-color);
376 /* Slider (input type range) container */
378 .timeline .sliders-container {
385 .timeline .sliders-container .current-time {
394 .timeline .sliders-container .current-time::-moz-range-thumb {
399 background: var(--theme-highlight-blue);
402 .timeline .sliders-container .current-time::-moz-range-track {
405 background: transparent;
408 /* Current time label */
410 .timeline .time-display {
413 justify-content: center;
415 border-left: 1px solid var(--theme-splitter-color);
416 background: var(--theme-toolbar-background);