diff --git a/locales/en-US.yml b/locales/en-US.yml index d8d6855d62..dfbab848fa 100644 --- a/locales/en-US.yml +++ b/locales/en-US.yml @@ -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" diff --git a/locales/index.d.ts b/locales/index.d.ts index 59295664cb..88183b810a 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -295,6 +295,7 @@ export interface Locale { "theme": string; "themeForLightMode": string; "themeForDarkMode": string; + "gamingMode": string; "light": string; "dark": string; "lightThemes": string; diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index a9c11bbba2..13c2498a81 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -292,6 +292,7 @@ location: "場所" theme: "テーマ" themeForLightMode: "ライトモードで使うテーマ" themeForDarkMode: "ダークモードで使うテーマ" +gamingMode: 'ゲーミングモード' light: "ライト" dark: "ダーク" lightThemes: "明るいテーマ" diff --git a/packages/frontend/src/components/MkButton.vue b/packages/frontend/src/components/MkButton.vue index bcd58ae516..2647ad1490 100644 --- a/packages/frontend/src/components/MkButton.vue +++ b/packages/frontend/src/components/MkButton.vue @@ -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> diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue index b1229cd1ba..709fd2d516 100644 --- a/packages/frontend/src/pages/settings/general.vue +++ b/packages/frontend/src/pages/settings/general.vue @@ -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, () => { diff --git a/packages/frontend/src/pages/timeline.vue b/packages/frontend/src/pages/timeline.vue index 712f8605a2..0b4f826919 100644 --- a/packages/frontend/src/pages/timeline.vue +++ b/packages/frontend/src/pages/timeline.vue @@ -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, diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts index f9ee966797..27de6d150c 100644 --- a/packages/frontend/src/store.ts +++ b/packages/frontend/src/store.ts @@ -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 diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue index 7c76c5fe6c..89c16473ae 100644 --- a/packages/frontend/src/ui/_common_/navbar.vue +++ b/packages/frontend/src/ui/_common_/navbar.vue @@ -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>