gecko-dev/devtools/client/themes/animationinspector.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 */

.theme-dark {
  --even-animation-timeline-background-color: rgba(255,255,255,0.03);
  --command-pick-image: url(chrome://devtools/skin/images/command-pick.svg);
  --pause-image: url(chrome://devtools/skin/images/pause.svg);
  --rewind-image: url(chrome://devtools/skin/images/rewind.svg);
  --play-image: url(chrome://devtools/skin/images/play.svg);
  --close-button-image: url(chrome://devtools/skin/images/close.svg);
  /* The color for animation type 'opacity' */
  --opacity-border-color: var(--theme-highlight-pink);
  --opacity-background-color: #df80ff80;
  /* The color for animation type 'transform' */
  --transform-border-color: var(--theme-graphs-yellow);
  --transform-background-color: #d99b2880;
  /* The color for other animation type */
  --other-border-color: var(--theme-graphs-bluegrey);
  --other-background-color: #5e88b080;
  /* The color for progress indicator */
  --progress-indicator-color: var(--theme-highlight-gray);
}

.theme-light {
  --even-animation-timeline-background-color: rgba(128,128,128,0.03);
  --command-pick-image: url(chrome://devtools/skin/images/command-pick.svg);
  --pause-image: url(chrome://devtools/skin/images/pause.svg);
  --rewind-image: url(chrome://devtools/skin/images/rewind.svg);
  --play-image: url(chrome://devtools/skin/images/play.svg);
  --close-button-image: url(chrome://devtools/skin/images/close.svg);
}

.theme-light {
  /* The color for animation type 'opacity' */
  --opacity-border-color: var(--theme-highlight-pink);
  --opacity-background-color: #b82ee580;
  /* The color for animation type 'transform' */
  --transform-border-color: var(--theme-graphs-orange);
  --transform-background-color: #efc05280;
  /* The color for other animation type */
  --other-border-color: var(--theme-graphs-bluegrey);
  --other-background-color: #0072ab80;
  /* The color for progress indicator */
  --progress-indicator-color: gray;
}

:root {
  /* How high should toolbars be */
  --toolbar-height: 20px;
  /* How wide should the sidebar be (should be wide enough to contain long
     property names like 'border-bottom-right-radius' without ellipsis) */
  --timeline-sidebar-width: 200px;
  /* How high should animations displayed in the timeline be */
  --timeline-animation-height: 30px;
  /* How high should animated properties displayed in the details view be */
  --detail-animation-height: 20px;
  /* The size of a keyframe marker in the keyframes diagram */
  --keyframes-marker-size: 10px;
  /* The color of the time graduation borders */
  --time-graduation-border-color: rgba(128, 136, 144, .5);
}

.animation {
  --timeline-border-color: var(--theme-body-color);
  --timeline-background-color: var(--theme-splitter-color);
  /* The color of the endDelay hidden progress */
  --enddelay-hidden-progress-color: var(--theme-graphs-grey);
  /* The color of none fill mode */
  --fill-none-color: var(--theme-highlight-gray);
  /* The color of enable fill mode */
  --fill-enable-color: var(--timeline-border-color);
}

.animation.cssanimation {
  --timeline-border-color: var(--theme-highlight-lightorange);
  --timeline-background-color: var(--theme-contrast-background);
}

.animation.csstransition {
  --timeline-border-color: var(--theme-highlight-bluegrey);
  --timeline-background-color: var(--theme-highlight-blue);
}

.animation.scriptanimation {
  --timeline-border-color: var(--theme-highlight-green);
  --timeline-background-color: var(--theme-graphs-green);
}

html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  display : flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* The top toolbar, containing the toggle-all button. And the timeline toolbar,
   containing playback control buttons, shown only when there are animations
   displayed in the timeline */

#global-toolbar,
#timeline-toolbar {
  border-bottom: 1px solid var(--theme-splitter-color);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  height: var(--toolbar-height);
}

#timeline-toolbar {
  display: none;
  justify-content: flex-start;
}

[timeline] #global-toolbar {
  display: none;
}

[timeline] #timeline-toolbar {
  display: flex;
}

/* The main animations container */

#players {
  height: calc(100% - var(--toolbar-height));
}

[empty] #players {
  display: none;
}

/* The error message, shown when an invalid/unanimated element is selected */

#error-message {
  flex: 1;
  overflow: auto;

  /* The error message is hidden by default */
  display: none;
}

[empty] #error-message {
  display: block;
}

/* Element picker, toggle-all buttons, timeline pause button, ... */

#global-toolbar > *,
#timeline-toolbar > * {
  min-height: var(--toolbar-height);
  border-color: var(--theme-splitter-color);
  border-width: 0 0 0 1px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#global-toolbar .label,
#timeline-toolbar .label {
  padding: 0 5px;
  border-style: solid;
}

#global-toolbar .devtools-button,
#timeline-toolbar .devtools-button {
  margin: 0;
  padding: 0;
}

#timeline-toolbar .devtools-button,
#timeline-toolbar .label {
  border-width: 0 1px 0 0;
}

#element-picker::before {
  background-image: var(--command-pick-image);
}

.pause-button::before {
  background-image: var(--pause-image);
}

#rewind-timeline::before {
  background-image: var(--rewind-image);
}

.pause-button.paused::before {
  background-image: var(--play-image);
}

#timeline-rate select.devtools-button {
  -moz-appearance: none;
  text-align: center;
  font-family: inherit;
  color: var(--theme-body-color);
  font-size: 1em;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("chrome://devtools/skin/images/dropmarker.svg");
  background-repeat: no-repeat;
  background-position: calc(100% - 4px) center;
  padding-right: 1em;
}

#timeline-rate {
  position: relative;
  width: 4.5em;
}

.animation-root > .uncontrolled {
  overflow: hidden;
}

/* Animation timeline component */

.animation-timeline {
  position: relative;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Useful for positioning animations or keyframes in the timeline */
.animation-detail .track-container,
.animation-timeline .track-container {
  position: absolute;
  top: 0;
  left: var(--timeline-sidebar-width);
  /* Leave the width of a marker right of a track so the 100% markers can be
     selected easily */
  right: var(--keyframes-marker-size);
  height: var(--timeline-animation-height);
}

.animation-detail .track-container {
  height: var(--detail-animation-height);
}

.time-body.track-container {
  height: 0;
  pointer-events: none;
}

.animation-timeline .scrubber-wrapper {
  position: absolute;
  z-index: 5;
  left: var(--timeline-sidebar-width);
  /* Leave the width of a marker right of a track so the 100% markers can be
     selected easily */
  right: var(--keyframes-marker-size);
  pointer-events: none;
}

.animation-timeline .scrubber {
  pointer-events: none;
  position: absolute;
  width: 0;
  margin-left: -6px;
}

/* The scrubber handle is a transparent element displayed on top of the scrubber
   line that allows users to drag it */
.animation-timeline .scrubber .scrubber-handle {
  position: fixed;
  height: 100%;
  /* Make it thick enough for easy dragging */
  width: 12px;
  cursor: col-resize;
  pointer-events: all;
}

.animation-timeline .scrubber .scrubber-handle::before {
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  border-top: 5px solid red;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

.animation-timeline .scrubber .scrubber-handle .scrubber-line {
  position: relative;
  height: 100%;
  left: 5px;
  width: 0;
  border-right: 1px solid red;
}

.animation-timeline .time-header {
  cursor: col-resize;
  -moz-user-select: none;
  height: 100%;
}

.animated-properties-header .header-item,
.animation-timeline .time-header .header-item {
  position: absolute;
  height: 100%;
  padding-top: 3px;
  border-left: 0.5px solid var(--time-graduation-border-color);
}

.animation-timeline .header-wrapper {
  position: sticky;
  top: 0;
  background-color: var(--theme-body-background);
  border-bottom: 1px solid var(--time-graduation-border-color);
  z-index: 3;
  height: var(--toolbar-height);
  width: 100%;
  overflow: hidden;
}

.animation-timeline .time-body {
  top: var(--toolbar-height);
  z-index: 3;
}

.progress-tick-container .progress-tick,
.animation-timeline .time-body .time-tick {
  -moz-user-select: none;
  position: absolute;
}

.progress-tick-container .progress-tick::before,
.animation-timeline .time-body .time-tick::before {
  content: "";
  position: fixed;
  height: 100vh;
  width: 0;
  border-left: 0.5px solid var(--time-graduation-border-color);
}

.animation-timeline .animations {
  position: relative;
  width: 100%;
  padding: 0;
  list-style-type: none;
  margin-top: 0;
}

/* Animation block widgets */

.animation-timeline .animation {
  margin: 2px 0;
  height: var(--timeline-animation-height);
  position: relative;
}

/* Display animations' background colors to alternate. */
.animation-timeline .animation:nth-child(2n+1) {
  background-color: var(--even-animation-timeline-background-color);
}

.animation-timeline .animation.selected {
  background-color: var(--theme-selection-background-hover);
}

.animation-timeline .animation:last-child {
  margin-bottom: calc(var(--timeline-animation-height) / 2);
}

.animation-timeline .animation .target {
  width: var(--timeline-sidebar-width);
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.animation-timeline .animation-target {
  background-color: transparent;
}

.animation-timeline .animation .time-block {
  cursor: pointer;
}

/* Animation summary graph */
.animation-timeline .animation .summary {
  position: absolute;
  width: 100%;
  height: 100%;
}

.animation-timeline .animation .summary .effect-easing path {
  fill: none;
  stroke: var(--timeline-border-color);
  stroke-dasharray: 2px 2px;
}

.animation-timeline .animation .summary .keyframes-easing path {
  fill: var(--timeline-background-color);
}

.animation-timeline .animation .summary .infinity.copied {
  opacity: .3;
}

.animation-timeline .animation .summary path.delay-path.negative,
.animation-timeline .animation .summary path.enddelay-path.negative {
  fill: none;
  stroke: var(--enddelay-hidden-progress-color);
  stroke-dasharray: 2, 2;
}

.animation-timeline .animation .name {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  --fast-track-icon-width: 15px;
}

.animation-timeline .animation .name svg {
  height: 100%;
  width: calc(100% - 20px);
}

.animation-timeline .animation .name text {
  fill: var(--theme-focus-outline-color);
  stroke: var(--theme-body-background);
  stroke-width: 4;
  stroke-opacity: .5;
  stroke-linejoin: round;
  paint-order: stroke;
  text-anchor: end;
  dominant-baseline: middle;
}

.animation-timeline .fast-track .name::after {
  /* Animations running on the compositor have the fast-track background image*/
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  right: 0;
  height: 100%;
  width: var(--fast-track-icon-width);
  z-index: 1;
}

.animation-timeline .all-properties .name::after,
.animation-timeline .some-properties .name::after {
  -moz-context-properties: fill;
  fill: var(--theme-content-color3);
  background-image: url("images/animation-fast-track.svg");
  background-repeat: no-repeat;
}

.animation-timeline .animation .delay,
.animation-timeline .animation .end-delay {
  position: absolute;
  border-bottom: 3px solid var(--fill-none-color);
  bottom: -0.5px;
}

.animation-timeline .animation .delay::after,
.animation-timeline .animation .end-delay::after {
  content: "";
  position: absolute;
  top: -2px;
  width: 3px;
  height: 3px;
  border: 2px solid var(--fill-none-color);
  background-color: var(--fill-none-color);
  border-radius: 50%;
}

.animation-timeline .animation .negative.delay::after,
.animation-timeline .animation .positive.end-delay::after {
  right: -3px;
}

.animation-timeline .animation .positive.delay::after,
.animation-timeline .animation .negative.end-delay::after {
  left: -3px;
}

.animation-timeline .animation .fill.delay,
.animation-timeline .animation .fill.end-delay {
  border-color: var(--fill-enable-color);
}

.animation-timeline .animation .fill.delay::after,
.animation-timeline .animation .fill.end-delay::after {
  border-color: var(--fill-enable-color);
  background-color: var(--fill-enable-color);
}

/* Animation target node gutter, contains a preview of the dom node */
.animation-target {
  background-color: var(--theme-toolbar-background);
  padding: 0 4px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.animation-target .attribute-name {
  padding-left: 4px;
}

.animation-target .node-highlighter {
  background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
  padding-left: 16px;
  margin-right: 5px;
  cursor: pointer;
}

.animation-target .node-highlighter:hover {
  filter: var(--theme-icon-checked-filter);
}

.animation-target .node-highlighter:active,
.animation-target .node-highlighter.selected {
  filter: var(--theme-icon-checked-filter) brightness(0.9);
}

/* Inline keyframes info in the timeline */

.animation-detail .animated-properties .property {
  height: var(--detail-animation-height);
  position: relative;
}

.animation-detail .animated-properties .property.unchanged {
  opacity: 0.6;
}

.animation-detail .animated-properties .property:nth-child(2n) {
  background-color: var(--even-animation-timeline-background-color);
}

.animation-detail .animated-properties .name {
  width: var(--timeline-sidebar-width);
  padding-right: var(--keyframes-marker-size);
  box-sizing: border-box;
  height: 100%;
  color: var(--theme-body-color-alt);
  white-space: nowrap;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.animation-detail .animated-properties .name div {
  overflow: hidden;
  text-overflow: ellipsis;
}

.animation-detail .animated-properties.cssanimation {
  --background-color: var(--theme-contrast-background);
}

.animation-detail .animated-properties.csstransition {
  --background-color: var(--theme-highlight-blue);
}

.animation-detail .animated-properties.scriptanimation {
  --background-color: var(--theme-graphs-green);
}

.animation-detail .animated-properties .oncompositor::before {
  content: "";
  display: inline-block;
  width: 17px;
  height: 17px;
  -moz-context-properties: fill;
  fill: var(--background-color);
  background-image: url("images/animation-fast-track.svg");
  vertical-align: middle;
}

.animation-detail .animated-properties .warning {
  text-decoration: underline dotted;
}

.animation-detail .animated-properties .frames {
  /* The frames list is absolutely positioned and the left and width properties
     are dynamically set from javascript to match the animation's startTime and
     duration */
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  /* Using flexbox to vertically center the frames */
  display: flex;
  align-items: center;
}

/* Keyframes diagram, displayed below the timeline, inside the animation-details
   element. */

.keyframes {
  /* Actual keyframe markers are positioned absolutely within this container and
     their position is relative to its size (we know the offset of each frame
     in percentage) */
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.keyframes .frame {
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  background-color: inherit;
}

.keyframes .frame::before {
  content: "";
  display: block;
  transform:
    translateX(calc(var(--keyframes-marker-size) * -.5))
    /* The extra pixel on the Y axis is so that markers are centered on the
       horizontal line in the keyframes diagram. */
    translateY(calc(var(--keyframes-marker-size) * -.5 + 1px));
  width: var(--keyframes-marker-size);
  height: var(--keyframes-marker-size);
  border-radius: 100%;
  border: 1px solid var(--theme-highlight-gray);
  background-color: inherit;
}

.keyframes.cssanimation .frame {
  background-color: var(--theme-contrast-background);
}

.keyframes.csstransition .frame {
  background-color: var(--theme-highlight-blue);
}

.keyframes.scriptanimation .frame {
  background-color: var(--theme-graphs-green);
}

.keyframes svg {
  position: absolute;
  width: 100%;
  height: 100%;
}

.keyframes svg path {
  fill: var(--other-background-color);
  stroke: var(--other-border-color);
}

/* color of path is decided by the animation type */
.keyframes svg path.opacity {
  fill: var(--opacity-background-color);
  stroke: var(--opacity-border-color);
}

.keyframes svg path.transform {
  fill: var(--transform-background-color);
  stroke: var(--transform-border-color);
}

.keyframes svg path.color {
  stroke: none;
  height: 100%;
}

.keyframes svg .hint {
  stroke-opacity: 0;
  stroke-linecap: round;
  stroke-width: 5;
}

.keyframes svg path.hint {
  fill: none;
}

/* Note: We only use the hover class in a mochitest due to flakiness
   when simulating mouseover (Bug 1448555). */
.keyframes svg path.hint:hover,
.keyframes svg path.hint.hover {
  stroke-opacity: 1;
}

.keyframes svg rect.hint {
  fill-opacity: .1;
}

.animation-detail {
  position: relative;
  width: 100%;
  background-color: var(--theme-body-background);
  z-index: 5;
}

.animation-detail .animation-detail-header {
  position: relative;
  height: var(--toolbar-height);
  width: 100%;
}

.animation-detail .animation-detail-header > div {
  position: fixed;
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  height: var(--toolbar-height);
  line-height: var(--toolbar-height);
  background-color: var(--theme-body-background);
  padding: 0;
  z-index: 5;
}

.animation-detail .animation-detail-header > div > div {
  white-space: nowrap;
}

.animation-detail .animation-detail-header > div > div:first-child {
  margin-left: 15px;
}

.animation-detail .animation-detail-header > div > div:nth-child(2) {
  flex: 1;
  margin-left: .5em;
  min-width: 0;
}

.animation-detail .animation-detail-header .devtools-button {
  /* We need to tweak the padding
     since the devtools-button is optimized for toolbox-tab height */
  padding-top: 0;
}

.animation-detail .animation-detail-header .devtools-button::before {
  background-image: var(--close-button-image);
}

.animation-detail .animation-detail-body {
  position: relative;
  background-color: var(--theme-body-background);
}

.animation-detail .animation-detail-body .animated-properties {
  position: relative;
  height: 100%;
}

.animated-properties-header {
  -moz-user-select: none;
  position: sticky;
  top: var(--toolbar-height);
  min-height: var(--toolbar-height);
  padding-top: 2px;
  z-index: 3;
  background-color: var(--theme-body-background);
}

.animated-properties-header .header-item:nth-child(2) {
  left: 50%;
}

.animated-properties-header .header-item:nth-child(3) {
  right: -0.5px;
  border-left: none;
  border-right: 0.5px solid var(--time-graduation-border-color);
}

.progress-tick-container .progress-tick:nth-child(2) {
  left: 50%;
}

.progress-tick-container .progress-tick:nth-child(3) {
  left: 100%;
}

.animated-properties-body .property:last-child {
  /* To display animation progress graph clealy when the scroll is bottom. */
  padding-bottom: calc(var(--detail-animation-height) / 2);
}

.animated-properties .progress-indicator-wrapper {
  pointer-events: none;
  z-index: 5;
}

.progress-indicator-wrapper .progress-indicator {
  position: absolute;
  pointer-events: none;
}

.progress-indicator-wrapper .progress-indicator .progress-indicator-shape {
  position: fixed;
  width: 0;
  height: 100vh;
  border-right: 1px solid var(--progress-indicator-color);
}

.progress-indicator-wrapper .progress-indicator .progress-indicator-shape::before {
  content: "";
  position: absolute;
  top: 0;
  right: -6px;
  width: 1px;
  border-top: 5px solid var(--progress-indicator-color);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

.animation-root:not(.animation-detail-visible) .controlled {
  display: none;
}