fix

packages/frontend/src/components/MkButton.vue

@@ -66,7 +66,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { nextTick, onMounted, shallowRef, computed, ref, watch } from 'vue';
-import {defaultStore} from "@/store.js";
+import { defaultStore } from '@/store.js';
 
 const props = defineProps<{
   type?: 'button' | 'submit' | 'reset';
@@ -111,7 +111,7 @@ watch(darkMode, () => {
 	} else {
 		gaming.value = '';
 	}
-})
+});
 
 watch(gamingMode, () => {
 	if (darkMode.value && gamingMode.value && props.primary || darkMode.value && gamingMode.value && props.gradate ) {
@@ -121,7 +121,7 @@ watch(gamingMode, () => {
 	} else {
 		gaming.value = '';
 	}
-})
+});
 const emit = defineEmits<{
   (ev: 'click', payload: MouseEvent): void;
 }>();
@@ -257,6 +257,9 @@ function onMousedown(evt: MouseEvent): void {
           -moz-animation: AnimationLight var(--gamingspeed) cubic-bezier(0, 0.2, 0.90, 1)  infinite ;
           animation: AnimationLight var(--gamingspeed) cubic-bezier(0, 0.2, 0.90, 1)  infinite ;
         }
+				&:hover{
+					background: var(--accent);
+				}
       }
 
       &.gamingDark {

packages/frontend/src/ui/_common_/navbar-for-mobile.vue

@@ -12,55 +12,74 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</button>
 	</div>
 	<div :class="$style.middle">
-      <MkA :class="[$style.item, {  [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"
+		<MkA
-           :activeClass="$style.active" to="/" exact>
+			:class="[$style.item, { [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"
+			:activeClass="$style.active" to="/" exact
+		>
 			<i :class="$style.itemIcon" class="ti ti-home ti-fw"></i><span :class="$style.itemText">{{
 				i18n.ts.timeline
 			}}</span>
 		</MkA>
 		<template v-for="item in menu">
 			<div v-if="item === '-'" :class="$style.divider"></div>
-        <component :is="navbarItemDef[item].to ? 'MkA' : 'button'"
+			<component
+				:is="navbarItemDef[item].to ? 'MkA' : 'button'"
 				v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" class="_button"
 				:class="[$style.item, { [$style.active]: gaming === '' && navbarItemDef[item].active, [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"
 				:activeClass="$style.active" :to="navbarItemDef[item].to"
-                   v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
+				v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}"
+			>
 				<i class="ti-fw" :class="[$style.itemIcon, navbarItemDef[item].icon]"></i><span
-            :class="$style.itemText">{{ navbarItemDef[item].title }}</span>
+					:class="$style.itemText"
-          <span v-if="navbarItemDef[item].indicated"
+				>{{ navbarItemDef[item].title }}</span>
-                :class="[$style.itemIndicator,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]">
+				<span
+					v-if="navbarItemDef[item].indicated"
+					:class="[$style.itemIndicator,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]"
+				>
 					<span v-if="navbarItemDef[item].indicateValue && indicatorCounterToggle" class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ navbarItemDef[item].indicateValue }}</span><i
-             v-else class="_indicatorCircle"></i></span>
+						v-else class="_indicatorCircle"
+					></i></span>
 			</component>
 		</template>
 		<div :class="$style.divider"></div>
-      <MkA v-if="$i.isAdmin || $i.isModerator"
+		<MkA
+			v-if="$i.isAdmin || $i.isModerator"
 			:class="[$style.item, { [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"
-           :activeClass="$style.active" to="/admin">
+			:activeClass="$style.active" to="/admin"
+		>
 			<i :class="$style.itemIcon" class="ti ti-dashboard ti-fw"></i><span
-          :class="$style.itemText">{{ i18n.ts.controlPanel }}</span>
+				:class="$style.itemText"
+			>{{ i18n.ts.controlPanel }}</span>
 		</MkA>
 		<button
 			:class="[$style.item, { [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"
-          class="_button" @click="more">
+			class="_button" @click="more"
+		>
 			<i :class="$style.itemIcon" class="ti ti-grid-dots ti-fw"></i><span :class="$style.itemText">{{
 				i18n.ts.more
 			}}</span>
-        <span v-if="otherMenuItemIndicated"
+			<span
-              :class="[$style.itemIndicator,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]"><i
+				v-if="otherMenuItemIndicated"
-            class="_indicatorCircle"></i></span>
+				:class="[$style.itemIndicator,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]"
+			><i
+				class="_indicatorCircle"
+			></i></span>
 		</button>
-      <MkA :class="[$style.item, {  [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"
+		<MkA
-           :activeClass="$style.active" to="/settings">
+			:class="[$style.item, { [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"
+			:activeClass="$style.active" to="/settings"
+		>
 			<i :class="$style.itemIcon" class="ti ti-settings ti-fw"></i><span :class="$style.itemText">{{
 				i18n.ts.settings
 			}}</span>
 		</MkA>
 	</div>
 	<div :class="$style.bottom">
-      <button class="_button"
+		<button
-              :class="[$style.post ,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light',}]"
+			class="_button"
-              data-cy-open-post-form @click="os.post">
+			:class="[$style.post ,{[$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light',}]"
+			data-cy-open-post-form @click="os.post"
+		>
 			<i :class="$style.postIcon" class="ti ti-pencil ti-fw"></i><span style="position: relative;">{{
 				i18n.ts.note
 			}}</span>
@@ -81,10 +100,11 @@ import {navbarItemDef} from '@/navbar.js';
 import { $i, openAccountMenu as openAccountMenu_ } from '@/account';
 import { bannerDark, bannerLight, defaultStore, iconDark, iconLight } from '@/store';
 import { i18n } from '@/i18n';
-import {instance} from '@/instance';
+let gamingType = computed(defaultStore.makeGetterSetter('gamingType'));
 const indicatorCounterToggle = computed(defaultStore.makeGetterSetter('indicatorCounterToggle'));
 let bannerUrl = ref(defaultStore.state.bannerUrl);
 let iconUrl = ref(defaultStore.state.iconUrl);
+
 function hexToRgb(hex) {
 	// 16進数のカラーコードから "#" を除去
 	hex = hex.replace(/^#/, '');
@@ -96,14 +116,15 @@ function hexToRgb(hex) {
 
 	return `${r},${g},${b}`;
 }
+
 const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
 const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
 document.documentElement.style.setProperty('--homeColor', hexToRgb(defaultStore.state.homeColor));
-document.documentElement.style.setProperty("--followerColor",hexToRgb(defaultStore.state.followerColor));
+document.documentElement.style.setProperty('--followerColor', hexToRgb(defaultStore.state.followerColor));
-document.documentElement.style.setProperty("--specifiedColor",hexToRgb(defaultStore.state.specifiedColor))
+document.documentElement.style.setProperty('--specifiedColor', hexToRgb(defaultStore.state.specifiedColor));
 document.documentElement.style.setProperty('--gamingspeed', defaultStore.state.numberOfGamingSpeed + 's');
 
-let gaming = ref()
+let gaming = ref();
 if (darkMode.value) {
 	bannerUrl.value = bannerDark;
 	iconUrl.value = iconDark;
@@ -119,7 +140,7 @@ watch(darkMode, () => {
 		bannerUrl.value = bannerLight;
 		iconUrl.value = iconLight;
 	}
-})
+});
 // gaming.valueに新しい値を代入する
 if (darkMode.value && gamingMode.value == true) {
 	gaming.value = 'dark';
@@ -137,7 +158,7 @@ watch(darkMode, () => {
 	} else {
 		gaming.value = '';
 	}
-})
+});
 
 watch(gamingMode, () => {
 	if (darkMode.value && gamingMode.value == true) {
@@ -147,7 +168,7 @@ watch(gamingMode, () => {
 	} else {
 		gaming.value = '';
 	}
-})
+});
 const menu = toRef(defaultStore.state, 'menu');
 const otherMenuItemIndicated = computed(() => {
 	for (const def in navbarItemDef) {
@@ -306,7 +327,6 @@ function more() {
     }
   }
 
-
 }
 
 .postIcon {