monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-02-04 13:01:10 +08:00
Code Issues Projects Releases Packages Wiki Activity

Refactored all css animations to use the animation shorthand property (#1853)

Browse source 
* Renamed command line setting timer-progress bar

* Use animation shorthand property
This commit is contained in:
Aaron 2021-09-14 05:39:18 -07:00 committed by GitHub
parent 1d89d47615
commit 7936dbff08
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 11 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/sass/style.scss
View file

@ -347,10 +347,7 @@ a:hover {
position: fixed;
width: 100%;
background: var(--main-color);
animation-name: loader;
animation-iteration-count: infinite;
animation-duration: 2s;
animation-timing-function: cubic-bezier(0.38, 0.16, 0.57, 0.82);
animation: loader 2s cubic-bezier(0.38, 0.16, 0.57, 0.82) infinite;
z-index: 9999;
}
@ -1601,10 +1598,7 @@ label.checkbox {
#caret {
height: 1.5rem;
background: var(--caret-color);
animation-name: caretFlashSmooth;
/* animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); */
animation-iteration-count: infinite;
animation-duration: 1s;
animation: caretFlashSmooth 1s infinite;
position: absolute;
border-radius: var(--roundness);
// transition: 0.05s;
@ -4017,10 +4011,7 @@ key {
}
&.flash {
animation-name: flashKey;
animation-duration: 1s;
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
animation-fill-mode: forwards;
animation: flashKey 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
}
@ -4047,9 +4038,7 @@ key {
width: 308px;
height: 0;
margin: 0 auto;
animation: shake;
animation-duration: 0s;
animation-iteration-count: infinite;
animation: shake 0s infinite;
div {
height: 200px;
width: 308px;

21
static/themes/rgb.css
View file

@ -51,10 +51,7 @@
.pageSettings .section .buttons .button.active,
.pageSettings .section.languages .buttons .language.active,
.pageAccount .group.filterButtons .buttons .button.active {
animation-name: rgb-bg !important;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation: rgb-bg 5s linear infinite;
}
#top.focus .button.discord::after,
@ -69,17 +66,12 @@
#top .config .group .buttons .text-button:hover,
a:hover,
#words.flipped .word {
animation-name: rgb;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation: rgb 5s linear infinite;
}
/* .word letter.correct{
animation-name: rgb;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation: rgb 5s linear infinite;
} */
#words.flipped .word letter.correct {
@ -87,8 +79,5 @@ a:hover,
}
#words:not(.flipped) .word letter.correct {
animation-name: rgb;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation: rgb 5s linear infinite;
}

12
static/themes/shadow.css
View file

@ -35,18 +35,10 @@
#menu .icon-button:hover,
#top .config .group .buttons .text-button:hover,
a:hover {
animation-name: shadow-repeat;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation: shadow-repeat 3s linear infinite forwards;
}
#logo,
#typingTest .word letter.correct {
animation-name: shadow;
animation-duration: 5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation: shadow 5s linear 1 forwards;
}