This commit is contained in:
Benjamin Falch
326
frontend/static/themes/rainbow_trail.css
Normal file
326
frontend/static/themes/rainbow_trail.css
Normal file
@@ -0,0 +1,326 @@
|
||||
header [data-ui-element="logoText"] {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#60b6ce,
|
||||
#7ce3e1,
|
||||
#b2e259,
|
||||
#f6ee75,
|
||||
#f5b83d,
|
||||
#f49a98,
|
||||
#ed7abd,
|
||||
#dea2fa,
|
||||
#a966f5
|
||||
);
|
||||
background-size: 500% auto;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
animation: rainbow-gradient 30s alternate ease-in-out infinite;
|
||||
padding-bottom: 0.1em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
[data-ui-element="logoSubtext"] {
|
||||
margin-top: 0em;
|
||||
}
|
||||
|
||||
header [data-ui-element="logoSubtext"],
|
||||
.view-account .levelAndBar .level,
|
||||
[aria-label][data-balloon-pos]::after {
|
||||
-webkit-text-fill-color: initial;
|
||||
}
|
||||
|
||||
button.text:hover,
|
||||
.textButton:hover,
|
||||
#restartTestButton:hover > i,
|
||||
#restartTestButton:hover > i,
|
||||
#showWordHistoryButton:hover > i,
|
||||
#saveScreenshotButton:hover > i,
|
||||
#restartTestButtonWithSameWordset:hover > i,
|
||||
#nextTestButton:hover > i,
|
||||
#practiseWordsButton:hover > i,
|
||||
#watchReplayButton:hover > i,
|
||||
#watchVideoAdButton:hover > i,
|
||||
footer a:hover,
|
||||
footer a:hover > i,
|
||||
footer button:hover,
|
||||
footer button:hover > i,
|
||||
footer button:hover > .relative > i {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#60b6ce,
|
||||
#7ce3e1,
|
||||
#b2e259,
|
||||
#f6ee75,
|
||||
#f5b83d,
|
||||
#f49a98,
|
||||
#ed7abd,
|
||||
#dea2fa,
|
||||
#a966f5
|
||||
);
|
||||
background-size: 500% auto;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
animation: rainbow-gradient 5s alternate ease-in-out infinite;
|
||||
transition: all 1s ease;
|
||||
}
|
||||
|
||||
#liveStatsTextTop.timerMain,
|
||||
#liveStatsTextBottom.timerMain,
|
||||
#liveStatsMini.timerMain {
|
||||
animation: rainbow-infinite-loop 30s linear infinite;
|
||||
}
|
||||
|
||||
#words {
|
||||
--correct-letter-animation: rainbow-infinite-loop 5s linear infinite;
|
||||
--incorrect-letter-animation: rainbow-error-infinite-loop 1s alternate
|
||||
ease-in-out infinite;
|
||||
--extra-letter-animation: rainbow-error-infinite-loop 1s alternate ease-in-out
|
||||
infinite;
|
||||
}
|
||||
|
||||
#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: rainbow 7.5s ease-in-out forwards;
|
||||
}
|
||||
|
||||
#words .word.error {
|
||||
animation: rainbow-error 7.5s ease-in-out forwards;
|
||||
}
|
||||
|
||||
#words.highlight-word .word.active letter {
|
||||
animation: var(--correct-letter-animation);
|
||||
}
|
||||
|
||||
#words.flipped {
|
||||
--correct-letter-animation: none;
|
||||
--untyped-letter-animation: rainbow-infinite-loop 5s linear infinite;
|
||||
}
|
||||
|
||||
#words.flipped .word.typed letter {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.button:hover,
|
||||
button:not(.textButton):not(.text):not([data-ui-variant="text"]):hover,
|
||||
[data-nav-item]:hover {
|
||||
animation: rainbow-button 2s alternate ease-in-out infinite;
|
||||
}
|
||||
|
||||
#words.highlight-off .word letter,
|
||||
#words.highlight-off .word.typed letter {
|
||||
animation: rainbow-infinite-loop 5s linear infinite;
|
||||
}
|
||||
|
||||
.row .textButton:not(.active) {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.textButton.active {
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
footer button:hover {
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
@keyframes rainbow {
|
||||
0% {
|
||||
color: #60b6ce;
|
||||
opacity: 1;
|
||||
}
|
||||
11.11% {
|
||||
color: #7ce3e1;
|
||||
opacity: 1;
|
||||
}
|
||||
22.22% {
|
||||
color: #b2e259;
|
||||
opacity: 1;
|
||||
}
|
||||
33.33% {
|
||||
color: #f6ee75;
|
||||
opacity: 1;
|
||||
}
|
||||
44.44% {
|
||||
color: #f5b83d;
|
||||
opacity: 1;
|
||||
}
|
||||
55.56% {
|
||||
color: #f49a98;
|
||||
opacity: 1;
|
||||
}
|
||||
66.67% {
|
||||
color: #ed7abd;
|
||||
opacity: 1;
|
||||
}
|
||||
77.78% {
|
||||
color: #dea2fa;
|
||||
opacity: 1;
|
||||
}
|
||||
88.89% {
|
||||
color: #a966f5;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rainbow-infinite-loop {
|
||||
0% {
|
||||
color: #60b6ce;
|
||||
}
|
||||
11.11% {
|
||||
color: #7ce3e1;
|
||||
}
|
||||
22.22% {
|
||||
color: #b2e259;
|
||||
}
|
||||
33.33% {
|
||||
color: #f6ee75;
|
||||
}
|
||||
44.44% {
|
||||
color: #f5b83d;
|
||||
}
|
||||
55.56% {
|
||||
color: #f49a98;
|
||||
}
|
||||
66.67% {
|
||||
color: #ed7abd;
|
||||
}
|
||||
77.78% {
|
||||
color: #dea2fa;
|
||||
}
|
||||
88.89% {
|
||||
color: #a966f5;
|
||||
}
|
||||
100% {
|
||||
color: #60b6ce;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rainbow-gradient {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rainbow-error {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
11.11% {
|
||||
opacity: 1;
|
||||
}
|
||||
22.22% {
|
||||
opacity: 1;
|
||||
}
|
||||
33.33% {
|
||||
opacity: 1;
|
||||
}
|
||||
44.44% {
|
||||
opacity: 1;
|
||||
}
|
||||
55.56% {
|
||||
opacity: 1;
|
||||
}
|
||||
66.67% {
|
||||
opacity: 1;
|
||||
}
|
||||
77.78% {
|
||||
opacity: 1;
|
||||
}
|
||||
88.89% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rainbow-error-infinite-loop {
|
||||
0% {
|
||||
color: #ff0000;
|
||||
}
|
||||
100% {
|
||||
color: #ff000075;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes light-rainbow-infinite-loop {
|
||||
0% {
|
||||
color: #60b6ce;
|
||||
}
|
||||
14% {
|
||||
color: #7ce3e1;
|
||||
}
|
||||
28% {
|
||||
color: #b2e259;
|
||||
}
|
||||
42% {
|
||||
color: #f6ee75;
|
||||
}
|
||||
57% {
|
||||
color: #f5b83d;
|
||||
}
|
||||
71% {
|
||||
color: #f49a98;
|
||||
}
|
||||
85% {
|
||||
color: #ed7abd;
|
||||
}
|
||||
100% {
|
||||
color: #dea2fa;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rainbow-button {
|
||||
0% {
|
||||
box-shadow:
|
||||
0 0 7.5px 2.5px #60b6ce,
|
||||
0 0 12.5px 2.5px #60b6ce;
|
||||
}
|
||||
14% {
|
||||
box-shadow:
|
||||
0 0 7.5px 2.5px #7ce3e1,
|
||||
0 0 12.5px 2.5px #7ce3e1;
|
||||
}
|
||||
28% {
|
||||
box-shadow:
|
||||
0 0 7.5px 2.5px #b2e259,
|
||||
0 0 12.5px 2.5px #b2e259;
|
||||
}
|
||||
42% {
|
||||
box-shadow:
|
||||
0 0 7.5px 2.5px #f6ee75,
|
||||
0 0 12.5px 2.5px #f6ee75;
|
||||
}
|
||||
57% {
|
||||
box-shadow:
|
||||
0 0 7.5px 2.5px #f5b83d,
|
||||
0 0 12.5px 2.5px #f5b83d;
|
||||
}
|
||||
71% {
|
||||
box-shadow:
|
||||
0 0 7.5px 2.5px #f49a98,
|
||||
0 0 12.5px 2.5px #f49a98;
|
||||
}
|
||||
85% {
|
||||
box-shadow:
|
||||
0 0 7.5px 2.5px #ed7abd,
|
||||
0 0 12.5px 2.5px #ed7abd;
|
||||
}
|
||||
100% {
|
||||
box-shadow:
|
||||
0 0 7.5px 2.5px #dea2fa,
|
||||
0 0 12.5px 2.5px #dea2fa;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user