- height: 100%;
- background-image: linear-gradient(to bottom,
- transparent,
- transparent 9px,
- var(--theme-highlight-lightorange) 9px,
- var(--theme-highlight-lightorange) 11px,
- transparent 11px,
- transparent);
+ /* 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;