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

Merge pull request #777 from Monochromish/develop

Browse source 
Adds gradient animation to the `Replay <year>` button on home screen
This commit is contained in:
cryptofyre 2022-04-01 13:19:16 -05:00 • committed by GitHub
commit a2bbeb87cd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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;