feat: ゲーミングモード実装
This commit is contained in:
mattyatea
parent
8da4b39644
commit
bbd5282dc6
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -295,6 +295,7 @@ export interface Locale {
|
|||
"theme": string;
|
||||
"themeForLightMode": string;
|
||||
"themeForDarkMode": string;
|
||||
"gamingMode": string;
|
||||
"light": string;
|
||||
"dark": string;
|
||||
"lightThemes": string;
|
||||
|
|
|
|||
|
|
@ -292,6 +292,7 @@ location: "場所"
|
|||
theme: "テーマ"
|
||||
themeForLightMode: "ライトモードで使うテーマ"
|
||||
themeForDarkMode: "ダークモードで使うテーマ"
|
||||
gamingMode: 'ゲーミングモード'
|
||||
light: "ライト"
|
||||
dark: "ダーク"
|
||||
lightThemes: "明るいテーマ"
|
||||
|
|
|
|||
|
|
@ -4,285 +4,440 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
-->
|
||||
|
||||
<template>
|
||||
<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 }]"
|
||||
: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
|
||||
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 }]"
|
||||
:to="to"
|
||||
@mousedown="onMousedown"
|
||||
>
|
||||
<div ref="ripples" :class="$style.ripples" :data-children-class="$style.ripple"></div>
|
||||
<div :class="$style.content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</MkA>
|
||||
<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,
|
||||
[$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
|
||||
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,
|
||||
[$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>
|
||||
</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';
|
||||
primary?: boolean;
|
||||
gradate?: boolean;
|
||||
rounded?: boolean;
|
||||
inline?: boolean;
|
||||
link?: boolean;
|
||||
to?: string;
|
||||
autofocus?: boolean;
|
||||
wait?: boolean;
|
||||
danger?: boolean;
|
||||
full?: boolean;
|
||||
small?: boolean;
|
||||
large?: boolean;
|
||||
transparent?: boolean;
|
||||
asLike?: boolean;
|
||||
name?: string;
|
||||
value?: string;
|
||||
type?: 'button' | 'submit' | 'reset';
|
||||
primary?: boolean;
|
||||
gradate?: boolean;
|
||||
rounded?: boolean;
|
||||
inline?: boolean;
|
||||
link?: boolean;
|
||||
to?: string;
|
||||
autofocus?: boolean;
|
||||
wait?: boolean;
|
||||
danger?: boolean;
|
||||
full?: boolean;
|
||||
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;
|
||||
(ev: 'click', payload: MouseEvent): void;
|
||||
}>();
|
||||
|
||||
let el = $shallowRef<HTMLElement | null>(null);
|
||||
let ripples = $shallowRef<HTMLElement | null>(null);
|
||||
|
||||
onMounted(() => {
|
||||
if (props.autofocus) {
|
||||
nextTick(() => {
|
||||
el!.focus();
|
||||
});
|
||||
}
|
||||
if (props.autofocus) {
|
||||
nextTick(() => {
|
||||
el!.focus();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function distance(p, q): number {
|
||||
return Math.hypot(p.x - q.x, p.y - q.y);
|
||||
return Math.hypot(p.x - q.x, p.y - q.y);
|
||||
}
|
||||
|
||||
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);
|
||||
return Math.max(dist1, dist2, dist3, dist4) * 2;
|
||||
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;
|
||||
}
|
||||
|
||||
function onMousedown(evt: MouseEvent): void {
|
||||
const target = evt.target! as HTMLElement;
|
||||
const rect = target.getBoundingClientRect();
|
||||
const target = evt.target! as HTMLElement;
|
||||
const rect = target.getBoundingClientRect();
|
||||
|
||||
const ripple = document.createElement('div');
|
||||
ripple.classList.add(ripples!.dataset.childrenClass!);
|
||||
ripple.style.top = (evt.clientY - rect.top - 1).toString() + 'px';
|
||||
ripple.style.left = (evt.clientX - rect.left - 1).toString() + 'px';
|
||||
const ripple = document.createElement('div');
|
||||
ripple.classList.add(ripples!.dataset.childrenClass!);
|
||||
ripple.style.top = (evt.clientY - rect.top - 1).toString() + 'px';
|
||||
ripple.style.left = (evt.clientX - rect.left - 1).toString() + 'px';
|
||||
|
||||
ripples!.appendChild(ripple);
|
||||
ripples!.appendChild(ripple);
|
||||
|
||||
const circleCenterX = evt.clientX - rect.left;
|
||||
const circleCenterY = evt.clientY - rect.top;
|
||||
const circleCenterX = evt.clientX - rect.left;
|
||||
const circleCenterY = evt.clientY - rect.top;
|
||||
|
||||
const scale = calcCircleScale(target.clientWidth, target.clientHeight, circleCenterX, circleCenterY);
|
||||
const scale = calcCircleScale(target.clientWidth, target.clientHeight, circleCenterX, circleCenterY);
|
||||
|
||||
window.setTimeout(() => {
|
||||
ripple.style.transform = 'scale(' + (scale / 2) + ')';
|
||||
}, 1);
|
||||
window.setTimeout(() => {
|
||||
ripple.style.transition = 'all 1s ease';
|
||||
ripple.style.opacity = '0';
|
||||
}, 1000);
|
||||
window.setTimeout(() => {
|
||||
if (ripples) ripples.removeChild(ripple);
|
||||
}, 2000);
|
||||
window.setTimeout(() => {
|
||||
ripple.style.transform = 'scale(' + (scale / 2) + ')';
|
||||
}, 1);
|
||||
window.setTimeout(() => {
|
||||
ripple.style.transition = 'all 1s cubic-bezier(0, 0.44, 0.39, 1.1)';
|
||||
ripple.style.opacity = '0';
|
||||
}, 1000);
|
||||
window.setTimeout(() => {
|
||||
if (ripples) ripples.removeChild(ripple);
|
||||
}, 2000);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
position: relative;
|
||||
z-index: 1; // 他コンポーネントのbox-shadowに隠されないようにするため
|
||||
display: block;
|
||||
min-width: 100px;
|
||||
width: max-content;
|
||||
padding: 7px 14px;
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
font-size: 95%;
|
||||
box-shadow: none;
|
||||
text-decoration: none;
|
||||
background: var(--buttonBg);
|
||||
border-radius: 5px;
|
||||
overflow: clip;
|
||||
box-sizing: border-box;
|
||||
transition: background 0.1s ease;
|
||||
position: relative;
|
||||
z-index: 1; // 他コンポーネントのbox-shadowに隠されないようにするため
|
||||
display: block;
|
||||
min-width: 100px;
|
||||
width: max-content;
|
||||
padding: 7px 14px;
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
font-size: 95%;
|
||||
box-shadow: none;
|
||||
text-decoration: none;
|
||||
background: var(--buttonBg);
|
||||
border-radius: 5px;
|
||||
overflow: clip;
|
||||
box-sizing: border-box;
|
||||
transition: background 0.1s cubic-bezier(0, 0.44, 0.39, 1.1);
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: var(--buttonHoverBg);
|
||||
}
|
||||
&:not(:disabled):hover {
|
||||
background: var(--buttonHoverBg);
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: var(--buttonHoverBg);
|
||||
}
|
||||
&:not(:disabled):active {
|
||||
background: var(--buttonHoverBg);
|
||||
}
|
||||
|
||||
&.small {
|
||||
font-size: 90%;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
&.small {
|
||||
font-size: 90%;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
&.large {
|
||||
font-size: 100%;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
&.large {
|
||||
font-size: 100%;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
&.full {
|
||||
width: 100%;
|
||||
}
|
||||
&.full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.rounded {
|
||||
border-radius: 999px;
|
||||
}
|
||||
&.rounded {
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
&.primary {
|
||||
font-weight: bold;
|
||||
color: var(--fgOnAccent) !important;
|
||||
background: var(--accent);
|
||||
&.primary {
|
||||
font-weight: bold;
|
||||
color: var(--fgOnAccent) !important;
|
||||
background: var(--accent);
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: var(--X8);
|
||||
}
|
||||
&:not(:disabled):hover {
|
||||
background: var(--X8);
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: var(--X8);
|
||||
}
|
||||
}
|
||||
&:not(:disabled):active {
|
||||
background: var(--X8);
|
||||
}
|
||||
}
|
||||
|
||||
&.asLike {
|
||||
background: rgba(255, 86, 125, 0.07);
|
||||
color: #ff002f;
|
||||
&.asLike {
|
||||
background: rgba(255, 86, 125, 0.07);
|
||||
color: #ff002f;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba(255, 74, 116, 0.11);
|
||||
}
|
||||
&:not(:disabled):hover {
|
||||
background: rgba(255, 74, 116, 0.11);
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba(224, 57, 96, 0.125);
|
||||
}
|
||||
&:not(:disabled):active {
|
||||
background: rgba(224, 57, 96, 0.125);
|
||||
}
|
||||
|
||||
> .ripples {
|
||||
> .ripple {
|
||||
background: rgba(255, 60, 106, 0.15);
|
||||
}
|
||||
}
|
||||
> .ripples {
|
||||
> .ripple {
|
||||
background: rgba(255, 60, 106, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
&.primary {
|
||||
background: rgb(241 97 132);
|
||||
&.primary {
|
||||
background: rgb(241 97 132);
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgb(241 92 128);
|
||||
}
|
||||
&:not(:disabled):hover {
|
||||
background: rgb(241 92 128);
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgb(241 92 128);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(:disabled):active {
|
||||
background: rgb(241 92 128);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.transparent {
|
||||
background: transparent;
|
||||
}
|
||||
&.transparent {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&.gradate {
|
||||
font-weight: bold;
|
||||
color: var(--fgOnAccent) !important;
|
||||
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
|
||||
&.gradate {
|
||||
font-weight: bold;
|
||||
color: var(--fgOnAccent) !important;
|
||||
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: linear-gradient(90deg, var(--X8), var(--X8));
|
||||
}
|
||||
&:not(:disabled):hover {
|
||||
background: linear-gradient(90deg, var(--X8), var(--X8));
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: linear-gradient(90deg, var(--X8), var(--X8));
|
||||
}
|
||||
}
|
||||
&:not(:disabled):active {
|
||||
background: linear-gradient(90deg, var(--X8), var(--X8));
|
||||
}
|
||||
}
|
||||
|
||||
&.danger {
|
||||
color: #ff2a2a;
|
||||
&.gamingLight {
|
||||
background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
|
||||
background-size: 1800% 1800%;
|
||||
|
||||
&.primary {
|
||||
color: #fff;
|
||||
background: #ff2a2a;
|
||||
-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: #ff4242;
|
||||
}
|
||||
&:not(:disabled):hover {
|
||||
background: linear-gradient(270deg, #d08c8c, #cfb28c, #dbdb8b, #95d08e, #8bdbdb, #94a9cf, #b09ecf, #cfa0cf, #e0a0bd);
|
||||
background-size: 1800% 1800%;
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: #d42e2e;
|
||||
}
|
||||
}
|
||||
}
|
||||
-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;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.7;
|
||||
}
|
||||
&:not(:disabled):active {
|
||||
background: linear-gradient(270deg, #d08c8c, #cfb28c, #dbdb8b, #95d08e, #8bdbdb, #94a9cf, #b09ecf, #cfa0cf, #e0a0bd);
|
||||
background-size: 1800% 1800% !important;
|
||||
|
||||
&:focus-visible {
|
||||
outline: solid 2px var(--focus);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
-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 ;
|
||||
}
|
||||
}
|
||||
|
||||
&.inline {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
min-width: 100px;
|
||||
}
|
||||
&.gamingDark {
|
||||
background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
|
||||
background-size: 1800% 1800%;
|
||||
|
||||
&.primary > .ripples > .ripple {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
-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;
|
||||
|
||||
&.primary {
|
||||
color: #fff;
|
||||
background: #ff2a2a;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: #ff4242;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: #d42e2e;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: solid 2px var(--focus);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
&.inline {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
&.primary > .ripples > .ripple {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.ripples {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 6px;
|
||||
overflow: clip;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 6px;
|
||||
overflow: clip;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ripple {
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
border-radius: 100%;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
transition: all 0.5s cubic-bezier(0,.5,0,1);
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
border-radius: 100%;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
transition: all 0.5s cubic-bezier(0, .5, 0, 1);
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
position: relative;
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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, () => {
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue