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

Update shape colors

Browse Source
This commit is contained in:
natsoni 2024-07-09 00:02:05 +09:00
parent 8d2e7bef7a
commit f756fb4d79
No known key found for this signature in database
GPG Key ID: C65917583181743B
2 changed files with 45 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html
View File

@ -45,9 +45,9 @@
<div class="interval-spacer"> <div class="interval-spacer">
<div class="acc-to-confirmed"></div> <div class="acc-to-confirmed"></div>
</div> </div>
<div class="node mined" [id]="'confirmed'" > <div class="node selected" [id]="'confirmed'">
<div class="acc-to-confirmed left" ></div> <div class="acc-to-confirmed left" ></div>
<div class="shape-border mined-selected"> <div class="shape-border">
<div class="shape"></div> <div class="shape"></div>
</div> </div>
<div class="status"><span class="badge badge-success" i18n="transaction.rbf.mined">Mined</span></div> <div class="status"><span class="badge badge-success" i18n="transaction.rbf.mined">Mined</span></div>
@ -125,11 +125,11 @@
<div class="interval-spacer"> <div class="interval-spacer">
<div class="seen-to-acc"></div> <div class="seen-to-acc"></div>
</div> </div>
<div class="node" [id]="'accelerated'"> <div class="node accelerated" [id]="'accelerated'">
<div class="seen-to-acc left"></div> <div class="seen-to-acc left"></div>
<div class="seen-to-acc right"></div> <div class="seen-to-acc right"></div>
<div class="shape-border accelerated-selected"> <div class="shape-border">
<div class="shape accelerating"></div> <div class="shape"></div>
<div class="connector down loading"></div> <div class="connector down loading"></div>
</div> </div>
<div class="time" style="margin-top: 3px;"> <div class="time" style="margin-top: 3px;">

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

@ -123,28 +123,6 @@
left: 50%; left: 50%;
} }
} }
.connector {
position: absolute;
height: 88px;
width: 10px;
left: -5px;
top: -73px;
transform: translateX(120%);
background: var(--tertiary);
&.down {
border-top-left-radius: 10px;
}
&.up {
border-top-right-radius: 10px;
}
&.loading {
animation: acceleratePulse 1s infinite;
}
}
} }
.nodes { .nodes {
@ -159,34 +137,59 @@
margin-bottom: -8px; margin-bottom: -8px;
transform: translateY(-50%); transform: translateY(-50%);
border-radius: 50%; border-radius: 50%;
padding: 2px; cursor: pointer;
padding: 4px;
background: transparent;
transition: background-color 300ms, padding 300ms;
.shape { .shape {
position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 50%; border-radius: 50%;
background: white; background: white;
&.accelerating { transition: background-color 300ms, border 300ms;
animation: acceleratePulse 1s infinite; z-index: 1;
}
} }
&.waiting { &.waiting {
.shape { .shape {
background: var(--grey); background: var(--grey);
} }
} }
&.accelerated-selected { .connector {
.shape { position: absolute;
background: var(--tertiary); height: 88px;
width: 10px;
left: -5px;
top: -73px;
transform: translateX(120%);
background: var(--tertiary);
&.down {
border-top-left-radius: 10px;
}
&.up {
border-top-right-radius: 10px;
}
&.loading {
animation: acceleratePulse 1s infinite;
} }
} }
}
&.accelerated {
.shape-border {
animation: acceleratePulse 1s infinite;
}
}
&.mined-selected { &.selected {
.shape { .shape-border {
background: var(--success); background: var(--mainnet-alt);
}
} }
} }
@ -198,7 +201,7 @@
background-color: var(--grey); background-color: var(--grey);
color: white; color: white;
} }
.badge.badge-accelerated { .badge.badge-accelerated {
background-color: var(--tertiary); background-color: var(--tertiary);
color: white; color: white;