This commit is contained in:
mattyatea 2023-09-23 17:15:53 +09:00
parent aec6bccbdf
commit 6e4b8d88fd
4 changed files with 232 additions and 137 deletions

View File

@ -4,30 +4,40 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<button <button
class="_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'}]]" :class="[$style.root, { [$style.wait]: wait, [$style.active]: isFollowing, [$style.full]: full },[$style.text,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]]"
:disabled="wait" :disabled="wait"
@click="onClick" @click="onClick"
> >
<template v-if="!wait"> <template v-if="!wait">
<template v-if="isFollowing"> <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>
<template v-else> <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> </template>
<template v-else> <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> </template>
</button> </button>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {computed, ref, watch} from 'vue'; import {computed, ref, watch} from 'vue';
import * as os from '@/os.js'; import * as os from '@/os.js';
import { i18n } from '@/i18n.js'; import {i18n} from '@/i18n.js';
import {defaultStore} from "@/store.js"; import {defaultStore} from "@/store.js";
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
@ -102,13 +112,13 @@ async function onClick() {
display: inline-block; display: inline-block;
font-weight: bold; font-weight: bold;
color: var(--accent); color: var(--accent);
background: transparent;
border: solid 1px var(--accent); border: solid 1px var(--accent);
padding: 0; padding: 0;
height: 31px; height: 31px;
font-size: 16px; font-size: 16px;
border-radius: 32px; border-radius: 32px;
background: #fff; background: #fff;
&.gamingDark { &.gamingDark {
color: black; color: black;
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);
@ -116,8 +126,6 @@ async function onClick() {
-webkit-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite; -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; -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; animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} }
&.gamingLight { &.gamingLight {
@ -127,10 +135,9 @@ async function onClick() {
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !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; -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; animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} }
&.full { &.full {
padding: 0 8px 0 12px; padding: 0 8px 0 12px;
font-size: 14px; font-size: 14px;
@ -177,18 +184,19 @@ async function onClick() {
} }
&.gamingDark:hover { &.gamingDark:hover {
-webkit-text-fill-color: unset;
color: black; 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; -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; -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; animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
} }
&.gamingDark:active { &.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; -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; -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; animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
@ -196,7 +204,6 @@ async function onClick() {
} }
&.gamingLight:hover { &.gamingLight:hover {
-webkit-text-fill-color: unset !important;
background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4); background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
background-size: 1800% 1800% !important; background-size: 1800% 1800% !important;
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important; -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
@ -206,9 +213,9 @@ async function onClick() {
} }
&.gamingLight:active { &.gamingLight:active {
-webkit-text-fill-color: unset !important;
color: white; 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; -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; -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; animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
@ -216,18 +223,18 @@ async function onClick() {
} }
&.gamingDark { &.gamingDark {
-webkit-text-fill-color: unset !important;
color: black; 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; -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; -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; animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
} }
&.gamingLight { &.gamingLight {
-webkit-text-fill-color: unset !important;
color: white; 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; -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; -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; animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
@ -244,4 +251,76 @@ async function onClick() {
.text { .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> </style>

View File

@ -5,8 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<button <button
class="_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" :disabled="wait"
@click="onClick" @click="onClick"
> >
@ -46,7 +46,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template> </template>
<template v-else> <template v-else>
<span v-if="full" <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 i18n.ts.processing
}}</span> }}</span>
<MkLoading :em="true" :colored="false"/> <MkLoading :em="true" :colored="false"/>
@ -190,37 +190,54 @@ onBeforeUnmount(() => {
display: inline-block; display: inline-block;
font-weight: bold; font-weight: bold;
color: var(--fgOnWhite); color: var(--fgOnWhite);
border: solid 1px; border: solid 1px var(--accent);
padding: 0; padding: 0;
height: 31px; height: 31px;
font-size: 16px; font-size: 16px;
border-radius: 32px; border-radius: 32px;
background: #fff; background: #fff;
&.gamingDark { &.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; -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; -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; animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} }
&.gamingLight { &.gamingLight {
color: #dee7e4; color: white !important;
background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4); background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
background-size: 1800% 1800% !important; background-size: 1800% 1800% !important;
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !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; -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; animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} }
&.full { &.full {
padding: 0 8px 0 12px; padding: 0 8px 0 12px;
font-size: 14px; 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 { &.large {
@ -270,48 +287,48 @@ onBeforeUnmount(() => {
} }
&.gamingDark:hover { &.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; -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; -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; animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
} }
&.gamingDark:active { &.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; -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; -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; animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
border-color: white; border-color: black;
} }
&.gamingLight:hover { &.gamingLight:hover {
-webkit-text-fill-color: unset !important;
background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4); background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
background-size: 1800% 1800% !important; background-size: 1800% 1800% !important;
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !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; -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; animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
border-color: white; border-color: black;
} }
&.gamingLight:active { &.gamingLight:active {
-webkit-text-fill-color: unset !important;
color: white; 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; -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; -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; animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
border-color: white; border-color: black;
} }
&.gamingDark { &.gamingDark {
-webkit-text-fill-color: unset !important; -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; -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; -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; animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
@ -320,7 +337,8 @@ onBeforeUnmount(() => {
&.gamingLight { &.gamingLight {
-webkit-text-fill-color: unset !important; -webkit-text-fill-color: unset !important;
color: white; 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; -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; -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; animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
@ -339,13 +357,13 @@ onBeforeUnmount(() => {
margin-right: 6px; margin-right: 6px;
&.gamingDark { &.gamingDark {
color: black; color: white;
-webkit-text-fill-color: unset !important;
} }
&.gamingLight { &.gamingLight {
color: white; color: white;
-webkit-text-fill-color: unset !important;
} }
} }

View File

@ -62,7 +62,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template> </template>
<script lang="ts"> <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 { focusPrev, focusNext } from '@/scripts/focus.js';
import MkSwitchButton from '@/components/MkSwitch.button.vue'; import MkSwitchButton from '@/components/MkSwitch.button.vue';
import { MenuItem, InnerMenuItem, MenuPending, MenuAction, MenuSwitch, MenuParent } from '@/types/menu'; import { MenuItem, InnerMenuItem, MenuPending, MenuAction, MenuSwitch, MenuParent } from '@/types/menu';

View File

@ -292,7 +292,7 @@ function more(ev: MouseEvent) {
} }
&.gamingLight { &.gamingLight {
color: white !important; color: black !important;
} }
&.gamingDark { &.gamingDark {
@ -300,7 +300,7 @@ function more(ev: MouseEvent) {
} }
&.gamingLight:before { &.gamingLight:before {
color: white !important; color: black !important;
content: ""; content: "";
display: block; display: block;
width: calc(100% - 38px); width: calc(100% - 38px);
@ -320,8 +320,8 @@ function more(ev: MouseEvent) {
} }
&.gamingLight:hover, &.gamingLight.active { &.gamingLight:hover, &.gamingLight.active {
color: white !important;
color: black !important;
&.gamingLight:before { &.gamingLight:before {
background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4); background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
background-size: 1800% 1800% !important; background-size: 1800% 1800% !important;
@ -502,7 +502,7 @@ function more(ev: MouseEvent) {
} }
&.gamingLight:hover { &.gamingLight:hover {
color: black; color: white;
background-size: 1800% 1800% !important; background-size: 1800% 1800% !important;
text-decoration: none; text-decoration: none;
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important; -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
@ -511,7 +511,7 @@ function more(ev: MouseEvent) {
} }
&.gamingLight:active { &.gamingLight:active {
color: black; color: white;
background-size: 1800% 1800% !important; background-size: 1800% 1800% !important;
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !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 { &.gamingLight:hover, &.gamingLight.active {
color: black; color: white;
&.gamingLight:before { &.gamingLight:before {
color: white !important;
content: ""; content: "";
display: block; display: block;
width: calc(100% - 34px); 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; -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; -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; animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
color: black; color: white;
} }
&.gamingLight:hover, &.gamingLight.active { &.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; -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; -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; 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 { &.gamingLight:hover, &.gamingLight.active {
text-decoration: none; text-decoration: none;
color: black; color: white;
&.gamingLight:before { &.gamingLight:before {
content: ""; content: "";
display: block; display: block;
@ -857,7 +855,7 @@ function more(ev: MouseEvent) {
} }
&.gamingLight { &.gamingLight {
color: black; color: white;
} }
} }