Accelerated
diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss
index 8648052f4..f3728ce99 100644
--- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss
+++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss
@@ -52,7 +52,7 @@
.interval, .interval-spacer {
width: 8em;
- min-width: 5em;
+ min-width: 8em;
max-width: 8em;
height: 32px;
display: flex;
@@ -112,6 +112,28 @@
background: var(--tertiary);
border-radius: 5px;
+ &.go-faster {
+ // background:
+ // linear-gradient(-135deg, var(--tertiary) 34%, transparent 34%),
+ // linear-gradient(45deg, var(--tertiary) 16%, transparent 16%) 0 5px,
+ // linear-gradient(-225deg, var(--tertiary) 16%, transparent 16%) 0 -5px,
+ // linear-gradient(-225deg, var(--mainnet-alt) 66%, transparent 66%),
+ // var(--tertiary);
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cpath style='fill:%23653b9c;' d='M 0,0 5,5 0,10 Z'/%3E%3Cpath style='fill:%239339f4;' d='M 0,0 10,0 15,5 10,10 0,10 5,5 Z'/%3E%3Cpath style='fill:%23653b9c;' d='M 10,0 20,0 20,10 10,10 15,5 Z'/%3E%3C/svg%3E%0A"); background-size: 20px 10px;
+ border-radius: 0;
+
+ &.right {
+ left: calc(50% + 5px);
+ margin-right: calc(-4em + 5px);
+ animation: goFasterRight 1s infinite linear;
+ }
+ &.left {
+ right: calc(50% + 5px);
+ margin-left: calc(-4em + 5px);
+ animation: goFasterLeft 1s infinite linear;
+ }
+ }
+
&.loading {
animation: acceleratePulse 1s infinite;
}
@@ -131,7 +153,12 @@
left: -5px;
top: -73px;
transform: translateX(120%);
- background: var(--tertiary);
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20'%3E%3Cpath style='fill:%23653b9c;' d='M 0,20 5,15 10,20 Z'/%3E%3Cpath style='fill:%239339f4;' d='M 0,20 5,15 10,20 10,10 5,5 0,10 Z'/%3E%3Cpath style='fill:%23653b9c;' d='M 0,10 5,5 10,10 10,0 0,0 Z'/%3E%3C/svg%3E%0A"); // linear-gradient(135deg, var(--tertiary) 34%, transparent 34%),
+ // linear-gradient(315deg, var(--tertiary) 16%, transparent 16%) 5px 0,
+ // linear-gradient(45deg, var(--tertiary) 16%, transparent 16%) -5px 0,
+ // linear-gradient(45deg, var(--mainnet-alt) 66%, transparent 66%),
+ // var(--tertiary);
+ background-size: 10px 20px;
&.down {
border-top-left-radius: 10px;
@@ -142,7 +169,7 @@
}
&.loading {
- animation: acceleratePulse 1s infinite;
+ animation: goFasterUp 1s infinite linear;
}
}
}
@@ -220,3 +247,18 @@
50% { background-color: var(--mainnet-alt) }
100% { background-color: var(--tertiary) }
}
+
+@keyframes goFasterUp {
+ 0% { background-position-y: 0; }
+ 100% { background-position-y: -40px; }
+}
+
+@keyframes goFasterLeft {
+ 0% { background-position: left 0px bottom 0px }
+ 100% { background-position: left 40px bottom 0px; }
+}
+
+@keyframes goFasterRight {
+ 0% { background-position: right 0 bottom 0px; }
+ 100% { background-position: right -40px bottom 0px; }
+}