Files
explore/ui/address/details/AddressMultichainButton.module.css
9a977d191b Fixes for release v2.5.0 (#3142)
* fail the app start if multichain config or essential dapps config were not generated properly

* add timeouts for essential dapps and multichain config generators

* fix "add to wallet" button in address tokens table

* [skip ci] update docs

* fix tx tables when there are no fee and value columns

* add support for promoted multichain provider

* fixes

* change action button logic

* fix tests

* fix

* hide "add network" button for multichain

* shorten the amount of txs on multichain homepage

* change name formatting for multichain button

* add bright color variants and lg size for badges

* fix y-axis margin calculation for chart with custom tick formatter

* superchain bug fixes

* bump versions of react and nextjs

* update screenshot

* bump dappscout-iframe

---------

Co-authored-by: Max Alekseenko <[email protected]>
2025-12-04 18:44:01 +01:00

119 lines
1.9 KiB
CSS

/* Animation source - https://codepen.io/ARS/pen/vEwEPP */
.promo {
position: relative;
z-index: 1;
&::after {
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
margin: auto;
z-index: -1;
border-radius: 6px;
content: "";
background: linear-gradient(120deg, #e15eff, #fffb22, #e15eff);
background-size: 400% 400%;
clip-path: polygon(
0% 100%,
4px 100%,
4px 4px,
20px 4px,
20px 20px,
4px 20px,
4px 100%,
100% 100%,
100% 0%,
0% 0%
);
animation: gradient 3s ease-in-out 0.5s infinite, border 5s ease-in-out;
}
}
@keyframes gradient {
0% {
background-position: 14% 0%;
}
50% {
background-position: 87% 100%;
}
100% {
background-position: 14% 0%;
}
}
@keyframes border {
0% {
clip-path: polygon(
0% 100%,
4px 100%,
4px 100%,
4px 100%,
4px 100%,
4px 100%,
4px 100%,
4px 100%,
4px 100%,
0% 100%
);
}
5% {
clip-path: polygon(
0% 100%,
4px 100%,
4px 4px,
4px 4px,
4px 4px,
4px 4px,
4px 4px,
4px 4px,
4px 0%,
0% 0%
);
}
10% {
clip-path: polygon(
0% 100%,
4px 100%,
4px 4px,
20px 4px,
20px 4px,
20px 4px,
20px 4px,
20px 4px,
100% 0%,
0% 0%
);
}
15% {
clip-path: polygon(
0% 100%,
4px 100%,
4px 4px,
20px 4px,
20px 20px,
20px 20px,
20px 100%,
100% 100%,
100% 0%,
0% 0%
);
}
20%,
100% {
clip-path: polygon(
0% 100%,
4px 100%,
4px 4px,
20px 4px,
20px 20px,
4px 20px,
4px 100%,
100% 100%,
100% 0%,
0% 0%
);
}
}