9 flex-direction: column;
12 color: var(--theme-content-color3);
15 /* The top toolbar, containing the toggle-all button */
18 border-bottom: 1px solid var(--theme-splitter-color);
22 justify-content: flex-end;
31 border-width: 0 0 0 1px;
35 /* The error message, shown when an invalid/unanimated element is selected */
43 /* The error message is hidden by default */
47 /* The animation players container */
54 /* Element picker and toggle-all buttons */
61 #element-picker::before,
70 margin: -8px 0 0 -8px;
71 background-image: url("chrome://browser/skin/devtools/command-pick.png");
75 background-image: url("debugger-pause.png");
78 #element-picker[checked]::before {
79 background-position: -48px 0;
80 filter: none; /* Icon is blue when checked, don't invert for light theme */
83 #toggle-all.paused::before {
84 background-image: url("debugger-play.png");
87 @media (min-resolution: 1.25dppx) {
88 #element-picker::before {
89 background-image: url("chrome://browser/skin/devtools/command-pick@2x.png");
90 background-size: 64px;
94 background-image: url("debugger-pause@2x.png");
97 #toggle-all.paused::before {
98 background-image: url("debugger-play@2x.png");
102 /* Animation target node gutter, contains a preview of the dom node */
105 background-color: var(--theme-toolbar-background);
107 box-sizing: border-box;
109 text-overflow: ellipsis;
113 .animation-target .attribute-name {
117 .animation-target .node-selector {
118 background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0;
124 .animation-target .node-selector:hover {
125 background-position: -32px 0;
128 .animation-target .node-selector:active {
129 background-position: -16px 0;
132 /* Animation title gutter, contains the name, duration, iteration */
135 background-color: var(--theme-toolbar-background);
136 border-bottom: 1px solid var(--theme-splitter-color);
138 word-wrap: break-word;
142 .animation-title .meta-data {
146 .animation-title strong {
157 border-bottom: 1px solid var(--theme-splitter-color);
160 .timeline .playback-controls {
165 /* Playback control buttons */
167 .timeline .playback-controls button {
169 border-width: 0 1px 0 0;
172 .timeline .toggle::before {
173 background-image: url(debugger-pause.png);
176 .paused .timeline .toggle::before,
177 .finished .timeline .toggle::before {
178 background-image: url(debugger-play.png);
181 .timeline .ff::before {
182 background-image: url(fast-forward.png);
185 .timeline .rw::before {
186 background-image: url(rewind.png);
189 @media (min-resolution: 1.25dppx) {
190 .timeline .toggle::before {
191 background-image: url(debugger-pause@2x.png);
194 .paused .timeline .toggle::before,
195 .finished .timeline .toggle::before {
196 background-image: url(debugger-play@2x.png);
199 .timeline .ff::before {
200 background-image: url(fast-forward@2x.png);
203 .timeline .rw::before {
204 background-image: url(rewind@2x.png);
209 -moz-appearance: none;
211 color: var(--theme-body-color);
212 border-right: 1px solid var(--theme-splitter-color);
215 /* Slider (input type range) container */
217 .timeline .sliders-container {
224 .timeline .sliders-container .current-time {
233 .timeline .sliders-container .current-time::-moz-range-thumb {
238 background: var(--theme-highlight-blue);
241 .timeline .sliders-container .current-time::-moz-range-track {
244 background: transparent;
247 /* Current time label */
249 .timeline .time-display {
252 justify-content: center;
254 border-left: 1px solid var(--theme-splitter-color);
255 background: var(--theme-toolbar-background);