usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

bugfix

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

267
packages/frontend/src/components/MkChannelFollowButton.vue
View File

@ -4,37 +4,47 @@ 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"
</template> :class="[$style.text,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]">{{
<template v-else> i18n.ts.unfollow
<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><i class="ti ti-minus"></i>
</template> </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'}]">{{ i18n.ts.processing }}</span><MkLoading :em="true"/> :class="[$style.text,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]">{{
</template> i18n.ts.follow
</button> }}</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> </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<{
channel: Record<string, any>; channel: Record<string, any>;
full?: boolean; full?: boolean;
}>(), { }>(), {
full: false, full: false,
}); });
@ -74,41 +84,41 @@ const isFollowing = ref<boolean>(props.channel.isFollowing);
const wait = ref(false); const wait = ref(false);
async function onClick() { async function onClick() {
wait.value = true; wait.value = true;
try { try {
if (isFollowing.value) { if (isFollowing.value) {
await os.api('channels/unfollow', { await os.api('channels/unfollow', {
channelId: props.channel.id, channelId: props.channel.id,
}); });
isFollowing.value = false; isFollowing.value = false;
} else { } else {
await os.api('channels/follow', { await os.api('channels/follow', {
channelId: props.channel.id, channelId: props.channel.id,
}); });
isFollowing.value = true; isFollowing.value = true;
} }
} catch (err) { } catch (err) {
console.error(err); console.error(err);
} finally { } finally {
wait.value = false; wait.value = false;
} }
} }
</script> </script>
<style lang="scss" module> <style lang="scss" module>
.root { .root {
position: relative; position: relative;
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,40 +135,39 @@ 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 {
padding: 0 8px 0 12px;
font-size: 14px;
}
&:not(.full) { &.full {
width: 31px; padding: 0 8px 0 12px;
} font-size: 14px;
}
&:focus-visible { &:not(.full) {
&:after { width: 31px;
content: ""; }
pointer-events: none;
position: absolute;
top: -5px;
right: -5px;
bottom: -5px;
left: -5px;
border: 2px solid var(--focus);
border-radius: 32px;
}
}
&:hover { &:focus-visible {
//background: mix($primary, #fff, 20); &:after {
} content: "";
pointer-events: none;
position: absolute;
top: -5px;
right: -5px;
bottom: -5px;
left: -5px;
border: 2px solid var(--focus);
border-radius: 32px;
}
}
&:active { &:hover {
//background: mix($primary, #fff, 40); //background: mix($primary, #fff, 20);
} }
&:active {
//background: mix($primary, #fff, 40);
}
&.active { &.active {
color: var(--fgOnAccent); color: var(--fgOnAccent);
@ -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;
@ -242,6 +249,78 @@ 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>

78
packages/frontend/src/components/MkFollowButton.vue
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;
} }
} }

2
packages/frontend/src/components/MkMenu.vue
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';

22
packages/frontend/src/ui/_common_/navbar.vue
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;
} }
} }