Add page transition animations and background wallpapers

Wrap page views in {#key} blocks with a fade-in animation for smooth
transitions. Add Demon Slayer wallpapers as fixed pseudo-element
backgrounds on main (Tanjiro for dashboard, Rengoku for accelerator)
with CSS crossfade. Fix section spacing lost by the page-enter wrapper
div. Minor tooltip text fixes.
This commit is contained in:
satoshi
2026-05-11 09:11:50 +03:00
parent dc7da6ab19
commit 5e7be22e8e
8 changed files with 85 additions and 18 deletions
+8
View File
@@ -21,6 +21,7 @@
let boostedList = $state<BoostedTx[]>([]);
let loadingMax = $state(false);
const feerate = $derived(parseFloat(feerateInput) || 0);
const validTxid = $derived(/^[0-9a-fA-F]{64}$/.test(txid.trim()));
const overCap = $derived(feerate > 2000);
@@ -310,8 +311,10 @@
</section>
</section>
<style>
.page {
position: relative;
display: flex;
flex-direction: column;
gap: 1.5rem;
@@ -406,13 +409,18 @@
/* ── Boost form ── */
.boost-form {
position: relative;
overflow: hidden;
padding: 2rem;
}
.boost-form h3 {
position: relative;
z-index: 1;
margin: 0 0 1.5rem;
font-size: 1.3rem;
font-weight: 700;
}
.field {
margin-bottom: 1.5rem;
}