machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Acc timeline: More similar color logic with RBF

Browse Source
This commit is contained in:
natsoni
2024-07-09 21:51:59 +09:00
parent b38bf0f7b6
commit da0df70ad2
2 changed files with 48 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss
View File

@@ -1,7 +1,10 @@
.acceleration-timeline {
position: relative;
width: 100%;
padding: 0.5em 0 1em;
padding: 1em 0;
&.lower-padding {
padding: 0.5em 0 1em;
}
&::after, &::before {
content: '';
@@ -135,29 +138,6 @@
left: 50%;
}
}
.connector {
position: absolute;
height: 88px;
width: 10px;
left: -5px;
top: -73px;
transform: translateX(120%);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20'%3E%3Cpath style='fill:%239339f4;' d='M 0,20 5,15 10,20 Z'/%3E%3Cpath style='fill:%23653b9c;' d='M 0,20 5,15 10,20 10,10 5,5 0,10 Z'/%3E%3Cpath style='fill:%239339f4;' 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%),
background-size: 10px 20px;
&.down {
border-top-left-radius: 10px;
}
&.up {
border-top-right-radius: 10px;
}
&.loading {
animation: goFasterUp 0.8s infinite linear;
}
}
}
.nodes {
@@ -172,16 +152,17 @@
margin-bottom: -8px;
transform: translateY(-50%);
border-radius: 50%;
padding: 2px;
cursor: pointer;
padding: 4px;
background: transparent;
.shape {
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
background: white;
&.accelerating {
animation: acceleratePulse 0.4s infinite;
}
z-index: 1;
}
&.waiting {
@@ -189,17 +170,41 @@
background: var(--grey);
}
}
&.accelerated-selected {
.shape {
background: var(--tertiary);
.connector {
position: absolute;
z-index: 0;
height: 88px;
width: 10px;
left: -5px;
top: -73px;
transform: translateX(120%);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20'%3E%3Cpath style='fill:%239339f4;' d='M 0,20 5,15 10,20 Z'/%3E%3Cpath style='fill:%23653b9c;' d='M 0,20 5,15 10,20 10,10 5,5 0,10 Z'/%3E%3Cpath style='fill:%239339f4;' 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%),
background-size: 10px 20px;
&.down {
border-top-left-radius: 10px;
}
&.up {
border-top-right-radius: 10px;
}
&.loading {
animation: goFasterUp 0.8s infinite linear;
}
}
}
&.accelerated {
.shape-border {
animation: acceleratePulse 0.4s infinite;
}
}
&.mined-selected {
.shape {
background: var(--success);
}
&.selected {
.shape-border {
background: var(--mainnet-alt);
}
}