feat: ゲーミングモード実装

locales/en-US.yml

@@ -292,6 +292,7 @@ location: "Location"
 theme: "Themes"
 themeForLightMode: "Theme to use in Light Mode"
 themeForDarkMode: "Theme to use in Dark Mode"
+gamingMode: "Gaming Mode"
 light: "Light"
 dark: "Dark"
 lightThemes: "Light themes"

locales/index.d.ts

@@ -295,6 +295,7 @@ export interface Locale {
     "theme": string;
     "themeForLightMode": string;
     "themeForDarkMode": string;
+    "gamingMode": string;
     "light": string;
     "dark": string;
     "lightThemes": string;

locales/ja-JP.yml

@@ -292,6 +292,7 @@ location: "場所"
 theme: "テーマ"
 themeForLightMode: "ライトモードで使うテーマ"
 themeForDarkMode: "ダークモードで使うテーマ"
+gamingMode: 'ゲーミングモード'
 light: "ライト"
 dark: "ダーク"
 lightThemes: "明るいテーマ"

packages/frontend/src/components/MkButton.vue

@@ -4,36 +4,70 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<button
+  <button
       v-if="!link"
       ref="el" class="_button"
-	:class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.transparent]: transparent, [$style.asLike]: asLike }]"
+      :class="[
+      $style.root,
+      {
+        [$style.inline]: inline,
+        [$style.primary]: primary,
+        [$style.gradate]: gradate,
+        [$style.danger]: danger,
+        [$style.rounded]: rounded,
+        [$style.full]: full,
+        [$style.small]: small,
+        [$style.large]: large,
+        [$style.transparent]: transparent,
+        [$style.asLike]: asLike,
+        [$style.gamingDark]: gaming === 'dark', // gamingが1の場合にgamingDarkクラスを追加
+        [$style.gamingLight]: gaming === 'light', // gamingが2の場合にgamingLightクラスを追加
+      }
+    ]"
       :type="type"
       :name="name"
       :value="value"
       @click="emit('click', $event)"
       @mousedown="onMousedown"
->
+  >
     <div ref="ripples" :class="$style.ripples" :data-children-class="$style.ripple"></div>
     <div :class="$style.content">
       <slot></slot>
     </div>
-</button>
+  </button>
-<MkA
+  <MkA
       v-else class="_button"
-	:class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.transparent]: transparent, [$style.asLike]: asLike }]"
+      :class="[
+    $style.root,
+    {
+      [$style.inline]: inline,
+      [$style.primary]: primary,
+      [$style.gradate]: gradate,
+      [$style.danger]: danger,
+      [$style.rounded]: rounded,
+      [$style.full]: full,
+      [$style.small]: small,
+      [$style.large]: large,
+      [$style.transparent]: transparent,
+      [$style.asLike]: asLike,
+        [$style.gamingDark]: gaming === 'dark', // gamingが1の場合にgamingDarkクラスを追加
+        [$style.gamingLight]: gaming === 'light', // gamingが2の場合にgamingLightクラスを追加
+    }
+  ]"
       :to="to"
       @mousedown="onMousedown"
->
+  >
     <div ref="ripples" :class="$style.ripples" :data-children-class="$style.ripple"></div>
     <div :class="$style.content">
       <slot></slot>
     </div>
-</MkA>
+  </MkA>
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted } from 'vue';
+import {computed, nextTick, onMounted, reactive, ref, watch} from 'vue';
+import {bannerDark, bannerLight, defaultStore, iconDark, iconLight} from "@/store.js";
+import {unisonReload} from "@/scripts/unison-reload.js";
 
 const props = defineProps<{
   type?: 'button' | 'submit' | 'reset';
@@ -50,10 +84,45 @@ const props = defineProps<{
   small?: boolean;
   large?: boolean;
   transparent?: boolean;
+  gamingdark?: boolean;
+  gaminglight?: boolean;
   asLike?: boolean;
   name?: string;
   value?: string;
 }>();
+const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
+const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
+// gamingをrefで初期化する
+let gaming = ref(''); // 0-off , 1-dark , 2-light
+
+// gaming.valueに新しい値を代入する
+if (darkMode.value && gamingMode.value && props.primary) {
+  gaming.value = 'dark';
+} else if (!darkMode.value && gamingMode.value && props.primary) {
+  gaming.value = 'light';
+}else{
+  gaming.value = '';
+}
+
+watch(darkMode, () => {
+  if (darkMode.value && gamingMode.value && props.primary) {
+    gaming.value = 'dark';
+  } else if (!darkMode.value && gamingMode.value && props.primary) {
+    gaming.value = 'light';
+  }else{
+    gaming.value = '';
+  }
+})
+
+watch(gamingMode, () => {
+  if (darkMode.value && gamingMode.value && props.primary) {
+    gaming.value = 'dark';
+  } else if (!darkMode.value && gamingMode.value && props.primary) {
+    gaming.value = 'light';
+  }else{
+    gaming.value = '';
+  }
+})
 
 const emit = defineEmits<{
   (ev: 'click', payload: MouseEvent): void;
@@ -75,11 +144,11 @@ function distance(p, q): number {
 }
 
 function calcCircleScale(boxW, boxH, circleCenterX, circleCenterY): number {
-	const origin = { x: circleCenterX, y: circleCenterY };
+  const origin = {x: circleCenterX, y: circleCenterY};
-	const dist1 = distance({ x: 0, y: 0 }, origin);
+  const dist1 = distance({x: 0, y: 0}, origin);
-	const dist2 = distance({ x: boxW, y: 0 }, origin);
+  const dist2 = distance({x: boxW, y: 0}, origin);
-	const dist3 = distance({ x: 0, y: boxH }, origin);
+  const dist3 = distance({x: 0, y: boxH}, origin);
-	const dist4 = distance({ x: boxW, y: boxH }, origin);
+  const dist4 = distance({x: boxW, y: boxH}, origin);
   return Math.max(dist1, dist2, dist3, dist4) * 2;
 }
 
@@ -103,7 +172,7 @@ function onMousedown(evt: MouseEvent): void {
     ripple.style.transform = 'scale(' + (scale / 2) + ')';
   }, 1);
   window.setTimeout(() => {
-		ripple.style.transition = 'all 1s ease';
+    ripple.style.transition = 'all 1s cubic-bezier(0, 0.44, 0.39, 1.1)';
     ripple.style.opacity = '0';
   }, 1000);
   window.setTimeout(() => {
@@ -129,7 +198,7 @@ function onMousedown(evt: MouseEvent): void {
   border-radius: 5px;
   overflow: clip;
   box-sizing: border-box;
-	transition: background 0.1s ease;
+  transition: background 0.1s cubic-bezier(0, 0.44, 0.39, 1.1);
 
   &:not(:disabled):hover {
     background: var(--buttonHoverBg);
@@ -220,6 +289,60 @@ function onMousedown(evt: MouseEvent): void {
     }
   }
 
+  &.gamingLight {
+    background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
+    background-size: 1800% 1800%;
+
+    -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.44, 0.39, 1.1) infinite;
+    -moz-animation: AnimationLight 45s cubic-bezier(0, 0.44, 0.39, 1.1) infinite;
+    animation: AnimationLight 45s cubic-bezier(0, 0.44, 0.39, 1.1) infinite;
+
+    &:not(:disabled):hover {
+			background: linear-gradient(270deg, #d08c8c, #cfb28c, #dbdb8b, #95d08e, #8bdbdb, #94a9cf, #b09ecf, #cfa0cf, #e0a0bd);
+			background-size: 1800% 1800%;
+
+			-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.44, 0.39, 1.1) infinite;
+			-moz-animation: AnimationLight 45s cubic-bezier(0, 0.44, 0.39, 1.1) infinite;
+			animation: AnimationLight 45s cubic-bezier(0, 0.44, 0.39, 1.1) infinite;
+    }
+
+    &:not(:disabled):active {
+			background: linear-gradient(270deg, #d08c8c, #cfb28c, #dbdb8b, #95d08e, #8bdbdb, #94a9cf, #b09ecf, #cfa0cf, #e0a0bd);
+			background-size: 1800% 1800% !important;
+
+			-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.44, 0.39, 1.1) infinite;
+			-moz-animation: AnimationLight 45s cubic-bezier(0, 0.44, 0.39, 1.1) infinite ;
+			animation: AnimationLight 45s cubic-bezier(0, 0.44, 0.39, 1.1) infinite ;
+    }
+  }
+
+  &.gamingDark {
+    background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
+    background-size: 1800% 1800%;
+
+    -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.44, 0.39, 1.1) infinite;
+    -moz-animation: AnimationDark 44s cubic-bezier(0, 0.44, 0.39, 1.1) infinite;
+    animation: AnimationDark 44s cubic-bezier(0, 0.44, 0.39, 1.1) infinite;
+
+    &:not(:disabled):hover {
+			background: linear-gradient(270deg, #a84f4f, #a88c4f, #9aa24b, #6da85c, #53a8a6, #7597b5, #8679b5, #b579b5, #b56d96);
+			background-size: 1800% 1800% ;
+
+			-webkit-animation: AnimationDark 45s cubic-bezier(0, 0.44, 0.39, 1.1) infinite ;
+			-moz-animation: AnimationDark 45s cubic-bezier(0, 0.44, 0.39, 1.1) infinite;
+			animation: AnimationDark 45s cubic-bezier(0, 0.44, 0.39, 1.1) infinite ;
+    }
+
+    &:not(:disabled):active {
+			background: linear-gradient(270deg, #a84f4f, #a88c4f, #9aa24b, #6da85c, #53a8a6, #7597b5, #8679b5, #b579b5, #b56d96);
+			background-size: 1800% 1800% !important;
+
+			-webkit-animation: AnimationDark 45s cubic-bezier(0, 0.44, 0.39, 1.1) infinite ;
+			-moz-animation: AnimationDark 45s cubic-bezier(0, 0.44, 0.39, 1.1) infinite;
+			animation: AnimationDark 45s cubic-bezier(0, 0.44, 0.39, 1.1) infinite;
+    }
+  }
+
   &.danger {
     color: #ff2a2a;
 
@@ -277,7 +400,7 @@ function onMousedown(evt: MouseEvent): void {
   background: rgba(0, 0, 0, 0.1);
   opacity: 1;
   transform: scale(1);
-	transition: all 0.5s cubic-bezier(0,.5,0,1);
+  transition: all 0.5s cubic-bezier(0, .5, 0, 1);
 }
 
 .content {
@@ -285,4 +408,36 @@ function onMousedown(evt: MouseEvent): void {
   z-index: 1;
   pointer-events: none;
 }
+
+@-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/pages/settings/general.vue

@@ -123,6 +123,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkSwitch :disabled="enableUltimateDataSaverMode || enableCellularWithUltimateDataSaver" v-model="enableCellularWithDataSaver">{{ i18n.ts.cellularWithDataSaver }}</MkSwitch>
 				<MkSwitch v-model="enableUltimateDataSaverMode">{{ i18n.ts.UltimateDataSaver }}</MkSwitch>
 				<MkSwitch v-model="enableCellularWithUltimateDataSaver">{{ i18n.ts.cellularWithUltimateDataSaver }}</MkSwitch>
+				<MkSwitch v-model="enableGamingMode">{{ i18n.ts.gamingMode }}</MkSwitch>
 			</div>
 			<div>
 				<MkRadios v-model="emojiStyle">
@@ -255,7 +256,7 @@ const notificationPosition = computed(defaultStore.makeGetterSetter('notificatio
 const notificationStackAxis = computed(defaultStore.makeGetterSetter('notificationStackAxis'));
 const showTimelineReplies = computed(defaultStore.makeGetterSetter('showTimelineReplies'));
 const keepScreenOn = computed(defaultStore.makeGetterSetter('keepScreenOn'));
-
+const enableGamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
 
 
 watch(lang, () => {

packages/frontend/src/pages/timeline.vue

@@ -136,6 +136,11 @@ const headerTabs = $computed(() => [{
 	title: i18n.ts._timelines.local,
 	icon: 'ti ti-planet',
 	iconOnly: true,
+}, {
+  key: 'media',
+  title: i18n.ts._timelines.media,
+  icon: 'ti ti-photo',
+  iconOnly: true,
 }, {
 	key: 'social',
 	title: i18n.ts._timelines.social,

packages/frontend/src/store.ts

@@ -270,6 +270,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: false,
 	},
+	gamingMode: {
+		where: 'device',
+		default: false,
+	},
 	bannerUrl:{
 		where: 'device',
 		default: bannerDark

packages/frontend/src/ui/_common_/navbar.vue

@@ -10,11 +10,13 @@ SPDX-License-Identifier: AGPL-3.0-only
         <div :class="$style.banner" :style="{ backgroundImage: `url(${ bannerUrl })` }"></div>
         <button v-tooltip.noDelay.right="instance.name ?? i18n.ts.instance" class="_button" :class="$style.instance"
                 @click="openInstanceMenu">
-          <img :src="iconUrl" alt="" :class="$style.instanceIcon"/>
+          <img :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon"/>
         </button>
       </div>
       <div :class="$style.middle">
-        <MkA v-tooltip.noDelay.right="i18n.ts.timeline" :class="$style.item" :activeClass="$style.active" to="/" exact>
+        <MkA v-tooltip.noDelay.right="i18n.ts.timeline"
+             :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>
@@ -26,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
               v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)"
               v-tooltip.noDelay.right="navbarItemDef[item].title"
               class="_button"
-              :class="[$style.item, { [$style.active]: navbarItemDef[item].active }]"
+              :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 } : {}"
@@ -38,25 +40,27 @@ SPDX-License-Identifier: AGPL-3.0-only
           </component>
         </template>
         <div :class="$style.divider"></div>
-        <MkA v-if="$i.isAdmin || $i.isModerator" v-tooltip.noDelay.right="i18n.ts.controlPanel" :class="$style.item"
+        <MkA v-if="$i.isAdmin || $i.isModerator" v-tooltip.noDelay.right="i18n.ts.controlPanel" :class="[$style.item, { [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"
              :activeClass="$style.active" to="/admin">
           <i :class="$style.itemIcon" class="ti ti-dashboard ti-fw"></i><span
             :class="$style.itemText">{{ i18n.ts.controlPanel }}</span>
         </MkA>
-        <button class="_button" :class="$style.item" @click="more">
+        <button class="_button" :class="[$style.item, { [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]" @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" :class="$style.itemIndicator"><i class="_indicatorCircle"></i></span>
         </button>
-        <MkA v-tooltip.noDelay.right="i18n.ts.settings" :class="$style.item" :activeClass="$style.active"
+        <MkA v-tooltip.noDelay.right="i18n.ts.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 v-tooltip.noDelay.right="i18n.ts.note" class="_button" :class="[$style.post]" data-cy-open-post-form
+        <button v-tooltip.noDelay.right="i18n.ts.note" class="_button"
+                :class="[$style.post ,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light',}]"
+                data-cy-open-post-form
                 @click="os.post">
           <i class="ti ti-pencil ti-fw" :class="$style.postIcon"></i><span :class="$style.postText">{{
             i18n.ts.note
@@ -85,25 +89,59 @@ import {instance} from '@/instance';
 const iconOnly = ref(false);
 let bannerUrl = ref(defaultStore.state.bannerUrl);
 let iconUrl = ref();
+let gaming = ref('');
 
+const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
 const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
-if (darkMode.value){
+
+if (darkMode.value) {
   bannerUrl.value = bannerDark;
   iconUrl.value = iconDark;
-}else{
+} else {
   bannerUrl.value = bannerLight;
   iconUrl.value = iconLight;
 }
+
 watch(darkMode, () => {
-  if (darkMode.value){
+  if (darkMode.value) {
     bannerUrl.value = bannerDark;
     iconUrl.value = iconDark;
-  }else{
+  } else {
     bannerUrl.value = bannerLight;
     iconUrl.value = iconLight;
   }
 })
 
+// gaming.valueに新しい値を代入する
+if (darkMode.value && gamingMode.value == true) {
+  gaming.value = 'dark';
+} else if (!darkMode.value && gamingMode.value == true) {
+  gaming.value = 'light';
+} else {
+  gaming.value = '';
+}
+
+watch(darkMode, () => {
+  console.log(gaming)
+  if (darkMode.value && gamingMode.value == true) {
+    gaming.value = 'dark';
+  } else if (!darkMode.value && gamingMode.value == true) {
+    gaming.value = 'light';
+  } else {
+    gaming.value = '';
+  }
+})
+
+watch(gamingMode, () => {
+  if (darkMode.value && gamingMode.value == true) {
+    gaming.value = 'dark';
+  } else if (!darkMode.value && gamingMode.value == true) {
+    gaming.value = 'light';
+  } else {
+    gaming.value = '';
+  }
+})
+
 const menu = computed(() => defaultStore.state.menu);
 const otherMenuItemIndicated = computed(() => {
   for (const def in navbarItemDef) {
@@ -243,6 +281,65 @@ function more(ev: MouseEvent) {
         background: var(--accentLighten);
       }
     }
+
+    &.gamingLight:before {
+      content: "";
+      display: block;
+      width: calc(100% - 38px);
+      height: 100%;
+      margin: auto;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border-radius: 999px;
+      background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
+      background-size: 1800% 1800% !important;
+      -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      -moz-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+    }
+
+    &.gamingLight:hover, &.gamingLight.active {
+      &.gamingLight:before {
+        background: linear-gradient(270deg, #d08c8c, #cfb28c, #dbdb8b, #95d08e, #8bdbdb, #94a9cf, #b09ecf, #cfa0cf, #e0a0bd);
+        background-size: 1800% 1800% !important;
+        -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+        -moz-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+        animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      }
+    }
+
+    &.gamingDark:before {
+      content: "";
+      display: block;
+      width: calc(100% - 38px);
+      height: 100%;
+      margin: auto;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border-radius: 999px;
+      background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
+      background-size: 1800% 1800%;
+      -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+      -moz-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+      animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+    }
+
+    &.gamingDark:hover, &.gamingDark.active {
+      &.gamingDark:before {
+        background: linear-gradient(270deg, #a84f4f, #a88c4f, #9aa24b, #6da85c, #53a8a6, #7597b5, #8679b5, #b579b5, #b56d96);
+        background-size: 1800% 1800% !important;
+        -webkit-animation: AnimationDark 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+        -moz-animation: AnimationDark 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+        animation: AnimationDark 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      }
+    }
+
   }
 
   .postIcon {
@@ -331,6 +428,85 @@ function more(ev: MouseEvent) {
         background: var(--accentedBg);
       }
     }
+
+    &.gamingDark:hover {
+      color: white;
+      background-size: 1800% 1800%;
+      text-decoration: none;
+      -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+      -moz-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+      animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+    }
+
+    &.gamingDark.active {
+      color: white;
+      background-size: 1800% 1800%;
+      -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+      -moz-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+      animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+    }
+
+    &.gamingDark:hover, &.gamingDark.active {
+      color: white;
+
+      &.gamingDark:before {
+        content: "";
+        display: block;
+        width: calc(100% - 34px);
+        height: 100%;
+        margin: auto;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border-radius: 999px;
+        background: linear-gradient(270deg, #a84f4f, #a88c4f, #9aa24b, #6da85c, #53a8a6, #7597b5, #8679b5, #b579b5, #b56d96);
+        background-size: 1800% 1800% !important;
+        -webkit-animation: AnimationDark 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+        -moz-animation: AnimationDark 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+        animation: AnimationDark 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      }
+    }
+
+    &.gamingLight:hover {
+      color: black;
+      background-size: 1800% 1800% !important;
+      text-decoration: none;
+      -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      -moz-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+    }
+
+    &.gamingLight:active {
+      color: black;
+      background-size: 1800% 1800% !important;
+      -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      -moz-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+    }
+
+    &.gamingLight:hover, &.gamingLight.active {
+      color: black;
+      &.gamingLight:before {
+        content: "";
+        display: block;
+        width: calc(100% - 34px);
+        height: 100%;
+        margin: auto;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border-radius: 999px;
+        background: linear-gradient(270deg, #d08c8c, #cfb28c, #dbdb8b, #95d08e, #8bdbdb, #94a9cf, #b09ecf, #cfa0cf, #e0a0bd);
+        background-size: 1800% 1800% !important;
+        -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+        -moz-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+        animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      }
+    }
   }
 
   .itemIcon {
@@ -421,6 +597,66 @@ function more(ev: MouseEvent) {
         background: var(--accentLighten);
       }
     }
+
+    &.gamingLight:before {
+      content: "";
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      margin: auto;
+      width: 52px;
+      aspect-ratio: 1/1;
+      border-radius: 100%;
+      background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
+      background-size: 1800% 1800% !important;
+      -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      -moz-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+    }
+
+    &.gamingLight:hover, &.gamingLight.active {
+      &.gamingLight:before {
+        background: linear-gradient(270deg, #d08c8c, #cfb28c, #dbdb8b, #95d08e, #8bdbdb, #94a9cf, #b09ecf, #cfa0cf, #e0a0bd);
+        background-size: 1800% 1800% !important;
+        -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+        -moz-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+        animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      }
+    }
+
+    &.gamingDark:before {
+      content: "";
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      margin: auto;
+      width: 52px;
+      aspect-ratio: 1/1;
+      border-radius: 100%;
+      background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
+      background-size: 1800% 1800%;
+      -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+      -moz-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+      animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+    }
+
+    &.gamingDark:hover, &.gamingDark.active {
+      &.gamingDark:before {
+        background: linear-gradient(270deg, #a84f4f, #a88c4f, #9aa24b, #6da85c, #53a8a6, #7597b5, #8679b5, #b579b5, #b56d96);
+        background-size: 1800% 1800% !important;
+        -webkit-animation: AnimationDark 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+        -moz-animation: AnimationDark 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+        animation: AnimationDark 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      }
+    }
+
+
   }
 
   .postIcon {
@@ -489,6 +725,53 @@ function more(ev: MouseEvent) {
         opacity: 1;
       }
     }
+
+    &.gamingDark:hover, &.gamingDark.active {
+      text-decoration: none;
+      color: var(--accent);
+
+      &.gamingDark:before {
+        content: "";
+        display: block;
+        height: 100%;
+        aspect-ratio: 1;
+        margin: auto;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border-radius: 999px;
+        background: linear-gradient(270deg, #a84f4f, #a88c4f, #9aa24b, #6da85c, #53a8a6, #7597b5, #8679b5, #b579b5, #b56d96);
+        background-size: 1800% 1800% !important;
+        -webkit-animation: AnimationDark 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+        -moz-animation: AnimationDark 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+        animation: AnimationDark 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      }
+    }
+    &.gamingLight:hover, &.gamingLight.active {
+      text-decoration: none;
+      color: var(--accent);
+
+      &.gamingLight:before {
+        content: "";
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        margin: auto;
+        width: 52px;
+        aspect-ratio: 1/1;
+        border-radius: 100%;
+        background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
+        background-size: 1800% 1800% !important;
+        -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+        -moz-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+        animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      }
+    }
   }
 
   .itemIcon {
@@ -509,5 +792,72 @@ function more(ev: MouseEvent) {
     font-size: 8px;
     animation: blink 1s infinite;
   }
+
+  @-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>