fix: icon
This commit is contained in:
mattyatea
parent
a63bef2d8f
commit
093540375d
|
|
@ -2,54 +2,108 @@
|
|||
SPDX-FileCopyrightText: syuilo and other misskey contributors
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<button
|
||||
class="_button"
|
||||
:class="[$style.root, { [$style.wait]: wait, [$style.active]: isFollowing || hasPendingFollowRequestFromYou, [$style.full]: full, [$style.large]: large }]"
|
||||
:disabled="wait"
|
||||
@click="onClick"
|
||||
>
|
||||
<template v-if="!wait">
|
||||
<template v-if="hasPendingFollowRequestFromYou && user.isLocked">
|
||||
<span v-if="full" :class="$style.text">{{ i18n.ts.followRequestPending }}</span><i class="ti ti-hourglass-empty"></i>
|
||||
</template>
|
||||
<template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked">
|
||||
<!-- つまりリモートフォローの場合。 -->
|
||||
<span v-if="full" :class="$style.text">{{ i18n.ts.processing }}</span><MkLoading :em="true" :colored="false"/>
|
||||
</template>
|
||||
<template v-else-if="isFollowing">
|
||||
<span v-if="full" :class="$style.text">{{ i18n.ts.unfollow }}</span><i class="ti ti-minus"></i>
|
||||
</template>
|
||||
<template v-else-if="!isFollowing && user.isLocked">
|
||||
<span v-if="full" :class="$style.text">{{ i18n.ts.followRequest }}</span><i class="ti ti-plus"></i>
|
||||
</template>
|
||||
<template v-else-if="!isFollowing && !user.isLocked">
|
||||
<span v-if="full" :class="$style.text">{{ i18n.ts.follow }}</span><i class="ti ti-plus"></i>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span v-if="full" :class="$style.text">{{ i18n.ts.processing }}</span><MkLoading :em="true" :colored="false"/>
|
||||
</template>
|
||||
</button>
|
||||
<button
|
||||
class="_button"
|
||||
:class="[$style.root, ,{ [$style.wait]: wait, [$style.active]: isFollowing || hasPendingFollowRequestFromYou,[$style.gamingDark]: gaming === 'dark' || isFollowing || hasPendingFollowRequestFromYou,[$style.gamingLight]: gaming === 'light' || isFollowing || hasPendingFollowRequestFromYou
|
||||
, [$style.full]: full, [$style.large]: large }]"
|
||||
:disabled="wait"
|
||||
@click="onClick"
|
||||
>
|
||||
<template v-if="!wait">
|
||||
<template v-if="hasPendingFollowRequestFromYou && user.isLocked">
|
||||
<span v-if="full"
|
||||
:class="$style.text,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'} ">{{
|
||||
i18n.ts.followRequestPending
|
||||
}}</span><i class="ti ti-hourglass-empty"></i>
|
||||
</template>
|
||||
<template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked">
|
||||
<!-- つまりリモートフォローの場合。 -->
|
||||
<span v-if="full"
|
||||
:class="$style.text,{[$style.gamingDark]: gaming === 'dark' ,[$style.gamingLight]: gaming === 'light'} ">{{
|
||||
i18n.ts.processing
|
||||
}}</span>
|
||||
<MkLoading :em="true" :colored="false"/>
|
||||
</template>
|
||||
<template v-else-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>
|
||||
</template>
|
||||
<template v-else-if="!isFollowing && user.isLocked">
|
||||
<span v-if="full"
|
||||
:class="$style.text,{[$style.gamingDark]: gaming === 'dark' ,[$style.gamingLight]: gaming === 'light'} ">{{
|
||||
i18n.ts.followRequest
|
||||
}}</span><i class="ti ti-plus"></i>
|
||||
</template>
|
||||
<template v-else-if="!isFollowing && !user.isLocked">
|
||||
<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" :colored="false"/>
|
||||
</template>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onBeforeUnmount, onMounted } from 'vue';
|
||||
import {computed, onBeforeUnmount, onMounted, ref, watch} from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import * as os from '@/os.js';
|
||||
import { useStream } from '@/stream.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { claimAchievement } from '@/scripts/achievements.js';
|
||||
import { $i } from '@/account.js';
|
||||
import {useStream} from '@/stream.js';
|
||||
import {i18n} from '@/i18n.js';
|
||||
import {claimAchievement} from '@/scripts/achievements.js';
|
||||
import {$i} from '@/account.js';
|
||||
import {defaultStore} from "@/store.js";
|
||||
|
||||
let gaming = ref('');
|
||||
|
||||
const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
|
||||
const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
|
||||
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 props = withDefaults(defineProps<{
|
||||
user: Misskey.entities.UserDetailed,
|
||||
full?: boolean,
|
||||
large?: boolean,
|
||||
user: Misskey.entities.UserDetailed,
|
||||
full?: boolean,
|
||||
large?: boolean,
|
||||
}>(), {
|
||||
full: false,
|
||||
large: false,
|
||||
full: false,
|
||||
large: false,
|
||||
});
|
||||
|
||||
let isFollowing = $ref(props.user.isFollowing);
|
||||
|
|
@ -58,151 +112,299 @@ let wait = $ref(false);
|
|||
const connection = useStream().useChannel('main');
|
||||
|
||||
if (props.user.isFollowing == null) {
|
||||
os.api('users/show', {
|
||||
userId: props.user.id,
|
||||
})
|
||||
.then(onFollowChange);
|
||||
os.api('users/show', {
|
||||
userId: props.user.id,
|
||||
})
|
||||
.then(onFollowChange);
|
||||
}
|
||||
|
||||
function onFollowChange(user: Misskey.entities.UserDetailed) {
|
||||
if (user.id === props.user.id) {
|
||||
isFollowing = user.isFollowing;
|
||||
hasPendingFollowRequestFromYou = user.hasPendingFollowRequestFromYou;
|
||||
}
|
||||
if (user.id === props.user.id) {
|
||||
isFollowing = user.isFollowing;
|
||||
hasPendingFollowRequestFromYou = user.hasPendingFollowRequestFromYou;
|
||||
}
|
||||
}
|
||||
|
||||
async function onClick() {
|
||||
wait = true;
|
||||
wait = true;
|
||||
|
||||
try {
|
||||
if (isFollowing) {
|
||||
const { canceled } = await os.confirm({
|
||||
type: 'warning',
|
||||
text: i18n.t('unfollowConfirm', { name: props.user.name || props.user.username }),
|
||||
});
|
||||
try {
|
||||
if (isFollowing) {
|
||||
const {canceled} = await os.confirm({
|
||||
type: 'warning',
|
||||
text: i18n.t('unfollowConfirm', {name: props.user.name || props.user.username}),
|
||||
});
|
||||
|
||||
if (canceled) return;
|
||||
if (canceled) return;
|
||||
|
||||
await os.api('following/delete', {
|
||||
userId: props.user.id,
|
||||
});
|
||||
} else {
|
||||
if (hasPendingFollowRequestFromYou) {
|
||||
await os.api('following/requests/cancel', {
|
||||
userId: props.user.id,
|
||||
});
|
||||
hasPendingFollowRequestFromYou = false;
|
||||
} else {
|
||||
await os.api('following/create', {
|
||||
userId: props.user.id,
|
||||
});
|
||||
hasPendingFollowRequestFromYou = true;
|
||||
await os.api('following/delete', {
|
||||
userId: props.user.id,
|
||||
});
|
||||
} else {
|
||||
if (hasPendingFollowRequestFromYou) {
|
||||
await os.api('following/requests/cancel', {
|
||||
userId: props.user.id,
|
||||
});
|
||||
hasPendingFollowRequestFromYou = false;
|
||||
} else {
|
||||
await os.api('following/create', {
|
||||
userId: props.user.id,
|
||||
});
|
||||
hasPendingFollowRequestFromYou = true;
|
||||
|
||||
claimAchievement('following1');
|
||||
claimAchievement('following1');
|
||||
|
||||
if ($i.followingCount >= 10) {
|
||||
claimAchievement('following10');
|
||||
}
|
||||
if ($i.followingCount >= 50) {
|
||||
claimAchievement('following50');
|
||||
}
|
||||
if ($i.followingCount >= 100) {
|
||||
claimAchievement('following100');
|
||||
}
|
||||
if ($i.followingCount >= 300) {
|
||||
claimAchievement('following300');
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
} finally {
|
||||
wait = false;
|
||||
}
|
||||
if ($i.followingCount >= 10) {
|
||||
claimAchievement('following10');
|
||||
}
|
||||
if ($i.followingCount >= 50) {
|
||||
claimAchievement('following50');
|
||||
}
|
||||
if ($i.followingCount >= 100) {
|
||||
claimAchievement('following100');
|
||||
}
|
||||
if ($i.followingCount >= 300) {
|
||||
claimAchievement('following300');
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
} finally {
|
||||
wait = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
connection.on('follow', onFollowChange);
|
||||
connection.on('unfollow', onFollowChange);
|
||||
connection.on('follow', onFollowChange);
|
||||
connection.on('unfollow', onFollowChange);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
connection.dispose();
|
||||
connection.dispose();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
color: var(--fgOnWhite);
|
||||
border: solid 1px var(--accent);
|
||||
padding: 0;
|
||||
height: 31px;
|
||||
font-size: 16px;
|
||||
border-radius: 32px;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
color: var(--fgOnWhite);
|
||||
border: solid 1px;
|
||||
padding: 0;
|
||||
height: 31px;
|
||||
font-size: 16px;
|
||||
border-radius: 32px;
|
||||
background: #fff;
|
||||
|
||||
&.full {
|
||||
padding: 0 8px 0 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
&.full {
|
||||
padding: 0 8px 0 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&.large {
|
||||
font-size: 16px;
|
||||
height: 38px;
|
||||
padding: 0 12px 0 16px;
|
||||
}
|
||||
&.large {
|
||||
font-size: 16px;
|
||||
height: 38px;
|
||||
padding: 0 12px 0 16px;
|
||||
}
|
||||
|
||||
&:not(.full) {
|
||||
width: 31px;
|
||||
}
|
||||
&:not(.full) {
|
||||
width: 31px;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
&:after {
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
bottom: -5px;
|
||||
left: -5px;
|
||||
border: 2px solid var(--focus);
|
||||
border-radius: 32px;
|
||||
}
|
||||
}
|
||||
&:focus-visible {
|
||||
&:after {
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
bottom: -5px;
|
||||
left: -5px;
|
||||
border: 2px solid var(--focus);
|
||||
border-radius: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
//background: mix($primary, #fff, 20);
|
||||
}
|
||||
&:hover {
|
||||
//background: mix($primary, #fff, 20);
|
||||
}
|
||||
|
||||
&:active {
|
||||
//background: mix($primary, #fff, 40);
|
||||
}
|
||||
&:active {
|
||||
//background: mix($primary, #fff, 40);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--fgOnAccent);
|
||||
background: var(--accent);
|
||||
&.active {
|
||||
color: var(--fgOnAccent);
|
||||
background: var(--accent);
|
||||
|
||||
&:hover {
|
||||
background: var(--accentLighten);
|
||||
border-color: var(--accentLighten);
|
||||
}
|
||||
&:hover {
|
||||
background: var(--accentLighten);
|
||||
border-color: var(--accentLighten);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--accentDarken);
|
||||
border-color: var(--accentDarken);
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
background: var(--accentDarken);
|
||||
border-color: var(--accentDarken);
|
||||
}
|
||||
|
||||
&.wait {
|
||||
cursor: wait !important;
|
||||
opacity: 0.7;
|
||||
}
|
||||
&.gamingDark:hover {
|
||||
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:active {
|
||||
color: white;
|
||||
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;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
&.gamingLight:hover {
|
||||
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;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
&.gamingLight:active {
|
||||
color: white;
|
||||
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;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
&.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.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;
|
||||
}
|
||||
|
||||
&.gamingLight {
|
||||
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;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.wait {
|
||||
cursor: wait !important;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-right: 6px;
|
||||
margin-right: 6px;
|
||||
|
||||
&.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.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;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
&.gamingLight {
|
||||
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;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@-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>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -9,19 +9,55 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
:class="{
|
||||
[$style.button]: true,
|
||||
[$style.buttonChecked]: checked,
|
||||
[$style.buttonDisabled]: props.disabled
|
||||
[$style.buttonDisabled]: props.disabled,
|
||||
[$style.gamingDark]: gaming === 'dark' && checked,
|
||||
[$style.gamingLight]: gaming === 'light' && checked
|
||||
}"
|
||||
data-cy-switch-toggle
|
||||
@click.prevent.stop="toggle"
|
||||
>
|
||||
<div :class="{ [$style.knob]: true, [$style.knobChecked]: checked }"></div>
|
||||
<div
|
||||
:class="{ [$style.knob]: true, [$style.knobChecked]: checked, [$style.gamingDark]: gaming === 'dark' && checked,[$style.gamingLight]: gaming === 'light' && checked}"></div>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { toRefs, Ref } from 'vue';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import {toRefs, Ref, ref, computed, watch} from 'vue';
|
||||
import {i18n} from '@/i18n.js';
|
||||
import {defaultStore} from "@/store.js";
|
||||
|
||||
let gaming = ref('');
|
||||
|
||||
const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
|
||||
const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
|
||||
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 props = withDefaults(defineProps<{
|
||||
checked: boolean | Ref<boolean>;
|
||||
disabled?: boolean;
|
||||
|
|
@ -56,13 +92,40 @@ const toggle = () => {
|
|||
cursor: pointer;
|
||||
transition: inherit;
|
||||
user-select: none;
|
||||
|
||||
&.gamingLight {
|
||||
border-image: conic-gradient(#e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd) 1;
|
||||
border: solid 1px;
|
||||
}
|
||||
|
||||
&.gamingDark {
|
||||
border-image: conic-gradient(#c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4) 1;
|
||||
border: solid 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.buttonChecked {
|
||||
background-color: var(--switchOnBg) !important;
|
||||
border-color: var(--switchOnBg) !important;
|
||||
|
||||
&.gamingLight {
|
||||
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;
|
||||
}
|
||||
|
||||
&.gamingDark {
|
||||
background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
|
||||
background-size: 1800% 1800% !important;
|
||||
-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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.buttonDisabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
|
@ -78,11 +141,92 @@ const toggle = () => {
|
|||
&:not(.knobChecked) {
|
||||
left: 3px;
|
||||
background: var(--switchOffFg);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.knobChecked {
|
||||
left: 12px;
|
||||
background: var(--switchOnFg);
|
||||
|
||||
&.gamingDark {
|
||||
background: white !important;
|
||||
}
|
||||
|
||||
&.gamingLight {
|
||||
background: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
@-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>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
-->
|
||||
|
||||
<template>
|
||||
<div :class="[$style.root, { [$style.disabled]: disabled, [$style.checked]: checked }]">
|
||||
<div :class="[$style.root, { [$style.disabled]: disabled && gaming === '', [$style.checked]: checked && gaming === '' , [$style.gamingdarkDisabled]: disabled && gaming === 'dark', [$style.gamingLightDisabled]: disabled && gaming === 'light'}]">
|
||||
<input
|
||||
ref="input"
|
||||
type="checkbox"
|
||||
|
|
@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
@keydown.enter="toggle"
|
||||
>
|
||||
<XButton :checked="checked" :disabled="disabled" @toggle="toggle"/>
|
||||
<span :class="$style.body">
|
||||
<span :class="$style.body,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}">
|
||||
<!-- TODO: 無名slotの方は廃止 -->
|
||||
<span :class="$style.label">
|
||||
<span @click="toggle">
|
||||
|
|
@ -27,8 +27,42 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { toRefs, Ref } from 'vue';
|
||||
import {toRefs, Ref, ref, computed, watch} from 'vue';
|
||||
import XButton from '@/components/MkSwitch.button.vue';
|
||||
import {defaultStore} from "@/store.js";
|
||||
let gaming = ref('');
|
||||
const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
|
||||
const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
|
||||
|
||||
// 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 props = defineProps<{
|
||||
modelValue: boolean | Ref<boolean>;
|
||||
|
|
@ -65,6 +99,26 @@ const toggle = () => {
|
|||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&.gamingDarkDisabled{
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
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;
|
||||
|
||||
}
|
||||
&.gamingLightDisabled{
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
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;
|
||||
|
||||
}
|
||||
//&.checked {
|
||||
//}
|
||||
}
|
||||
|
|
@ -82,6 +136,22 @@ const toggle = () => {
|
|||
display: block;
|
||||
transition: inherit;
|
||||
color: var(--fg);
|
||||
&.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.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;
|
||||
|
||||
}
|
||||
&.gamingLight{
|
||||
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;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
|
|
@ -106,4 +176,6 @@ const toggle = () => {
|
|||
font-size: 85%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</div>
|
||||
<div
|
||||
ref="tabHighlightEl"
|
||||
:class="[$style.tabHighlight, { [$style.animate]: defaultStore.reactiveState.animation.value }]"
|
||||
:class="[$style.tabHighlight, { [$style.animate]: defaultStore.reactiveState.animation.value , [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"
|
||||
></div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -53,9 +53,40 @@ export type Tab = {
|
|||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, onUnmounted, watch, nextTick, shallowRef } from 'vue';
|
||||
import {onMounted, onUnmounted, watch, nextTick, shallowRef, ref, computed} from 'vue';
|
||||
import { defaultStore } from '@/store.js';
|
||||
let gaming = ref('');
|
||||
|
||||
const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
|
||||
const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
|
||||
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 props = withDefaults(defineProps<{
|
||||
tabs?: Tab[];
|
||||
tab?: string;
|
||||
|
|
@ -245,9 +276,88 @@ onUnmounted(() => {
|
|||
border-radius: 999px;
|
||||
transition: none;
|
||||
pointer-events: none;
|
||||
|
||||
&.gamingLight{
|
||||
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;
|
||||
}
|
||||
&.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.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;
|
||||
}
|
||||
&.animate {
|
||||
transition: width 0.15s ease, left 0.15s ease;
|
||||
}
|
||||
}
|
||||
@-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>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<MkSpacer :contentMax="700" :marginMin="16">
|
||||
<div class="lxpfedzu">
|
||||
<div class="banner">
|
||||
<img :src="instance.iconUrl || '/favicon.ico'" alt="" class="icon"/>
|
||||
<img :src="iconUrl" alt="" class="icon"/>
|
||||
</div>
|
||||
|
||||
<MkInfo v-if="thereIsUnresolvedAbuseReport" warn class="info">{{ i18n.ts.thereIsUnresolvedAbuseReportWarning }} <MkA to="/admin/abuses" class="_link">{{ i18n.ts.check }}</MkA></MkInfo>
|
||||
|
|
@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onActivated, onMounted, onUnmounted, provide, watch } from 'vue';
|
||||
import {computed, onActivated, onMounted, onUnmounted, provide, ref, watch} from 'vue';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import MkSuperMenu from '@/components/MkSuperMenu.vue';
|
||||
import MkInfo from '@/components/MkInfo.vue';
|
||||
|
|
@ -37,6 +37,7 @@ import * as os from '@/os.js';
|
|||
import { lookupUser } from '@/scripts/lookup-user.js';
|
||||
import { useRouter } from '@/router.js';
|
||||
import { definePageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata.js';
|
||||
import {bannerDark, bannerLight, defaultStore, iconDark, iconLight} from "@/store.js";
|
||||
|
||||
const isEmpty = (x: string | null) => x == null || x === '';
|
||||
|
||||
|
|
@ -61,7 +62,20 @@ let noBotProtection = !instance.disableRegistration && !instance.enableHcaptcha
|
|||
let noEmailServer = !instance.enableEmail;
|
||||
let thereIsUnresolvedAbuseReport = $ref(false);
|
||||
let currentPage = $computed(() => router.currentRef.value.child);
|
||||
|
||||
const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
|
||||
let iconUrl = ref();
|
||||
if (darkMode.value) {
|
||||
iconUrl.value = iconDark;
|
||||
} else {
|
||||
iconUrl.value = iconLight;
|
||||
}
|
||||
watch(darkMode, () => {
|
||||
if (darkMode.value) {
|
||||
iconUrl.value = iconDark;
|
||||
} else {
|
||||
iconUrl.value = iconLight;
|
||||
}
|
||||
})
|
||||
os.api('admin/abuse-user-reports', {
|
||||
state: 'unresolved',
|
||||
limit: 1,
|
||||
|
|
|
|||
|
|
@ -375,20 +375,20 @@ function more() {
|
|||
}
|
||||
&.gamingLight:hover, &.gamingLight.active {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
color: white;
|
||||
|
||||
&.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%;
|
||||
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, #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;
|
||||
|
|
|
|||
|
|
@ -283,6 +283,7 @@ function more(ev: MouseEvent) {
|
|||
}
|
||||
|
||||
&.gamingLight:before {
|
||||
color: white;
|
||||
content: "";
|
||||
display: block;
|
||||
width: calc(100% - 38px);
|
||||
|
|
@ -302,6 +303,7 @@ function more(ev: MouseEvent) {
|
|||
}
|
||||
|
||||
&.gamingLight:hover, &.gamingLight.active {
|
||||
color: white;
|
||||
&.gamingLight:before {
|
||||
background: linear-gradient(270deg, #d08c8c, #cfb28c, #dbdb8b, #95d08e, #8bdbdb, #94a9cf, #b09ecf, #cfa0cf, #e0a0bd);
|
||||
background-size: 1800% 1800% !important;
|
||||
|
|
@ -312,6 +314,7 @@ function more(ev: MouseEvent) {
|
|||
}
|
||||
|
||||
&.gamingDark:before {
|
||||
color: white;
|
||||
content: "";
|
||||
display: block;
|
||||
width: calc(100% - 38px);
|
||||
|
|
@ -331,6 +334,7 @@ function more(ev: MouseEvent) {
|
|||
}
|
||||
|
||||
&.gamingDark:hover, &.gamingDark.active {
|
||||
color: white;
|
||||
&.gamingDark:before {
|
||||
background: linear-gradient(270deg, #a84f4f, #a88c4f, #9aa24b, #6da85c, #53a8a6, #7597b5, #8679b5, #b579b5, #b56d96);
|
||||
background-size: 1800% 1800% !important;
|
||||
|
|
@ -470,7 +474,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.25, 0.25, 1) infinite !important;
|
||||
|
|
@ -479,7 +483,7 @@ function more(ev: MouseEvent) {
|
|||
}
|
||||
|
||||
&.gamingLight:active {
|
||||
color: black;
|
||||
color: white;
|
||||
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;
|
||||
|
|
@ -487,7 +491,7 @@ function more(ev: MouseEvent) {
|
|||
}
|
||||
|
||||
&.gamingLight:hover, &.gamingLight.active {
|
||||
color: black;
|
||||
color: white;
|
||||
&.gamingLight:before {
|
||||
content: "";
|
||||
display: block;
|
||||
|
|
@ -618,6 +622,7 @@ function more(ev: MouseEvent) {
|
|||
}
|
||||
|
||||
&.gamingLight:hover, &.gamingLight.active {
|
||||
|
||||
&.gamingLight:before {
|
||||
background: linear-gradient(270deg, #d08c8c, #cfb28c, #dbdb8b, #95d08e, #8bdbdb, #94a9cf, #b09ecf, #cfa0cf, #e0a0bd);
|
||||
background-size: 1800% 1800% !important;
|
||||
|
|
@ -628,6 +633,7 @@ function more(ev: MouseEvent) {
|
|||
}
|
||||
|
||||
&.gamingDark:before {
|
||||
color: white;
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
@ -647,6 +653,7 @@ function more(ev: MouseEvent) {
|
|||
}
|
||||
|
||||
&.gamingDark:hover, &.gamingDark.active {
|
||||
color: white;
|
||||
&.gamingDark:before {
|
||||
background: linear-gradient(270deg, #a84f4f, #a88c4f, #9aa24b, #6da85c, #53a8a6, #7597b5, #8679b5, #b579b5, #b56d96);
|
||||
background-size: 1800% 1800% !important;
|
||||
|
|
@ -793,71 +800,71 @@ function more(ev: MouseEvent) {
|
|||
animation: blink 1s infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes AnimationLight {
|
||||
0% {
|
||||
background-position: 0% 50%
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%
|
||||
}
|
||||
|
||||
}
|
||||
@-webkit-keyframes AnimationLight {
|
||||
0% {
|
||||
background-position: 0% 50%
|
||||
}
|
||||
@-moz-keyframes AnimationLight {
|
||||
0% {
|
||||
background-position: 0% 50%
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%
|
||||
}
|
||||
@keyframes AnimationLight {
|
||||
0% {
|
||||
background-position: 0% 50%
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 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 AnimationLight {
|
||||
0% {
|
||||
background-position: 0% 50%
|
||||
}
|
||||
@-moz-keyframes AnimationDark {
|
||||
0% {
|
||||
background-position: 0% 50%
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%
|
||||
}
|
||||
@keyframes AnimationDark {
|
||||
0% {
|
||||
background-position: 0% 50%
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue