| /* |
| * Copyright (c) 2015 The Chromium Authors. All rights reserved. |
| * Use of this source code is governed by a BSD-style license that can be |
| * found in the LICENSE file. |
| */ |
| |
| .animation-node-row { |
| width: 100%; |
| display: flex; |
| border-bottom: 1px dashed #ccc; |
| } |
| |
| .animation-node-description { |
| display: inline-block; |
| min-width: 200px; |
| max-width: 200px; |
| padding-left: 15px; |
| overflow: hidden; |
| position: relative; |
| transform-style: preserve-3d; |
| line-height: 40px; |
| } |
| |
| .animation-node-row:nth-child(odd) { |
| background-color: hsla(0, 0%, 0%, 0.05); |
| } |
| |
| .animation-timeline-row { |
| height: 40px; |
| position: relative; |
| } |
| |
| path.animation-keyframe { |
| fill-opacity: 0.3; |
| } |
| |
| line.animation-line { |
| stroke-width: 2px; |
| stroke-linecap: round; |
| fill: none; |
| } |
| |
| line.animation-delay-line { |
| stroke-width: 2px; |
| stroke-dasharray: 6, 4; |
| } |
| |
| circle.animation-endpoint, circle.animation-keyframe-point { |
| stroke-width: 2px; |
| } |
| |
| circle.animation-endpoint, circle.animation-keyframe-point { |
| transition: transform 100ms cubic-bezier(0, 0, 0.2, 1); |
| transform: scale(1); |
| transform-origin: 50% 50%; |
| } |
| |
| circle.animation-endpoint:hover, circle.animation-keyframe-point:hover { |
| transform: scale(1.2); |
| } |
| |
| circle.animation-endpoint:active, circle.animation-keyframe-point:active { |
| transform: scale(1); |
| } |
| |
| circle.animation-keyframe-point { |
| fill: white; |
| } |
| |
| .animation-name { |
| position: absolute; |
| top: 15px; |
| color: #333; |
| text-align: center; |
| margin-left: -8px; |
| text-overflow: ellipsis; |
| overflow: hidden; |
| white-space: nowrap; |
| } |
| |
| .animation-timeline-header { |
| height: 44px; |
| border-bottom: 1px solid #ccc; |
| flex-shrink: 0; |
| } |
| |
| .animation-controls { |
| width: 200px; |
| max-width: 200px; |
| padding: 10px; |
| height: 100%; |
| line-height: 22px; |
| } |
| |
| .animation-timeline-markers { |
| height: 100%; |
| width: calc(100% - 200px); |
| display: inline-block; |
| } |
| |
| .animation-time-overlay { |
| background-color: black; |
| opacity: 0.05; |
| position: absolute; |
| height: 100%; |
| width: 100%; |
| } |
| |
| input.animation-playback-slider { |
| width: 68px; |
| margin-left: 12px; |
| -webkit-appearance: none; |
| position: absolute; |
| top: 18px; |
| } |
| |
| input[type=range].animation-playback-slider::-webkit-slider-runnable-track { |
| height: 4px; |
| border-radius: 2px; |
| cursor: pointer; |
| background: #c8c8c8; |
| } |
| |
| input[type=range].animation-playback-slider:focus::-webkit-slider-runnable-track { |
| background: #b8b8b8; |
| } |
| |
| input[type=range].animation-playback-slider::-webkit-slider-thumb { |
| -webkit-appearance: none; |
| cursor: pointer; |
| margin-top: -4px; |
| cursor: pointer; |
| width: 12px; |
| height: 12px; |
| border-radius: 12px; |
| background-color: rgb(248, 248, 248); |
| border: 1px solid #999; |
| box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.24); |
| } |
| |
| .animation-playback-label { |
| width: 34px; |
| text-align: right; |
| font-family: 'DejaVu Sans'; |
| display: inline-block; |
| } |
| |
| .animation-scrubber { |
| opacity: 1; |
| position: absolute; |
| left: 200px; |
| height: calc(100% - 43px); |
| width: calc(100% - 200px); |
| top: 43px; |
| border-left: 1px solid rgba(0,0,0,0.5); |
| } |
| |
| .animation-scrubber-head { |
| background-color: rgba(0, 0, 0, 0.5); |
| width: 50px; |
| height: 23px; |
| color: white; |
| line-height: 23px; |
| text-align: center; |
| border-radius: 5px; |
| position: relative; |
| top: -29px; |
| left: -26px; |
| font-size: 10px; |
| visibility: visible; |
| } |
| |
| .animation-timeline-end > .animation-scrubber-head { |
| visibility: visible; |
| } |
| |
| .animation-timeline-end > .animation-scrubber-arrow { |
| visibility: hidden; |
| } |
| |
| .animation-scrubber-arrow { |
| width: 21px; |
| height: 25px; |
| position: absolute; |
| top: -6px; |
| left: -7px; |
| -webkit-clip-path: polygon(0 0, 6px 6px, 12px 0px, 0px 0px); |
| background-color: rgba(0, 0, 0, 0.5); |
| } |
| |
| .animation-timeline-end > .animation-timeline-timer { |
| visibility: hidden; |
| } |
| |
| svg.animation-timeline-grid { |
| position: absolute; |
| left: 200px; |
| } |
| |
| rect.animation-timeline-grid-line { |
| fill: #eee; |
| } |
| |
| rect.animation-timeline-grid-line:first-child { |
| fill: #ccc; |
| } |
| |
| .animation-timeline-row > svg.animation-ui { |
| position: absolute; |
| } |
| |
| .animation-node-timeline { |
| flex-grow: 1; |
| } |
| |
| .animation-node-description > div { |
| position: absolute; |
| top: 50%; |
| transform: translateY(-50%); |
| max-height: 100%; |
| } |
| |
| .animation-node-row.animation-node-removed { |
| background-color: #fff0f0; |
| } |
| |
| svg.animation-ui g:first-child { |
| opacity: 1; |
| } |
| |
| .animation-tail-iterations { |
| opacity: 0.5; |
| } |
| |
| svg.animation-ui.animation-ui-canceled { |
| -webkit-filter: grayscale(100%); |
| transition: -webkit-filter 100ms cubic-bezier(0, 0, 0.2, 1); |
| } |
| |
| .animation-keyframe-step line { |
| stroke-width: 2; |
| stroke-opacity: 0.3; |
| } |
| |
| text.animation-timeline-grid-label { |
| font-size: 10px; |
| fill: #999; |
| } |
| |
| .animation-timeline-rows { |
| flex-grow: 1; |
| overflow-y: auto; |
| z-index: 1; |
| overflow-x: hidden; |
| } |
| |
| .toolbar.animation-controls-toolbar { |
| float: right; |
| } |
| |
| .animation-node-row.animation-node-selected { |
| background-color: hsla(218, 78%, 66%, 0.1); |
| } |