[go: nahoru, domu]
Google Git
Sign in
chromium / devtools / devtools-frontend / f746fe4a57190be85ee170add03a16cf6cd4ba27 / . / front_end / panels / animation / animationTimeline.css
blob: acb162fd9466804e3ce63ee08f5cb4eedb9bc629 [file] [log] [blame]
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]1/*
2 * Copyright (c) 2015 The Chromium Authors. All rights reserved.
3 * Use of this source code is governed by a BSD-style license that can be
4 * found in the LICENSE file.
5 */
6
7:host {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]8 overflow: hidden;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]9}
10
11.animation-node-row {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]12 width: 100%;
13 display: flex;
Mathias Bynensf0db74b2020-11-30 13:26:43[diff] [blame]14 border-bottom: 1px dashed var(--color-details-hairline);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]15}
16
17.animation-node-description {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]18 width: 150px;
19 padding-left: 8px;
20 overflow: hidden;
21 position: relative;
22 transform-style: preserve-3d;
Mathias Bynensf0db74b2020-11-30 13:26:43[diff] [blame]23 border-bottom: 1px solid var(--color-details-hairline);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]24 margin-bottom: -1px;
Mathias Bynensf0db74b2020-11-30 13:26:43[diff] [blame]25 background-color: var(--color-background-elevation-1);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]26 display: flex;
27 align-items: center;
28 flex: 0 0 150px;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]29}
30
31.animation-node-description > * {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]32 flex: 0 0 auto;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]33}
34
35.animation-timeline-row {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]36 height: 32px;
37 position: relative;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]38}
39
40path.animation-keyframe {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]41 fill-opacity: 0.2;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]42}
43
Mathias Bynens54741cf2020-06-19 10:49:10[diff] [blame]44.animation-node-selected path.animation-keyframe,
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]45svg.animation-ui g:first-child:hover path.animation-keyframe {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]46 fill-opacity: 0.4;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]47}
48
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]49line.animation-line {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]50 stroke-width: 2px;
51 stroke-linecap: round;
52 fill: none;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]53}
54
55line.animation-delay-line {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]56 stroke-width: 2px;
57 stroke-dasharray: 6, 4;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]58}
59
60line.animation-delay-line.animation-fill {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]61 stroke-dasharray: none;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]62}
63
Mathias Bynens54741cf2020-06-19 10:49:10[diff] [blame]64circle.animation-keyframe-point {
Mathias Bynensf0db74b2020-11-30 13:26:43[diff] [blame]65 fill: var(--color-background);
Mathias Bynens54741cf2020-06-19 10:49:10[diff] [blame]66}
67
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]68circle.animation-endpoint,
69circle.animation-keyframe-point {
70 stroke-width: 2px;
71 transition: transform 100ms cubic-bezier(0, 0, 0.2, 1);
72 transform: scale(1);
73 transform-box: fill-box;
74 transform-origin: 50% 50%;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]75}
76
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]77circle.animation-endpoint:active,
78circle.animation-keyframe-point:active {
79 transform: scale(1);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]80}
81
Mathias Bynens54741cf2020-06-19 10:49:10[diff] [blame]82.animation-ui circle.animation-endpoint:hover,
83.animation-ui circle.animation-keyframe-point:hover {
84 transform: scale(1.2);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]85}
86
87.animation-name {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]88 position: absolute;
89 top: 8px;
Mathias Bynensf0db74b2020-11-30 13:26:43[diff] [blame]90 color: var(--color-text-primary);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]91 text-align: center;
92 margin-left: -8px;
93 white-space: nowrap;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]94}
95
96.animation-timeline-toolbar-container {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]97 display: flex;
Jack Franklin374ec392021-04-27 15:36:55[diff] [blame]98 background-color: var(--color-background-elevation-1);
Jack Franklin9b1435f2021-04-28 13:25:49[diff] [blame]99 border-bottom: var(--legacy-divider-border);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]100 flex: 0 0 auto;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]101}
102
103.animation-timeline-toolbar {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]104 display: inline-block;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]105}
106
107.animation-timeline-header {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]108 height: 28px;
Mathias Bynensf0db74b2020-11-30 13:26:43[diff] [blame]109 border-bottom: 1px solid var(--color-details-hairline);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]110 flex-shrink: 0;
111 display: flex;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]112}
113
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]114.animation-timeline-header::after {
Tim van der Lippef746fe42021-11-04 16:11:54[diff] [blame^]115 content: '';
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]116 height: calc(100% - 48px - 28px);
117 position: absolute;
118 width: 150px;
119 left: 0;
120 margin-top: 28px;
Mathias Bynensf0db74b2020-11-30 13:26:43[diff] [blame]121 background-color: var(--color-background-elevation-1);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]122 z-index: 0;
Mathias Bynensf0db74b2020-11-30 13:26:43[diff] [blame]123 border-right: 1px solid var(--color-details-hairline);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]124}
125
126.animation-controls {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]127 flex: 0 0 150px;
128 position: relative;
129 display: flex;
130 justify-content: flex-end;
131 padding-right: 8px;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]132}
133
Mathias Bynens54741cf2020-06-19 10:49:10[diff] [blame]134.animation-timeline-current-time {
135 flex: 0 0 auto;
136 line-height: 28px;
137 margin-right: 5px;
138}
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]139
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]140.animation-grid-header {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]141 flex: 1 0 auto;
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]142 cursor: text;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]143}
144
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]145.animation-timeline-buffer,
146.animation-timeline-buffer-hint {
147 height: 48px;
148 flex: 0 0 auto;
Mathias Bynensf0db74b2020-11-30 13:26:43[diff] [blame]149 border-bottom: 1px solid var(--color-details-hairline);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]150 display: flex;
151 padding: 0 2px;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]152}
153
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]154.animation-timeline-buffer:empty,
155.animation-timeline-buffer-hint {
156 display: none;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]157}
158
159.animation-timeline-buffer:empty ~ .animation-timeline-buffer-hint {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]160 align-items: center;
161 justify-content: center;
162 font-size: 14px;
163 z-index: 101;
164 display: flex;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]165}
166
167.animation-time-overlay {
Mathias Bynensf0db74b2020-11-30 13:26:43[diff] [blame]168 background-color: var(--color-text-primary);
Mathias Bynensca9fa2d2020-05-19 15:23:40[diff] [blame]169 opacity: 5%;
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]170 position: absolute;
171 height: 100%;
172 width: 100%;
173 z-index: -1;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]174}
175
176.animation-timeline-end > .animation-time-overlay {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]177 visibility: hidden;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]178}
179
180.animation-scrubber {
Mathias Bynensca9fa2d2020-05-19 15:23:40[diff] [blame]181 opacity: 100%;
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]182 position: absolute;
Jack Franklin2151fa02020-11-05 10:54:55[diff] [blame]183 left: 10px;
184 height: 100%;
185 width: 100%;
186 top: 28px;
Mathias Bynensf0db74b2020-11-30 13:26:43[diff] [blame]187 border-left: 1px solid var(--color-syntax-1);
Jack Franklin2151fa02020-11-05 10:54:55[diff] [blame]188 z-index: 2;
189 cursor: col-resize;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]190}
191
192.animation-scrubber-line {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]193 width: 11px;
Mathias Bynensf0db74b2020-11-30 13:26:43[diff] [blame]194 background: linear-gradient(to right, transparent 5px, var(--color-syntax-1) 5px, var(--color-syntax-1) 6px, transparent 6px);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]195 position: absolute;
196 top: -28px;
197 height: 28px;
198 left: -6px;
199 padding: 0 5px;
Jack Franklin2151fa02020-11-05 10:54:55[diff] [blame]200 z-index: 3;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]201}
202
203.animation-scrubber-head {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]204 width: 7px;
205 height: 7px;
206 transform: rotate(45deg);
Mathias Bynensf0db74b2020-11-30 13:26:43[diff] [blame]207 background: var(--color-syntax-1);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]208 position: absolute;
209 left: 2px;
210 top: 1px;
Jack Franklin2151fa02020-11-05 10:54:55[diff] [blame]211 z-index: 4;
212}
213
214.grid-overflow-wrapper {
215 position: absolute;
216 left: 140px;
217 top: 76px;
218 z-index: 1;
219 overflow: hidden;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]220}
221
222svg.animation-timeline-grid {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]223 position: absolute;
Jack Franklin2151fa02020-11-05 10:54:55[diff] [blame]224 left: 0;
225 top: 0;
226 right: 0;
227 bottom: 0;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]228}
229
230rect.animation-timeline-grid-line {
Mathias Bynensf0db74b2020-11-30 13:26:43[diff] [blame]231 fill: var(--color-background-elevation-2);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]232}
233
234.animation-timeline-row > svg.animation-ui {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]235 position: absolute;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]236}
237
238.animation-node-timeline {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]239 flex-grow: 1;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]240}
241
242.animation-node-description > div {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]243 position: absolute;
244 top: 50%;
245 transform: translateY(-50%);
246 max-height: 100%;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]247}
248
249.animation-node-removed {
Mathias Bynense4de6b32020-07-14 14:46:31[diff] [blame]250 filter: saturate(0);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]251 cursor: not-allowed;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]252}
253
254svg.animation-ui g:first-child {
Mathias Bynensca9fa2d2020-05-19 15:23:40[diff] [blame]255 opacity: 100%;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]256}
257
Peter Marshall9a3d85f2020-08-12 14:38:00[diff] [blame]258svg.animation-ui circle:focus-visible,
259svg.animation-ui path:focus-visible {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]260 outline: 2px solid -webkit-focus-ring-color;
Kalon Hindsd01eb542020-01-10 01:07:34[diff] [blame]261}
262
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]263.animation-tail-iterations {
Mathias Bynensca9fa2d2020-05-19 15:23:40[diff] [blame]264 opacity: 50%;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]265}
266
267.animation-keyframe-step line {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]268 stroke-width: 2;
269 stroke-opacity: 0.3;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]270}
271
272text.animation-timeline-grid-label {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]273 font-size: 10px;
Mathias Bynensf0db74b2020-11-30 13:26:43[diff] [blame]274 fill: var(--color-text-secondary);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]275 text-anchor: middle;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]276}
277
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]278.animation-timeline-rows,
279.animation-timeline-rows-hint {
280 flex-grow: 1;
281 overflow-y: auto;
282 z-index: 1;
283 overflow-x: hidden;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]284}
285
286.animation-timeline-rows-hint {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]287 display: none;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]288}
289
290.animation-timeline-buffer:not(:empty) ~ .animation-timeline-rows:empty {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]291 flex-grow: 0;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]292}
293
294.animation-timeline-buffer:not(:empty) ~ .animation-timeline-rows:empty ~ .animation-timeline-rows-hint {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]295 font-size: 14px;
296 display: flex;
297 align-items: center;
298 justify-content: center;
299 margin-left: 150px;
300 padding: 10px;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]301}
302
303.toolbar.animation-controls-toolbar {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]304 flex: 0 0 auto;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]305}
306
307.animation-node-row.animation-node-selected {
Andres Olivares2df80112021-08-03 13:46:43[diff] [blame]308 background-color: var(--color-background-hover-overlay);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]309}
310
311.animation-node-selected > .animation-node-description {
Mathias Bynensf0db74b2020-11-30 13:26:43[diff] [blame]312 background-color: var(--color-background-elevation-2);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]313}
314
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]315.animation-buffer-preview {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]316 height: 40px;
317 margin: 4px 2px;
Jack Franklin374ec392021-04-27 15:36:55[diff] [blame]318 background-color: var(--color-background-elevation-1);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]319 border: 1px solid transparent;
320 border-radius: 2px;
321 flex: 1 1;
322 padding: 4px;
323 max-width: 100px;
324 animation: newGroupAnim 200ms;
325 position: relative;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]326}
327
328.animation-buffer-preview-animation {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]329 width: 100%;
330 height: 100%;
331 border-radius: 2px 0 0 2px;
332 position: absolute;
333 top: 0;
334 left: 0;
Mathias Bynensf0db74b2020-11-30 13:26:43[diff] [blame]335 background: var(--color-background-elevation-2);
Mathias Bynensca9fa2d2020-05-19 15:23:40[diff] [blame]336 opacity: 0%;
Mathias Bynensf0db74b2020-11-30 13:26:43[diff] [blame]337 border-right: 1px solid var(--color-details-hairline);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]338 cursor: pointer;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]339}
340
Peter Marshall9a3d85f2020-08-12 14:38:00[diff] [blame]341.animation-buffer-preview:focus-visible {
Mathias Bynens54741cf2020-06-19 10:49:10[diff] [blame]342 outline: -webkit-focus-ring-color auto 5px;
343}
344
Peter Marshall9a3d85f2020-08-12 14:38:00[diff] [blame]345.animation-buffer-preview:not(.selected):focus-visible,
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]346.animation-buffer-preview:not(.selected):hover {
Mathias Bynensf0db74b2020-11-30 13:26:43[diff] [blame]347 background-color: var(--color-background-elevation-2);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]348}
349
350.animation-buffer-preview.selected {
Jack Franklin9b1435f2021-04-28 13:25:49[diff] [blame]351 background-color: var(--legacy-selection-bg-color);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]352}
353
354.animation-paused {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]355 align-items: center;
356 justify-content: center;
Jack Franklin8064d3b2021-02-03 10:08:37[diff] [blame]357 background-color: hsl(0deg 0% 70% / 50%); /* stylelint-disable-line plugin/use_theme_colors */
358 /* See: crbug.com/1152736 for color variable migration. */
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]359 display: none;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]360}
361
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]362.animation-paused::before,
363.animation-paused::after {
Tim van der Lippef746fe42021-11-04 16:11:54[diff] [blame^]364 content: '';
Mathias Bynensf0db74b2020-11-30 13:26:43[diff] [blame]365 background: var(--color-background);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]366 width: 7px;
367 height: 20px;
368 border-radius: 2px;
369 margin: 2px;
Mathias Bynensf0db74b2020-11-30 13:26:43[diff] [blame]370 border: 1px solid var(--color-details-hairline);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]371}
372
373.animation-buffer-preview.paused .animation-paused {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]374 display: flex;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]375}
376
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]377.animation-buffer-preview > svg > line {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]378 stroke-width: 1px;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]379}
380
Mathias Bynens54741cf2020-06-19 10:49:10[diff] [blame]381.animation-buffer-preview.selected > svg > line {
Tim van der Lippeaf02dec2021-05-04 13:56:19[diff] [blame]382 stroke: var(--color-background) !important; /* stylelint-disable-line declaration-no-important */
Mathias Bynens54741cf2020-06-19 10:49:10[diff] [blame]383}
384
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]385@keyframes newGroupAnim {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]386 from {
Mathias Bynense4de6b32020-07-14 14:46:31[diff] [blame]387 clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]388 }
389
390 to {
Mathias Bynense4de6b32020-07-14 14:46:31[diff] [blame]391 clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]392 }
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]393}
394
395.animation-playback-rate-control {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]396 margin: 4px 0 4px 2px;
397 display: flex;
398 width: 120px;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]399}
400
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]401.animation-playback-rate-button {
Yang Guo1019f932021-10-20 07:27:46[diff] [blame]402 border: 1px solid var(--color-button-secondary-border);
Mathias Bynensf0db74b2020-11-30 13:26:43[diff] [blame]403 color: var(--color-text-primary);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]404 display: inline-block;
405 margin-right: -1px;
406 padding: 1px 4px;
Yang Guo1019f932021-10-20 07:27:46[diff] [blame]407 background-color: transparent;
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]408 flex: 1 0 auto;
409 text-align: center;
410 cursor: pointer;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]411}
412
Mathias Bynens54741cf2020-06-19 10:49:10[diff] [blame]413.animation-playback-rate-button:first-child {
414 border-radius: 4px 0 0 4px;
415}
416
417.animation-playback-rate-button:last-child {
418 border-radius: 0 4px 4px 0;
Kalon Hinds0fae2e72020-01-08 20:02:02[diff] [blame]419}
420
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]421.animation-playback-rate-button.selected {
Yang Guo1019f932021-10-20 07:27:46[diff] [blame]422 color: var(--color-button-primary-text);
423 background-color: var(--color-primary);
424 border-color: var(--color-primary);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]425 z-index: 1;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]426}
427
Peter Marshall9a3d85f2020-08-12 14:38:00[diff] [blame]428.animation-playback-rate-button.selected:focus-visible {
Mathias Bynensf0db74b2020-11-30 13:26:43[diff] [blame]429 color: var(--color-text-primary);
Peter Marshall9a3d85f2020-08-12 14:38:00[diff] [blame]430}
431
Peter Marshall9a3d85f2020-08-12 14:38:00[diff] [blame]432.animation-playback-rate-button:focus-visible {
Jack Frankline45d3e82021-04-28 09:57:54[diff] [blame]433 background-color: var(--legacy-focus-bg-color);
Peter Marshall9a3d85f2020-08-12 14:38:00[diff] [blame]434}
435
436.animation-playback-rate-button:not(.selected):hover {
Mathias Bynensf0db74b2020-11-30 13:26:43[diff] [blame]437 background: var(--color-background-elevation-2);
Peter Marshall9a3d85f2020-08-12 14:38:00[diff] [blame]438}
439
Mathias Bynensf0db74b2020-11-30 13:26:43[diff] [blame]440.animation-remove-button {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]441 position: absolute;
442 top: -3px;
443 right: -3px;
Mathias Bynensf0db74b2020-11-30 13:26:43[diff] [blame]444 background: var(--color-text-secondary);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]445 border-radius: 12px;
446 height: 16px;
447 width: 16px;
448 align-items: center;
449 font-size: 10px;
450 justify-content: center;
Mathias Bynensf0db74b2020-11-30 13:26:43[diff] [blame]451 box-shadow: 0 1px 4px 0 var(--color-background-highlight);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]452 z-index: 100;
453 display: none;
454 cursor: pointer;
455 font-weight: 700;
Mathias Bynensf0db74b2020-11-30 13:26:43[diff] [blame]456 color: var(--color-background);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]457}
458
459.animation-remove-button:hover {
Mathias Bynensf0db74b2020-11-30 13:26:43[diff] [blame]460 background: var(--color-text-primary);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]461}
462
463.animation-buffer-preview:hover .animation-remove-button {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]464 display: flex;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]465}
Kham Udom82fae3c2020-02-25 00:54:42[diff] [blame]466
467@media (forced-colors: active) {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]468 .animation-playback-rate-button.selected,
Peter Marshall9a3d85f2020-08-12 14:38:00[diff] [blame]469 .animation-playback-rate-button.selected:first-child,
470 .animation-playback-rate-button.selected:first-child:focus-visible,
471 .animation-playback-rate-button:focus-visible {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]472 forced-color-adjust: none;
473 color: HighlightText;
474 background-color: Highlight;
475 }
476
Peter Marshall9a3d85f2020-08-12 14:38:00[diff] [blame]477 .animation-node-description:focus-visible {
Mathias Bynensf0db74b2020-11-30 13:26:43[diff] [blame]478 background-color: var(--color-background);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]479 forced-color-adjust: none;
480 }
481
482 .monospace {
483 forced-color-adjust: auto;
484 }
Kham Udom82fae3c2020-02-25 00:54:42[diff] [blame]485}