Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fix

Browse source
This commit is contained in:
mattyatea 2023-09-23 19:10:51 +09:00
parent 504f71181c
commit 473355a5d9
10 changed files with 75 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/frontend/src/components/MkButton.vue
View file

@ -319,7 +319,7 @@ function onMousedown(evt: MouseEvent): void {
&.gamingDark { &.gamingDark {
background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd); background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
background-size: 1800% 1800%; background-size: 1800% 1800%;
color: white !important; color: black;
-webkit-animation: AnimationDark 44s cubic-bezier(0, 0.45, 0.30, 1) infinite; -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.45, 0.30, 1) infinite;
-moz-animation: AnimationDark 44s cubic-bezier(0, 0.45, 0.30, 1) infinite; -moz-animation: AnimationDark 44s cubic-bezier(0, 0.45, 0.30, 1) infinite;
animation: AnimationDark 44s cubic-bezier(0, 0.45, 0.30, 1) infinite; animation: AnimationDark 44s cubic-bezier(0, 0.45, 0.30, 1) infinite;
@ -327,7 +327,7 @@ function onMousedown(evt: MouseEvent): void {
&:not(:disabled):hover { &:not(:disabled):hover {
background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd); background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
background-size: 1800% 1800% ; background-size: 1800% 1800% ;
color: white !important; color: black;
-webkit-animation: AnimationDark 45s cubic-bezier(0, 0.45, 0.30, 1) infinite ; -webkit-animation: AnimationDark 45s cubic-bezier(0, 0.45, 0.30, 1) infinite ;
-moz-animation: AnimationDark 45s cubic-bezier(0, 0.45, 0.30, 1) infinite; -moz-animation: AnimationDark 45s cubic-bezier(0, 0.45, 0.30, 1) infinite;
animation: AnimationDark 45s cubic-bezier(0, 0.45, 0.30, 1) infinite ; animation: AnimationDark 45s cubic-bezier(0, 0.45, 0.30, 1) infinite ;
@ -336,7 +336,7 @@ function onMousedown(evt: MouseEvent): void {
&:not(:disabled):active { &:not(:disabled):active {
background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd); background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
background-size: 1800% 1800% !important; background-size: 1800% 1800% !important;
color: white !important; color: black;
-webkit-animation: AnimationDark 45s cubic-bezier(0, 0.45, 0.30, 1) infinite ; -webkit-animation: AnimationDark 45s cubic-bezier(0, 0.45, 0.30, 1) infinite ;
-moz-animation: AnimationDark 45s cubic-bezier(0, 0.45, 0.30, 1) infinite; -moz-animation: AnimationDark 45s cubic-bezier(0, 0.45, 0.30, 1) infinite;
animation: AnimationDark 45s cubic-bezier(0, 0.45, 0.30, 1) infinite; animation: AnimationDark 45s cubic-bezier(0, 0.45, 0.30, 1) infinite;

14
packages/frontend/src/components/MkFollowButton.vue
View file

@ -205,7 +205,7 @@ onBeforeUnmount(() => {
-webkit-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite; -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
-moz-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite; -moz-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite; animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
border: solid 1px black;
} }
&.gamingLight { &.gamingLight {
@ -215,6 +215,7 @@ onBeforeUnmount(() => {
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important; -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
-moz-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important; -moz-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important; animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
border: solid 1px white;
} }
&.full { &.full {
@ -293,6 +294,7 @@ onBeforeUnmount(() => {
-webkit-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite; -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
-moz-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite; -moz-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite; animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
border: solid 1px white;
} }
&.gamingDark:active { &.gamingDark:active {
@ -302,7 +304,7 @@ onBeforeUnmount(() => {
-webkit-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite; -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
-moz-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite; -moz-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite; animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
border-color: black; border: solid 1px white;
} }
&.gamingLight:hover { &.gamingLight:hover {
@ -311,7 +313,7 @@ onBeforeUnmount(() => {
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important; -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
-moz-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important; -moz-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important; animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
border-color: black; border: solid 1px white;
} }
&.gamingLight:active { &.gamingLight:active {
@ -321,12 +323,13 @@ onBeforeUnmount(() => {
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important; -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
-moz-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important; -moz-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important; animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
border-color: black; border: solid 1px white;
} }
&.gamingDark { &.gamingDark {
-webkit-text-fill-color: unset !important; -webkit-text-fill-color: unset !important;
color: black; color: black;
border: solid 1px white;
background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd); background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
background-size: 1800% 1800%; background-size: 1800% 1800%;
-webkit-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite; -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
@ -337,6 +340,7 @@ onBeforeUnmount(() => {
&.gamingLight { &.gamingLight {
-webkit-text-fill-color: unset !important; -webkit-text-fill-color: unset !important;
color: white; color: white;
border: solid 1px white;
background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4); background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
background-size: 1800% 1800% !important; background-size: 1800% 1800% !important;
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important; -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
@ -357,7 +361,7 @@ onBeforeUnmount(() => {
margin-right: 6px; margin-right: 6px;
&.gamingDark { &.gamingDark {
color: white; color: black;
} }

12
packages/frontend/src/components/MkMenu.vue
View file

@ -8,30 +8,30 @@ SPDX-License-Identifier: AGPL-3.0-only
<div <div
ref="itemsEl" v-hotkey="keymap" ref="itemsEl" v-hotkey="keymap"
class="_popup _shadow" class="_popup _shadow"
:class="[$style.root, { [$style.center]: align === 'center', [$style.asDrawer]: asDrawer }]" :class="[$style.root, { [$style.center]: align === 'center', [$style.asDrawer]: asDrawer },{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"
:style="{ width: (width && !asDrawer) ? width + 'px' : '', maxHeight: maxHeight ? maxHeight + 'px' : '' }" :style="{ width: (width && !asDrawer) ? width + 'px' : '', maxHeight: maxHeight ? maxHeight + 'px' : '' }"
@contextmenu.self="e => e.preventDefault()" @contextmenu.self="e => e.preventDefault()"
> >
<template v-for="(item, i) in items2"> <template v-for="(item, i) in items2">
<div v-if="item === null" role="separator" :class="$style.divider"></div> <div v-if="item === null" role="separator" :class="$style.divider"></div>
<span v-else-if="item.type === 'label'" role="menuitem" :class="[$style.label, $style.item]"> <span v-else-if="item.type === 'label'" role="menuitem" :class="[$style.label, $style.item,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]">
<span>{{ item.text }}</span> <span>{{ item.text }}</span>
</span> </span>
<span v-else-if="item.type === 'pending'" role="menuitem" :tabindex="i" :class="[$style.pending, $style.item]"> <span v-else-if="item.type === 'pending'" role="menuitem" :tabindex="i" :class="[$style.pending, $style.item,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]">
<span><MkEllipsis/></span> <span><MkEllipsis/></span>
</span> </span>
<MkA v-else-if="item.type === 'link'" role="menuitem" :to="item.to" :tabindex="i" class="_button" :class="$style.item" @click.passive="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)"> <MkA v-else-if="item.type === 'link'" role="menuitem" :to="item.to" :tabindex="i" class="_button" :class="[$style.item,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]" @click.passive="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i> <i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/> <MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
<span>{{ item.text }}</span> <span>{{ item.text }}</span>
<span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span> <span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span>
</MkA> </MkA>
<a v-else-if="item.type === 'a'" role="menuitem" :href="item.href" :target="item.target" :download="item.download" :tabindex="i" class="_button" :class="$style.item" @click="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)"> <a v-else-if="item.type === 'a'" role="menuitem" :href="item.href" :target="item.target" :download="item.download" :tabindex="i" class="_button" :class="[$style.item,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]" @click="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i> <i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
<span>{{ item.text }}</span> <span>{{ item.text }}</span>
<span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span> <span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span>
</a> </a>
<button v-else-if="item.type === 'user'" role="menuitem" :tabindex="i" class="_button" :class="[$style.item, { [$style.active]: item.active }]" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)"> <button v-else-if="item.type === 'user'" role="menuitem" :tabindex="i" class="_button" :class="[$style.item, { [$style.active]: item.active },{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
<MkAvatar :user="item.user" :class="$style.avatar"/><MkUserName :user="item.user"/> <MkAvatar :user="item.user" :class="$style.avatar"/><MkUserName :user="item.user"/>
<span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span> <span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span>
</button> </button>

20
packages/frontend/src/components/MkPostForm.vue
View file

@ -1064,23 +1064,21 @@ defineExpose({
color: var(--fgOnAccent); color: var(--fgOnAccent);
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB)); background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
&.gamingLight { &.gamingLight{
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{
color: white;
background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd); background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
background-size: 1800% 1800% !important; background-size: 1800% 1800% !important;
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !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; -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; animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
} }
&.gamingDark{
color: white;
background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
background-size: 1800% 1800%;
-webkit-animation: AnimationDark 44s cubic-bezier(0, 0.45, 0.30, 1) infinite;
-moz-animation: AnimationDark 44s cubic-bezier(0, 0.45, 0.30, 1) infinite;
animation: AnimationDark 44s cubic-bezier(0, 0.45, 0.30, 1) infinite;
}
} }
.headerRightItem { .headerRightItem {

5
packages/frontend/src/components/MkReactionsViewer.reaction.vue
View file

@ -192,7 +192,7 @@ useTooltip(buttonEl, async (showing) => {
box-shadow: 0 0 0px 1px var(--accent) inset; box-shadow: 0 0 0px 1px var(--accent) inset;
&.gamingDark{ &.gamingDark{
color:white; color: black;
background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd); background-size: 1800% 1800%; background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd); background-size: 1800% 1800%;
-webkit-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite; -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
-moz-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite; -moz-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
@ -213,6 +213,9 @@ useTooltip(buttonEl, async (showing) => {
color: var(--accent); color: var(--accent);
&.gamingLight{ &.gamingLight{
color: white; color: white;
}
&.gamingDark{
color: black;
} }
} }

2
packages/frontend/src/components/MkSwitch.vue
View file

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<div :class="[$style.root, { [$style.disabled]: disabled && gaming === '', [$style.checked]: checked && gaming === '' , [$style.gamingdarkDisabled]: disabled && gaming === 'dark', [$style.gamingLightDisabled]: disabled && gaming === 'light'}]"> <div :class="[$style.root, { [$style.disabled]: disabled && gaming === '', [$style.checked]: checked && gaming === '' }]">
<input <input
ref="input" ref="input"
type="checkbox" type="checkbox"

2
packages/frontend/src/components/MkTab.vue
View file

@ -83,6 +83,7 @@ export default defineComponent({
background: var(--accentedBg); background: var(--accentedBg);
&.gamingDark{ &.gamingDark{
color:white;
background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd); background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
background-size: 1800% 1800%; background-size: 1800% 1800%;
-webkit-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite; -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
@ -90,6 +91,7 @@ export default defineComponent({
animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite; animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
} }
&.gamingLight{ &.gamingLight{
color: black;
background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4); background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
background-size: 1800% 1800% !important; background-size: 1800% 1800% !important;
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important; -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;

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

@ -41,8 +41,8 @@ export const noteActions: NoteAction[] = [];
export const noteViewInterruptors: NoteViewInterruptor[] = []; export const noteViewInterruptors: NoteViewInterruptor[] = [];
export const notePostInterruptors: NotePostInterruptor[] = []; export const notePostInterruptors: NotePostInterruptor[] = [];
export const pageViewInterruptors: PageViewInterruptor[] = []; export const pageViewInterruptors: PageViewInterruptor[] = [];
export const bannerDark='https://files.prismisskey.space/misskey/ac141052-7a16-4608-bc08-263566326a6d.jpg' export const bannerDark='https://files.prismisskey.space/misskey/5182a391-5b9f-4ba9-90a5-a692aa59b938.png'
export const bannerLight ='https://files.prismisskey.space/misskey/e8d13afc-2348-4b13-a64a-f55a19e8d7aa.jpg' export const bannerLight ='https://files.prismisskey.space/misskey/96e65f59-eab3-47d4-bb1e-d141100bd2fc.png'
export const iconDark='https://files.prismisskey.space/misskey/f3b3c9f8-ff2a-474d-a858-64ffe9023e22.png' export const iconDark='https://files.prismisskey.space/misskey/f3b3c9f8-ff2a-474d-a858-64ffe9023e22.png'
export const iconLight='https://files.prismisskey.space/misskey/c7e56b1d-4c4f-408f-bf73-3175f4eb26ca.png' export const iconLight='https://files.prismisskey.space/misskey/c7e56b1d-4c4f-408f-bf73-3175f4eb26ca.png'

2
packages/frontend/src/ui/_common_/navbar-for-mobile.vue
View file

@ -377,7 +377,7 @@ function more() {
&.gamingDark:hover, &.gamingDark.active { &.gamingDark:hover, &.gamingDark.active {
text-decoration: none; text-decoration: none;
color: white; color: black;
&.gamingDark:before { &.gamingDark:before {
content: ""; content: "";

55
packages/frontend/src/ui/_common_/navbar.vue
View file

@ -292,15 +292,15 @@ function more(ev: MouseEvent) {
} }
&.gamingLight { &.gamingLight {
color: black !important; color: white;
} }
&.gamingDark { &.gamingDark {
color: black !important; color: black;
} }
&.gamingLight:before { &.gamingLight:before {
color: black !important; color: white;
content: ""; content: "";
display: block; display: block;
width: calc(100% - 38px); width: calc(100% - 38px);
@ -321,7 +321,8 @@ function more(ev: MouseEvent) {
&.gamingLight:hover, &.gamingLight.active { &.gamingLight:hover, &.gamingLight.active {
color: black !important; color: white;
&.gamingLight:before { &.gamingLight:before {
background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4); background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
background-size: 1800% 1800% !important; background-size: 1800% 1800% !important;
@ -461,7 +462,7 @@ function more(ev: MouseEvent) {
} }
&.gamingDark:hover { &.gamingDark:hover {
color: white; color: black;
background-size: 1800% 1800%; background-size: 1800% 1800%;
text-decoration: none; text-decoration: none;
@ -471,8 +472,7 @@ function more(ev: MouseEvent) {
} }
&.gamingDark.active { &.gamingDark.active {
color: white; color: black;
background-size: 1800% 1800%; background-size: 1800% 1800%;
-webkit-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite; -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
-moz-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite; -moz-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
@ -480,7 +480,7 @@ function more(ev: MouseEvent) {
} }
&.gamingDark:hover, &.gamingDark.active { &.gamingDark:hover, &.gamingDark.active {
color: white; color: black;
&.gamingDark:before { &.gamingDark:before {
content: ""; content: "";
@ -502,7 +502,7 @@ function more(ev: MouseEvent) {
} }
&.gamingLight:hover { &.gamingLight:hover {
color: white; color: white;
background-size: 1800% 1800% !important; background-size: 1800% 1800% !important;
text-decoration: none; text-decoration: none;
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important; -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
@ -512,7 +512,6 @@ function more(ev: MouseEvent) {
&.gamingLight:active { &.gamingLight:active {
color: white; color: white;
background-size: 1800% 1800% !important; background-size: 1800% 1800% !important;
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important; -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
-moz-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important; -moz-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
@ -520,7 +519,7 @@ function more(ev: MouseEvent) {
} }
&.gamingLight:hover, &.gamingLight.active { &.gamingLight:hover, &.gamingLight.active {
color: white; color: white;
&.gamingLight:before { &.gamingLight:before {
@ -562,9 +561,17 @@ function more(ev: MouseEvent) {
color: white; color: white;
} }
&.gamingDark.active {
color: black;
}
&.gamingLight { &.gamingLight {
color: black; color: black;
} }
&.gamingLight.active {
color: white;
}
} }
.itemText { .itemText {
@ -616,6 +623,7 @@ function more(ev: MouseEvent) {
display: block; display: block;
position: relative; position: relative;
width: 100%; width: 100%;
color: black;
height: 52px; height: 52px;
margin-bottom: 16px; margin-bottom: 16px;
text-align: center; text-align: center;
@ -669,12 +677,12 @@ function more(ev: MouseEvent) {
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important; -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
-moz-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important; -moz-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important; animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
color: white; color: white;
} }
} }
&.gamingDark:before { &.gamingDark:before {
color: white; color: black;
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
@ -750,16 +758,20 @@ function more(ev: MouseEvent) {
width: 100%; width: 100%;
text-align: center; text-align: center;
&.gamingLight {
color: white;
}
&:hover, &.active { &:hover, &.active {
text-decoration: none; text-decoration: none;
color: var(--accent); color: var(--accent);
&.gamingDark { &.gamingDark {
color: white; color: black;
} }
&.gamingLight { &.gamingLight {
color: #DEE7E4; color: white;
} }
&:before { &:before {
@ -810,7 +822,8 @@ function more(ev: MouseEvent) {
&.gamingLight:hover, &.gamingLight.active { &.gamingLight:hover, &.gamingLight.active {
text-decoration: none; text-decoration: none;
color: white; color: white !important;
&.gamingLight:before { &.gamingLight:before {
content: ""; content: "";
display: block; display: block;
@ -854,8 +867,16 @@ function more(ev: MouseEvent) {
color: white; color: white;
} }
&.gamingDark.active {
color: black;
}
&.gamingLight { &.gamingLight {
color: white; color: black;
}
&.gamingLight.active {
color: white;
} }
} }