mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-22 01:35:35 +00:00
7c0b249917
MozReview-Commit-ID: AMFpjjYdcxr --HG-- extra : rebase_source : 743013b0c7d981bcdf868155ba2a0722bed8a864
320 lines
6.5 KiB
CSS
320 lines
6.5 KiB
CSS
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
|
|
/* Animation-inspector specific theme variables */
|
|
|
|
:root {
|
|
--animation-even-background-color: rgba(0, 0, 0, 0.05);
|
|
--command-pick-image: url(chrome://devtools/skin/images/command-pick.svg);
|
|
--graph-right-offset: 10px;
|
|
--sidebar-width: 200px;
|
|
--tick-line-style: 0.5px solid rgba(128, 136, 144, 0.5);
|
|
}
|
|
|
|
:root.theme-dark {
|
|
--animation-even-background-color: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
:root.theme-firebug {
|
|
--command-pick-image: url(chrome://devtools/skin/images/firebug/command-pick.svg);
|
|
}
|
|
|
|
/* Root element of animation inspector */
|
|
#animation-container {
|
|
height: 100%;
|
|
}
|
|
|
|
#animation-container .uncontrolled {
|
|
overflow: hidden;
|
|
}
|
|
|
|
#animation-container:not(.animation-detail-visible) .controlled {
|
|
display: none;
|
|
}
|
|
|
|
/* Animation List Container */
|
|
.animation-list-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Animation List Header */
|
|
.animation-list-header {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Animation Timeline Tick List */
|
|
.animation-timeline-tick-list {
|
|
margin-right: var(--graph-right-offset);
|
|
position: relative;
|
|
width: calc(100% - var(--sidebar-width) - var(--graph-right-offset));
|
|
}
|
|
|
|
.animation-timeline-tick-item {
|
|
border-left: var(--tick-line-style);
|
|
height: 100vh;
|
|
position: absolute;
|
|
}
|
|
|
|
/* Animation List */
|
|
.animation-list {
|
|
flex: 1;
|
|
list-style-type: none;
|
|
margin: 0;
|
|
overflow: auto;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Animation Item */
|
|
.animation-item {
|
|
display: flex;
|
|
height: 30px;
|
|
}
|
|
|
|
.animation-item:nth-child(2n+1) {
|
|
background-color: var(--animation-even-background-color);
|
|
}
|
|
|
|
.animation-item.cssanimation {
|
|
--computed-timing-graph-color: var(--theme-contrast-background);
|
|
--effect-timing-graph-color: var(--theme-highlight-lightorange);
|
|
}
|
|
|
|
.animation-item.csstransition {
|
|
--computed-timing-graph-color: var(--theme-highlight-blue);
|
|
--effect-timing-graph-color: var(--theme-highlight-bluegrey);
|
|
}
|
|
|
|
.animation-item.scriptanimation {
|
|
--computed-timing-graph-color: var(--theme-graphs-green);
|
|
--effect-timing-graph-color: var(--theme-highlight-green);
|
|
}
|
|
|
|
.animation-item.selected {
|
|
background-color: var(--theme-selection-background-hover);
|
|
}
|
|
|
|
/* Animation Target */
|
|
.animation-target {
|
|
align-items: center;
|
|
display: flex;
|
|
height: 100%;
|
|
padding-left: 4px;
|
|
width: var(--sidebar-width);
|
|
}
|
|
|
|
.animation-target .tag-name {
|
|
cursor: default;
|
|
}
|
|
|
|
/* Summary Graph */
|
|
.animation-summary-graph {
|
|
height: 100%;
|
|
padding-top: 5px;
|
|
position: relative;
|
|
width: calc(100% - var(--sidebar-width) - var(--graph-right-offset));
|
|
}
|
|
|
|
.animation-summary-graph.compositor::after {
|
|
background-image: url("images/animation-fast-track.svg");
|
|
background-repeat: no-repeat;
|
|
content: "";
|
|
display: block;
|
|
fill: var(--theme-content-color3);
|
|
height: 100%;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 5px;
|
|
width: 15px;
|
|
z-index: 1;
|
|
-moz-context-properties: fill;
|
|
}
|
|
|
|
.animation-summary-graph-path {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.animation-computed-timing-path path {
|
|
fill: var(--computed-timing-graph-color);
|
|
vector-effect: non-scaling-stroke;
|
|
transform: scale(1, -1);
|
|
}
|
|
|
|
.animation-computed-timing-path path.infinity:nth-child(n+2) {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.animation-effect-timing-path path {
|
|
fill: none;
|
|
stroke: var(--effect-timing-graph-color);
|
|
stroke-dasharray: 2px 2px;
|
|
transform: scale(1, -1);
|
|
vector-effect: non-scaling-stroke;
|
|
}
|
|
|
|
.animation-effect-timing-path path.infinity:nth-child(n+2) {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.animation-negative-delay-path path,
|
|
.animation-negative-end-delay-path path {
|
|
fill: none;
|
|
stroke: var(--theme-graphs-grey);
|
|
stroke-dasharray: 2px 2px;
|
|
transform: scale(1, -1);
|
|
vector-effect: non-scaling-stroke;
|
|
}
|
|
|
|
.animation-delay-sign,
|
|
.animation-end-delay-sign {
|
|
background-color: var(--theme-graphs-grey);
|
|
height: 3px;
|
|
position: absolute;
|
|
top: calc(100% - 1.5px);
|
|
}
|
|
|
|
.animation-delay-sign::before,
|
|
.animation-end-delay-sign::before {
|
|
background-color: inherit;
|
|
border-radius: 50%;
|
|
content: "";
|
|
height: 6px;
|
|
position: absolute;
|
|
top: -1.5px;
|
|
width: 6px;
|
|
}
|
|
|
|
.animation-delay-sign.fill,
|
|
.animation-end-delay-sign.fill {
|
|
background-color: var(--effect-timing-graph-color);
|
|
}
|
|
|
|
.animation-delay-sign.negative::before {
|
|
left: unset;
|
|
right: -3px;
|
|
}
|
|
|
|
.animation-end-delay-sign::before {
|
|
right: -3px;
|
|
}
|
|
|
|
.animation-end-delay-sign.negative::before {
|
|
left: -3px;
|
|
right: unset;
|
|
}
|
|
|
|
.animation-name {
|
|
height: 100%;
|
|
left: 0;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
top: 0;
|
|
width: calc(100% - 20px);
|
|
}
|
|
|
|
.animation-name text {
|
|
dominant-baseline: middle;
|
|
fill: var(--theme-focus-outline-color);
|
|
paint-order: stroke;
|
|
stroke: var(--theme-body-background);
|
|
stroke-linejoin: round;
|
|
stroke-opacity: .5;
|
|
stroke-width: 4;
|
|
text-anchor: end;
|
|
}
|
|
|
|
/* Animation Detail */
|
|
.animation-detail-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
}
|
|
|
|
.animation-detail-header {
|
|
display: flex;
|
|
}
|
|
|
|
.animation-detail-title {
|
|
flex: 1;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.animation-detail-close-button::before {
|
|
background-image: url(chrome://devtools/skin/images/close.svg);
|
|
}
|
|
|
|
/* Animated Property List Container */
|
|
.animated-property-list-container {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Animated Property List Header */
|
|
.animated-property-list-header {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Keyframes Progress Tick List */
|
|
.keyframes-progress-tick-list {
|
|
margin-right: var(--graph-right-offset);
|
|
position: absolute;
|
|
width: calc(100% - var(--sidebar-width) - var(--graph-right-offset));
|
|
}
|
|
|
|
.keyframes-progress-tick-item {
|
|
height: 100vh;
|
|
position: absolute;
|
|
}
|
|
|
|
.keyframes-progress-tick-item.left {
|
|
border-left: var(--tick-line-style);
|
|
}
|
|
|
|
.keyframes-progress-tick-item.right {
|
|
border-right: var(--tick-line-style);
|
|
}
|
|
|
|
/* Animated Property List */
|
|
.animated-property-list {
|
|
flex: 1;
|
|
list-style-type: none;
|
|
margin-top: 0;
|
|
overflow-y: auto;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Animated Property Item */
|
|
.animated-property-item {
|
|
height: 30px;
|
|
}
|
|
|
|
.animated-property-item:nth-child(2n+1) {
|
|
background-color: var(--animation-even-background-color);
|
|
}
|
|
|
|
/* No Animation Panel */
|
|
.animation-error-message {
|
|
overflow: auto;
|
|
}
|
|
|
|
.animation-error-message > p {
|
|
white-space: pre;
|
|
}
|
|
|
|
.animation-element-picker::before {
|
|
background-image: var(--command-pick-image);
|
|
}
|