aronmal/leaky-ships
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Better functioning grid effect with rainbow colors

Browse source
This commit is contained in:
aronmal 2022-10-24 18:16:57 +02:00
parent 63e26e62fa
commit 6e3c4290db
Signed by: aronmal
GPG key ID: 816B7707426FC612
2 changed files with 63 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

14
frontend/src/styles/home.scss
View file

@ -8,12 +8,10 @@
grid-template-rows: repeat(var(--rows), 1fr);
.tile {
@include transition(1s);
outline: 1px solid white;
background-color: black;
background-color: var(--bg-color1);
&.active {
animation: bright .5s forwards;
animation: bright .3s forwards;
animation-delay: var(--delay);
}
}
@ -21,16 +19,18 @@
@keyframes bright {
0% {
background-color: black;
background-color: var(--bg-color1);
}
50% {
background-color: white;
background-color: var(--bg-color2);
filter: brightness(130%);
outline: 1px solid white;
}
100% {
background-color: gray;
background-color: var(--bg-color2);
}
}