161 lines
2.9 KiB
CSS
161 lines
2.9 KiB
CSS
@keyframes phantom-glow {
|
|
0% {
|
|
color: #c0caf5;
|
|
text-shadow:
|
|
0 0 5px #7aa2f7,
|
|
0 0 10px #bb9af7;
|
|
}
|
|
50% {
|
|
color: #c0caf5;
|
|
text-shadow:
|
|
0 0 8px #7dcfff,
|
|
0 0 15px #bb9af7;
|
|
}
|
|
100% {
|
|
color: #c0caf5;
|
|
text-shadow:
|
|
0 0 5px #7aa2f7,
|
|
0 0 10px #bb9af7;
|
|
}
|
|
}
|
|
|
|
@keyframes phantom-glow-incorrect {
|
|
0% {
|
|
text-shadow:
|
|
0 0 5px #f7768e,
|
|
0 0 10px #db4b4b;
|
|
}
|
|
50% {
|
|
text-shadow:
|
|
0 0 8px #ff7a93,
|
|
0 0 15px #ff9e64;
|
|
}
|
|
100% {
|
|
text-shadow:
|
|
0 0 5px #f7768e,
|
|
0 0 10px #db4b4b;
|
|
}
|
|
}
|
|
|
|
@keyframes phantom-bg {
|
|
0% {
|
|
background: #7aa2f7;
|
|
}
|
|
50% {
|
|
background: #bb9af7;
|
|
}
|
|
100% {
|
|
background: #7aa2f7;
|
|
}
|
|
}
|
|
|
|
#words {
|
|
--correct-letter-color: var(--text-color);
|
|
--untyped-letter-color: #565f89;
|
|
}
|
|
|
|
header:not([data-focused]) [data-ui-element="logoText"] {
|
|
color: var(--text-color);
|
|
animation: phantom-glow 3s infinite alternate;
|
|
}
|
|
|
|
header [data-ui-element="logoSubtext"] {
|
|
color: inherit;
|
|
animation: none;
|
|
}
|
|
|
|
header [data-ui-element="logo"] svg {
|
|
color: var(--main-color) !important;
|
|
}
|
|
|
|
button.text:hover,
|
|
.button.text:hover,
|
|
.textButton:hover {
|
|
color: var(--caret-color);
|
|
}
|
|
|
|
button.text.active,
|
|
.button.text.active,
|
|
.textButton.active {
|
|
color: var(--main-color);
|
|
}
|
|
|
|
button.text:hover,
|
|
.textButton:hover {
|
|
animation: phantom-glow 5s linear infinite;
|
|
}
|
|
|
|
.word .active {
|
|
animation: phantom-glow 5s linear infinite;
|
|
}
|
|
|
|
button:hover,
|
|
.button:hover,
|
|
input[type="button"]:hover,
|
|
input[type="reset"]:hover,
|
|
input[type="submit"]:hover {
|
|
color: var(--bg-color);
|
|
background: var(--caret-color);
|
|
}
|
|
|
|
.scrollToTopButton:hover {
|
|
background: var(--caret-color);
|
|
color: var(--bg-color);
|
|
}
|
|
|
|
#caret {
|
|
animation: phantom-bg 3s linear infinite;
|
|
}
|
|
|
|
[data-ui-element="logoSubtext"],
|
|
#result .stats .group .bottom,
|
|
[data-nav-item]:hover,
|
|
a:not(.button):not([data-ui-variant="button"]):hover {
|
|
animation: phantom-glow 3s linear infinite;
|
|
}
|
|
|
|
footer a:hover,
|
|
footer button:hover {
|
|
animation: phantom-glow 3s linear infinite;
|
|
background: none;
|
|
}
|
|
|
|
[data-nav-item]:hover {
|
|
background: none;
|
|
}
|
|
|
|
[data-ui-element="testConfig"] button:hover {
|
|
background: none;
|
|
animation: phantom-glow 3s linear infinite;
|
|
}
|
|
|
|
.afk,
|
|
.timeToday,
|
|
#words .word letter.correct,
|
|
#words .word.typed letter.correct,
|
|
#words.highlight-word .word.typed letter,
|
|
#words.highlight-next-word .word.typed letter,
|
|
#words.highlight-next-two-words .word.typed letter,
|
|
#words.highlight-next-three-words .word.typed letter {
|
|
animation: phantom-glow 5s linear infinite;
|
|
}
|
|
|
|
#words.flipped .word.typed letter {
|
|
animation: none;
|
|
}
|
|
|
|
.incorrect {
|
|
animation: phantom-glow-incorrect 5s linear infinite;
|
|
}
|
|
|
|
#words.highlight-off .word letter,
|
|
#words.highlight-off .word.typed letter {
|
|
animation: phantom-glow 5s linear infinite;
|
|
}
|
|
|
|
[data-ui-element="accountMenu"] a:hover,
|
|
[data-ui-element="accountMenu"] button:hover {
|
|
animation: none;
|
|
background: var(--text-color);
|
|
}
|