bugfix

packages/frontend/src/components/MkChannelFollowButton.vue

@@ -12,14 +12,24 @@ SPDX-License-Identifier: AGPL-3.0-only
   >
     <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>
+        <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>
+        <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"/>
+      <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>
@@ -102,13 +112,13 @@ async function onClick() {
   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;
+
   &.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,10 +135,9 @@ 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;
@@ -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: black;
-      color: white;
+      background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
-      background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);      background-size: 1800% 1800%;
+      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;
@@ -244,4 +251,76 @@ async function onClick() {
 .text {
   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>

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
+      :class="[$style.root, { [$style.wait]: wait, [$style.active]: isFollowing || hasPendingFollowRequestFromYou, [$style.full]: full, [$style.large]: large },{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'
-, [$style.full]: full, [$style.large]: large }]"
+,}]"
       :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;
+    color: black !important;
-    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;
-    -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: black;
-      color: white;
+      background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
-      background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);      background-size: 1800% 1800%;
+      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: black;
-      color: white;
+      background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
-      background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);      background-size: 1800% 1800%;
+      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;
+      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;
@@ -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;
+    color: white;
-    -webkit-text-fill-color: unset !important;
+
   }
 
   &.gamingLight {
     color: white;
-    -webkit-text-fill-color: unset !important;
+
   }
 
 }

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';

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;
     }
   }