This commit is contained in:
Benjamin Falch
43
frontend/static/themes/9009.css
Normal file
43
frontend/static/themes/9009.css
Normal file
@@ -0,0 +1,43 @@
|
||||
kbd {
|
||||
color: var(--sub-color);
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
|
||||
[data-nav-item] {
|
||||
color: var(--main-color);
|
||||
&:hover {
|
||||
color: color-mix(in srgb, var(--main-color) 85%, white 15%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="test"] {
|
||||
color: var(--error-color);
|
||||
&:hover {
|
||||
color: color-mix(in srgb, var(--error-color) 85%, white 15%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="alerts"] {
|
||||
color: var(--sub-alt-color);
|
||||
&:hover {
|
||||
color: color-mix(in srgb, var(--sub-alt-color) 85%, black 15%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="account"] {
|
||||
--themable-button-text: var(--main-color);
|
||||
&:hover {
|
||||
--themable-button-text: color-mix(
|
||||
in srgb,
|
||||
var(--themable-button-text),
|
||||
white 25%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="settings"] {
|
||||
color: var(--caret-color);
|
||||
&:hover {
|
||||
color: color-mix(in srgb, var(--caret-color) 85%, white 15%);
|
||||
}
|
||||
}
|
||||
40
frontend/static/themes/aether.css
Normal file
40
frontend/static/themes/aether.css
Normal file
@@ -0,0 +1,40 @@
|
||||
[data-nav-item="test"] {
|
||||
color: #e4002b;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #e4002b 75%, white 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="leaderboards"] {
|
||||
color: #c53562;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #c53562 75%, white 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="about"] {
|
||||
color: #95549e;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #95549e 75%, white 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="settings"] {
|
||||
color: #6744a1;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #6744a1 75%, white 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="alerts"],
|
||||
[data-nav-item="account"],
|
||||
[data-nav-item="login"] {
|
||||
--themable-button-text: #393c73;
|
||||
&:hover {
|
||||
--themable-button-text: color-mix(
|
||||
in srgb,
|
||||
var(--themable-button-text),
|
||||
white 25%
|
||||
);
|
||||
}
|
||||
}
|
||||
86
frontend/static/themes/aurora.css
Normal file
86
frontend/static/themes/aurora.css
Normal file
@@ -0,0 +1,86 @@
|
||||
@keyframes aurora {
|
||||
0% {
|
||||
color: #009fb4;
|
||||
}
|
||||
25% {
|
||||
color: #00e975;
|
||||
}
|
||||
50% {
|
||||
color: #00ffea;
|
||||
}
|
||||
75% {
|
||||
color: #00e975;
|
||||
}
|
||||
100% {
|
||||
color: #009fb4;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes aurora-bg {
|
||||
0% {
|
||||
background: #009fb4;
|
||||
}
|
||||
25% {
|
||||
background: #00e975;
|
||||
}
|
||||
50% {
|
||||
background: #00ffea;
|
||||
}
|
||||
75% {
|
||||
background: #00e975;
|
||||
}
|
||||
100% {
|
||||
background: #009fb4;
|
||||
}
|
||||
}
|
||||
|
||||
#caret,
|
||||
.pageSettings .section .buttons .button.active,
|
||||
.pageSettings .section.languages .buttons .language.active,
|
||||
.pageAccount .group.filterButtons .buttons .button.active {
|
||||
animation: aurora-bg 5s linear infinite;
|
||||
}
|
||||
|
||||
[data-ui-element="logo"] h1 {
|
||||
color: var(--main-color);
|
||||
}
|
||||
[data-ui-element="logoSubtext"],
|
||||
[data-ui-element="logo"]:hover h1,
|
||||
#result .stats .group .bottom,
|
||||
[data-nav-item]:hover,
|
||||
footer button:hover,
|
||||
a:not(.button):not([data-ui-variant="button"]):hover {
|
||||
animation: aurora 5s linear infinite;
|
||||
}
|
||||
|
||||
[data-nav-item="account"]:hover svg {
|
||||
color: transparent;
|
||||
animation: aurora 5s linear infinite;
|
||||
}
|
||||
|
||||
#words {
|
||||
--correct-letter-animation: aurora 5s linear infinite;
|
||||
}
|
||||
|
||||
#words.flipped {
|
||||
--untyped-letter-color: var(--sub-color);
|
||||
--correct-letter-animation: none;
|
||||
--untyped-letter-animation: aurora 5s linear 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: aurora 5s linear infinite;
|
||||
}
|
||||
|
||||
#words.flipped .word.typed letter {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
#words.highlight-off .word letter,
|
||||
#words.highlight-off .word.typed letter {
|
||||
animation: aurora 5s linear infinite;
|
||||
}
|
||||
6
frontend/static/themes/beach.css
Normal file
6
frontend/static/themes/beach.css
Normal file
@@ -0,0 +1,6 @@
|
||||
[data-nav-item] {
|
||||
color: #ff6f69;
|
||||
&:hover {
|
||||
color: var(--main-color);
|
||||
}
|
||||
}
|
||||
6
frontend/static/themes/bingsu.css
Normal file
6
frontend/static/themes/bingsu.css
Normal file
@@ -0,0 +1,6 @@
|
||||
[data-nav-item="test"] {
|
||||
color: var(--caret-color);
|
||||
&:hover {
|
||||
color: var(--sub-color);
|
||||
}
|
||||
}
|
||||
3
frontend/static/themes/blueberry_dark.css
Normal file
3
frontend/static/themes/blueberry_dark.css
Normal file
@@ -0,0 +1,3 @@
|
||||
[data-ui-element="logo"] h1 {
|
||||
color: #962f7e;
|
||||
}
|
||||
3
frontend/static/themes/blueberry_light.css
Normal file
3
frontend/static/themes/blueberry_light.css
Normal file
@@ -0,0 +1,3 @@
|
||||
[data-ui-element="logo"] h1 {
|
||||
color: #df4576;
|
||||
}
|
||||
3
frontend/static/themes/camping.css
Normal file
3
frontend/static/themes/camping.css
Normal file
@@ -0,0 +1,3 @@
|
||||
[data-ui-element="logo"] h1 {
|
||||
color: #ad4f4e;
|
||||
}
|
||||
52
frontend/static/themes/catppuccin.css
Normal file
52
frontend/static/themes/catppuccin.css
Normal file
@@ -0,0 +1,52 @@
|
||||
[data-nav-item="test"] {
|
||||
color: #f38ba8;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #f38ba8 75%, white 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="leaderboards"] {
|
||||
color: #fab387;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #fab387 75%, white 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="about"] {
|
||||
color: #f9e2af;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #f9e2af 75%, white 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="settings"] {
|
||||
color: #a6e3a1;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #a6e3a1 75%, white 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="account"] {
|
||||
--themable-button-text: #89dceb;
|
||||
&:hover {
|
||||
--themable-button-text: color-mix(
|
||||
in srgb,
|
||||
var(--themable-button-text),
|
||||
white 25%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="alerts"] {
|
||||
color: #89b4fa;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #89b4fa 75%, white 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="login"] {
|
||||
color: #b4befe;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #b4befe 75%, white 25%);
|
||||
}
|
||||
}
|
||||
186
frontend/static/themes/chaos_theory.css
Normal file
186
frontend/static/themes/chaos_theory.css
Normal file
@@ -0,0 +1,186 @@
|
||||
[data-ui-element="logo"] > div {
|
||||
transform: rotateY(180deg);
|
||||
unicode-bidi: bidi-override;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
[data-ui-element="logoSubtext"] {
|
||||
font-family: "Comic Sans MS", "Comic Sans", cursive;
|
||||
}
|
||||
|
||||
[data-ui-element="logo"] svg {
|
||||
transform: rotateX(180deg);
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
header[data-focused] {
|
||||
& [data-ui-element="logo"] > div,
|
||||
[data-ui-element="logo"] svg {
|
||||
transform: rotateY(0deg);
|
||||
direction: ltr;
|
||||
}
|
||||
& [data-nav-item] {
|
||||
--nav-focus-opacity: 1;
|
||||
background: var(--sub-color);
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
& [data-nav-item="account"] {
|
||||
--themable-button-bg: var(--sub-color);
|
||||
}
|
||||
}
|
||||
|
||||
#words .incorrect.extra {
|
||||
transform: rotateY(180deg);
|
||||
unicode-bidi: bidi-override;
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
#caret {
|
||||
background-image: url(/images/themes/chaos_theory/caret.webp) !important;
|
||||
background-color: transparent !important;
|
||||
background-size: 1rem !important;
|
||||
background-position: center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
|
||||
#caret.default {
|
||||
width: 4px !important;
|
||||
}
|
||||
|
||||
.config .toggleButton {
|
||||
transform: rotateY(180deg);
|
||||
unicode-bidi: bidi-override;
|
||||
direction: rtl;
|
||||
align-content: right;
|
||||
}
|
||||
|
||||
.config .mode .textButton {
|
||||
transform: rotateY(180deg);
|
||||
unicode-bidi: bidi-override;
|
||||
direction: rtl;
|
||||
align-content: right;
|
||||
}
|
||||
|
||||
.config .wordCount .textButton,
|
||||
.config .time .textButton,
|
||||
.config .quoteLength .textButton,
|
||||
.config .customText .textButton {
|
||||
transform: rotateY(180deg);
|
||||
unicode-bidi: bidi-override;
|
||||
direction: rtl;
|
||||
align-content: right;
|
||||
}
|
||||
|
||||
[data-nav-item] {
|
||||
color: var(--bg-color);
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
[data-nav-item]:hover {
|
||||
filter: brightness(1.25);
|
||||
}
|
||||
|
||||
[data-nav-item="test"] {
|
||||
background: #ab92e1;
|
||||
}
|
||||
|
||||
[data-nav-item="leaderboards"] {
|
||||
background: #f3ea5d;
|
||||
}
|
||||
|
||||
[data-nav-item="about"] {
|
||||
background: #7ae1bf;
|
||||
}
|
||||
|
||||
[data-nav-item="settings"] {
|
||||
background: #ff5869;
|
||||
}
|
||||
|
||||
[data-nav-item="alerts"] {
|
||||
background: #fc76d9;
|
||||
& svg {
|
||||
fill: var(--bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="account"] {
|
||||
--themable-button-bg: var(--main-color);
|
||||
--themable-button-text: var(--bg-color);
|
||||
--themable-button-hover-bg: var(--main-color);
|
||||
--themable-button-hover-text: var(--bg-color);
|
||||
--themable-button-active: var(--bg-color);
|
||||
}
|
||||
|
||||
[data-nav-item="alerts"],
|
||||
[data-ui-element="navAvatar"] {
|
||||
& [data-ui-element="notificationBubble"] {
|
||||
box-shadow: none;
|
||||
background: var(--bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
[data-ui-element="userLevel"] {
|
||||
color: var(--themable-button-bg);
|
||||
background: var(--themable-button-text);
|
||||
}
|
||||
|
||||
[data-nav-item="login"] {
|
||||
background: #ab92e1;
|
||||
}
|
||||
|
||||
body.crtmode {
|
||||
& [data-nav-item="test"] {
|
||||
box-shadow:
|
||||
3px 0 1px color-mix(in srgb, #ab92e1 20%, transparent),
|
||||
-3px 0 color-mix(in srgb, #ab92e1 30%, transparent),
|
||||
0 0 3px;
|
||||
}
|
||||
|
||||
& [data-nav-item="leaderboards"] {
|
||||
box-shadow:
|
||||
3px 0 1px color-mix(in srgb, #f3ea5d 20%, transparent),
|
||||
-3px 0 color-mix(in srgb, #f3ea5d 30%, transparent),
|
||||
0 0 3px;
|
||||
}
|
||||
|
||||
& [data-nav-item="about"] {
|
||||
box-shadow:
|
||||
3px 0 1px color-mix(in srgb, #7ae1bf 20%, transparent),
|
||||
-3px 0 color-mix(in srgb, #7ae1bf 30%, transparent),
|
||||
0 0 3px;
|
||||
}
|
||||
|
||||
& [data-nav-item="settings"] {
|
||||
box-shadow:
|
||||
3px 0 1px color-mix(in srgb, #ff5869 20%, transparent),
|
||||
-3px 0 color-mix(in srgb, #ff5869 30%, transparent),
|
||||
0 0 3px;
|
||||
}
|
||||
|
||||
& [data-nav-item="account"],
|
||||
& [data-nav-item="alerts"] {
|
||||
box-shadow:
|
||||
3px 0 1px color-mix(in srgb, #fc76d9 20%, transparent),
|
||||
-3px 0 color-mix(in srgb, #fc76d9 30%, transparent),
|
||||
0 0 3px;
|
||||
}
|
||||
|
||||
& [data-nav-item="login"] {
|
||||
box-shadow:
|
||||
3px 0 1px color-mix(in srgb, #ab92e1 20%, transparent),
|
||||
-3px 0 color-mix(in srgb, #ab92e1 30%, transparent),
|
||||
0 0 3px;
|
||||
}
|
||||
|
||||
& #caret {
|
||||
box-shadow: none !important;
|
||||
filter: drop-shadow(3px 0px 1px var(--crt-main-color-glow))
|
||||
drop-shadow(-3px 0px 0px var(--crt-main-color-glow));
|
||||
}
|
||||
|
||||
& header[data-focused] [data-nav-item] {
|
||||
box-shadow:
|
||||
3px 0 1px var(--crt-sub-color-glow),
|
||||
-3px 0 var(--crt-sub-color-glow);
|
||||
}
|
||||
}
|
||||
36
frontend/static/themes/cheesecake.css
Normal file
36
frontend/static/themes/cheesecake.css
Normal file
@@ -0,0 +1,36 @@
|
||||
@keyframes cheesecake {
|
||||
0% {
|
||||
fill: #ff0090;
|
||||
}
|
||||
10% {
|
||||
fill: #c11384;
|
||||
}
|
||||
20% {
|
||||
fill: #832678;
|
||||
}
|
||||
30% {
|
||||
fill: #44396c;
|
||||
}
|
||||
40% {
|
||||
fill: #064c60;
|
||||
}
|
||||
50% {
|
||||
fill: #064c60;
|
||||
}
|
||||
65% {
|
||||
fill: #44396c;
|
||||
}
|
||||
75% {
|
||||
fill: #832678;
|
||||
}
|
||||
85% {
|
||||
fill: #c11384;
|
||||
}
|
||||
100% {
|
||||
fill: #ff0090;
|
||||
}
|
||||
}
|
||||
|
||||
[data-ui-element="logo"] svg path {
|
||||
animation: 10s linear infinite 0.1s cheesecake;
|
||||
}
|
||||
80
frontend/static/themes/dark_note.css
Normal file
80
frontend/static/themes/dark_note.css
Normal file
@@ -0,0 +1,80 @@
|
||||
:root {
|
||||
/* custom vars */
|
||||
--theme-bg-stripe-color: #434653;
|
||||
--theme-bg-stripe-opacity: 0.1;
|
||||
--theme-accent-stripe-color: #bf8200;
|
||||
--current-color: var(--text-color);
|
||||
}
|
||||
|
||||
.colorfulMode {
|
||||
--current-color: var(--main-color);
|
||||
}
|
||||
|
||||
button:not(.accountButtonAndMenu *),
|
||||
.button:not(.accountButtonAndMenu *),
|
||||
[data-ui-element="testConfig"] {
|
||||
--roundness: 5em; /* overwriting default roundness to make it softer */
|
||||
}
|
||||
|
||||
/* Notepad style overlay */
|
||||
body {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
body::before,
|
||||
body::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
opacity: var(--theme-bg-stripe-opacity);
|
||||
display: block;
|
||||
z-index: -9999;
|
||||
}
|
||||
|
||||
body::after {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-image: linear-gradient(
|
||||
0deg,
|
||||
var(--theme-bg-stripe-color) 0.1em,
|
||||
transparent 0.1em,
|
||||
transparent 100%
|
||||
);
|
||||
background-size: 1em 2em;
|
||||
}
|
||||
|
||||
body::before {
|
||||
left: 10vw;
|
||||
width: 0.1em;
|
||||
background: var(--theme-accent-stripe-color);
|
||||
}
|
||||
|
||||
#commandLine .modal {
|
||||
--roundness: 0; /* making command line sharp */
|
||||
}
|
||||
|
||||
/* restyling error displays to be strike-through instead of underlined */
|
||||
#wordsWrapper .word.error {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
#words .word.error {
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
#words:not(.blind).colorfulMode .word letter.incorrect:not(.extra),
|
||||
#words:not(.blind) .word letter.incorrect:not(.extra) {
|
||||
color: var(--current-color);
|
||||
}
|
||||
|
||||
#words:not(.blind) .word.error letter:not(.correct):not(.incorrect)::after {
|
||||
background: var(--sub-color);
|
||||
}
|
||||
|
||||
#words:not(.blind) .word letter.incorrect,
|
||||
#words:not(.blind).colorfulMode .word letter.incorrect {
|
||||
text-decoration: line-through;
|
||||
text-decoration-color: var(--error-color);
|
||||
text-decoration-thickness: 2px;
|
||||
}
|
||||
10
frontend/static/themes/desert_oasis.css
Normal file
10
frontend/static/themes/desert_oasis.css
Normal file
@@ -0,0 +1,10 @@
|
||||
[data-nav-item] {
|
||||
--themable-button-text: #76bb40;
|
||||
&:hover {
|
||||
--themable-button-text: color-mix(
|
||||
in srgb,
|
||||
var(--themable-button-text),
|
||||
white 25%
|
||||
);
|
||||
}
|
||||
}
|
||||
48
frontend/static/themes/dmg.css
Normal file
48
frontend/static/themes/dmg.css
Normal file
@@ -0,0 +1,48 @@
|
||||
[data-nav-item] {
|
||||
border-radius: 10rem !important;
|
||||
color: var(--bg-color);
|
||||
background: var(--main-color);
|
||||
}
|
||||
|
||||
[data-nav-item]:hover {
|
||||
filter: brightness(1.25);
|
||||
}
|
||||
|
||||
header[data-focused] [data-nav-item="test"] {
|
||||
--nav-focus-opacity: 1;
|
||||
background: #e34c6c;
|
||||
}
|
||||
|
||||
[data-nav-item="alerts"],
|
||||
[data-ui-element="navAvatar"] {
|
||||
& [data-ui-element="notificationBubble"] {
|
||||
box-shadow: none;
|
||||
background: var(--bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
[data-ui-element="userLevel"] {
|
||||
background: var(--color-bg);
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
body.crtmode {
|
||||
& [data-nav-item] {
|
||||
box-shadow:
|
||||
3px 0 1px var(--crt-main-color-glow),
|
||||
-3px 0 var(--crt-main-color-glow),
|
||||
0 0 3px;
|
||||
}
|
||||
|
||||
& header[data-focused] [data-nav-item],
|
||||
& [data-nav-item]:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
& header[data-focused] [data-nav-item="test"] {
|
||||
box-shadow:
|
||||
3px 0 1px color-mix(in srgb, #e34c6c 20%, transparent),
|
||||
-3px 0 color-mix(in srgb, #e34c6c 30%, transparent),
|
||||
0 0 3px;
|
||||
}
|
||||
}
|
||||
95
frontend/static/themes/dots.css
Normal file
95
frontend/static/themes/dots.css
Normal file
@@ -0,0 +1,95 @@
|
||||
[data-nav-item] {
|
||||
border-radius: 10rem !important;
|
||||
--themable-button-text: #121520;
|
||||
--themable-button-hover-text: var(--bg-color);
|
||||
}
|
||||
|
||||
[data-nav-item]:hover {
|
||||
filter: brightness(1.25);
|
||||
}
|
||||
|
||||
[data-nav-item="test"] {
|
||||
background: #f94348;
|
||||
}
|
||||
|
||||
[data-nav-item="leaderboards"] {
|
||||
background: #9261ff;
|
||||
}
|
||||
|
||||
[data-nav-item="about"] {
|
||||
background: #3cc5f8;
|
||||
}
|
||||
|
||||
[data-nav-item="settings"] {
|
||||
background: #4acb8a;
|
||||
}
|
||||
|
||||
[data-nav-item="alerts"],
|
||||
[data-nav-item="login"],
|
||||
[data-nav-item="account"] {
|
||||
--themable-button-text: #393c73;
|
||||
--themable-button-hover-text: var(--text-color);
|
||||
}
|
||||
|
||||
[data-nav-item="account"] .xpBar {
|
||||
bottom: -0.75rem !important;
|
||||
}
|
||||
|
||||
[data-nav-item="account"]:hover svg {
|
||||
/* color: var(--text-color); */
|
||||
}
|
||||
|
||||
header[data-focused] {
|
||||
& [data-nav-item] {
|
||||
--nav-focus-opacity: 1;
|
||||
background: var(--sub-color);
|
||||
}
|
||||
& [data-nav-item="alerts"],
|
||||
& [data-nav-item="login"],
|
||||
& [data-nav-item="account"] {
|
||||
--nav-focus-opacity: 0;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
body.crtmode {
|
||||
& [data-nav-item="test"] {
|
||||
box-shadow:
|
||||
3px 0 1px color-mix(in srgb, #f94348 20%, transparent),
|
||||
-3px 0 color-mix(in srgb, #f94348 30%, transparent),
|
||||
0 0 3px;
|
||||
}
|
||||
|
||||
& [data-nav-item="leaderboards"] {
|
||||
box-shadow:
|
||||
3px 0 1px color-mix(in srgb, #9261ff 20%, transparent),
|
||||
-3px 0 color-mix(in srgb, #9261ff 30%, transparent),
|
||||
0 0 3px;
|
||||
}
|
||||
|
||||
& [data-nav-item="about"] {
|
||||
box-shadow:
|
||||
3px 0 1px color-mix(in srgb, #3cc5f8 20%, transparent),
|
||||
-3px 0 color-mix(in srgb, #3cc5f8 30%, transparent),
|
||||
0 0 3px;
|
||||
}
|
||||
|
||||
& [data-nav-item="settings"] {
|
||||
box-shadow:
|
||||
3px 0 1px color-mix(in srgb, #4acb8a 20%, transparent),
|
||||
-3px 0 color-mix(in srgb, #4acb8a 30%, transparent),
|
||||
0 0 3px;
|
||||
}
|
||||
|
||||
& header[data-focused] {
|
||||
& [data-nav-item] {
|
||||
box-shadow:
|
||||
3px 0 1px var(--crt-sub-color-glow),
|
||||
-3px 0 var(--crt-sub-color-glow);
|
||||
}
|
||||
|
||||
& [data-nav-item="account"] {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
38
frontend/static/themes/dracula.css
Normal file
38
frontend/static/themes/dracula.css
Normal file
@@ -0,0 +1,38 @@
|
||||
[data-nav-item="test"] {
|
||||
color: #ec75c4;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #ec75c4 75%, black 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="leaderboards"] {
|
||||
color: #8be9fd;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #8be9fd 75%, black 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="about"] {
|
||||
color: #50fa7b;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #50fa7b 75%, black 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="settings"] {
|
||||
color: #f1fa8c;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #f1fa8c 75%, black 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="alerts"] {
|
||||
--themable-button-text: #ffb86c;
|
||||
&:hover {
|
||||
--themable-button-text: color-mix(
|
||||
in srgb,
|
||||
var(--themable-button-text) 75%,
|
||||
black 25%
|
||||
);
|
||||
}
|
||||
}
|
||||
38
frontend/static/themes/dualshot.css
Normal file
38
frontend/static/themes/dualshot.css
Normal file
@@ -0,0 +1,38 @@
|
||||
[data-nav-item="test"] {
|
||||
color: #2884bb;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #2884bb 75%, white 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="leaderboards"] {
|
||||
color: #25a5a9;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #25a5a9 75%, white 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="about"] {
|
||||
color: #de9c24;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #de9c24 75%, white 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="settings"] {
|
||||
color: #d82231;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #d82231 75%, white 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="alerts"],
|
||||
[data-nav-item="account"],
|
||||
[data-nav-item="login"] {
|
||||
--themable-button-text: #212222;
|
||||
--themable-button-hover-text: color-mix(
|
||||
in srgb,
|
||||
var(--themable-button-text) 75%,
|
||||
white 20%
|
||||
);
|
||||
}
|
||||
15
frontend/static/themes/ez_mode.css
Normal file
15
frontend/static/themes/ez_mode.css
Normal file
@@ -0,0 +1,15 @@
|
||||
.pageSettings .section h1 {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.pageSettings .section > .text {
|
||||
color: var(--sub-color);
|
||||
}
|
||||
|
||||
.pageAbout .section .title {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.pageAbout .section p {
|
||||
color: var(--sub-color);
|
||||
}
|
||||
92
frontend/static/themes/fire.css
Normal file
92
frontend/static/themes/fire.css
Normal file
@@ -0,0 +1,92 @@
|
||||
@keyframes fire {
|
||||
0% {
|
||||
color: #b31313;
|
||||
}
|
||||
25% {
|
||||
color: #ff9000;
|
||||
}
|
||||
50% {
|
||||
color: #fdda16;
|
||||
}
|
||||
75% {
|
||||
color: #ff9000;
|
||||
}
|
||||
100% {
|
||||
color: #b31313;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fire-bg {
|
||||
0% {
|
||||
background: #b31313;
|
||||
}
|
||||
25% {
|
||||
background: #ff9000;
|
||||
}
|
||||
50% {
|
||||
background: #fdda16;
|
||||
}
|
||||
75% {
|
||||
background: #ff9000;
|
||||
}
|
||||
100% {
|
||||
background: #b31313;
|
||||
}
|
||||
}
|
||||
|
||||
#caret,
|
||||
.pageSettings .section .buttons .button.active,
|
||||
.pageSettings .section.languages .buttons .language.active,
|
||||
.pageAccount .group.filterButtons .buttons .button.active {
|
||||
animation: fire-bg 5s linear infinite;
|
||||
}
|
||||
|
||||
[data-ui-element="logo"] h1 {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
[data-ui-element="logoSubtext"],
|
||||
[data-ui-element="logo"]:hover h1,
|
||||
#result .stats .group .bottom,
|
||||
[data-nav-item]:hover,
|
||||
footer button:hover,
|
||||
a:not(.button):not([data-ui-variant="button"]):hover {
|
||||
animation: fire 5s linear infinite;
|
||||
}
|
||||
|
||||
[data-ui-element="logo"]:hover svg {
|
||||
color: transparent;
|
||||
animation: fire 5s linear infinite;
|
||||
}
|
||||
|
||||
[data-nav-item="account"]:hover svg {
|
||||
color: transparent;
|
||||
animation: fire 5s linear infinite;
|
||||
}
|
||||
|
||||
#words {
|
||||
--correct-letter-animation: fire 5s linear infinite;
|
||||
}
|
||||
|
||||
#words.flipped {
|
||||
--untyped-letter-color: var(--sub-color);
|
||||
--correct-letter-animation: none;
|
||||
--untyped-letter-animation: fire 5s linear 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: fire 5s linear infinite;
|
||||
}
|
||||
|
||||
#words.flipped .word.typed letter {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
#words.highlight-off .word letter,
|
||||
#words.highlight-off .word.typed letter {
|
||||
animation: fire 5s linear infinite;
|
||||
}
|
||||
38
frontend/static/themes/froyo.css
Normal file
38
frontend/static/themes/froyo.css
Normal file
@@ -0,0 +1,38 @@
|
||||
[data-nav-item="test"] {
|
||||
color: #ff7e73;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #ff7e73 75%, black 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="leaderboards"] {
|
||||
color: #f5c370;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #f5c370 75%, black 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="about"] {
|
||||
color: #08d9a3;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #08d9a3 75%, black 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="settings"] {
|
||||
color: #0ca5e2;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #0ca5e2 75%, black 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="alerts"],
|
||||
[data-nav-item="account"],
|
||||
[data-nav-item="login"] {
|
||||
--themable-button-text: #875ac6;
|
||||
--themable-button-hover-text: color-mix(
|
||||
in srgb,
|
||||
var(--themable-button-text) 75%,
|
||||
black 25%
|
||||
);
|
||||
}
|
||||
38
frontend/static/themes/fruit_chew.css
Normal file
38
frontend/static/themes/fruit_chew.css
Normal file
@@ -0,0 +1,38 @@
|
||||
[data-nav-item="test"] {
|
||||
color: #a6bf50;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #a6bf50 75%, white 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="leaderboards"] {
|
||||
color: #c3921a;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #c3921a 75%, white 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="about"] {
|
||||
color: #b92221;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #b92221 75%, white 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="settings"] {
|
||||
color: #88b6ce;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #88b6ce 75%, white 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="alerts"],
|
||||
[data-nav-item="account"],
|
||||
[data-nav-item="login"] {
|
||||
--themable-button-text: #661968;
|
||||
--themable-button-hover-text: color-mix(
|
||||
in srgb,
|
||||
var(--themable-button-text) 75%,
|
||||
white 25%
|
||||
);
|
||||
}
|
||||
3
frontend/static/themes/fundamentals.css
Normal file
3
frontend/static/themes/fundamentals.css
Normal file
@@ -0,0 +1,3 @@
|
||||
[data-ui-element="logo"] h1 {
|
||||
color: #196378;
|
||||
}
|
||||
38
frontend/static/themes/future_funk.css
Normal file
38
frontend/static/themes/future_funk.css
Normal file
@@ -0,0 +1,38 @@
|
||||
[data-nav-item="test"] {
|
||||
color: #f04e98;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #f04e98 75%, black 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="leaderboards"] {
|
||||
color: #f8bed6;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #f8bed6 75%, black 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="about"] {
|
||||
color: #f6eb61;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #f6eb61 75%, black 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="settings"] {
|
||||
color: #a4dbe8;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #a4dbe8 75%, black 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="alerts"],
|
||||
[data-nav-item="account"],
|
||||
[data-nav-item="login"] {
|
||||
--themable-button-text: #a266ed;
|
||||
--themable-button-hover-text: color-mix(
|
||||
in srgb,
|
||||
var(--themable-button-text) 75%,
|
||||
black 25%
|
||||
);
|
||||
}
|
||||
6
frontend/static/themes/graen.css
Normal file
6
frontend/static/themes/graen.css
Normal file
@@ -0,0 +1,6 @@
|
||||
[data-nav-item] {
|
||||
color: #601420;
|
||||
&:hover {
|
||||
color: var(--main-color);
|
||||
}
|
||||
}
|
||||
87
frontend/static/themes/grape.css
Normal file
87
frontend/static/themes/grape.css
Normal file
@@ -0,0 +1,87 @@
|
||||
@keyframes grape {
|
||||
0% {
|
||||
color: #00b8d4;
|
||||
}
|
||||
25% {
|
||||
color: #ffac41;
|
||||
}
|
||||
50% {
|
||||
color: #ffcc80;
|
||||
}
|
||||
75% {
|
||||
color: #ffac41;
|
||||
}
|
||||
100% {
|
||||
color: #00b8d4;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes grape-bg {
|
||||
0% {
|
||||
background: #00b8d4;
|
||||
}
|
||||
25% {
|
||||
background: #ffac41;
|
||||
}
|
||||
50% {
|
||||
background: #ffcc80;
|
||||
}
|
||||
75% {
|
||||
background: #ffac41;
|
||||
}
|
||||
100% {
|
||||
background: #00b8d4;
|
||||
}
|
||||
}
|
||||
|
||||
#caret,
|
||||
.pageSettings .section .buttons .button.active,
|
||||
.pageSettings .section.languages .buttons .language.active,
|
||||
.pageAccount .group.filterButtons .buttons .button.active {
|
||||
animation: grape-bg 5s linear infinite;
|
||||
}
|
||||
|
||||
[data-ui-element="logo"] h1 {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
[data-ui-element="logoSubtext"],
|
||||
[data-ui-element="logo"]:hover h1,
|
||||
#result .stats .group .bottom,
|
||||
[data-nav-item]:hover,
|
||||
footer button:hover,
|
||||
a:not(.button):not([data-ui-variant="button"]):hover {
|
||||
animation: grape 5s linear infinite;
|
||||
}
|
||||
|
||||
[data-nav-item="account"]:hover svg {
|
||||
color: transparent;
|
||||
animation: grape 5s linear infinite;
|
||||
}
|
||||
|
||||
#words {
|
||||
--correct-letter-animation: grape 5s linear infinite;
|
||||
}
|
||||
|
||||
#words.flipped {
|
||||
--untyped-letter-color: var(--sub-color);
|
||||
--correct-letter-animation: none;
|
||||
--untyped-letter-animation: grape 5s linear 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: grape 5s linear infinite;
|
||||
}
|
||||
|
||||
#words.flipped .word.typed letter {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
#words.highlight-off .word letter,
|
||||
#words.highlight-off .word.typed letter {
|
||||
animation: grape 5s linear infinite;
|
||||
}
|
||||
38
frontend/static/themes/horizon.css
Normal file
38
frontend/static/themes/horizon.css
Normal file
@@ -0,0 +1,38 @@
|
||||
[data-nav-item="test"] {
|
||||
color: #d55170;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #d55170 75%, white 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="leaderboards"] {
|
||||
color: #e4a88a;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #e4a88a 75%, white 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="about"] {
|
||||
color: #db886f;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #db886f 75%, white 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="settings"] {
|
||||
color: #db887a;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #db887a 75%, white 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="alerts"],
|
||||
[data-nav-item="account"],
|
||||
[data-nav-item="login"] {
|
||||
--themable-button-text: #ffc819;
|
||||
--themable-button-hover-text: color-mix(
|
||||
in srgb,
|
||||
var(--themable-button-text) 75%,
|
||||
white 25%
|
||||
);
|
||||
}
|
||||
4
frontend/static/themes/husqy.css
Normal file
4
frontend/static/themes/husqy.css
Normal file
@@ -0,0 +1,4 @@
|
||||
#liveWpm,
|
||||
#liveStatsTextTop {
|
||||
color: #c58aff;
|
||||
}
|
||||
28
frontend/static/themes/incognito.css
Normal file
28
frontend/static/themes/incognito.css
Normal file
@@ -0,0 +1,28 @@
|
||||
header [data-ui-element="logoText"] {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--text-color) 64%,
|
||||
var(--main-color) 36%
|
||||
);
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
padding-bottom: 0.1em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
[data-ui-element="logoSubtext"] {
|
||||
margin-top: 0em;
|
||||
}
|
||||
|
||||
header [data-ui-element="logo"] svg {
|
||||
color: var(--text-color);
|
||||
padding-bottom: 0.05em;
|
||||
}
|
||||
|
||||
/* fix logo clipping */
|
||||
nav {
|
||||
padding-bottom: 0.2em;
|
||||
}
|
||||
header {
|
||||
margin-bottom: -0.1em;
|
||||
}
|
||||
3
frontend/static/themes/ishtar.css
Normal file
3
frontend/static/themes/ishtar.css
Normal file
@@ -0,0 +1,3 @@
|
||||
[data-ui-element="logo"] h1 {
|
||||
color: #fae1c3;
|
||||
}
|
||||
39
frontend/static/themes/lavender.css
Normal file
39
frontend/static/themes/lavender.css
Normal file
@@ -0,0 +1,39 @@
|
||||
[data-nav-item] {
|
||||
border-radius: 10rem !important;
|
||||
--themable-button-bg: var(--text-color);
|
||||
--themable-button-text: var(--main-color);
|
||||
--themable-button-hover-bg: var(--text-color);
|
||||
--themable-button-hover-text: var(--bg-color);
|
||||
}
|
||||
|
||||
[data-nav-item="alerts"],
|
||||
[data-ui-element="navAvatar"] {
|
||||
& [data-ui-element="notificationBubble"] {
|
||||
box-shadow: none;
|
||||
background: var(--bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
[data-ui-element="userLevel"] {
|
||||
--themable-flash-color: var(--text-color);
|
||||
--themable-bg-color: var(--bg-color);
|
||||
--themable-text-color: var(--main-color);
|
||||
--themable-hover-bg-color: var(--bg-color);
|
||||
}
|
||||
|
||||
body.crtmode [data-nav-item] {
|
||||
box-shadow:
|
||||
3px 0 1px var(--crt-text-color-glow),
|
||||
-3px 0 var(--crt-text-color-glow),
|
||||
0 0 3px;
|
||||
}
|
||||
|
||||
header[data-focused] {
|
||||
[data-nav-item="test"],
|
||||
[data-nav-item="leaderboards"],
|
||||
[data-nav-item="about"],
|
||||
[data-nav-item="settings"] {
|
||||
/* --themable-button-bg: var(--sub-color); */
|
||||
--nav-focus-opacity: 0.5;
|
||||
}
|
||||
}
|
||||
7
frontend/static/themes/lil_dragon.css
Normal file
7
frontend/static/themes/lil_dragon.css
Normal file
@@ -0,0 +1,7 @@
|
||||
[data-nav-item] {
|
||||
color: #ba96db;
|
||||
}
|
||||
|
||||
[data-nav-item]:hover {
|
||||
color: #212b43;
|
||||
}
|
||||
4
frontend/static/themes/matrix.css
Normal file
4
frontend/static/themes/matrix.css
Normal file
@@ -0,0 +1,4 @@
|
||||
#liveWpm,
|
||||
#liveStatsTextTop {
|
||||
color: white;
|
||||
}
|
||||
10
frontend/static/themes/metropolis.css
Normal file
10
frontend/static/themes/metropolis.css
Normal file
@@ -0,0 +1,10 @@
|
||||
[data-ui-element="logo"] h1 {
|
||||
color: #f4bc46;
|
||||
}
|
||||
|
||||
[data-nav-item="test"],
|
||||
[data-nav-item="leaderboards"],
|
||||
[data-nav-item="about"],
|
||||
[data-nav-item="settings"] {
|
||||
--themable-button-text: #d44729;
|
||||
}
|
||||
38
frontend/static/themes/milkshake.css
Normal file
38
frontend/static/themes/milkshake.css
Normal file
@@ -0,0 +1,38 @@
|
||||
[data-nav-item="test"] {
|
||||
color: #f19dac;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #f19dac 75%, black 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="leaderboards"] {
|
||||
color: #f6f4a0;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #f6f4a0 75%, black 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="about"] {
|
||||
color: #73e4d0;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #73e4d0 75%, black 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="settings"] {
|
||||
color: #61cfe6;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #61cfe6 75%, black 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="alerts"],
|
||||
[data-nav-item="account"],
|
||||
[data-nav-item="login"] {
|
||||
--themable-button-text: #ba96db;
|
||||
--themable-button-hover-text: color-mix(
|
||||
in srgb,
|
||||
var(--themable-button-text) 75%,
|
||||
black 25%
|
||||
);
|
||||
}
|
||||
14
frontend/static/themes/modern_ink.css
Normal file
14
frontend/static/themes/modern_ink.css
Normal file
@@ -0,0 +1,14 @@
|
||||
[data-nav-item="test"],
|
||||
[data-nav-item="account"],
|
||||
[data-nav-item="login"] {
|
||||
--themable-button-text: #ff0000;
|
||||
--themable-button-hover-text: color-mix(
|
||||
in srgb,
|
||||
var(--themable-button-text) 75%,
|
||||
black 25%
|
||||
);
|
||||
}
|
||||
|
||||
.word.error {
|
||||
border-bottom: solid 2px #ff0000;
|
||||
}
|
||||
39
frontend/static/themes/moonlight.css
Normal file
39
frontend/static/themes/moonlight.css
Normal file
@@ -0,0 +1,39 @@
|
||||
/*inspired by GMK MOONLIGHT*/
|
||||
|
||||
header[data-focused] {
|
||||
& [data-nav-item],
|
||||
& nav:before,
|
||||
& nav:after {
|
||||
background: var(--bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="test"],
|
||||
[data-nav-item="leaderboards"],
|
||||
[data-nav-item="about"],
|
||||
[data-nav-item="settings"] {
|
||||
border-radius: rem !important;
|
||||
color: #191f28 !important;
|
||||
background: #c69f68;
|
||||
&:hover {
|
||||
border-radius: rem !important;
|
||||
color: #4b5975 !important;
|
||||
transition: 0.25s;
|
||||
}
|
||||
}
|
||||
|
||||
body.crtmode {
|
||||
& [data-nav-item="test"],
|
||||
& [data-nav-item="leaderboards"],
|
||||
& [data-nav-item="about"],
|
||||
& [data-nav-item="settings"] {
|
||||
box-shadow:
|
||||
3px 0 1px color-mix(in srgb, #c69f68 20%, transparent),
|
||||
-3px 0 color-mix(in srgb, #c69f68 30%, transparent),
|
||||
0 0 3px;
|
||||
}
|
||||
|
||||
& header[data-focused] [data-nav-item] {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
3
frontend/static/themes/mr_sleeves.css
Normal file
3
frontend/static/themes/mr_sleeves.css
Normal file
@@ -0,0 +1,3 @@
|
||||
[data-ui-element="logo"] h1 {
|
||||
color: #8fadc9;
|
||||
}
|
||||
38
frontend/static/themes/oblivion.css
Normal file
38
frontend/static/themes/oblivion.css
Normal file
@@ -0,0 +1,38 @@
|
||||
[data-nav-item="test"] {
|
||||
color: #9a90b4;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #9a90b4 75%, white 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="leaderboards"] {
|
||||
color: #8db14b;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #8db14b 75%, white 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="about"] {
|
||||
color: #fca321;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #fca321 75%, white 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="settings"] {
|
||||
color: #2984a5;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #2984a5 75%, white 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="alerts"],
|
||||
[data-nav-item="account"],
|
||||
[data-nav-item="login"] {
|
||||
--themable-button-text: #dd452e;
|
||||
--themable-button-hover-text: color-mix(
|
||||
in srgb,
|
||||
var(--themable-button-text) 75%,
|
||||
white 25%
|
||||
);
|
||||
}
|
||||
160
frontend/static/themes/phantom.css
Normal file
160
frontend/static/themes/phantom.css
Normal file
@@ -0,0 +1,160 @@
|
||||
@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);
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
26
frontend/static/themes/retrocast.css
Normal file
26
frontend/static/themes/retrocast.css
Normal file
@@ -0,0 +1,26 @@
|
||||
[data-nav-item="test"],
|
||||
[data-nav-item="leaderboards"],
|
||||
[data-nav-item="about"] {
|
||||
color: #88dbdf;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #88dbdf 75%, black 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="settings"] {
|
||||
color: #ff585d;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #ff585d 75%, black 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="alerts"],
|
||||
[data-nav-item="account"],
|
||||
[data-nav-item="login"] {
|
||||
--themable-button-text: #f3e03b;
|
||||
--themable-button-hover-text: color-mix(
|
||||
in srgb,
|
||||
var(--themable-button-text) 75%,
|
||||
black 25%
|
||||
);
|
||||
}
|
||||
110
frontend/static/themes/rgb.css
Normal file
110
frontend/static/themes/rgb.css
Normal file
@@ -0,0 +1,110 @@
|
||||
@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;
|
||||
}
|
||||
7
frontend/static/themes/sewing_tin.css
Normal file
7
frontend/static/themes/sewing_tin.css
Normal file
@@ -0,0 +1,7 @@
|
||||
[data-nav-item] {
|
||||
color: #f2ce83;
|
||||
}
|
||||
|
||||
[data-nav-item]:hover {
|
||||
color: #c6915e;
|
||||
}
|
||||
31
frontend/static/themes/sewing_tin_light.css
Normal file
31
frontend/static/themes/sewing_tin_light.css
Normal file
@@ -0,0 +1,31 @@
|
||||
[data-nav-item] {
|
||||
color: #f2ce83;
|
||||
}
|
||||
|
||||
[data-nav-item]:hover {
|
||||
color: #c6915e;
|
||||
}
|
||||
|
||||
header [data-ui-element="logoText"] {
|
||||
background-color: #ffffff; /* fallback */
|
||||
background: linear-gradient(
|
||||
#2d2076,
|
||||
#2d2076 25%,
|
||||
#2e3395 25%,
|
||||
#2e3395 50%,
|
||||
#3049ba 50%,
|
||||
#3049ba 75%,
|
||||
#385eca 75%,
|
||||
#385eca
|
||||
);
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
padding-bottom: 0.1em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
[data-ui-element="logoSubtext"] {
|
||||
margin-top: 0em;
|
||||
/* prevent it from being transparent */
|
||||
-webkit-text-fill-color: #385eca;
|
||||
}
|
||||
48
frontend/static/themes/shadow.css
Normal file
48
frontend/static/themes/shadow.css
Normal file
@@ -0,0 +1,48 @@
|
||||
header [data-ui-element="logo"] svg {
|
||||
color: #8c3230;
|
||||
}
|
||||
|
||||
header [data-ui-element="logoText"] {
|
||||
color: #557d8d;
|
||||
}
|
||||
|
||||
@keyframes shadow {
|
||||
to {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shadow-repeat {
|
||||
50% {
|
||||
color: #000;
|
||||
}
|
||||
100% {
|
||||
color: #eee;
|
||||
}
|
||||
}
|
||||
|
||||
#liveWpm,
|
||||
#liveStatsTextTop {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#result .stats .group,
|
||||
[data-nav-item]:hover,
|
||||
footer button:hover,
|
||||
a:not(.button):not([data-ui-variant="button"]):hover {
|
||||
animation: shadow-repeat 3s linear infinite forwards;
|
||||
}
|
||||
|
||||
[data-nav-item="account"]:hover svg {
|
||||
color: currentColor;
|
||||
animation: shadow-repeat 3s linear infinite forwards;
|
||||
}
|
||||
|
||||
#typingTest .word letter.correct,
|
||||
#typingTest #words.highlight-word .word.typed letter.correct,
|
||||
#typingTest #words.highlight-next-word .word.typed letter.correct,
|
||||
#typingTest #words.highlight-next-two-words .word.typed letter.correct,
|
||||
#typingTest #words.highlight-next-three-words .word.typed letter.correct {
|
||||
color: var(--correct-letter-color);
|
||||
animation: shadow 5s linear 1 forwards;
|
||||
}
|
||||
122
frontend/static/themes/snes.css
Normal file
122
frontend/static/themes/snes.css
Normal file
@@ -0,0 +1,122 @@
|
||||
header[data-focused] [data-nav-item],
|
||||
header[data-focused] nav:before,
|
||||
header[data-focused] nav:after {
|
||||
background: #99989f;
|
||||
}
|
||||
|
||||
[data-nav-item] {
|
||||
border-radius: 10rem !important;
|
||||
--themable-button-text: var(--bg-color);
|
||||
}
|
||||
|
||||
[data-nav-item]:hover {
|
||||
filter: brightness(1.25);
|
||||
}
|
||||
|
||||
[data-nav-item="test"] {
|
||||
background: #553d94;
|
||||
}
|
||||
|
||||
[data-nav-item="leaderboards"] {
|
||||
background: #6851a4;
|
||||
}
|
||||
|
||||
[data-nav-item="about"] {
|
||||
background: #7962b3;
|
||||
}
|
||||
|
||||
[data-nav-item="settings"] {
|
||||
background: #8c76c3;
|
||||
}
|
||||
|
||||
[data-nav-item="alerts"],
|
||||
[data-nav-item="login"] {
|
||||
background: #9f8ad4;
|
||||
}
|
||||
|
||||
[data-nav-item="account"]:hover [data-ui-element="navAvatar"] svg {
|
||||
fill: var(--bg-color);
|
||||
}
|
||||
|
||||
[data-nav-item="alerts"],
|
||||
[data-ui-element="navAvatar"] {
|
||||
& [data-ui-element="notificationBubble"] {
|
||||
box-shadow: none;
|
||||
background: var(--bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="account"] {
|
||||
--themable-button-text: var(--bg-color);
|
||||
--themable-button-bg: var(--sub-color);
|
||||
--themable-button-hover-bg: color-mix(
|
||||
in srgb,
|
||||
var(--sub-color) 75%,
|
||||
white 15%
|
||||
);
|
||||
--themable-button-hover-text: color-mix(
|
||||
in srgb,
|
||||
var(--themable-button-text) 75%,
|
||||
white 15%
|
||||
);
|
||||
[data-ui-element="userLevel"] {
|
||||
background: var(--themable-button-text);
|
||||
color: var(--themable-button-bg);
|
||||
}
|
||||
}
|
||||
|
||||
header[data-focused] {
|
||||
[data-nav-item="test"],
|
||||
[data-nav-item="leaderboards"],
|
||||
[data-nav-item="about"],
|
||||
[data-nav-item="settings"] {
|
||||
--themable-button-bg: var(--sub-alt-color);
|
||||
--nav-focus-opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
body.crtmode {
|
||||
& [data-nav-item="test"] {
|
||||
box-shadow:
|
||||
3px 0 1px color-mix(in srgb, #553d94 20%, transparent),
|
||||
-3px 0 color-mix(in srgb, #553d94 30%, transparent),
|
||||
0 0 3px;
|
||||
}
|
||||
|
||||
& [data-nav-item="leaderboards"] {
|
||||
box-shadow:
|
||||
3px 0 1px color-mix(in srgb, #6851a4 20%, transparent),
|
||||
-3px 0 color-mix(in srgb, #6851a4 30%, transparent),
|
||||
0 0 3px;
|
||||
}
|
||||
|
||||
& [data-nav-item="about"] {
|
||||
box-shadow:
|
||||
3px 0 1px color-mix(in srgb, #7962b3 20%, transparent),
|
||||
-3px 0 color-mix(in srgb, #7962b3 30%, transparent),
|
||||
0 0 3px;
|
||||
}
|
||||
|
||||
& [data-nav-item="settings"] {
|
||||
box-shadow:
|
||||
3px 0 1px color-mix(in srgb, #8c76c3 20%, transparent),
|
||||
-3px 0 color-mix(in srgb, #8c76c3 30%, transparent),
|
||||
0 0 3px;
|
||||
}
|
||||
|
||||
& [data-nav-item="alerts"],
|
||||
& [data-nav-item="account"],
|
||||
& [data-nav-item="login"] {
|
||||
box-shadow:
|
||||
3px 0 1px color-mix(in srgb, #9f8ad4 20%, transparent),
|
||||
-3px 0 color-mix(in srgb, #9f8ad4 30%, transparent),
|
||||
0 0 3px;
|
||||
}
|
||||
|
||||
& header[data-focused] [data-nav-item] {
|
||||
box-shadow:
|
||||
3px 0 1px color-mix(in srgb, #99989f 20%, transparent),
|
||||
-3px 0 color-mix(in srgb, #99989f 30%, transparent),
|
||||
0 0 3px;
|
||||
}
|
||||
}
|
||||
37
frontend/static/themes/solarized_osaka.css
Normal file
37
frontend/static/themes/solarized_osaka.css
Normal file
@@ -0,0 +1,37 @@
|
||||
#words {
|
||||
--correct-letter-color: var(--text-color);
|
||||
--untyped-letter-color: #586e75;
|
||||
}
|
||||
|
||||
kbd {
|
||||
color: var(--text-color);
|
||||
background-color: var(--sub-alt-color);
|
||||
}
|
||||
|
||||
button.text:hover,
|
||||
button[data-ui-variant="text"]:hover,
|
||||
a:not(.button):not([data-ui-variant="button"]):hover,
|
||||
.button.text:hover,
|
||||
.textButton:hover {
|
||||
color: var(--caret-color);
|
||||
}
|
||||
|
||||
button.text.active,
|
||||
.button.text.active,
|
||||
.textButton.active {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
button:not(.textButton):not([data-ui-variant="text"]):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);
|
||||
}
|
||||
9
frontend/static/themes/stealth.css
Normal file
9
frontend/static/themes/stealth.css
Normal file
@@ -0,0 +1,9 @@
|
||||
[data-nav-item="settings"] {
|
||||
color: #e25303;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #e25303 75%, black 25%);
|
||||
}
|
||||
}
|
||||
#liveStatsTextTop {
|
||||
color: #5e676e;
|
||||
}
|
||||
56
frontend/static/themes/suisei.css
Normal file
56
frontend/static/themes/suisei.css
Normal file
@@ -0,0 +1,56 @@
|
||||
@keyframes suisei-pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
[data-ui-element="logoText"] {
|
||||
background: linear-gradient(120deg, var(--main-color), var(--sub-color));
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
padding-bottom: 0.1em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
[data-ui-element="logoSubtext"] {
|
||||
margin-top: 0em;
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
header[data-focused] [data-ui-element="logoText"] {
|
||||
background: linear-gradient(-120deg, var(--main-color), var(--sub-color));
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
padding-bottom: 0.1em;
|
||||
}
|
||||
header[data-focused] [data-nav-item] {
|
||||
background: none;
|
||||
}
|
||||
[data-nav-item] {
|
||||
border-radius: 150px 150px 32px 32px;
|
||||
background-color: var(--sub-alt-color);
|
||||
color: var(--main-color);
|
||||
}
|
||||
[data-nav-item]:hover {
|
||||
animation: suisei-pulse 800ms ease-out infinite;
|
||||
color: var(--main-color);
|
||||
background-color: var(--sub-alt-color);
|
||||
}
|
||||
|
||||
[data-nav-item="leaderboards"],
|
||||
[data-nav-item="leaderboards"]:hover {
|
||||
color: var(--sub-color);
|
||||
}
|
||||
|
||||
[data-nav-item="account"],
|
||||
[data-nav-item="account"]:hover {
|
||||
background: none;
|
||||
color: var(--sub-color);
|
||||
}
|
||||
9
frontend/static/themes/sunset.css
Normal file
9
frontend/static/themes/sunset.css
Normal file
@@ -0,0 +1,9 @@
|
||||
[data-nav-item="test"],
|
||||
[data-nav-item="leaderboards"],
|
||||
[data-nav-item="about"],
|
||||
[data-nav-item="settings"] {
|
||||
color: #f79777;
|
||||
&:hover {
|
||||
color: #ffca99;
|
||||
}
|
||||
}
|
||||
34
frontend/static/themes/taro.css
Normal file
34
frontend/static/themes/taro.css
Normal file
@@ -0,0 +1,34 @@
|
||||
.word.error {
|
||||
border-bottom: dotted 2px var(--text-color);
|
||||
}
|
||||
|
||||
[data-nav-item="test"] {
|
||||
background: var(--caret-color);
|
||||
border-radius: 50%;
|
||||
--nav-focus-opacity: 1;
|
||||
}
|
||||
|
||||
[data-nav-item="leaderboards"] {
|
||||
background: var(--error-color);
|
||||
border-radius: 50%;
|
||||
--nav-focus-opacity: 1;
|
||||
}
|
||||
|
||||
header[data-focused] {
|
||||
& [data-nav-item="test"],
|
||||
& [data-nav-item="leaderboards"] {
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
body.crtmode [data-nav-item="test"] {
|
||||
box-shadow:
|
||||
3px 0 1px var(--crt-caret-color-glow),
|
||||
-3px 0 var(--crt-caret-color-glow);
|
||||
}
|
||||
|
||||
body.crtmode [data-nav-item="leaderboards"] {
|
||||
box-shadow:
|
||||
3px 0 1px var(--crt-error-color-glow),
|
||||
-3px 0 var(--crt-error-color-glow);
|
||||
}
|
||||
90
frontend/static/themes/terrazzo.css
Normal file
90
frontend/static/themes/terrazzo.css
Normal file
@@ -0,0 +1,90 @@
|
||||
/* hide buttons while typing */
|
||||
header[data-focused] [data-nav-item] {
|
||||
background: none;
|
||||
}
|
||||
|
||||
[data-nav-item="test"] {
|
||||
background: var(--sub-color);
|
||||
color: var(--bg-color);
|
||||
border-radius: calc(var(--roundness) * 2) calc(var(--roundness) * 1.3)
|
||||
calc(var(--roundness) * 1.7) calc(var(--roundness) * 1);
|
||||
}
|
||||
[data-nav-item="leaderboards"] {
|
||||
background: #9a7a61;
|
||||
color: var(--bg-color);
|
||||
border-radius: calc(var(--roundness) * 1.2) calc(var(--roundness) * 1.7)
|
||||
calc(var(--roundness) * 2.1) calc(var(--roundness) * 1);
|
||||
transform: rotateY(9deg);
|
||||
}
|
||||
[data-nav-item="about"] {
|
||||
background: var(--main-color);
|
||||
color: var(--bg-color);
|
||||
border-radius: calc(var(--roundness) * 2.8) calc(var(--roundness) * 0.6)
|
||||
calc(var(--roundness) * 2) calc(var(--roundness) * 1.6);
|
||||
transform: rotateY(-3deg);
|
||||
}
|
||||
[data-nav-item="settings"] {
|
||||
background: var(--text-color);
|
||||
color: var(--bg-color);
|
||||
border-radius: calc(var(--roundness) * 0.8) calc(var(--roundness) * 2.4)
|
||||
calc(var(--roundness) * 0.8) calc(var(--roundness) * 2.8);
|
||||
}
|
||||
|
||||
[data-nav-item="test"]:hover,
|
||||
[data-nav-item="leaderboards"]:hover,
|
||||
[data-nav-item="about"]:hover,
|
||||
[data-nav-item="settings"]:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
body.crtmode {
|
||||
& [data-nav-item="test"] {
|
||||
box-shadow:
|
||||
3px 0 1px color-mix(in srgb, var(--sub-color) 20%, transparent),
|
||||
-3px 0 color-mix(in srgb, var(--sub-color) 30%, transparent),
|
||||
0 0 3px;
|
||||
}
|
||||
& [data-nav-item="leaderboards"] {
|
||||
box-shadow:
|
||||
3px 0 1px color-mix(in srgb, #9a7a61 20%, transparent),
|
||||
-3px 0 color-mix(in srgb, #9a7a61 30%, transparent),
|
||||
0 0 3px;
|
||||
}
|
||||
& [data-nav-item="about"] {
|
||||
box-shadow:
|
||||
3px 0 1px color-mix(in srgb, var(--main-color) 20%, transparent),
|
||||
-3px 0 color-mix(in srgb, var(--main-color) 30%, transparent),
|
||||
0 0 3px;
|
||||
}
|
||||
& [data-nav-item="settings"] {
|
||||
box-shadow:
|
||||
3px 0 1px color-mix(in srgb, var(--text-color) 20%, transparent),
|
||||
-3px 0 color-mix(in srgb, var(--text-color) 30%, transparent),
|
||||
0 0 3px;
|
||||
}
|
||||
& header[data-focused] [data-nav-item] {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
/* color individual parts of the mt logo */
|
||||
|
||||
[data-ui-element="logo"] svg path {
|
||||
&:nth-child(2),
|
||||
&:nth-child(8) {
|
||||
fill: var(--text-color);
|
||||
}
|
||||
&:nth-child(1),
|
||||
&:nth-child(6),
|
||||
&:nth-child(7) {
|
||||
fill: var(--sub-color);
|
||||
}
|
||||
&:nth-child(3),
|
||||
&:nth-child(4),
|
||||
&:nth-child(5) {
|
||||
fill: var(--main-color);
|
||||
}
|
||||
|
||||
&:nth-child(9) {
|
||||
fill: #9a7a61;
|
||||
}
|
||||
}
|
||||
20
frontend/static/themes/trackday.css
Normal file
20
frontend/static/themes/trackday.css
Normal file
@@ -0,0 +1,20 @@
|
||||
[data-nav-item="test"] {
|
||||
color: #e0513e;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #e0513e 75%, white 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="leaderboards"] {
|
||||
color: #ccc500;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #ccc500 75%, white 25%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-nav-item="about"] {
|
||||
color: #cfcfcf;
|
||||
&:hover {
|
||||
color: color-mix(in srgb, #cfcfcf 75%, white 25%);
|
||||
}
|
||||
}
|
||||
75
frontend/static/themes/trance.css
Normal file
75
frontend/static/themes/trance.css
Normal file
@@ -0,0 +1,75 @@
|
||||
@keyframes trance {
|
||||
0% {
|
||||
color: #e51376;
|
||||
}
|
||||
50% {
|
||||
color: #0e77ee;
|
||||
}
|
||||
100% {
|
||||
color: #e51376;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes trance-bg {
|
||||
0% {
|
||||
background: #e51376;
|
||||
}
|
||||
50% {
|
||||
background: #0e77ee;
|
||||
}
|
||||
100% {
|
||||
background: #e51376;
|
||||
}
|
||||
}
|
||||
|
||||
.button.discord::after,
|
||||
#caret,
|
||||
.pageSettings .section .buttons button.active,
|
||||
.pageSettings .section.languages .buttons .language.active,
|
||||
.pageAccount .group.filterButtons .buttons button.active {
|
||||
animation: trance-bg 5s linear infinite;
|
||||
}
|
||||
|
||||
header[data-focused] .button.discord::after,
|
||||
header .button.discord.dotHidden::after {
|
||||
animation-name: none !important;
|
||||
}
|
||||
|
||||
#result .stats .group .bottom,
|
||||
[data-nav-item]:hover,
|
||||
footer button:hover,
|
||||
a:not(.button):not([data-ui-variant="button"]):hover {
|
||||
animation: trance 5s linear infinite;
|
||||
}
|
||||
|
||||
[data-nav-item="account"]:hover svg {
|
||||
color: transparent;
|
||||
animation: trance 5s linear infinite;
|
||||
}
|
||||
|
||||
#words {
|
||||
--correct-letter-animation: trance 5s linear infinite;
|
||||
}
|
||||
|
||||
#words.flipped {
|
||||
--untyped-letter-color: var(--sub-color);
|
||||
--correct-letter-animation: none;
|
||||
--untyped-letter-animation: trance 5s linear 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: trance 5s linear infinite;
|
||||
}
|
||||
|
||||
#words.flipped .word.typed letter {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
#words.highlight-off .word letter,
|
||||
#words.highlight-off .word.typed letter {
|
||||
animation: trance 5s linear infinite;
|
||||
}
|
||||
Reference in New Issue
Block a user