bugfix

2023-09-23 17:15:53 +09:00 · 2023-09-23 17:15:53 +09:00 · 6e4b8d88fd
parent aec6bccbdf
commit 6e4b8d88fd
4 changed files with 232 additions and 137 deletions
--- a/packages/frontend/src/components/MkChannelFollowButton.vue
+++ b/packages/frontend/src/components/MkChannelFollowButton.vue
@ -4,37 +4,47 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->

 <template>
-<button
-	class="_button"
-	:class="[$style.root, { [$style.wait]: wait, [$style.active]: isFollowing, [$style.full]: full },[$style.text,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]]"
-	:disabled="wait"
-	@click="onClick"
->
-	<template v-if="!wait">
-		<template v-if="isFollowing">
-			<span v-if="full" :class="[$style.text,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]">{{ i18n.ts.unfollow }}</span><i class="ti ti-minus"></i>
-		</template>
-		<template v-else>
-			<span v-if="full" :class="[$style.text,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]">{{ i18n.ts.follow }}</span><i class="ti ti-plus"></i>
-		</template>
-	</template>
-	<template v-else>
-		<span v-if="full" :class="[$style.text,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]">{{ i18n.ts.processing }}</span><MkLoading :em="true"/>
-	</template>
-</button>
+  <button
+      class="_button"
+      :class="[$style.root, { [$style.wait]: wait, [$style.active]: isFollowing, [$style.full]: full },[$style.text,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]]"
+      :disabled="wait"
+      @click="onClick"
+  >
+    <template v-if="!wait">
+      <template v-if="isFollowing">
+        <span v-if="full"
+              :class="[$style.text,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]">{{
+            i18n.ts.unfollow
+          }}</span><i class="ti ti-minus"></i>
+      </template>
+      <template v-else>
+        <span v-if="full"
+              :class="[$style.text,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]">{{
+            i18n.ts.follow
+          }}</span><i class="ti ti-plus"></i>
+      </template>
+    </template>
+    <template v-else>
+      <span v-if="full"
+            :class="[$style.text,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]">{{
+          i18n.ts.processing
+        }}</span>
+      <MkLoading :em="true"/>
+    </template>
+  </button>
 </template>

 <script lang="ts" setup>
 import {computed, ref, watch} from 'vue';
 import * as os from '@/os.js';
-import { i18n } from '@/i18n.js';
+import {i18n} from '@/i18n.js';
 import {defaultStore} from "@/store.js";

 const props = withDefaults(defineProps<{
-	channel: Record<string, any>;
-	full?: boolean;
+  channel: Record<string, any>;
+  full?: boolean;
 }>(), {
-	full: false,
+  full: false,
 });


@ -74,41 +84,41 @@ const isFollowing = ref<boolean>(props.channel.isFollowing);
 const wait = ref(false);

 async function onClick() {
-	wait.value = true;
+  wait.value = true;

-	try {
-		if (isFollowing.value) {
-			await os.api('channels/unfollow', {
-				channelId: props.channel.id,
-			});
-			isFollowing.value = false;
-		} else {
-			await os.api('channels/follow', {
-				channelId: props.channel.id,
-			});
-			isFollowing.value = true;
-		}
-	} catch (err) {
-		console.error(err);
-	} finally {
-		wait.value = false;
-	}
+  try {
+    if (isFollowing.value) {
+      await os.api('channels/unfollow', {
+        channelId: props.channel.id,
+      });
+      isFollowing.value = false;
+    } else {
+      await os.api('channels/follow', {
+        channelId: props.channel.id,
+      });
+      isFollowing.value = true;
+    }
+  } catch (err) {
+    console.error(err);
+  } finally {
+    wait.value = false;
+  }
 }
 </script>

 <style lang="scss" module>
 .root {
-	position: relative;
-	display: inline-block;
-	font-weight: bold;
-	color: var(--accent);
-	background: transparent;
-	border: solid 1px var(--accent);
-	padding: 0;
-	height: 31px;
-	font-size: 16px;
-	border-radius: 32px;
-	background: #fff;
+  position: relative;
+  display: inline-block;
+  font-weight: bold;
+  color: var(--accent);
+  border: solid 1px var(--accent);
+  padding: 0;
+  height: 31px;
+  font-size: 16px;
+  border-radius: 32px;
+  background: #fff;
+
  &.gamingDark {
    color: black;
    background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
@ -116,8 +126,6 @@ async function onClick() {
    -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
    -moz-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
    animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
  }

  &.gamingLight {
@ -127,40 +135,39 @@ async function onClick() {
    -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
    -moz-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
    animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;

  }
-	&.full {
-		padding: 0 8px 0 12px;
-		font-size: 14px;
-	}

-	&:not(.full) {
-		width: 31px;
-	}
+  &.full {
+    padding: 0 8px 0 12px;
+    font-size: 14px;
+  }

-	&:focus-visible {
-		&:after {
-			content: "";
-			pointer-events: none;
-			position: absolute;
-			top: -5px;
-			right: -5px;
-			bottom: -5px;
-			left: -5px;
-			border: 2px solid var(--focus);
-			border-radius: 32px;
-		}
-	}
+  &:not(.full) {
+    width: 31px;
+  }

-	&:hover {
-		//background: mix($primary, #fff, 20);
-	}
+  &:focus-visible {
+    &:after {
+      content: "";
+      pointer-events: none;
+      position: absolute;
+      top: -5px;
+      right: -5px;
+      bottom: -5px;
+      left: -5px;
+      border: 2px solid var(--focus);
+      border-radius: 32px;
+    }
+  }

-	&:active {
-		//background: mix($primary, #fff, 40);
-	}
+  &:hover {
+    //background: mix($primary, #fff, 20);
+  }
+
+  &:active {
+    //background: mix($primary, #fff, 40);
+  }

  &.active {
    color: var(--fgOnAccent);
@ -177,18 +184,19 @@ async function onClick() {
    }

    &.gamingDark:hover {
-      -webkit-text-fill-color: unset;
+
      color: black;
-      background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);      background-size: 1800% 1800%;
+      background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
+      background-size: 1800% 1800%;
      -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
      -moz-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
      animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
    }

    &.gamingDark:active {
-      -webkit-text-fill-color: unset !important;
-      color: white;
-      background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);      background-size: 1800% 1800%;
+      color: black;
+      background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
+      background-size: 1800% 1800%;
      -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
      -moz-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
      animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
@ -196,7 +204,6 @@ async function onClick() {
    }

    &.gamingLight:hover {
-      -webkit-text-fill-color: unset !important;
      background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
      background-size: 1800% 1800% !important;
      -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
@ -206,9 +213,9 @@ async function onClick() {
    }

    &.gamingLight:active {
-      -webkit-text-fill-color: unset !important;
      color: white;
-      background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);      background-size: 1800% 1800% !important;
+      background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
+      background-size: 1800% 1800% !important;
      -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
      -moz-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
      animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
@ -216,18 +223,18 @@ async function onClick() {
    }

    &.gamingDark {
-      -webkit-text-fill-color: unset !important;
      color: black;
-      background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);      background-size: 1800% 1800%;
+      background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
+      background-size: 1800% 1800%;
      -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
      -moz-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
      animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
    }

    &.gamingLight {
-      -webkit-text-fill-color: unset !important;
      color: white;
-      background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);      background-size: 1800% 1800% !important;
+      background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
+      background-size: 1800% 1800% !important;
      -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
      -moz-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
      animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
@ -242,6 +249,78 @@ async function onClick() {
 }

 .text {
-	margin-right: 6px;
+  margin-right: 6px;
+}
+
+@-webkit-keyframes AnimationLight {
+  0% {
+    background-position: 0% 50%
+  }
+  50% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0% 50%
+  }
+}
+
+@-moz-keyframes AnimationLight {
+  0% {
+    background-position: 0% 50%
+  }
+  50% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0% 50%
+  }
+}
+
+@keyframes AnimationLight {
+  0% {
+    background-position: 0% 50%
+  }
+  50% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0% 50%
+  }
+}
+
+@-webkit-keyframes AnimationDark {
+  0% {
+    background-position: 0% 50%
+  }
+  50% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0% 50%
+  }
+}
+
+@-moz-keyframes AnimationDark {
+  0% {
+    background-position: 0% 50%
+  }
+  50% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0% 50%
+  }
+}
+
+@keyframes AnimationDark {
+  0% {
+    background-position: 0% 50%
+  }
+  50% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0% 50%
+  }
 }
 </style>
--- a/packages/frontend/src/components/MkFollowButton.vue
+++ b/packages/frontend/src/components/MkFollowButton.vue
@ -5,8 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
  <button
      class="_button"
-      :class="[$style.root, { [$style.wait]: wait, [$style.active]: isFollowing || hasPendingFollowRequestFromYou,[$style.gamingDark]: gaming === 'dark' && isFollowing || gaming === 'dark' && hasPendingFollowRequestFromYou,[$style.gamingLight]: gaming === 'light' && isFollowing || gaming === 'light' && hasPendingFollowRequestFromYou
-, [$style.full]: full, [$style.large]: large }]"
+      :class="[$style.root, { [$style.wait]: wait, [$style.active]: isFollowing || hasPendingFollowRequestFromYou, [$style.full]: full, [$style.large]: large },{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'
+,}]"
      :disabled="wait"
      @click="onClick"
  >
@ -46,7 +46,7 @@ SPDX-License-Identifier: AGPL-3.0-only
    </template>
    <template v-else>
      <span v-if="full"
-            :class="$style.text,{[$style.gamingDark]: gaming === 'dark' ,[$style.gamingLight]: gaming === 'light'} ">{{
+            :class="[$style.text,{[$style.gamingDark]: gaming === 'dark' ,[$style.gamingLight]: gaming === 'light'} ]">{{
          i18n.ts.processing
        }}</span>
      <MkLoading :em="true" :colored="false"/>
@ -190,37 +190,54 @@ onBeforeUnmount(() => {
  display: inline-block;
  font-weight: bold;
  color: var(--fgOnWhite);
-  border: solid 1px;
+  border: solid 1px var(--accent);
  padding: 0;
  height: 31px;
  font-size: 16px;
  border-radius: 32px;
  background: #fff;

+
  &.gamingDark {
-    color: black;
-    background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);    background-size: 1800% 1800%;
+    color: black !important;
+    background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
+    background-size: 1800% 1800%;
    -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
    -moz-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
    animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+
  }

  &.gamingLight {
-    color: #dee7e4;
+    color: white !important;
    background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
    background-size: 1800% 1800% !important;
    -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
    -moz-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
    animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-
  }
+
  &.full {
    padding: 0 8px 0 12px;
    font-size: 14px;
+    &.gamingDark {
+      color: black;
+      background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
+      background-size: 1800% 1800%;
+      -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
+      -moz-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
+      animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
+
+    }
+
+    &.gamingLight {
+      color: white;
+      background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
+      background-size: 1800% 1800% !important;
+      -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
+      -moz-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
+      animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
+    }
  }

  &.large {
@ -270,48 +287,48 @@ onBeforeUnmount(() => {
    }

    &.gamingDark:hover {
-      -webkit-text-fill-color: unset;
-      color: white;
-      background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);      background-size: 1800% 1800%;
+      color: black;
+      background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
+      background-size: 1800% 1800%;
      -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
      -moz-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
      animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
    }

    &.gamingDark:active {
-      -webkit-text-fill-color: unset !important;
-      color: white;
-      background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);      background-size: 1800% 1800%;
+      color: black;
+      background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
+      background-size: 1800% 1800%;
      -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
      -moz-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
      animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
-      border-color: white;
+      border-color: black;
    }

    &.gamingLight:hover {
-      -webkit-text-fill-color: unset !important;
      background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
      background-size: 1800% 1800% !important;
      -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
      -moz-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
      animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
-      border-color: white;
+      border-color: black;
    }

    &.gamingLight:active {
-      -webkit-text-fill-color: unset !important;
      color: white;
-      background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);      background-size: 1800% 1800% !important;
+      background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
+      background-size: 1800% 1800% !important;
      -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
      -moz-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
      animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
-      border-color: white;
+      border-color: black;
    }

    &.gamingDark {
      -webkit-text-fill-color: unset !important;
-      color: white;
-      background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);      background-size: 1800% 1800%;
+      color: black;
+      background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
+      background-size: 1800% 1800%;
      -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
      -moz-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
      animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
@ -320,7 +337,8 @@ onBeforeUnmount(() => {
    &.gamingLight {
      -webkit-text-fill-color: unset !important;
      color: white;
-      background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);      background-size: 1800% 1800% !important;
+      background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
+      background-size: 1800% 1800% !important;
      -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
      -moz-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
      animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
@ -339,13 +357,13 @@ onBeforeUnmount(() => {
  margin-right: 6px;

  &.gamingDark {
-    color: black;
-    -webkit-text-fill-color: unset !important;
+    color: white;
+
  }

  &.gamingLight {
    color: white;
-    -webkit-text-fill-color: unset !important;
+
  }

 }
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/packages/frontend/src/components/MkMenu.vue
@ -62,7 +62,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts">
-import { Ref, defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { Ref, computed, defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { focusPrev, focusNext } from '@/scripts/focus.js';
 import MkSwitchButton from '@/components/MkSwitch.button.vue';
 import { MenuItem, InnerMenuItem, MenuPending, MenuAction, MenuSwitch, MenuParent } from '@/types/menu';
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@ -292,7 +292,7 @@ function more(ev: MouseEvent) {
    }

    &.gamingLight {
-      color: white !important;
+      color: black !important;
    }

    &.gamingDark {
@ -300,7 +300,7 @@ function more(ev: MouseEvent) {
    }

    &.gamingLight:before {
-      color: white !important;
+			color: black !important;
      content: "";
      display: block;
      width: calc(100% - 38px);
@ -320,8 +320,8 @@ function more(ev: MouseEvent) {
    }

    &.gamingLight:hover, &.gamingLight.active {
-      color: white !important;

+			color: black !important;
      &.gamingLight:before {
        background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
        background-size: 1800% 1800% !important;
@ -502,7 +502,7 @@ function more(ev: MouseEvent) {
    }

    &.gamingLight:hover {
-      color: black;
+			color: white;
      background-size: 1800% 1800% !important;
      text-decoration: none;
      -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
@ -511,7 +511,7 @@ function more(ev: MouseEvent) {
    }

    &.gamingLight:active {
-      color: black;
+      color: white;

      background-size: 1800% 1800% !important;
      -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
@ -520,11 +520,10 @@ function more(ev: MouseEvent) {
    }

    &.gamingLight:hover, &.gamingLight.active {
-      color: black;
+			color: white;


      &.gamingLight:before {
-        color: white !important;
        content: "";
        display: block;
        width: calc(100% - 34px);
@ -659,7 +658,7 @@ function more(ev: MouseEvent) {
      -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
      -moz-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
      animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
-      color: black;
+      color: white;
    }

    &.gamingLight:hover, &.gamingLight.active {
@ -670,7 +669,7 @@ function more(ev: MouseEvent) {
        -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
        -moz-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
        animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
-        color: black;
+				color: white;
      }
    }

@ -811,8 +810,7 @@ function more(ev: MouseEvent) {

    &.gamingLight:hover, &.gamingLight.active {
      text-decoration: none;
-      color: black;
-
+			color: white;
      &.gamingLight:before {
        content: "";
        display: block;
@ -857,7 +855,7 @@ function more(ev: MouseEvent) {
    }

    &.gamingLight {
-      color: black;
+			color: white;
    }
  }