OLD | NEW |
1 /* | 1 /* |
2 * Copyright (c) 2015 The Chromium Authors. All rights reserved. | 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 | 3 * Use of this source code is governed by a BSD-style license that can be |
4 * found in the LICENSE file. | 4 * found in the LICENSE file. |
5 */ | 5 */ |
6 | 6 |
7 .animation-node-row { | 7 .animation-node-row { |
8 width: 100%; | 8 width: 100%; |
9 display: flex; | 9 display: flex; |
10 border-bottom: 1px dashed #ccc; | 10 border-bottom: 1px dashed #ccc; |
11 } | 11 } |
12 | 12 |
| 13 .animation-node-row:first-child > .animation-node-description { |
| 14 line-height: 45px; |
| 15 } |
| 16 |
| 17 .animation-node-row:first-child > .animation-node-timeline { |
| 18 padding-top: 5px; |
| 19 } |
| 20 |
13 .animation-node-description { | 21 .animation-node-description { |
14 display: inline-block; | 22 display: inline-block; |
15 min-width: 200px; | 23 min-width: 200px; |
16 max-width: 200px; | 24 max-width: 200px; |
17 padding-left: 15px; | 25 padding-left: 15px; |
18 overflow: hidden; | 26 overflow: hidden; |
19 position: relative; | 27 position: relative; |
20 transform-style: preserve-3d; | 28 transform-style: preserve-3d; |
21 line-height: 40px; | 29 line-height: 40px; |
22 border-bottom: 1px solid hsl(0, 0%, 90%); | 30 border-bottom: 1px solid hsl(0, 0%, 90%); |
(...skipping 56 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
79 text-overflow: ellipsis; | 87 text-overflow: ellipsis; |
80 overflow: hidden; | 88 overflow: hidden; |
81 white-space: nowrap; | 89 white-space: nowrap; |
82 min-width: 50px; | 90 min-width: 50px; |
83 } | 91 } |
84 | 92 |
85 .animation-timeline-header { | 93 .animation-timeline-header { |
86 height: 44px; | 94 height: 44px; |
87 border-bottom: 1px solid #ccc; | 95 border-bottom: 1px solid #ccc; |
88 flex-shrink: 0; | 96 flex-shrink: 0; |
| 97 display: flex; |
89 } | 98 } |
90 | 99 |
91 .animation-timeline-header:after { | 100 .animation-timeline-header:after { |
92 content: ""; | 101 content: ""; |
93 height: 100%; | 102 height: 100%; |
94 position: absolute; | 103 position: absolute; |
95 width: 200px; | 104 width: 200px; |
96 left: 0; | 105 left: 0; |
97 background-color: hsl(0, 0%, 98%); | 106 background-color: hsl(0, 0%, 98%); |
98 z-index: -1; | 107 z-index: -1; |
99 border-right: 1px solid hsl(0, 0%, 90%); | 108 border-right: 1px solid hsl(0, 0%, 90%); |
100 } | 109 } |
101 | 110 |
102 .animation-controls { | 111 .animation-controls { |
103 width: 201px; | 112 flex: 0 0 200px; |
104 max-width: 201px; | |
105 padding: 10px; | 113 padding: 10px; |
106 height: 100%; | 114 height: 100%; |
107 line-height: 22px; | 115 line-height: 22px; |
108 background-color: hsl(0, 0%, 98%); | 116 background-color: hsl(0, 0%, 98%); |
109 border-right: 1px solid hsl(0, 0%, 90%); | 117 border-right: 1px solid hsl(0, 0%, 90%); |
110 } | 118 } |
111 | 119 |
112 .animation-timeline-markers { | 120 .animation-timeline-buffer { |
113 height: 100%; | 121 height: 100%; |
114 width: calc(100% - 200px); | 122 flex-grow: 1; |
115 display: inline-block; | 123 border-left: 1px solid #ccc; |
| 124 display: flex; |
| 125 padding: 0 2px; |
116 } | 126 } |
117 | 127 |
118 .animation-time-overlay { | 128 .animation-time-overlay { |
119 background-color: black; | 129 background-color: black; |
120 opacity: 0.05; | 130 opacity: 0.05; |
121 position: absolute; | 131 position: absolute; |
122 height: 100%; | 132 height: 100%; |
123 width: 100%; | 133 width: 100%; |
124 } | 134 } |
125 | 135 |
(...skipping 52 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
178 } | 188 } |
179 | 189 |
180 .animation-scrubber { | 190 .animation-scrubber { |
181 opacity: 1; | 191 opacity: 1; |
182 position: absolute; | 192 position: absolute; |
183 left: 230px; | 193 left: 230px; |
184 height: calc(100% - 43px); | 194 height: calc(100% - 43px); |
185 width: calc(100% - 200px); | 195 width: calc(100% - 200px); |
186 top: 43px; | 196 top: 43px; |
187 border-left: 1px solid rgba(0,0,0,0.5); | 197 border-left: 1px solid rgba(0,0,0,0.5); |
| 198 display: none; |
188 } | 199 } |
189 | 200 |
190 .animation-scrubber.animation-timeline-end { | 201 .animation-scrubber.animation-timeline-end { |
191 border: none; | 202 border: none; |
192 } | 203 } |
193 | 204 |
194 .animation-scrubber-head { | 205 .animation-scrubber-head { |
195 background-color: rgba(0, 0, 0, 0.7); | 206 background-color: rgba(0, 0, 0, 0.7); |
196 width: 60px; | 207 width: 60px; |
197 height: 23px; | 208 height: 23px; |
(...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
239 background-color: rgba(0, 0, 0, 0.7); | 250 background-color: rgba(0, 0, 0, 0.7); |
240 } | 251 } |
241 | 252 |
242 .animation-timeline-end > .animation-timeline-timer { | 253 .animation-timeline-end > .animation-timeline-timer { |
243 visibility: hidden; | 254 visibility: hidden; |
244 } | 255 } |
245 | 256 |
246 svg.animation-timeline-grid { | 257 svg.animation-timeline-grid { |
247 position: absolute; | 258 position: absolute; |
248 left: 230px; | 259 left: 230px; |
| 260 top: 43px; |
249 } | 261 } |
250 | 262 |
251 rect.animation-timeline-grid-line { | 263 rect.animation-timeline-grid-line { |
252 fill: hsl(0, 0%, 90%); | 264 fill: hsl(0, 0%, 90%); |
253 } | 265 } |
254 | 266 |
255 .animation-timeline-row > svg.animation-ui { | 267 .animation-timeline-row > svg.animation-ui { |
256 position: absolute; | 268 position: absolute; |
257 } | 269 } |
258 | 270 |
(...skipping 58 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
317 padding-left: 230px; | 329 padding-left: 230px; |
318 padding-right: 30px; | 330 padding-right: 30px; |
319 text-align: center; | 331 text-align: center; |
320 position: absolute; | 332 position: absolute; |
321 font-size: 20px; | 333 font-size: 20px; |
322 line-height: 32px; | 334 line-height: 32px; |
323 align-items: center; justify-content: center; | 335 align-items: center; justify-content: center; |
324 width: 100%; | 336 width: 100%; |
325 height: calc(100% - 44px); | 337 height: calc(100% - 44px); |
326 display: flex; | 338 display: flex; |
327 } | 339 } |
| 340 |
| 341 .animation-buffer-preview { |
| 342 height: 35px; |
| 343 margin: 4px 2px; |
| 344 background-color: #F3F3F3; |
| 345 border-radius: 2px; |
| 346 flex: 1 1; |
| 347 padding: 4px; |
| 348 max-width: 100px; |
| 349 } |
| 350 .animation-buffer-preview.selected { |
| 351 background-color: hsl(217, 89%, 61%); |
| 352 } |
| 353 .animation-buffer-preview.selected > svg > line { |
| 354 stroke: white !important; |
| 355 } |
| 356 .animation-buffer-preview > svg > line { |
| 357 stroke-width: 1px; |
| 358 } |
OLD | NEW |