monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-02-06 05:43:47 +08:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #746 from SeerLite/smooth-caret-blinking

Browse source 
Add smooth caret blinking setting
This commit is contained in:
Jack 2020-12-23 17:12:32 +00:00 committed by GitHub
commit 22ddc673a3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 29 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/js/script.js
View file

@ -1300,7 +1300,11 @@ function stopCaretAnimation() {
function startCaretAnimation() {
if (caretAnimating === false) {
$("#caret").css("animation-name", "caretFlash");
if (config.smoothCaret) {
$("#caret").css("animation-name", "caretFlashSmooth");
} else {
$("#caret").css("animation-name", "caretFlashHard");
}
caretAnimating = true;
}
}

10
src/js/userconfig.js
View file

@ -972,11 +972,21 @@ function setWordCount(wordCount, nosave) {
function setSmoothCaret(mode, nosave) {
config.smoothCaret = mode;
if (!nosave) saveConfigToCookie();
if (mode) {
$("#caret").css("animation-name", "caretFlashSmooth");
} else {
$("#caret").css("animation-name", "caretFlashHard");
}
}
function toggleSmoothCaret() {
config.smoothCaret = !config.smoothCaret;
saveConfigToCookie();
if (config.smoothCaret) {
$("#caret").css("animation-name", "caretFlashSmooth");
} else {
$("#caret").css("animation-name", "caretFlashHard");
}
}
//startgraphsatzero

16
src/sass/style.scss
View file

@ -993,7 +993,7 @@ a:hover {
#caret {
height: 1.5rem;
background: var(--caret-color);
animation-name: caretFlash;
animation-name: caretFlashSmooth;
/* animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); */
animation-iteration-count: infinite;
animation-duration: 1s;
@ -1078,7 +1078,7 @@ a:hover {
}
}
@keyframes caretFlash {
@keyframes caretFlashSmooth {
0%,
100% {
opacity: 0;
@ -1089,6 +1089,18 @@ a:hover {
}
}
@keyframes caretFlashHard {
0%,
50% {
opacity: 0;
}
51%,
100% {
opacity: 1;
}
}
#menu {
font-size: 1rem;
line-height: 1rem;