okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adds gradient animation to the Replay <year> button on home screen

Browse source 
Sweet 🍬🍭
This commit is contained in:
Monochromish 2022-04-02 02:42:32 +11:00
parent e789c60dd3
commit 69e8f11166
1 changed files with 17 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/renderer/less/pages.less
View file

@ -1167,6 +1167,17 @@
} }
} }
@keyframes gradient-animation {
0% {
background-position: 0% 0%;
}
50% {
background-position: 100% 0%;
}
100% {
background-position: 0% 0%;
}
}
//Home //Home
.home-page { .home-page {
@ -1174,7 +1185,9 @@
//padding-top: var(--navbarHeight); //padding-top: var(--navbarHeight);
.md-btn-replay { .md-btn-replay {
background : var(--replayGradient); background-image: linear-gradient(-45deg, #2e2173, #925042);
animation: gradient-animation 5s ease-in-out infinite;
background-size: 400% 400%;
border : 0px; border : 0px;
box-shadow : inset 0px 0px 0px 1px rgba(200, 200, 200, 0.2); box-shadow : inset 0px 0px 0px 1px rgba(200, 200, 200, 0.2);
text-transform: uppercase; text-transform: uppercase;
@ -1184,7 +1197,9 @@
.md-btn-replay--hero { .md-btn-replay--hero {
font-size : 1em; font-size : 1em;
padding : 16px; padding : 16px;
background : var(--replayGradient); background-image: linear-gradient(-45deg, #2e2173, #925042);
animation: gradient-animation 5s ease-in-out infinite;
background-size: 400% 400%;
border : 0px; border : 0px;
box-shadow : inset 0px 0px 0px 1px rgb(200 200 200 / 20%); box-shadow : inset 0px 0px 0px 1px rgb(200 200 200 / 20%);
margin-top : 1em; margin-top : 1em;