c57fcd6518
* Cancel zaps * Hide zap error toast * Immediately throw error about insufficient funds * Optimistic UX * Also hide success zap toast * Show undo instead of cancel * Include sat amount in toast * Fix undo toasts removed on navigation * Add setting for zap undos * Add undo to custom zaps * Use WithUndos suffix * Fix toast flow transition * Fix setting not respected * Skip undo flow if funds insufficient * Remove brackets around undo * Fix insufficient funds detection * Fix downzap undo * Add progress bar to toasts * Use 'button' instead of 'notification' in zap undo info * Remove console.log * Fix toast progress bar restarts --------- Co-authored-by: Keyan <34140557+huumn@users.noreply.github.com>
89 lines
1.2 KiB
CSS
89 lines
1.2 KiB
CSS
.toastContainer {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
.toast {
|
|
width: auto;
|
|
color: #fff;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
}
|
|
|
|
.success {
|
|
border-color: var(--bs-success-border-subtle);
|
|
}
|
|
|
|
.danger {
|
|
border-color: var(--bs-danger-border-subtle);
|
|
}
|
|
|
|
.warning {
|
|
border-color: var(--bs-warning-border-subtle);
|
|
}
|
|
|
|
.toastUndo {
|
|
font-style: normal;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.toastCancel {
|
|
font-style: italic;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.toastClose {
|
|
color: #fff;
|
|
font-family: "lightning";
|
|
font-size: 150%;
|
|
line-height: 1rem;
|
|
margin-bottom: -0.25rem;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.progressBar {
|
|
width: 0;
|
|
height: 5px;
|
|
filter: brightness(66%);
|
|
/* same duration as toast delay */
|
|
animation: progressBar 5s linear;
|
|
}
|
|
|
|
.progressBar.success {
|
|
background-color: var(--bs-success);
|
|
}
|
|
|
|
.progressBar.danger {
|
|
background-color: var(--bs-danger);
|
|
}
|
|
|
|
.progressBar.warning {
|
|
background-color: var(--bs-warning);
|
|
}
|
|
|
|
|
|
|
|
@keyframes progressBar {
|
|
0% {
|
|
width: 0;
|
|
}
|
|
|
|
100% {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.toastClose:hover {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
@media screen and (min-width: 400px) {
|
|
.toast {
|
|
width: var(--bs-toast-max-width);
|
|
}
|
|
} |