monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2026-01-05 06:54:36 +08:00
Code Issues Projects Releases Packages Wiki Activity

refactor: use nav instead of a div

Browse source
This commit is contained in:
Miodec 2023-09-19 23:53:13 +01:00
parent 6610542d5f
commit 724403d361
50 changed files with 285 additions and 294 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/styles/nav.scss
View file

@ -1,4 +1,4 @@
#menu {
nav {
font-size: 1rem;
line-height: 1rem;
color: var(--sub-color);
@ -282,7 +282,7 @@ header {
opacity: 0 !important;
}
#menu {
nav {
color: transparent;
.textButton,

10
frontend/src/styles/z_media-queries.scss
View file

@ -351,7 +351,7 @@
line-height: 1.5rem;
margin-top: -0.1em;
}
#menu {
nav {
gap: 0;
}
#testConfig {
@ -510,7 +510,7 @@
//650px
@media only screen and (max-width: 40.625rem) {
header {
#menu {
nav {
.textButton.account {
.text {
display: none;
@ -745,7 +745,7 @@
display: none;
}
}
// #menu {
// nav {
// .textButton.account {
// .text {
// display: none;
@ -895,7 +895,7 @@
}
header {
#menu {
nav {
font-size: 1rem;
}
}
@ -980,7 +980,7 @@
}
}
header #menu {
header nav {
font-size: 0.75rem;
}

4
frontend/src/ts/commandline/lists/navigation.ts
View file

@ -16,7 +16,7 @@ const commands: MonkeyTypes.Command[] = [
display: "View Leaderboards",
icon: "fa-crown",
exec: (): void => {
$("header #menu .textButton.view-leaderboards").trigger("click");
$("header nav .textButton.view-leaderboards").trigger("click");
},
},
{
@ -42,7 +42,7 @@ const commands: MonkeyTypes.Command[] = [
icon: "fa-user",
alias: "stats",
exec: (): void => {
$("header #menu .textButton.view-account").hasClass("hidden")
$("header nav .textButton.view-account").hasClass("hidden")
? navigate("/login")
: navigate("/account");
},

8
frontend/src/ts/controllers/account-controller.ts
View file

@ -100,7 +100,7 @@ async function getDataAndInit(): Promise<boolean> {
const msg = e.message || e;
Notifications.add("Failed to get user data: " + msg, -1);
$("header #menu .account").css("opacity", 1);
$("header nav .account").css("opacity", 1);
return false;
}
if (ActivePage.get() === "loading") {
@ -110,7 +110,7 @@ async function getDataAndInit(): Promise<boolean> {
}
LoadingPage.updateText("Applying settings...");
const snapshot = DB.getSnapshot() as MonkeyTypes.Snapshot;
$("#menu .textButton.account > .text").text(snapshot.name);
$("nav .textButton.account > .text").text(snapshot.name);
showFavoriteQuoteLength();
ResultFilters.loadTags(snapshot.tags);
@ -264,7 +264,7 @@ if (Auth && ConnectionState.get()) {
}
});
} else {
$("#menu .signInOut").addClass("hidden");
$("nav .signInOut").addClass("hidden");
$("document").ready(async () => {
// await UpdateConfig.loadPromise;
@ -557,7 +557,7 @@ async function signUp(): Promise<void> {
await updateProfile(createdAuthUser.user, { displayName: nname });
await sendVerificationEmail();
AllTimeStats.clear();
$("#menu .textButton.account .text").text(nname);
$("nav .textButton.account .text").text(nname);
LoginPage.hidePreloader();
await loadUser(createdAuthUser.user);
if (TestLogic.notSignedInLastResult !== null) {

74
frontend/src/ts/elements/account-button.ts
View file

@ -13,13 +13,11 @@ export function skipXpBreakdown(): void {
export function loading(state: boolean): void {
if (state) {
$("header #menu .account").css("opacity", 1).css("pointer-events", "none");
$("header nav .account").css("opacity", 1).css("pointer-events", "none");
if (usingAvatar) {
$("header #menu .account .loading")
.css("opacity", 1)
.removeClass("hidden");
$("header #menu .account .avatar")
$("header nav .account .loading").css("opacity", 1).removeClass("hidden");
$("header nav .account .avatar")
.stop(true, true)
.css({ opacity: 1 })
.animate(
@ -28,11 +26,11 @@ export function loading(state: boolean): void {
},
100,
() => {
$("header #menu .account .avatar").addClass("hidden");
$("header nav .account .avatar").addClass("hidden");
}
);
} else {
$("header #menu .account .loading")
$("header nav .account .loading")
.stop(true, true)
.removeClass("hidden")
.css({ opacity: 0 })
@ -42,7 +40,7 @@ export function loading(state: boolean): void {
},
100
);
$("header #menu .account .user")
$("header nav .account .user")
.stop(true, true)
.css({ opacity: 1 })
.animate(
@ -51,16 +49,16 @@ export function loading(state: boolean): void {
},
100,
() => {
$("header #menu .account .user").addClass("hidden");
$("header nav .account .user").addClass("hidden");
}
);
}
} else {
$("header #menu .account").css("opacity", 1).css("pointer-events", "auto");
$("header nav .account").css("opacity", 1).css("pointer-events", "auto");
if (usingAvatar) {
$("header #menu .account .loading").css("opacity", 1).addClass("hidden");
$("header #menu .account .avatar")
$("header nav .account .loading").css("opacity", 1).addClass("hidden");
$("header nav .account .avatar")
.stop(true, true)
.removeClass("hidden")
.css({ opacity: 0 })
@ -71,7 +69,7 @@ export function loading(state: boolean): void {
100
);
} else {
$("header #menu .account .loading")
$("header nav .account .loading")
.stop(true, true)
.css({ opacity: 1 })
.animate(
@ -80,10 +78,10 @@ export function loading(state: boolean): void {
},
100,
() => {
$("header #menu .account .loading").addClass("hidden");
$("header nav .account .loading").addClass("hidden");
}
);
$("header #menu .account .user")
$("header nav .account .user")
.stop(true, true)
.removeClass("hidden")
.css({ opacity: 0 })
@ -104,8 +102,8 @@ export async function update(
): Promise<void> {
if (Auth?.currentUser) {
if (xp !== undefined) {
$("header #menu .level").text(Math.floor(Misc.getLevel(xp)));
$("header #menu .bar").css({
$("header nav .level").text(Math.floor(Misc.getLevel(xp)));
$("header nav .bar").css({
width: (Misc.getLevel(xp) % 1) * 100 + "%",
});
}
@ -113,22 +111,22 @@ export async function update(
Misc.getDiscordAvatarUrl(discordId, discordAvatar).then(
(discordAvatarUrl) => {
if (discordAvatarUrl) {
$("header #menu .account .avatar").css(
$("header nav .account .avatar").css(
"background-image",
`url(${discordAvatarUrl})`
);
usingAvatar = true;
$("header #menu .account .user").addClass("hidden");
$("header #menu .account .avatar").removeClass("hidden");
$("header nav .account .user").addClass("hidden");
$("header nav .account .avatar").removeClass("hidden");
}
}
);
} else {
$("header #menu .account .avatar").addClass("hidden");
$("header #menu .account .user").removeClass("hidden");
$("header nav .account .avatar").addClass("hidden");
$("header nav .account .user").removeClass("hidden");
}
$("#menu .textButton.account")
$("nav .textButton.account")
.removeClass("hidden")
.css({ opacity: 0 })
.animate(
@ -138,7 +136,7 @@ export async function update(
125
);
} else {
$("#menu .textButton.account")
$("nav .textButton.account")
.css({ opacity: 1 })
.animate(
{
@ -146,7 +144,7 @@ export async function update(
},
125,
() => {
$("#menu .textButton.account").addClass("hidden");
$("nav .textButton.account").addClass("hidden");
}
);
}
@ -165,12 +163,12 @@ export async function updateXpBar(
if (!snapshot) return;
if (skipBreakdown) {
$("#menu .level").text(Math.floor(Misc.getLevel(snapshot.xp)));
$("#menu .xpBar")
$("nav .level").text(Math.floor(Misc.getLevel(snapshot.xp)));
$("nav .xpBar")
.stop(true, true)
.css("opacity", 1)
.animate({ opacity: 0 }, SlowTimer.get() ? 0 : 250, () => {
$("#menu .xpBar .xpGain").text(``);
$("nav .xpBar .xpGain").text(``);
});
return;
}
@ -180,12 +178,12 @@ export async function updateXpBar(
await Promise.all([xpBarPromise, xpBreakdownPromise]);
await Misc.sleep(2000);
$("#menu .level").text(Math.floor(Misc.getLevel(snapshot.xp)));
$("#menu .xpBar")
$("nav .level").text(Math.floor(Misc.getLevel(snapshot.xp)));
$("nav .xpBar")
.stop(true, true)
.css("opacity", 1)
.animate({ opacity: 0 }, SlowTimer.get() ? 0 : 250, () => {
$("#menu .xpBar .xpGain").text(``);
$("nav .xpBar .xpGain").text(``);
});
}
@ -194,13 +192,13 @@ async function animateXpBreakdown(
breakdown?: Record<string, number>
): Promise<void> {
if (!breakdown) {
$("#menu .xpBar .xpGain").text(`+${addedXp}`);
$("nav .xpBar .xpGain").text(`+${addedXp}`);
return;
}
const delay = 1000;
let total = 0;
const xpGain = $("#menu .xpBar .xpGain");
const xpBreakdown = $("#menu .xpBar .xpBreakdown");
const xpGain = $("nav .xpBar .xpGain");
const xpBreakdown = $("nav .xpBar .xpBreakdown");
xpBreakdown.empty();
async function append(string: string): Promise<void> {
@ -355,10 +353,10 @@ async function animateXpBar(
): Promise<void> {
const difference = endingLevel - startingLevel;
$("#menu .xpBar").stop(true, true).css("opacity", 0);
$("nav .xpBar").stop(true, true).css("opacity", 0);
await Misc.promiseAnimation(
$("#menu .xpBar"),
$("nav .xpBar"),
{
opacity: "1",
},
@ -366,7 +364,7 @@ async function animateXpBar(
"linear"
);
const barEl = $("#menu .xpBar .bar");
const barEl = $("nav .xpBar .bar");
barEl.css("width", `${(startingLevel % 1) * 100}%`);
@ -444,7 +442,7 @@ async function animateXpBar(
async function flashLevel(): Promise<void> {
const themecolors = await getAll();
const barEl = $("#menu .level");
const barEl = $("nav .level");
barEl.text(parseInt(barEl.text()) + 1);

6
frontend/src/ts/elements/alerts.ts
View file

@ -337,9 +337,9 @@ function fillNotifications(): void {
export function setNotificationBubbleVisible(tf: boolean): void {
if (tf) {
$("header #menu .showAlerts .notificationBubble").removeClass("hidden");
$("header nav .showAlerts .notificationBubble").removeClass("hidden");
} else {
$("header #menu .showAlerts .notificationBubble").addClass("hidden");
$("header nav .showAlerts .notificationBubble").addClass("hidden");
}
}
@ -430,7 +430,7 @@ $("#alertsPopupWrapper .accountAlerts").on("click", ".deleteAll", () => {
}
});
$("header #menu .showAlerts").on("click", () => {
$("header nav .showAlerts").on("click", () => {
show();
});

2
frontend/src/ts/elements/leaderboards.ts
View file

@ -881,7 +881,7 @@ $(document).on("keydown", (event) => {
}
});
$("header #menu").on("click", ".textButton", (e) => {
$("header nav").on("click", ".textButton", (e) => {
if ($(e.currentTarget).hasClass("leaderboards")) {
show();
}

2
frontend/src/ts/popups/google-sign-up-popup.ts
View file

@ -108,7 +108,7 @@ async function apply(): Promise<void> {
await sendEmailVerification(signedInUser.user);
AllTimeStats.clear();
Notifications.add("Account created", 1);
$("#menu .textButton.account .text").text(name);
$("nav .textButton.account .text").text(name);
LoginPage.enableInputs();
LoginPage.hidePreloader();
await AccountController.loadUser(signedInUser.user);

2
frontend/src/ts/popups/simple-popups.ts
View file

@ -579,7 +579,7 @@ list["updateName"] = new SimplePopup(
reloadAfter(2);
}
}
$("#menu .textButton.account .text").text(newName);
$("nav .textButton.account .text").text(newName);
return {
status: 1,

2
frontend/src/ts/test/test-logic.ts
View file

@ -1578,7 +1578,7 @@ $("#popups").on(
}
);
$("header").on("click", "#menu #startTestButton, .logo", () => {
$("header").on("click", "nav #startTestButton, .logo", () => {
if (ActivePage.get() === "test") restart();
});

4
frontend/static/funbox/crt.css
View file

@ -100,8 +100,8 @@ body.crtmode .logo .icon {
drop-shadow(-3px 0px 0px var(--crt-main-color-glow));
}
body.crtmode .avatars,
body.crtmode #menu .account .avatar,
body.crtmode #menu .account .levelAndBar,
body.crtmode nav .account .avatar,
body.crtmode nav .account .levelAndBar,
body.crtmode header.focus .logo .icon {
filter: drop-shadow(3px 0px 1px var(--crt-sub-color-glow))
drop-shadow(-3px 0px 0px var(--crt-sub-color-glow));

11
frontend/static/html/header.html
View file

@ -43,7 +43,7 @@
monkeytype
</h1>
</a>
<div id="menu">
<nav>
<a
id="startTestButton"
class="textButton view-start"
@ -133,12 +133,5 @@
<i class="fas fa-fw fa-sign-in-alt"></i>
</div>
</button>
</div>
<!-- <div
class="signOut hidden"
style="grid-column: 3/4; grid-row: 1/2"
>
<i class="fas fa-sign-out-alt"></i>
sign out
</div> -->
</nav>
</header>

6
frontend/static/themes/9009.css
View file

@ -28,14 +28,14 @@ key {
background-color: var(--main-color);
}
#menu .textButton {
nav .textButton {
color: var(--main-color);
}
#menu .textButton:nth-child(1) {
nav .textButton:nth-child(1) {
color: var(--error-color);
}
#menu .textButton:nth-child(4) {
nav .textButton:nth-child(4) {
color: var(--caret-color);
}

12
frontend/static/themes/aether.css
View file

@ -11,23 +11,23 @@
--colorful-error-extra-color: #e3002b;
}
#menu .textButton:nth-child(1) {
nav .textButton:nth-child(1) {
color: #e4002b;
}
#menu .textButton:nth-child(2) {
nav .textButton:nth-child(2) {
color: #c53562;
}
#menu .textButton:nth-child(3) {
nav .textButton:nth-child(3) {
color: #95549e;
}
#menu .textButton:nth-child(4) {
nav .textButton:nth-child(4) {
color: #6744a1;
}
#menu .textButton:nth-child(5),
#menu .textButton:nth-child(6) {
nav .textButton:nth-child(5),
nav .textButton:nth-child(6) {
color: #393c73;
}

2
frontend/static/themes/aurora.css
View file

@ -63,7 +63,7 @@ header .button.discord.dotHidden::after {
.logo .bottom,
header .config .group .buttons .textButton.active,
#result .stats .group .bottom,
#menu .textButton:hover,
nav .textButton:hover,
header .config .group .buttons .textButton:hover,
a:hover,
#words.flipped .word {

12
frontend/static/themes/beach.css
View file

@ -11,11 +11,11 @@
--colorful-error-extra-color: #ff6f69;
}
#menu .textButton:nth-child(1),
#menu .textButton:nth-child(2),
#menu .textButton:nth-child(3),
#menu .textButton:nth-child(4),
#menu .textButton:nth-child(5),
#menu .textButton:nth-child(6) {
nav .textButton:nth-child(1),
nav .textButton:nth-child(2),
nav .textButton:nth-child(3),
nav .textButton:nth-child(4),
nav .textButton:nth-child(5),
nav .textButton:nth-child(6) {
color: #ff6f69;
}

2
frontend/static/themes/bingsu.css
View file

@ -16,6 +16,6 @@
border-bottom: double 4px var(--error-color);
} */
#menu .textButton:nth-child(1) {
nav .textButton:nth-child(1) {
color: var(--caret-color);
}

44
frontend/static/themes/chaos_theory.css
View file

@ -73,9 +73,9 @@ footer .leftright .right .current-theme .text {
align-content: right;
}
header.focus #menu .textButton,
header.focus #menu:before,
header.focus #menu:after {
header.focus nav .textButton,
header.focus nav:before,
header.focus nav:after {
background: var(--sub-color);
-webkit-transform: rotateY(180deg) !important;
}
@ -98,85 +98,85 @@ footer .leftright .right .current-theme:hover .fas.fa-fw.fa-palette {
-webkit-transform: rotateY(180deg);
transition: 0.5s;
}
#menu {
nav {
gap: 0.5rem;
}
#menu .textButton {
nav .textButton {
border-radius: 10rem i !important;
color: var(--bg-color);
transition: 0.5s;
}
#menu .textButton:nth-child(1) {
nav .textButton:nth-child(1) {
background: #ab92e1;
}
#menu .textButton:nth-child(2) {
nav .textButton:nth-child(2) {
background: #f3ea5d;
}
#menu .textButton:nth-child(3) {
nav .textButton:nth-child(3) {
background: #7ae1bf;
}
#menu .textButton:nth-child(4) {
nav .textButton:nth-child(4) {
background: #ff5869;
}
#menu .textButton:nth-child(5) {
nav .textButton:nth-child(5) {
background: #fc76d9;
}
#menu .textButton:nth-child(6) {
nav .textButton:nth-child(6) {
background: #fc76d9;
}
#menu .textButton:nth-child(7) {
nav .textButton:nth-child(7) {
background: #ab92e1;
}
#menu .textButton:nth-child(8) {
nav .textButton:nth-child(8) {
background: #f3ea5d;
}
body.crtmode {
#menu .textButton:nth-child(1) {
nav .textButton:nth-child(1) {
box-shadow: 3px 0 1px color-mix(in srgb, #ab92e1 20%, transparent),
-3px 0 color-mix(in srgb, #ab92e1 30%, transparent), 0 0 3px;
}
#menu .textButton:nth-child(2) {
nav .textButton:nth-child(2) {
box-shadow: 3px 0 1px color-mix(in srgb, #f3ea5d 20%, transparent),
-3px 0 color-mix(in srgb, #f3ea5d 30%, transparent), 0 0 3px;
}
#menu .textButton:nth-child(3) {
nav .textButton:nth-child(3) {
box-shadow: 3px 0 1px color-mix(in srgb, #7ae1bf 20%, transparent),
-3px 0 color-mix(in srgb, #7ae1bf 30%, transparent), 0 0 3px;
}
#menu .textButton:nth-child(4) {
nav .textButton:nth-child(4) {
box-shadow: 3px 0 1px color-mix(in srgb, #ff5869 20%, transparent),
-3px 0 color-mix(in srgb, #ff5869 30%, transparent), 0 0 3px;
}
#menu .textButton:nth-child(5) {
nav .textButton:nth-child(5) {
box-shadow: 3px 0 1px color-mix(in srgb, #fc76d9 20%, transparent),
-3px 0 color-mix(in srgb, #fc76d9 30%, transparent), 0 0 3px;
}
#menu .textButton:nth-child(6) {
nav .textButton:nth-child(6) {
box-shadow: 3px 0 1px color-mix(in srgb, #fc76d9 20%, transparent),
-3px 0 color-mix(in srgb, #fc76d9 30%, transparent), 0 0 3px;
}
#menu .textButton:nth-child(7) {
nav .textButton:nth-child(7) {
box-shadow: 3px 0 1px color-mix(in srgb, #ab92e1 20%, transparent),
-3px 0 color-mix(in srgb, #ab92e1 30%, transparent), 0 0 3px;
}
#menu .textButton:nth-child(8) {
nav .textButton:nth-child(8) {
box-shadow: 3px 0 1px color-mix(in srgb, #f3ea5d 20%, transparent),
-3px 0 color-mix(in srgb, #f3ea5d 30%, transparent), 0 0 3px;
}
@ -187,7 +187,7 @@ body.crtmode {
drop-shadow(-3px 0px 0px var(--crt-main-color-glow));
}
header.focus #menu .textButton {
header.focus nav .textButton {
box-shadow: 3px 0 1px var(--crt-sub-color-glow),
-3px 0 var(--crt-sub-color-glow);
}

12
frontend/static/themes/desert_oasis.css
View file

@ -11,23 +11,23 @@
--colorful-error-extra-color: #4e7a27;
}
#menu .textButton:nth-child(1) {
nav .textButton:nth-child(1) {
color: #76bb40;
}
#menu .textButton:nth-child(2) {
nav .textButton:nth-child(2) {
color: #76bb40;
}
#menu .textButton:nth-child(3) {
nav .textButton:nth-child(3) {
color: #76bb40;
}
#menu .textButton:nth-child(4) {
nav .textButton:nth-child(4) {
color: #76bb40;
}
#menu .textButton:nth-child(5),
#menu .textButton:nth-child(6) {
nav .textButton:nth-child(5),
nav .textButton:nth-child(6) {
color: #76bb40;
}

16
frontend/static/themes/dmg.css
View file

@ -11,35 +11,35 @@
--colorful-error-extra-color: #306230;
}
#menu {
nav {
gap: 0.5rem;
}
header.focus #menu .textButton {
header.focus nav .textButton {
background: var(--bg-color);
size: 1rem;
}
header.focus #menu .textButton:nth-child(1) {
header.focus nav .textButton:nth-child(1) {
background: #e34c6c;
}
header.focus #menu:before,
header.focus #menu:after {
header.focus nav:before,
header.focus nav:after {
background: var(--sub-color);
}
#menu .textButton {
nav .textButton {
border-radius: 10rem !important;
color: var(--bg-color);
background: var(--main-color);
}
body.crtmode {
#menu .textButton {
nav .textButton {
box-shadow: 3px 0 1px var(--crt-main-color-glow),
-3px 0 var(--crt-main-color-glow), 0 0 3px;
}
header.focus #menu .textButton {
header.focus nav .textButton {
box-shadow: none;
&:nth-child(1) {
box-shadow: 3px 0 1px color-mix(in srgb, #e34c6c 20%, transparent),

52
frontend/static/themes/dots.css
View file

@ -11,22 +11,22 @@
--colorful-error-extra-color: #791717;
}
#menu {
nav {
gap: 0.5rem;
}
header.focus #menu .textButton,
header.focus #menu:before,
header.focus #menu:after {
header.focus nav .textButton,
header.focus nav:before,
header.focus nav:after {
background: var(--sub-color);
}
#menu .textButton {
nav .textButton {
border-radius: 10rem !important;
color: #121520;
}
/* #menu:before{
/* nav:before{
content: "";
background: #f94348;
width: 1.25rem;
@ -35,47 +35,47 @@ header.focus #menu:after {
border-radius: 10rem;
} */
#menu .textButton:nth-child(1) {
nav .textButton:nth-child(1) {
background: #f94348;
}
#menu .textButton:nth-child(2) {
nav .textButton:nth-child(2) {
background: #9261ff;
}
#menu .textButton:nth-child(3) {
nav .textButton:nth-child(3) {
background: #3cc5f8;
}
#menu .textButton:nth-child(4) {
nav .textButton:nth-child(4) {
background: #4acb8a;
}
header.focus #menu .textButton:nth-child(6) {
header.focus nav .textButton:nth-child(6) {
background: transparent !important;
}
#menu .textButton:nth-child(6) {
nav .textButton:nth-child(6) {
color: var(--sub-color);
}
#menu .textButton:nth-child(6):hover {
nav .textButton:nth-child(6):hover {
color: var(--text-color);
}
#menu .textButton:nth-child(7) {
nav .textButton:nth-child(7) {
background: #ffd543;
}
#menu .textButton:nth-child(8) {
nav .textButton:nth-child(8) {
background: #ff9349;
}
/* #menu .textButton:nth-child(8) {
/* nav .textButton:nth-child(8) {
background: #f94348;
} */
/* #menu:after{
/* nav:after{
content: "";
background: #ff9349;
width: 1.25rem;
@ -84,46 +84,46 @@ header.focus #menu .textButton:nth-child(6) {
border-radius: 10rem;
} */
header.focus #menu .textButton.discord::after {
header.focus nav .textButton.discord::after {
border-color: transparent;
}
#menu .textButton.account .xpBar {
nav .textButton.account .xpBar {
bottom: -0.75rem !important;
}
body.crtmode {
#menu .textButton:nth-child(1) {
nav .textButton:nth-child(1) {
box-shadow: 3px 0 1px color-mix(in srgb, #f94348 20%, transparent),
-3px 0 color-mix(in srgb, #f94348 30%, transparent), 0 0 3px;
}
#menu .textButton:nth-child(2) {
nav .textButton:nth-child(2) {
box-shadow: 3px 0 1px color-mix(in srgb, #9261ff 20%, transparent),
-3px 0 color-mix(in srgb, #9261ff 30%, transparent), 0 0 3px;
}
#menu .textButton:nth-child(3) {
nav .textButton:nth-child(3) {
box-shadow: 3px 0 1px color-mix(in srgb, #3cc5f8 20%, transparent),
-3px 0 color-mix(in srgb, #3cc5f8 30%, transparent), 0 0 3px;
}
#menu .textButton:nth-child(4) {
nav .textButton:nth-child(4) {
box-shadow: 3px 0 1px color-mix(in srgb, #4acb8a 20%, transparent),
-3px 0 color-mix(in srgb, #4acb8a 30%, transparent), 0 0 3px;
}
#menu .textButton:nth-child(7) {
nav .textButton:nth-child(7) {
box-shadow: 3px 0 1px color-mix(in srgb, #ffd543 20%, transparent),
-3px 0 color-mix(in srgb, #ffd543 30%, transparent), 0 0 3px;
}
#menu .textButton:nth-child(8) {
nav .textButton:nth-child(8) {
box-shadow: 3px 0 1px color-mix(in srgb, #ff9349 20%, transparent),
-3px 0 color-mix(in srgb, #ff9349 30%, transparent), 0 0 3px;
}
header.focus #menu .textButton {
header.focus nav .textButton {
box-shadow: 3px 0 1px var(--crt-sub-color-glow),
-3px 0 var(--crt-sub-color-glow);

12
frontend/static/themes/dracula.css
View file

@ -11,26 +11,26 @@
--colorful-error-extra-color: #f1fa8c;
}
#menu .textButton:nth-child(1) {
nav .textButton:nth-child(1) {
color: #ec75c4;
}
#menu .textButton:nth-child(2) {
nav .textButton:nth-child(2) {
color: #8be9fd;
}
#menu .textButton:nth-child(3) {
nav .textButton:nth-child(3) {
color: #50fa7b;
}
#menu .textButton:nth-child(4) {
nav .textButton:nth-child(4) {
color: #f1fa8c;
}
#menu .textButton:nth-child(5) {
nav .textButton:nth-child(5) {
color: #ffb86c;
}
#menu .textButton:nth-child(6) {
nav .textButton:nth-child(6) {
color: #ffb86c;
}

12
frontend/static/themes/dualshot.css
View file

@ -11,26 +11,26 @@
--colorful-error-extra-color: #ac1823;
}
#menu .textButton:nth-child(1) {
nav .textButton:nth-child(1) {
color: #2884bb;
}
#menu .textButton:nth-child(2) {
nav .textButton:nth-child(2) {
color: #25a5a9;
}
#menu .textButton:nth-child(3) {
nav .textButton:nth-child(3) {
color: #de9c24;
}
#menu .textButton:nth-child(4) {
nav .textButton:nth-child(4) {
color: #d82231;
}
#menu .textButton:nth-child(5) {
nav .textButton:nth-child(5) {
color: #212222;
}
#menu .textButton:nth-child(6) {
nav .textButton:nth-child(6) {
color: #212222;
}

2
frontend/static/themes/fire.css
View file

@ -63,7 +63,7 @@ header .button.discord.dotHidden::after {
.logo .bottom,
header .config .group .buttons .textButton.active,
#result .stats .group .bottom,
#menu .textButton:hover,
nav .textButton:hover,
header .config .group .buttons .textButton:hover,
a:hover,
#words.flipped .word {

4
frontend/static/themes/fleuriste.css
View file

@ -11,9 +11,9 @@
--colorful-error-extra-color: #bd4c4c;
}
/* #menu .textButton:nth-child(1, 3, 5) {
/* nav .textButton:nth-child(1, 3, 5) {
background: #405a52;
}
#menu .textButton:nth-child(2, 4) {
nav .textButton:nth-child(2, 4) {
background: #64374d;
} */

12
frontend/static/themes/froyo.css
View file

@ -11,23 +11,23 @@
--colorful-error-extra-color: #d56558;
}
#menu .textButton:nth-child(1) {
nav .textButton:nth-child(1) {
color: #ff7e73;
}
#menu .textButton:nth-child(2) {
nav .textButton:nth-child(2) {
color: #f5c370;
}
#menu .textButton:nth-child(3) {
nav .textButton:nth-child(3) {
color: #08d9a3;
}
#menu .textButton:nth-child(4) {
nav .textButton:nth-child(4) {
color: #0ca5e2;
}
#menu .textButton:nth-child(5),
#menu .textButton:nth-child(6) {
nav .textButton:nth-child(5),
nav .textButton:nth-child(6) {
color: #875ac6;
}

12
frontend/static/themes/fruit_chew.css
View file

@ -11,23 +11,23 @@
--colorful-error-extra-color: #a62626;
}
#menu .textButton:nth-child(1) {
nav .textButton:nth-child(1) {
color: #a6bf50;
}
#menu .textButton:nth-child(2) {
nav .textButton:nth-child(2) {
color: #c3921a;
}
#menu .textButton:nth-child(3) {
nav .textButton:nth-child(3) {
color: #b92221;
}
#menu .textButton:nth-child(4) {
nav .textButton:nth-child(4) {
color: #88b6ce;
}
#menu .textButton:nth-child(5),
#menu .textButton:nth-child(6) {
nav .textButton:nth-child(5),
nav .textButton:nth-child(6) {
color: #661968;
}

12
frontend/static/themes/future_funk.css
View file

@ -11,23 +11,23 @@
--colorful-error-extra-color: #bd1c66;
}
#menu .textButton:nth-child(1) {
nav .textButton:nth-child(1) {
color: #f04e98;
}
#menu .textButton:nth-child(2) {
nav .textButton:nth-child(2) {
color: #f8bed6;
}
#menu .textButton:nth-child(3) {
nav .textButton:nth-child(3) {
color: #f6eb61;
}
#menu .textButton:nth-child(4) {
nav .textButton:nth-child(4) {
color: #a4dbe8;
}
#menu .textButton:nth-child(5),
#menu .textButton:nth-child(6) {
nav .textButton:nth-child(5),
nav .textButton:nth-child(6) {
color: #a266ed;
}

12
frontend/static/themes/graen.css
View file

@ -11,11 +11,11 @@
--colorful-error-extra-color: #5f0715;
}
#menu .textButton:nth-child(1),
#menu .textButton:nth-child(2),
#menu .textButton:nth-child(3),
#menu .textButton:nth-child(4),
#menu .textButton:nth-child(5),
#menu .textButton:nth-child(6) {
nav .textButton:nth-child(1),
nav .textButton:nth-child(2),
nav .textButton:nth-child(3),
nav .textButton:nth-child(4),
nav .textButton:nth-child(5),
nav .textButton:nth-child(6) {
color: #601420;
}

2
frontend/static/themes/grape.css
View file

@ -63,7 +63,7 @@ header .button.discord.dotHidden::after {
.logo .bottom,
header .config .group .buttons .textButton.active,
#result .stats .group .bottom,
#menu .textButton:hover,
nav .textButton:hover,
header .config .group .buttons .textButton:hover,
a:hover,
#words.flipped .word {

12
frontend/static/themes/horizon.css
View file

@ -11,23 +11,23 @@
--colorful-error-extra-color: #d55170;
}
#menu .textButton:nth-child(1) {
nav .textButton:nth-child(1) {
color: #d55170;
}
#menu .textButton:nth-child(2) {
nav .textButton:nth-child(2) {
color: #e4a88a;
}
#menu .textButton:nth-child(3) {
nav .textButton:nth-child(3) {
color: #db886f;
}
#menu .textButton:nth-child(4) {
nav .textButton:nth-child(4) {
color: #db887a;
}
#menu .textButton:nth-child(5),
#menu .textButton:nth-child(6) {
nav .textButton:nth-child(5),
nav .textButton:nth-child(6) {
color: #ffc819;
}

6
frontend/static/themes/lavender.css
View file

@ -11,18 +11,18 @@
--colorful-error-extra-color: #7e2a33;
}
#menu .textButton {
nav .textButton {
border-radius: 10rem !important;
background: var(--text-color);
color: var(--main-color);
}
#menu .textButton:hover {
nav .textButton:hover {
color: var(--bg-color);
}
body.crtmode {
#menu .textButton {
nav .textButton {
box-shadow: 3px 0 1px var(--crt-text-color-glow),
-3px 0 var(--crt-text-color-glow), 0 0 3px;
}

4
frontend/static/themes/lil_dragon.css
View file

@ -11,10 +11,10 @@
--colorful-error-extra-color: #f279c2;
}
#menu .textButton {
nav .textButton {
color: #ba96db;
}
#menu .textButton:hover {
nav .textButton:hover {
color: #212b43;
}

10
frontend/static/themes/metropolis.css
View file

@ -15,22 +15,22 @@ header .logo .bottom {
color: #f4bc46;
}
#menu .textButton:nth-child(1) {
nav .textButton:nth-child(1) {
color: #d44729;
}
#menu .textButton:nth-child(2) {
nav .textButton:nth-child(2) {
color: #d44729;
}
#menu .textButton:nth-child(3) {
nav .textButton:nth-child(3) {
color: #d44729;
}
#menu .textButton:nth-child(4) {
nav .textButton:nth-child(4) {
color: #d44729;
}
#menu .textButton:nth-child(5) {
nav .textButton:nth-child(5) {
color: #d44729;
}

12
frontend/static/themes/milkshake.css
View file

@ -11,26 +11,26 @@
--colorful-error-extra-color: #e58c9d;
}
#menu .textButton:nth-child(1) {
nav .textButton:nth-child(1) {
color: #f19dac;
}
#menu .textButton:nth-child(2) {
nav .textButton:nth-child(2) {
color: #f6f4a0;
}
#menu .textButton:nth-child(3) {
nav .textButton:nth-child(3) {
color: #73e4d0;
}
#menu .textButton:nth-child(4) {
nav .textButton:nth-child(4) {
color: #61cfe6;
}
#menu .textButton:nth-child(5) {
nav .textButton:nth-child(5) {
color: #ba96db;
}
#menu .textButton:nth-child(6) {
nav .textButton:nth-child(6) {
color: #ba96db;
}

4
frontend/static/themes/modern_ink.css
View file

@ -11,11 +11,11 @@
--colorful-error-extra-color: #000000;
}
#menu .textButton:nth-child(1) {
nav .textButton:nth-child(1) {
color: #ff0000;
}
#menu .textButton:nth-child(5) {
nav .textButton:nth-child(5) {
color: #ff0000;
}

52
frontend/static/themes/moonlight.css
View file

@ -11,66 +11,66 @@
--colorful-error-color: #b81b2c;
--colorful-error-extra-color: #84131f;
}
#menu {
nav {
gap: 0.5rem;
}
header.focus #menu .textButton,
header.focus #menu:before,
header.focus #menu:after {
header.focus nav .textButton,
header.focus nav:before,
header.focus nav:after {
background: var(--bg-color);
}
#menu .textButton:nth-child(1),
#menu .textButton:nth-child(2),
#menu .textButton:nth-child(3),
#menu .textButton:nth-child(4) {
nav .textButton:nth-child(1),
nav .textButton:nth-child(2),
nav .textButton:nth-child(3),
nav .textButton:nth-child(4) {
border-radius: rem !important;
color: #191f28 !important;
background: #c69f68;
}
#menu .textButton:nth-child(1):hover,
#menu
nav .textButton:nth-child(1):hover,
nav
.textButton:nth-child(2):hover
#menu
nav
.textButton:nth-child(3):hover
#menu
nav
.textButton:nth-child(4):hover {
border-radius: rem !important;
color: #4b5975 !important;
transition: 0.25s;
}
/* #menu .textButton:nth-child(1) {
/* nav .textButton:nth-child(1) {
background: #c69f68;
}
#menu .textButton:nth-child(2) {
nav .textButton:nth-child(2) {
background: #c69f68;
}
#menu .textButton:nth-child(3) {
nav .textButton:nth-child(3) {
background: #c69f68;
}
#menu .textButton:nth-child(4) {
nav .textButton:nth-child(4) {
background: #c69f68;
}
#menu .textButton:nth-child(5) {
nav .textButton:nth-child(5) {
background: #c69f68;
}
#menu .textButton:nth-child(6),
#menu .textButton:nth-child(7),
#menu .textButton:nth-child(8) {
nav .textButton:nth-child(6),
nav .textButton:nth-child(7),
nav .textButton:nth-child(8) {
background: #c69f68;
} */
header.focus #menu .textButton.discord::after {
header.focus nav .textButton.discord::after {
border-color: transparent;
}
body.crtmode {
#menu .textButton:nth-child(1),
#menu .textButton:nth-child(2),
#menu .textButton:nth-child(3),
#menu .textButton:nth-child(4) {
nav .textButton:nth-child(1),
nav .textButton:nth-child(2),
nav .textButton:nth-child(3),
nav .textButton:nth-child(4) {
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.focus #menu .textButton {
header.focus nav .textButton {
box-shadow: none;
}
}

10
frontend/static/themes/mr_sleeves.css
View file

@ -19,19 +19,19 @@ header .config .group .buttons .textButton.active {
color: #daa99b;
}
/* #menu .textButton:nth-child(1){
/* nav .textButton:nth-child(1){
color: #daa99b;
}
#menu .textButton:nth-child(2){
nav .textButton:nth-child(2){
color: #daa99b;
}
#menu .textButton:nth-child(3){
nav .textButton:nth-child(3){
color: #8fadc9;
}
#menu .textButton:nth-child(4),
#menu .textButton:nth-child(5){
nav .textButton:nth-child(4),
nav .textButton:nth-child(5){
color: #8fadc9;
} */

12
frontend/static/themes/oblivion.css
View file

@ -11,23 +11,23 @@
--colorful-error-extra-color: #9e3423;
}
#menu .textButton:nth-child(1) {
nav .textButton:nth-child(1) {
color: #9a90b4;
}
#menu .textButton:nth-child(2) {
nav .textButton:nth-child(2) {
color: #8db14b;
}
#menu .textButton:nth-child(3) {
nav .textButton:nth-child(3) {
color: #fca321;
}
#menu .textButton:nth-child(4) {
nav .textButton:nth-child(4) {
color: #2984a5;
}
#menu .textButton:nth-child(5),
#menu .textButton:nth-child(6) {
nav .textButton:nth-child(5),
nav .textButton:nth-child(6) {
color: #dd452e;
}

2
frontend/static/themes/purpurite.css
View file

@ -11,7 +11,7 @@
--colorful-error-extra-color: #ff6666;
}
#menu .textButton {
nav .textButton {
color: #99ffdd;
}

12
frontend/static/themes/retrocast.css
View file

@ -11,23 +11,23 @@
--colorful-error-extra-color: #c04455;
}
#menu .textButton:nth-child(1) {
nav .textButton:nth-child(1) {
color: #88dbdf;
}
#menu .textButton:nth-child(2) {
nav .textButton:nth-child(2) {
color: #88dbdf;
}
#menu .textButton:nth-child(3) {
nav .textButton:nth-child(3) {
color: #88dbdf;
}
#menu .textButton:nth-child(4) {
nav .textButton:nth-child(4) {
color: #ff585d;
}
#menu .textButton:nth-child(5),
#menu .textButton:nth-child(6) {
nav .textButton:nth-child(5),
nav .textButton:nth-child(6) {
color: #f3e03b;
}

2
frontend/static/themes/rgb.css
View file

@ -93,7 +93,7 @@ header .button.discord.dotHidden::after {
.logo .bottom,
header .config .group .buttons .textButton.active,
#result .stats .group .bottom,
#menu .textButton:hover,
nav .textButton:hover,
header .config .group .buttons .textButton:hover,
a:hover,
#words.flipped .word {

4
frontend/static/themes/sewing_tin.css
View file

@ -11,10 +11,10 @@
--colorful-error-extra-color: #c6915e;
}
#menu .textButton {
nav .textButton {
color: #f2ce83;
}
#menu .textButton:hover {
nav .textButton:hover {
color: #c6915e;
}

4
frontend/static/themes/sewing_tin_light.css
View file

@ -11,11 +11,11 @@
--colorful-error-extra-color: #f2ce83;
}
#menu .textButton {
nav .textButton {
color: #f2ce83;
}
#menu .textButton:hover {
nav .textButton:hover {
color: #c6915e;
}

2
frontend/static/themes/shadow.css
View file

@ -41,7 +41,7 @@ header .logo .text {
header .config .group .buttons .textButton.active,
#result .stats .group,
#menu .textButton:hover,
nav .textButton:hover,
header .config .group .buttons .textButton:hover,
a:hover {
animation: shadow-repeat 3s linear infinite forwards;

46
frontend/static/themes/snes.css
View file

@ -11,82 +11,82 @@
--colorful-error-extra-color: #7e2a33;
}
#menu {
nav {
gap: 0.5rem;
}
header.focus #menu .textButton,
header.focus #menu:before,
header.focus #menu:after {
header.focus nav .textButton,
header.focus nav:before,
header.focus nav:after {
background: #99989f;
}
#menu .textButton {
nav .textButton {
border-radius: 10rem !important;
color: var(--bg-color);
}
#menu .textButton:nth-child(1) {
nav .textButton:nth-child(1) {
background: #553d94;
}
#menu .textButton:nth-child(2) {
nav .textButton:nth-child(2) {
background: #6851a4;
}
#menu .textButton:nth-child(3) {
nav .textButton:nth-child(3) {
background: #7962b3;
}
#menu .textButton:nth-child(4) {
nav .textButton:nth-child(4) {
background: #8c76c3;
}
#menu .textButton:nth-child(5) {
nav .textButton:nth-child(5) {
background: #9f8ad4;
}
#menu .textButton:nth-child(6),
#menu .textButton:nth-child(7) {
nav .textButton:nth-child(6),
nav .textButton:nth-child(7) {
background: #9f8ad4;
}
#menu .textButton:nth-child(8) {
nav .textButton:nth-child(8) {
background: #a692d7;
}
header.focus #menu .textButton.discord::after {
header.focus nav .textButton.discord::after {
border-color: transparent;
}
body.crtmode {
#menu .textButton:nth-child(1) {
nav .textButton:nth-child(1) {
box-shadow: 3px 0 1px color-mix(in srgb, #553d94 20%, transparent),
-3px 0 color-mix(in srgb, #553d94 30%, transparent), 0 0 3px;
}
#menu .textButton:nth-child(2) {
nav .textButton:nth-child(2) {
box-shadow: 3px 0 1px color-mix(in srgb, #6851a4 20%, transparent),
-3px 0 color-mix(in srgb, #6851a4 30%, transparent), 0 0 3px;
}
#menu .textButton:nth-child(3) {
nav .textButton:nth-child(3) {
box-shadow: 3px 0 1px color-mix(in srgb, #7962b3 20%, transparent),
-3px 0 color-mix(in srgb, #7962b3 30%, transparent), 0 0 3px;
}
#menu .textButton:nth-child(4) {
nav .textButton:nth-child(4) {
box-shadow: 3px 0 1px color-mix(in srgb, #8c76c3 20%, transparent),
-3px 0 color-mix(in srgb, #8c76c3 30%, transparent), 0 0 3px;
}
#menu .textButton:nth-child(5) {
nav .textButton:nth-child(5) {
box-shadow: 3px 0 1px color-mix(in srgb, #9f8ad4 20%, transparent),
-3px 0 color-mix(in srgb, #9f8ad4 30%, transparent), 0 0 3px;
}
#menu .textButton:nth-child(6),
#menu .textButton:nth-child(7) {
nav .textButton:nth-child(6),
nav .textButton:nth-child(7) {
box-shadow: 3px 0 1px color-mix(in srgb, #9f8ad4 20%, transparent),
-3px 0 color-mix(in srgb, #9f8ad4 30%, transparent), 0 0 3px;
}
#menu .textButton:nth-child(8) {
nav .textButton:nth-child(8) {
box-shadow: 3px 0 1px color-mix(in srgb, #a692d7 20%, transparent),
-3px 0 color-mix(in srgb, #a692d7 30%, transparent), 0 0 3px;
}
header.focus #menu .textButton {
header.focus nav .textButton {
box-shadow: 3px 0 1px color-mix(in srgb, #99989f 20%, transparent),
-3px 0 color-mix(in srgb, #99989f 30%, transparent), 0 0 3px;
}

2
frontend/static/themes/stealth.css
View file

@ -10,7 +10,7 @@
--colorful-error-color: #e25303;
--colorful-error-extra-color: #73280c;
}
#menu .textButton:nth-child(4) {
nav .textButton:nth-child(4) {
color: #e25303;
}
#timerNumber {

8
frontend/static/themes/taro.css
View file

@ -16,23 +16,23 @@
border-bottom: dotted 2px var(--text-color);
}
#menu .textButton:nth-child(1) {
nav .textButton:nth-child(1) {
background: var(--caret-color);
border-radius: 50%;
}
#menu .textButton:nth-child(2) {
nav .textButton:nth-child(2) {
background: var(--error-color);
border-radius: 50%;
}
body.crtmode {
#menu .textButton:nth-child(1) {
nav .textButton:nth-child(1) {
box-shadow: 3px 0 1px var(--crt-caret-color-glow),
-3px 0 var(--crt-caret-color-glow);
}
#menu .textButton:nth-child(2) {
nav .textButton:nth-child(2) {
box-shadow: 3px 0 1px var(--crt-error-color-glow),
-3px 0 var(--crt-error-color-glow);
}

6
frontend/static/themes/trackday.css
View file

@ -11,14 +11,14 @@
--colorful-error-extra-color: #bb2525;
}
#menu .textButton:nth-child(1) {
nav .textButton:nth-child(1) {
color: #e0513e;
}
#menu .textButton:nth-child(3) {
nav .textButton:nth-child(3) {
color: #cfcfcf;
}
#menu .textButton:nth-child(2) {
nav .textButton:nth-child(2) {
color: #ccc500;
}

2
frontend/static/themes/trance.css
View file

@ -51,7 +51,7 @@ header .button.discord.dotHidden::after {
.logo .bottom,
header .config .group .buttons .textButton.active,
#result .stats .group .bottom,
#menu .textButton:hover,
nav .textButton:hover,
header .config .group .buttons .textButton:hover,
a:hover,
#words.flipped .word {