@@ -159,9 +105,7 @@
- @if (eta) {
- ~
- }
+ ~
@@ -169,9 +113,9 @@
-
-
-
-
-
-
-
- ~
1" style="font-style: italic; color: var(--transparent-fg);"> ({{ accelerateRatio }}x slower)
-
-
-
-
-
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 54061f54e..8648052f4 100644
--- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss
+++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss
@@ -1,7 +1,7 @@
.acceleration-timeline {
position: relative;
width: 100%;
- padding: 1em 0;
+ padding: 0.5em 0 1em;
&::after, &::before {
content: '';
@@ -69,6 +69,15 @@
font-size: 12px;
line-height: 16px;
white-space: nowrap;
+
+ .compare {
+ font-style: italic;
+ color: var(--mainnet-alt);
+ font-weight: 600;
+ @media (max-width: 600px) {
+ display: none;
+ }
+ }
}
}
@@ -115,26 +124,27 @@
}
}
- .corner-up {
+ .connector {
position: absolute;
+ height: 88px;
+ width: 10px;
left: -5px;
- left: 48.5%;
- height: 86px;
- border-left: solid 10px var(--primary);
- border-bottom: solid 10px var(--primary);
- border-bottom-right-radius: 10px;
- // horrible css:
- @media (max-width: 1030px) {
- left: 48%;
+ top: -73px;
+ transform: translateX(120%);
+ background: var(--tertiary);
+
+ &.down {
+ border-top-left-radius: 10px;
}
- @media (max-width: 850px) {
- left: 47%;
+
+ &.up {
+ border-top-right-radius: 10px;
}
- @media (max-width: 700px) {
- left: 46%;
+
+ &.loading {
+ animation: acceleratePulse 1s infinite;
}
}
-
}
.nodes {
@@ -150,8 +160,6 @@
transform: translateY(-50%);
border-radius: 50%;
padding: 2px;
- background: transparent;
- transition: background-color 300ms, padding 300ms;
.shape {
width: 100%;
@@ -161,7 +169,6 @@
&.accelerating {
animation: acceleratePulse 1s infinite;
}
- transition: background-color 300ms, border 300ms;
}
&.waiting {
@@ -203,30 +210,6 @@
font-size: 12px;
line-height: 16px;
white-space: nowrap;
-
- &.sm-margin {
- @media (max-width: 650px) {
- margin-left: 20px;
- }
- }
- }
- }
-
- .connector {
- position: relative;
- height: 10px;
-
- .corner-down {
- position: absolute;
- @media (max-width: 650px) {
- width: 223px;
- }
- width: 290px;
- height: 90px;
- bottom: 50%;
- border-left: solid 10px var(--primary);
- border-bottom: solid 10px var(--primary);
- border-bottom-left-radius: 10px;
}
}
}
@@ -237,9 +220,3 @@
50% { background-color: var(--mainnet-alt) }
100% { background-color: var(--tertiary) }
}
-
-@keyframes textPulse {
- 0% { color: var(--tertiary) }
- 50% { color: var(--mainnet-alt) }
- 100% { color: var(--tertiary) }
-}
\ No newline at end of file