111 lines
1.9 KiB
CSS
111 lines
1.9 KiB
CSS
@keyframes rgb {
|
|
0% {
|
|
color: hsl(120, 39%, 49%);
|
|
}
|
|
20% {
|
|
color: hsl(192, 48%, 48%);
|
|
}
|
|
40% {
|
|
color: hsl(264, 90%, 58%);
|
|
}
|
|
60% {
|
|
color: hsl(357, 89%, 50%);
|
|
}
|
|
80% {
|
|
color: hsl(46, 100%, 51%);
|
|
}
|
|
100% {
|
|
color: hsl(120, 39%, 49%);
|
|
}
|
|
}
|
|
|
|
@keyframes rgb-bg {
|
|
0% {
|
|
background: hsl(120, 39%, 49%);
|
|
}
|
|
20% {
|
|
background: hsl(192, 48%, 48%);
|
|
}
|
|
40% {
|
|
background: hsl(264, 90%, 58%);
|
|
}
|
|
60% {
|
|
background: hsl(357, 89%, 50%);
|
|
}
|
|
80% {
|
|
background: hsl(46, 100%, 51%);
|
|
}
|
|
100% {
|
|
background: hsl(120, 39%, 49%);
|
|
}
|
|
}
|
|
|
|
@keyframes rgb-fill {
|
|
0% {
|
|
fill: hsl(120, 39%, 49%);
|
|
}
|
|
20% {
|
|
fill: hsl(192, 48%, 48%);
|
|
}
|
|
40% {
|
|
fill: hsl(264, 90%, 58%);
|
|
}
|
|
60% {
|
|
fill: hsl(357, 89%, 50%);
|
|
}
|
|
80% {
|
|
fill: hsl(46, 100%, 51%);
|
|
}
|
|
100% {
|
|
fill: hsl(120, 39%, 49%);
|
|
}
|
|
}
|
|
|
|
.pageSettings .section .buttons button.active,
|
|
.pageSettings .section.languages .buttons .language.active,
|
|
.pageAccount .group.filterButtons .buttons button.active {
|
|
animation: rgb-bg 5s linear infinite;
|
|
}
|
|
|
|
#caret {
|
|
animation: rgb-bg 5s linear infinite !important;
|
|
}
|
|
|
|
header[data-focused] {
|
|
& [data-ui-element="logoSubtext"] {
|
|
animation: none;
|
|
}
|
|
& [data-ui-element="logo"] svg path {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
[data-ui-element="logoSubtext"],
|
|
#result .stats .group .bottom,
|
|
[data-nav-item]:hover,
|
|
footer button:hover,
|
|
#words.flipped .word,
|
|
footer a:hover,
|
|
a:not(.button):not([data-ui-variant="button"]):hover {
|
|
animation: rgb 5s linear infinite;
|
|
}
|
|
|
|
#words {
|
|
--correct-letter-animation: rgb 5s linear infinite;
|
|
}
|
|
|
|
#words.flipped {
|
|
--correct-letter-animation: none;
|
|
--untyped-letter-animation: rgb 5s linear infinite;
|
|
}
|
|
|
|
header [data-ui-element="logo"] svg path,
|
|
header [data-nav-item="account"]:hover [data-ui-element="navAvatar"] svg path {
|
|
animation: rgb-fill 5s linear infinite;
|
|
}
|
|
|
|
[data-ui-element="accountMenu"] a:hover,
|
|
[data-ui-element="accountMenu"] button:hover {
|
|
animation: none;
|
|
}
|