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

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

This commit is contained in:
mattyatea 2023-09-21 16:39:18 +09:00
parent 8da4b39644
commit bbd5282dc6
8 changed files with 740 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
locales/en-US.yml
View File

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

1
locales/index.d.ts vendored
View File

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

1
locales/ja-JP.yml
View File

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

189
packages/frontend/src/components/MkButton.vue
View File

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

3
packages/frontend/src/pages/settings/general.vue
View File

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

5
packages/frontend/src/pages/timeline.vue
View File

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

4
packages/frontend/src/store.ts
View File

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

372
packages/frontend/src/ui/_common_/navbar.vue
View File

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