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

feat: ゲーミングモード

Browse source
This commit is contained in:
mattyatea 2023-09-23 09:01:20 +09:00
parent 093540375d
commit 13de104634
28 changed files with 2917 additions and 865 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -20,8 +20,8 @@ SPDX-License-Identifier: AGPL-3.0-only
[$style.large]: large,
[$style.transparent]: transparent,
[$style.asLike]: asLike,
[$style.gamingDark]: gaming === 'dark', // gamingが1の場合にgamingDarkクラスを追加
[$style.gamingLight]: gaming === 'light', // gamingが2の場合にgamingLightクラスを追加
[$style.gamingDark]: gaming === 'dark',
[$style.gamingLight]: gaming === 'light',
}
]"
:type="type"
@ -50,8 +50,8 @@ SPDX-License-Identifier: AGPL-3.0-only
[$style.large]: large,
[$style.transparent]: transparent,
[$style.asLike]: asLike,
[$style.gamingDark]: gaming === 'dark', // gamingが1の場合にgamingDarkクラスを追加
[$style.gamingLight]: gaming === 'light', // gamingが2の場合にgamingLightクラスを追加
[$style.gamingDark]: gaming === 'dark',
[$style.gamingLight]: gaming === 'light',
}
]"
:to="to"
@ -96,18 +96,18 @@ const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
let gaming = ref(''); // 0-off , 1-dark , 2-light
// gaming.valueに新しい値を代入する
if (darkMode.value && gamingMode.value && props.primary) {
if (darkMode.value && gamingMode.value && props.primary || props.gradate ) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value && props.primary) {
} else if (!darkMode.value && gamingMode.value && props.primary|| props.gradate ) {
gaming.value = 'light';
}else{
gaming.value = '';
}
watch(darkMode, () => {
if (darkMode.value && gamingMode.value && props.primary) {
if (darkMode.value && gamingMode.value && props.primary || props.gradate || props.large || props.small || props.full ) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value && props.primary) {
} else if (!darkMode.value && gamingMode.value && props.primary || props.gradate || props.large || props.small || props.full ) {
gaming.value = 'light';
}else{
gaming.value = '';
@ -115,9 +115,9 @@ watch(darkMode, () => {
})
watch(gamingMode, () => {
if (darkMode.value && gamingMode.value && props.primary) {
if (darkMode.value && gamingMode.value && props.primary || props.gradate || props.large || props.small || props.full ) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value && props.primary) {
} else if (!darkMode.value && gamingMode.value && props.primary || props.gradate || props.large || props.small || props.full ) {
gaming.value = 'light';
}else{
gaming.value = '';
@ -290,53 +290,53 @@ function onMousedown(evt: MouseEvent): void {
}
&.gamingLight {
background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
background-size: 1800% 1800%;
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.45, 0.30, 1) infinite;
-moz-animation: AnimationLight 45s cubic-bezier(0, 0.45, 0.30, 1) infinite;
animation: AnimationLight 45s cubic-bezier(0, 0.45, 0.30, 1) infinite;
color: white !important;
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite;
-moz-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite;
animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite;
&:not(:disabled):hover {
background: linear-gradient(270deg, #d08c8c, #cfb28c, #dbdb8b, #95d08e, #8bdbdb, #94a9cf, #b09ecf, #cfa0cf, #e0a0bd);
background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
background-size: 1800% 1800%;
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.45, 0.30, 1) infinite;
-moz-animation: AnimationLight 45s cubic-bezier(0, 0.45, 0.30, 1) infinite;
animation: AnimationLight 45s cubic-bezier(0, 0.45, 0.30, 1) infinite;
color: white !important;
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite;
-moz-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite;
animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite;
}
&:not(:disabled):active {
background: linear-gradient(270deg, #d08c8c, #cfb28c, #dbdb8b, #95d08e, #8bdbdb, #94a9cf, #b09ecf, #cfa0cf, #e0a0bd);
background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
background-size: 1800% 1800% !important;
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.45, 0.30, 1) infinite;
-moz-animation: AnimationLight 45s cubic-bezier(0, 0.45, 0.30, 1) infinite ;
animation: AnimationLight 45s cubic-bezier(0, 0.45, 0.30, 1) infinite ;
color: white !important;
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite;
-moz-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite ;
animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite ;
}
}
&.gamingDark {
background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
background-size: 1800% 1800%;
color: white !important;
-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;
&:not(:disabled):hover {
background: linear-gradient(270deg, #a84f4f, #a88c4f, #9aa24b, #6da85c, #53a8a6, #7597b5, #8679b5, #b579b5, #b56d96);
background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
background-size: 1800% 1800% ;
color: white !important;
-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;
animation: AnimationDark 45s cubic-bezier(0, 0.45, 0.30, 1) infinite ;
}
&:not(:disabled):active {
background: linear-gradient(270deg, #a84f4f, #a88c4f, #9aa24b, #6da85c, #53a8a6, #7597b5, #8679b5, #b579b5, #b56d96);
background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
background-size: 1800% 1800% !important;
color: white !important;
-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;
animation: AnimationDark 45s cubic-bezier(0, 0.45, 0.30, 1) infinite;