+/* Animation timeline component */
+
+.animation-timeline {
+ height: 100%;
+ overflow: hidden;
+ position: relative;
+ /* The timeline gets its background-image from a canvas element created in
+ /browser/devtools/animationinspector/utils.js drawGraphElementBackground
+ thanks to document.mozSetImageElement("time-graduations", canvas)
+ This is done so that the background can be built dynamically from script */
+ background-image: -moz-element(#time-graduations);
+ background-repeat: repeat-y;
+ /* The animations are drawn 150px from the left edge so that animated nodes
+ can be displayed in a sidebar */
+ background-position: var(--timeline-sidebar-width) 0;
+ display: flex;
+ flex-direction: column;
+}
+
+.animation-timeline .scrubber {
+ position: absolute;
+ height: 100%;
+ width: var(--timeline-sidebar-width);
+ border-right: 1px solid #FF0000;
+ box-sizing: border-box;
+ z-index: 1;
+ pointer-events: none;
+}
+
+.animation-timeline .scrubber::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ width: 1px;
+ right: -6px;
+ border-top: 5px solid #FF0000;
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+}
+
+.animation-timeline .time-header {
+ margin-left: var(--timeline-sidebar-width);
+ height: var(--toolbar-height);
+ overflow: hidden;
+ position: relative;
+ /* This is the same color as the time graduations in
+ browser/devtools/animationinspector/utils.js */
+ border-bottom: 1px solid var(--theme-splitter-color);
+ cursor: col-resize;
+ -moz-user-select: none;
+}
+
+.animation-timeline .time-header .time-tick {
+ position: absolute;
+ top: 3px;
+}
+
+.animation-timeline .animations {
+ width: 100%;
+ overflow-y: auto;
+ overflow-x: hidden;
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+}
+
+/* Animation block widgets */
+
+.animation-timeline .animation {
+ margin: 4px 0;
+ height: var(--timeline-animation-height);
+ position: relative;
+}
+
+.animation-timeline .animation:nth-child(2n) {
+ background-color: var(--even-animation-timeline-background-color);
+}
+
+.animation-timeline .animation .target {
+ width: var(--timeline-sidebar-width);
+ overflow: hidden;
+ height: 100%;
+}
+
+.animation-timeline .animation-target {
+ background-color: transparent;
+}
+
+.animation-timeline .animation .time-block {
+ position: absolute;
+ top: 0;
+ left: var(--timeline-sidebar-width);
+ right: 0;
+ height: 100%;
+}
+
+/* Animation iterations */
+
+.animation-timeline .animation .iterations {
+ position: relative;
+ height: 100%;
+ box-sizing: border-box;
+ --timelime-border-color: var(--theme-body-color);
+ --timeline-background-color: var(--theme-splitter-color);
+
+ /* Iterations of the animation are displayed with a repeating linear-gradient
+ which size is dynamically changed from JS. The gradient only draws 1px
+ borders between each iteration. These borders must have the same color as
+ the border of this element */
+ background-image:
+ linear-gradient(to right,
+ var(--timelime-border-color) 0,
+ var(--timelime-border-color) 1px,
+ transparent 1px,
+ transparent 2px);
+ background-repeat: repeat-x;
+ background-position: -1px 0;
+ border: 1px solid var(--timelime-border-color);
+
+ /* The background color is set independently */
+ background-color: var(--timeline-background-color);
+}
+
+.animation-timeline .animation .cssanimation {
+ --timelime-border-color: var(--theme-highlight-lightorange);
+ --timeline-background-color: var(--theme-contrast-background);
+}
+
+.animation-timeline .animation .csstransition {
+ --timelime-border-color: var(--theme-highlight-bluegrey);
+ --timeline-background-color: var(--theme-highlight-blue);
+}
+
+.animation-timeline .animation .iterations.infinite {
+ border-right-width: 0;
+}
+
+.animation-timeline .animation .iterations.infinite::before,
+.animation-timeline .animation .iterations.infinite::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 0;
+ height: 0;
+ border-right: 4px solid var(--theme-body-background);
+ border-top: 4px solid transparent;
+ border-bottom: 4px solid transparent;
+}
+
+.animation-timeline .animation .iterations.infinite::after {
+ bottom: 0;
+ top: unset;
+}
+
+.animation-timeline .animation .name {
+ color: var(--theme-selection-color);
+ height: 100%;
+ width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ line-height: 150%;
+ padding: 0 2px;
+}
+
+.animation-timeline .animation .delay {
+ position: absolute;
+ top: 0;
+ /* Make sure the delay covers up the animation border */
+ transform: translate(-1px, -1px);
+ box-sizing: border-box;
+ height: calc(100% + 2px);
+
+ border: 1px solid var(--timelime-border-color);
+ border-width: 1px 0 1px 1px;
+ background-image: repeating-linear-gradient(45deg,
+ transparent,
+ transparent 1px,
+ var(--theme-selection-color) 1px,
+ var(--theme-selection-color) 4px);
+ background-color: var(--timelime-border-color);
+}
+
+.animation-timeline .animation .delay.negative {
+ /* Negative delays are displayed on top of the animation, so they need a
+ right border. Whereas normal delays are displayed just before the
+ animation, so there's already the animation's left border that serves as
+ a separation. */
+ border-width: 1px;
+}
+
+.animation-timeline .animation .delay::before {
+ position: absolute;
+ content: "";
+ left: 0;
+ width: 2px;
+ height: 8px;
+ top: 50%;
+ margin-top: -4px;
+ background: var(--timelime-border-color);
+}
+