feat: ゲーミングモード実装
This commit is contained in:
mattyatea
parent
8da4b39644
commit
bbd5282dc6
|
|
@ -292,6 +292,7 @@ location: "Location"
|
||||||
theme: "Themes"
|
theme: "Themes"
|
||||||
themeForLightMode: "Theme to use in Light Mode"
|
themeForLightMode: "Theme to use in Light Mode"
|
||||||
themeForDarkMode: "Theme to use in Dark Mode"
|
themeForDarkMode: "Theme to use in Dark Mode"
|
||||||
|
gamingMode: "Gaming Mode"
|
||||||
light: "Light"
|
light: "Light"
|
||||||
dark: "Dark"
|
dark: "Dark"
|
||||||
lightThemes: "Light themes"
|
lightThemes: "Light themes"
|
||||||
|
|
|
||||||
|
|
@ -295,6 +295,7 @@ export interface Locale {
|
||||||
"theme": string;
|
"theme": string;
|
||||||
"themeForLightMode": string;
|
"themeForLightMode": string;
|
||||||
"themeForDarkMode": string;
|
"themeForDarkMode": string;
|
||||||
|
"gamingMode": string;
|
||||||
"light": string;
|
"light": string;
|
||||||
"dark": string;
|
"dark": string;
|
||||||
"lightThemes": string;
|
"lightThemes": string;
|
||||||
|
|
|
||||||
|
|
@ -292,6 +292,7 @@ location: "場所"
|
||||||
theme: "テーマ"
|
theme: "テーマ"
|
||||||
themeForLightMode: "ライトモードで使うテーマ"
|
themeForLightMode: "ライトモードで使うテーマ"
|
||||||
themeForDarkMode: "ダークモードで使うテーマ"
|
themeForDarkMode: "ダークモードで使うテーマ"
|
||||||
|
gamingMode: 'ゲーミングモード'
|
||||||
light: "ライト"
|
light: "ライト"
|
||||||
dark: "ダーク"
|
dark: "ダーク"
|
||||||
lightThemes: "明るいテーマ"
|
lightThemes: "明るいテーマ"
|
||||||
|
|
|
||||||
|
|
@ -4,285 +4,440 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<button
|
<button
|
||||||
v-if="!link"
|
v-if="!link"
|
||||||
ref="el" class="_button"
|
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="[
|
||||||
:type="type"
|
$style.root,
|
||||||
:name="name"
|
{
|
||||||
:value="value"
|
[$style.inline]: inline,
|
||||||
@click="emit('click', $event)"
|
[$style.primary]: primary,
|
||||||
@mousedown="onMousedown"
|
[$style.gradate]: gradate,
|
||||||
>
|
[$style.danger]: danger,
|
||||||
<div ref="ripples" :class="$style.ripples" :data-children-class="$style.ripple"></div>
|
[$style.rounded]: rounded,
|
||||||
<div :class="$style.content">
|
[$style.full]: full,
|
||||||
<slot></slot>
|
[$style.small]: small,
|
||||||
</div>
|
[$style.large]: large,
|
||||||
</button>
|
[$style.transparent]: transparent,
|
||||||
<MkA
|
[$style.asLike]: asLike,
|
||||||
v-else class="_button"
|
[$style.gamingDark]: gaming === 'dark', // gamingが1の場合にgamingDarkクラスを追加
|
||||||
: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.gamingLight]: gaming === 'light', // gamingが2の場合にgamingLightクラスを追加
|
||||||
:to="to"
|
}
|
||||||
@mousedown="onMousedown"
|
]"
|
||||||
>
|
:type="type"
|
||||||
<div ref="ripples" :class="$style.ripples" :data-children-class="$style.ripple"></div>
|
:name="name"
|
||||||
<div :class="$style.content">
|
:value="value"
|
||||||
<slot></slot>
|
@click="emit('click', $event)"
|
||||||
</div>
|
@mousedown="onMousedown"
|
||||||
</MkA>
|
>
|
||||||
|
<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>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<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<{
|
const props = defineProps<{
|
||||||
type?: 'button' | 'submit' | 'reset';
|
type?: 'button' | 'submit' | 'reset';
|
||||||
primary?: boolean;
|
primary?: boolean;
|
||||||
gradate?: boolean;
|
gradate?: boolean;
|
||||||
rounded?: boolean;
|
rounded?: boolean;
|
||||||
inline?: boolean;
|
inline?: boolean;
|
||||||
link?: boolean;
|
link?: boolean;
|
||||||
to?: string;
|
to?: string;
|
||||||
autofocus?: boolean;
|
autofocus?: boolean;
|
||||||
wait?: boolean;
|
wait?: boolean;
|
||||||
danger?: boolean;
|
danger?: boolean;
|
||||||
full?: boolean;
|
full?: boolean;
|
||||||
small?: boolean;
|
small?: boolean;
|
||||||
large?: boolean;
|
large?: boolean;
|
||||||
transparent?: boolean;
|
transparent?: boolean;
|
||||||
asLike?: boolean;
|
gamingdark?: boolean;
|
||||||
name?: string;
|
gaminglight?: boolean;
|
||||||
value?: string;
|
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<{
|
const emit = defineEmits<{
|
||||||
(ev: 'click', payload: MouseEvent): void;
|
(ev: 'click', payload: MouseEvent): void;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
let el = $shallowRef<HTMLElement | null>(null);
|
let el = $shallowRef<HTMLElement | null>(null);
|
||||||
let ripples = $shallowRef<HTMLElement | null>(null);
|
let ripples = $shallowRef<HTMLElement | null>(null);
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
if (props.autofocus) {
|
if (props.autofocus) {
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
el!.focus();
|
el!.focus();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
function distance(p, q): number {
|
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 {
|
function calcCircleScale(boxW, boxH, circleCenterX, circleCenterY): number {
|
||||||
const origin = { x: circleCenterX, y: circleCenterY };
|
const origin = {x: circleCenterX, y: circleCenterY};
|
||||||
const dist1 = distance({ x: 0, y: 0 }, origin);
|
const dist1 = distance({x: 0, y: 0}, origin);
|
||||||
const dist2 = distance({ x: boxW, y: 0 }, origin);
|
const dist2 = distance({x: boxW, y: 0}, origin);
|
||||||
const dist3 = distance({ x: 0, y: boxH }, origin);
|
const dist3 = distance({x: 0, y: boxH}, origin);
|
||||||
const dist4 = distance({ x: boxW, y: boxH }, origin);
|
const dist4 = distance({x: boxW, y: boxH}, origin);
|
||||||
return Math.max(dist1, dist2, dist3, dist4) * 2;
|
return Math.max(dist1, dist2, dist3, dist4) * 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
function onMousedown(evt: MouseEvent): void {
|
function onMousedown(evt: MouseEvent): void {
|
||||||
const target = evt.target! as HTMLElement;
|
const target = evt.target! as HTMLElement;
|
||||||
const rect = target.getBoundingClientRect();
|
const rect = target.getBoundingClientRect();
|
||||||
|
|
||||||
const ripple = document.createElement('div');
|
const ripple = document.createElement('div');
|
||||||
ripple.classList.add(ripples!.dataset.childrenClass!);
|
ripple.classList.add(ripples!.dataset.childrenClass!);
|
||||||
ripple.style.top = (evt.clientY - rect.top - 1).toString() + 'px';
|
ripple.style.top = (evt.clientY - rect.top - 1).toString() + 'px';
|
||||||
ripple.style.left = (evt.clientX - rect.left - 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 circleCenterX = evt.clientX - rect.left;
|
||||||
const circleCenterY = evt.clientY - rect.top;
|
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(() => {
|
window.setTimeout(() => {
|
||||||
ripple.style.transform = 'scale(' + (scale / 2) + ')';
|
ripple.style.transform = 'scale(' + (scale / 2) + ')';
|
||||||
}, 1);
|
}, 1);
|
||||||
window.setTimeout(() => {
|
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';
|
ripple.style.opacity = '0';
|
||||||
}, 1000);
|
}, 1000);
|
||||||
window.setTimeout(() => {
|
window.setTimeout(() => {
|
||||||
if (ripples) ripples.removeChild(ripple);
|
if (ripples) ripples.removeChild(ripple);
|
||||||
}, 2000);
|
}, 2000);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" module>
|
<style lang="scss" module>
|
||||||
.root {
|
.root {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1; // 他コンポーネントのbox-shadowに隠されないようにするため
|
z-index: 1; // 他コンポーネントのbox-shadowに隠されないようにするため
|
||||||
display: block;
|
display: block;
|
||||||
min-width: 100px;
|
min-width: 100px;
|
||||||
width: max-content;
|
width: max-content;
|
||||||
padding: 7px 14px;
|
padding: 7px 14px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-size: 95%;
|
font-size: 95%;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background: var(--buttonBg);
|
background: var(--buttonBg);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
overflow: clip;
|
overflow: clip;
|
||||||
box-sizing: border-box;
|
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 {
|
&:not(:disabled):hover {
|
||||||
background: var(--buttonHoverBg);
|
background: var(--buttonHoverBg);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(:disabled):active {
|
&:not(:disabled):active {
|
||||||
background: var(--buttonHoverBg);
|
background: var(--buttonHoverBg);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.small {
|
&.small {
|
||||||
font-size: 90%;
|
font-size: 90%;
|
||||||
padding: 6px 12px;
|
padding: 6px 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.large {
|
&.large {
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.full {
|
&.full {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.rounded {
|
&.rounded {
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.primary {
|
&.primary {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: var(--fgOnAccent) !important;
|
color: var(--fgOnAccent) !important;
|
||||||
background: var(--accent);
|
background: var(--accent);
|
||||||
|
|
||||||
&:not(:disabled):hover {
|
&:not(:disabled):hover {
|
||||||
background: var(--X8);
|
background: var(--X8);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(:disabled):active {
|
&:not(:disabled):active {
|
||||||
background: var(--X8);
|
background: var(--X8);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.asLike {
|
&.asLike {
|
||||||
background: rgba(255, 86, 125, 0.07);
|
background: rgba(255, 86, 125, 0.07);
|
||||||
color: #ff002f;
|
color: #ff002f;
|
||||||
|
|
||||||
&:not(:disabled):hover {
|
&:not(:disabled):hover {
|
||||||
background: rgba(255, 74, 116, 0.11);
|
background: rgba(255, 74, 116, 0.11);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(:disabled):active {
|
&:not(:disabled):active {
|
||||||
background: rgba(224, 57, 96, 0.125);
|
background: rgba(224, 57, 96, 0.125);
|
||||||
}
|
}
|
||||||
|
|
||||||
> .ripples {
|
> .ripples {
|
||||||
> .ripple {
|
> .ripple {
|
||||||
background: rgba(255, 60, 106, 0.15);
|
background: rgba(255, 60, 106, 0.15);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.primary {
|
&.primary {
|
||||||
background: rgb(241 97 132);
|
background: rgb(241 97 132);
|
||||||
|
|
||||||
&:not(:disabled):hover {
|
&:not(:disabled):hover {
|
||||||
background: rgb(241 92 128);
|
background: rgb(241 92 128);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(:disabled):active {
|
&:not(:disabled):active {
|
||||||
background: rgb(241 92 128);
|
background: rgb(241 92 128);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.transparent {
|
&.transparent {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.gradate {
|
&.gradate {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: var(--fgOnAccent) !important;
|
color: var(--fgOnAccent) !important;
|
||||||
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
|
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
|
||||||
|
|
||||||
&:not(:disabled):hover {
|
&:not(:disabled):hover {
|
||||||
background: linear-gradient(90deg, var(--X8), var(--X8));
|
background: linear-gradient(90deg, var(--X8), var(--X8));
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(:disabled):active {
|
&:not(:disabled):active {
|
||||||
background: linear-gradient(90deg, var(--X8), var(--X8));
|
background: linear-gradient(90deg, var(--X8), var(--X8));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.danger {
|
&.gamingLight {
|
||||||
color: #ff2a2a;
|
background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
|
||||||
|
background-size: 1800% 1800%;
|
||||||
|
|
||||||
&.primary {
|
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.44, 0.39, 1.1) infinite;
|
||||||
color: #fff;
|
-moz-animation: AnimationLight 45s cubic-bezier(0, 0.44, 0.39, 1.1) infinite;
|
||||||
background: #ff2a2a;
|
animation: AnimationLight 45s cubic-bezier(0, 0.44, 0.39, 1.1) infinite;
|
||||||
|
|
||||||
&:not(:disabled):hover {
|
&:not(:disabled):hover {
|
||||||
background: #ff4242;
|
background: linear-gradient(270deg, #d08c8c, #cfb28c, #dbdb8b, #95d08e, #8bdbdb, #94a9cf, #b09ecf, #cfa0cf, #e0a0bd);
|
||||||
}
|
background-size: 1800% 1800%;
|
||||||
|
|
||||||
&:not(:disabled):active {
|
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.44, 0.39, 1.1) infinite;
|
||||||
background: #d42e2e;
|
-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 {
|
&:not(:disabled):active {
|
||||||
opacity: 0.7;
|
background: linear-gradient(270deg, #d08c8c, #cfb28c, #dbdb8b, #95d08e, #8bdbdb, #94a9cf, #b09ecf, #cfa0cf, #e0a0bd);
|
||||||
}
|
background-size: 1800% 1800% !important;
|
||||||
|
|
||||||
&:focus-visible {
|
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.44, 0.39, 1.1) infinite;
|
||||||
outline: solid 2px var(--focus);
|
-moz-animation: AnimationLight 45s cubic-bezier(0, 0.44, 0.39, 1.1) infinite ;
|
||||||
outline-offset: 2px;
|
animation: AnimationLight 45s cubic-bezier(0, 0.44, 0.39, 1.1) infinite ;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&.inline {
|
&.gamingDark {
|
||||||
display: inline-block;
|
background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
|
||||||
width: auto;
|
background-size: 1800% 1800%;
|
||||||
min-width: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.primary > .ripples > .ripple {
|
-webkit-animation: AnimationDark 44s cubic-bezier(0, 0.44, 0.39, 1.1) infinite;
|
||||||
background: rgba(0, 0, 0, 0.15);
|
-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 {
|
.ripples {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
overflow: clip;
|
overflow: clip;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ripple {
|
.ripple {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 2px;
|
width: 2px;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
background: rgba(0, 0, 0, 0.1);
|
background: rgba(0, 0, 0, 0.1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: scale(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 {
|
.content {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
pointer-events: none;
|
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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -123,6 +123,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
<MkSwitch :disabled="enableUltimateDataSaverMode || enableCellularWithUltimateDataSaver" v-model="enableCellularWithDataSaver">{{ i18n.ts.cellularWithDataSaver }}</MkSwitch>
|
<MkSwitch :disabled="enableUltimateDataSaverMode || enableCellularWithUltimateDataSaver" v-model="enableCellularWithDataSaver">{{ i18n.ts.cellularWithDataSaver }}</MkSwitch>
|
||||||
<MkSwitch v-model="enableUltimateDataSaverMode">{{ i18n.ts.UltimateDataSaver }}</MkSwitch>
|
<MkSwitch v-model="enableUltimateDataSaverMode">{{ i18n.ts.UltimateDataSaver }}</MkSwitch>
|
||||||
<MkSwitch v-model="enableCellularWithUltimateDataSaver">{{ i18n.ts.cellularWithUltimateDataSaver }}</MkSwitch>
|
<MkSwitch v-model="enableCellularWithUltimateDataSaver">{{ i18n.ts.cellularWithUltimateDataSaver }}</MkSwitch>
|
||||||
|
<MkSwitch v-model="enableGamingMode">{{ i18n.ts.gamingMode }}</MkSwitch>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<MkRadios v-model="emojiStyle">
|
<MkRadios v-model="emojiStyle">
|
||||||
|
|
@ -255,7 +256,7 @@ const notificationPosition = computed(defaultStore.makeGetterSetter('notificatio
|
||||||
const notificationStackAxis = computed(defaultStore.makeGetterSetter('notificationStackAxis'));
|
const notificationStackAxis = computed(defaultStore.makeGetterSetter('notificationStackAxis'));
|
||||||
const showTimelineReplies = computed(defaultStore.makeGetterSetter('showTimelineReplies'));
|
const showTimelineReplies = computed(defaultStore.makeGetterSetter('showTimelineReplies'));
|
||||||
const keepScreenOn = computed(defaultStore.makeGetterSetter('keepScreenOn'));
|
const keepScreenOn = computed(defaultStore.makeGetterSetter('keepScreenOn'));
|
||||||
|
const enableGamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
|
||||||
|
|
||||||
|
|
||||||
watch(lang, () => {
|
watch(lang, () => {
|
||||||
|
|
|
||||||
|
|
@ -136,6 +136,11 @@ const headerTabs = $computed(() => [{
|
||||||
title: i18n.ts._timelines.local,
|
title: i18n.ts._timelines.local,
|
||||||
icon: 'ti ti-planet',
|
icon: 'ti ti-planet',
|
||||||
iconOnly: true,
|
iconOnly: true,
|
||||||
|
}, {
|
||||||
|
key: 'media',
|
||||||
|
title: i18n.ts._timelines.media,
|
||||||
|
icon: 'ti ti-photo',
|
||||||
|
iconOnly: true,
|
||||||
}, {
|
}, {
|
||||||
key: 'social',
|
key: 'social',
|
||||||
title: i18n.ts._timelines.social,
|
title: i18n.ts._timelines.social,
|
||||||
|
|
|
||||||
|
|
@ -270,6 +270,10 @@ export const defaultStore = markRaw(new Storage('base', {
|
||||||
where: 'device',
|
where: 'device',
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
|
gamingMode: {
|
||||||
|
where: 'device',
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
bannerUrl:{
|
bannerUrl:{
|
||||||
where: 'device',
|
where: 'device',
|
||||||
default: bannerDark
|
default: bannerDark
|
||||||
|
|
|
||||||
|
|
@ -10,11 +10,13 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
<div :class="$style.banner" :style="{ backgroundImage: `url(${ bannerUrl })` }"></div>
|
<div :class="$style.banner" :style="{ backgroundImage: `url(${ bannerUrl })` }"></div>
|
||||||
<button v-tooltip.noDelay.right="instance.name ?? i18n.ts.instance" class="_button" :class="$style.instance"
|
<button v-tooltip.noDelay.right="instance.name ?? i18n.ts.instance" class="_button" :class="$style.instance"
|
||||||
@click="openInstanceMenu">
|
@click="openInstanceMenu">
|
||||||
<img :src="iconUrl" alt="" :class="$style.instanceIcon"/>
|
<img :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon"/>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div :class="$style.middle">
|
<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">{{
|
<i :class="$style.itemIcon" class="ti ti-home ti-fw"></i><span :class="$style.itemText">{{
|
||||||
i18n.ts.timeline
|
i18n.ts.timeline
|
||||||
}}</span>
|
}}</span>
|
||||||
|
|
@ -26,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)"
|
v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)"
|
||||||
v-tooltip.noDelay.right="navbarItemDef[item].title"
|
v-tooltip.noDelay.right="navbarItemDef[item].title"
|
||||||
class="_button"
|
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"
|
:activeClass="$style.active"
|
||||||
:to="navbarItemDef[item].to"
|
:to="navbarItemDef[item].to"
|
||||||
v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}"
|
v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}"
|
||||||
|
|
@ -38,25 +40,27 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
</component>
|
</component>
|
||||||
</template>
|
</template>
|
||||||
<div :class="$style.divider"></div>
|
<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">
|
:activeClass="$style.active" to="/admin">
|
||||||
<i :class="$style.itemIcon" class="ti ti-dashboard ti-fw"></i><span
|
<i :class="$style.itemIcon" class="ti ti-dashboard ti-fw"></i><span
|
||||||
:class="$style.itemText">{{ i18n.ts.controlPanel }}</span>
|
:class="$style.itemText">{{ i18n.ts.controlPanel }}</span>
|
||||||
</MkA>
|
</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">{{
|
<i :class="$style.itemIcon" class="ti ti-grid-dots ti-fw"></i><span :class="$style.itemText">{{
|
||||||
i18n.ts.more
|
i18n.ts.more
|
||||||
}}</span>
|
}}</span>
|
||||||
<span v-if="otherMenuItemIndicated" :class="$style.itemIndicator"><i class="_indicatorCircle"></i></span>
|
<span v-if="otherMenuItemIndicated" :class="$style.itemIndicator"><i class="_indicatorCircle"></i></span>
|
||||||
</button>
|
</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">
|
to="/settings">
|
||||||
<i :class="$style.itemIcon" class="ti ti-settings ti-fw"></i><span
|
<i :class="$style.itemIcon" class="ti ti-settings ti-fw"></i><span
|
||||||
:class="$style.itemText">{{ i18n.ts.settings }}</span>
|
:class="$style.itemText">{{ i18n.ts.settings }}</span>
|
||||||
</MkA>
|
</MkA>
|
||||||
</div>
|
</div>
|
||||||
<div :class="$style.bottom">
|
<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">
|
@click="os.post">
|
||||||
<i class="ti ti-pencil ti-fw" :class="$style.postIcon"></i><span :class="$style.postText">{{
|
<i class="ti ti-pencil ti-fw" :class="$style.postIcon"></i><span :class="$style.postText">{{
|
||||||
i18n.ts.note
|
i18n.ts.note
|
||||||
|
|
@ -85,25 +89,59 @@ import {instance} from '@/instance';
|
||||||
const iconOnly = ref(false);
|
const iconOnly = ref(false);
|
||||||
let bannerUrl = ref(defaultStore.state.bannerUrl);
|
let bannerUrl = ref(defaultStore.state.bannerUrl);
|
||||||
let iconUrl = ref();
|
let iconUrl = ref();
|
||||||
|
let gaming = ref('');
|
||||||
|
|
||||||
|
const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
|
||||||
const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
|
const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
|
||||||
if (darkMode.value){
|
|
||||||
|
if (darkMode.value) {
|
||||||
bannerUrl.value = bannerDark;
|
bannerUrl.value = bannerDark;
|
||||||
iconUrl.value = iconDark;
|
iconUrl.value = iconDark;
|
||||||
}else{
|
} else {
|
||||||
bannerUrl.value = bannerLight;
|
bannerUrl.value = bannerLight;
|
||||||
iconUrl.value = iconLight;
|
iconUrl.value = iconLight;
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(darkMode, () => {
|
watch(darkMode, () => {
|
||||||
if (darkMode.value){
|
if (darkMode.value) {
|
||||||
bannerUrl.value = bannerDark;
|
bannerUrl.value = bannerDark;
|
||||||
iconUrl.value = iconDark;
|
iconUrl.value = iconDark;
|
||||||
}else{
|
} else {
|
||||||
bannerUrl.value = bannerLight;
|
bannerUrl.value = bannerLight;
|
||||||
iconUrl.value = iconLight;
|
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 menu = computed(() => defaultStore.state.menu);
|
||||||
const otherMenuItemIndicated = computed(() => {
|
const otherMenuItemIndicated = computed(() => {
|
||||||
for (const def in navbarItemDef) {
|
for (const def in navbarItemDef) {
|
||||||
|
|
@ -243,6 +281,65 @@ function more(ev: MouseEvent) {
|
||||||
background: var(--accentLighten);
|
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 {
|
.postIcon {
|
||||||
|
|
@ -331,6 +428,85 @@ function more(ev: MouseEvent) {
|
||||||
background: var(--accentedBg);
|
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 {
|
.itemIcon {
|
||||||
|
|
@ -421,6 +597,66 @@ function more(ev: MouseEvent) {
|
||||||
background: var(--accentLighten);
|
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 {
|
.postIcon {
|
||||||
|
|
@ -489,6 +725,53 @@ function more(ev: MouseEvent) {
|
||||||
opacity: 1;
|
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 {
|
.itemIcon {
|
||||||
|
|
@ -509,5 +792,72 @@ function more(ev: MouseEvent) {
|
||||||
font-size: 8px;
|
font-size: 8px;
|
||||||
animation: blink 1s infinite;
|
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>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue