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

a

Browse source
This commit is contained in:
mattyatea 2024-02-16 19:49:16 +09:00
parent 332a3f2737
commit 9e1d276bbd
1 changed files with 239 additions and 210 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

449
packages/frontend/src/ui/universal.vue
View file

@ -4,158 +4,188 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<div :class="$style.root"> <div :class="$style.root">
<XSidebar v-if="!isMobile" :class="$style.sidebar"/> <XSidebar v-if="!isMobile" :class="$style.sidebar"/>
<MkStickyContainer ref="contents" :class="$style.contents" style="container-type: inline-size;" <MkStickyContainer
@contextmenu.stop="onContextmenu"> ref="contents" :class="$style.contents" style="container-type: inline-size;"
<template #header> @contextmenu.stop="onContextmenu"
<div> >
<XAnnouncements v-if="$i"/> <template #header>
<XStatusBars :class="$style.statusbars"/> <div>
</div> <XAnnouncements v-if="$i"/>
</template> <XStatusBars :class="$style.statusbars"/>
<RouterView/> </div>
<div :class="$style.spacer"></div> </template>
</MkStickyContainer> <RouterView/>
<div :class="$style.spacer"></div>
</MkStickyContainer>
<div v-if="isDesktop && !pageMetadata?.needWideArea" :class="$style.widgets"> <div v-if="isDesktop && !pageMetadata?.needWideArea" :class="$style.widgets">
<XWidgets/> <XWidgets/>
</div> </div>
<button v-if="(!isDesktop || pageMetadata?.needWideArea) && !isMobile" :class="$style.widgetButton" class="_button" @click="widgetsShowing = true"> <button v-if="(!isDesktop || pageMetadata?.needWideArea) && !isMobile" :class="$style.widgetButton" class="_button" @click="widgetsShowing = true">
<i class="ti ti-apps"></i></button> <i class="ti ti-apps"></i>
</button>
<div v-if="isMobile" ref="navFooter" :class="$style.nav"> <div v-if="isMobile" ref="navFooter" :class="$style.nav">
<button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true"><i <button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true">
:class="$style.navButtonIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" <i
:class="[$style.navButtonIndicator,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]"><i :class="$style.navButtonIcon" class="ti ti-menu-2"
class="_indicatorCircle"></i></span></button> ></i><span
<button :class="$style.navButton" class="_button" v-if="menuIndicated"
@click="isRoot ? top() : mainRouter.push('/')"><i :class="[$style.navButtonIndicator,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]"
:class="$style.navButtonIcon" class="ti ti-home"></i></button> ><i
<button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')"><i class="_indicatorCircle"
:class="$style.navButtonIcon" class="ti ti-bell"></i><span v-if="$i?.hasUnreadNotification" ></i></span>
:class="[$style.navButtonIndicator,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]"> </button>
<button
:class="$style.navButton" class="_button"
@click="isRoot ? top() : mainRouter.push('/')"
>
<i
:class="$style.navButtonIcon" class="ti ti-home"
></i>
</button>
<button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')">
<i
:class="$style.navButtonIcon" class="ti ti-bell"
></i><span
v-if="$i?.hasUnreadNotification"
:class="[$style.navButtonIndicator,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]"
>
<span class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ $i.unreadNotificationsCount > 99 && indicatorCounterToggle ? '99+' : $i.unreadNotificationsCount }}</span> <span class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ $i.unreadNotificationsCount > 99 && indicatorCounterToggle ? '99+' : $i.unreadNotificationsCount }}</span>
</span></button> </span>
<button :class="$style.navButton" class="_button" @click="widgetsShowing = true"><i :class="$style.navButtonIcon" </button>
class="ti ti-apps"></i> <button :class="$style.navButton" class="_button" @click="widgetsShowing = true">
</button> <i
<button :class="$style.navButtonIcon"
:class="[{[$style.postButton_gamingDark]: gaming === 'dark',[$style.postButton_gamingLight]: gaming === 'light',[$style.postButton]: gaming === ''}]" class="ti ti-apps"
class="_button" @click="os.post()"><i :class="$style.navButtonIcon" ></i>
class="ti ti-pencil"></i></button> </button>
</div> <button
:class="[{[$style.postButton_gamingDark]: gaming === 'dark',[$style.postButton_gamingLight]: gaming === 'light',[$style.postButton]: gaming === ''}]"
class="_button" @click="os.post()"
>
<i
:class="$style.navButtonIcon"
class="ti ti-pencil"
></i>
</button>
</div>
<Transition <Transition
:enterActiveClass="defaultStore.state.animation ? $style.transition_menuDrawerBg_enterActive : ''" :enterActiveClass="defaultStore.state.animation ? $style.transition_menuDrawerBg_enterActive : ''"
:leaveActiveClass="defaultStore.state.animation ? $style.transition_menuDrawerBg_leaveActive : ''" :leaveActiveClass="defaultStore.state.animation ? $style.transition_menuDrawerBg_leaveActive : ''"
:enterFromClass="defaultStore.state.animation ? $style.transition_menuDrawerBg_enterFrom : ''" :enterFromClass="defaultStore.state.animation ? $style.transition_menuDrawerBg_enterFrom : ''"
:leaveToClass="defaultStore.state.animation ? $style.transition_menuDrawerBg_leaveTo : ''" :leaveToClass="defaultStore.state.animation ? $style.transition_menuDrawerBg_leaveTo : ''"
> >
<div <div
v-if="drawerMenuShowing" v-if="drawerMenuShowing"
:class="$style.menuDrawerBg" :class="$style.menuDrawerBg"
class="_modalBg" class="_modalBg"
@click="drawerMenuShowing = false" @click="drawerMenuShowing = false"
@touchstart.passive="drawerMenuShowing = false" @touchstart.passive="drawerMenuShowing = false"
></div> ></div>
</Transition> </Transition>
<Transition <Transition
:enterActiveClass="defaultStore.state.animation ? $style.transition_menuDrawer_enterActive : ''" :enterActiveClass="defaultStore.state.animation ? $style.transition_menuDrawer_enterActive : ''"
:leaveActiveClass="defaultStore.state.animation ? $style.transition_menuDrawer_leaveActive : ''" :leaveActiveClass="defaultStore.state.animation ? $style.transition_menuDrawer_leaveActive : ''"
:enterFromClass="defaultStore.state.animation ? $style.transition_menuDrawer_enterFrom : ''" :enterFromClass="defaultStore.state.animation ? $style.transition_menuDrawer_enterFrom : ''"
:leaveToClass="defaultStore.state.animation ? $style.transition_menuDrawer_leaveTo : ''" :leaveToClass="defaultStore.state.animation ? $style.transition_menuDrawer_leaveTo : ''"
> >
<div v-if="drawerMenuShowing" :class="$style.menuDrawer"> <div v-if="drawerMenuShowing" :class="$style.menuDrawer">
<XDrawerMenu/> <XDrawerMenu/>
</div> </div>
</Transition> </Transition>
<Transition <Transition
:enterActiveClass="defaultStore.state.animation ? $style.transition_widgetsDrawerBg_enterActive : ''" :enterActiveClass="defaultStore.state.animation ? $style.transition_widgetsDrawerBg_enterActive : ''"
:leaveActiveClass="defaultStore.state.animation ? $style.transition_widgetsDrawerBg_leaveActive : ''" :leaveActiveClass="defaultStore.state.animation ? $style.transition_widgetsDrawerBg_leaveActive : ''"
:enterFromClass="defaultStore.state.animation ? $style.transition_widgetsDrawerBg_enterFrom : ''" :enterFromClass="defaultStore.state.animation ? $style.transition_widgetsDrawerBg_enterFrom : ''"
:leaveToClass="defaultStore.state.animation ? $style.transition_widgetsDrawerBg_leaveTo : ''" :leaveToClass="defaultStore.state.animation ? $style.transition_widgetsDrawerBg_leaveTo : ''"
> >
<div <div
v-if="widgetsShowing" v-if="widgetsShowing"
:class="$style.widgetsDrawerBg" :class="$style.widgetsDrawerBg"
class="_modalBg" class="_modalBg"
@click="widgetsShowing = false" @click="widgetsShowing = false"
@touchstart.passive="widgetsShowing = false" @touchstart.passive="widgetsShowing = false"
></div> ></div>
</Transition> </Transition>
<Transition <Transition
:enterActiveClass="defaultStore.state.animation ? $style.transition_widgetsDrawer_enterActive : ''" :enterActiveClass="defaultStore.state.animation ? $style.transition_widgetsDrawer_enterActive : ''"
:leaveActiveClass="defaultStore.state.animation ? $style.transition_widgetsDrawer_leaveActive : ''" :leaveActiveClass="defaultStore.state.animation ? $style.transition_widgetsDrawer_leaveActive : ''"
:enterFromClass="defaultStore.state.animation ? $style.transition_widgetsDrawer_enterFrom : ''" :enterFromClass="defaultStore.state.animation ? $style.transition_widgetsDrawer_enterFrom : ''"
:leaveToClass="defaultStore.state.animation ? $style.transition_widgetsDrawer_leaveTo : ''" :leaveToClass="defaultStore.state.animation ? $style.transition_widgetsDrawer_leaveTo : ''"
> >
<div v-if="widgetsShowing" :class="$style.widgetsDrawer"> <div v-if="widgetsShowing" :class="$style.widgetsDrawer">
<button class="_button" :class="$style.widgetsCloseButton" @click="widgetsShowing = false"><i <button class="_button" :class="$style.widgetsCloseButton" @click="widgetsShowing = false">
class="ti ti-x"></i></button> <i
<XWidgets/> class="ti ti-x"
</div> ></i>
</Transition> </button>
<XWidgets/>
</div>
</Transition>
<XCommon/> <XCommon/>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {defineAsyncComponent, provide, onMounted, computed, ref, watch, shallowRef, Ref} from 'vue'; import { defineAsyncComponent, provide, onMounted, computed, ref, watch, shallowRef, Ref } from 'vue';
import XCommon from './_common_/common.vue'; import XCommon from './_common_/common.vue';
import type MkStickyContainer from '@/components/global/MkStickyContainer.vue'; import type MkStickyContainer from '@/components/global/MkStickyContainer.vue';
import {instanceName} from '@/config'; import { instanceName } from '@/config';
import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue'; import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
import * as os from '@/os'; import * as os from '@/os';
import {defaultStore} from '@/store'; import { defaultStore } from '@/store';
import {navbarItemDef} from '@/navbar'; import { navbarItemDef } from '@/navbar';
import {i18n} from '@/i18n'; import { i18n } from '@/i18n';
import {$i} from '@/account'; import { $i } from '@/account';
import { mainRouter } from '@/router/main.js'; import { mainRouter } from '@/router/main.js';
import {PageMetadata, provideMetadataReceiver} from '@/scripts/page-metadata'; import { PageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata';
import {deviceKind} from '@/scripts/device-kind'; import { deviceKind } from '@/scripts/device-kind';
import {miLocalStorage} from '@/local-storage'; import { miLocalStorage } from '@/local-storage';
import {CURRENT_STICKY_BOTTOM} from '@/const'; import { CURRENT_STICKY_BOTTOM } from '@/const';
import {useScrollPositionManager} from '@/nirax'; import { useScrollPositionManager } from '@/nirax';
const darkMode = computed(defaultStore.makeGetterSetter('darkMode')); const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode')); const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
const indicatorCounterToggle = computed(defaultStore.makeGetterSetter('indicatorCounterToggle')); const indicatorCounterToggle = computed(defaultStore.makeGetterSetter('indicatorCounterToggle'));
let gaming = ref() let gaming = ref();
// gaming.valueに新しい値を代入する // gaming.valueに新しい値を代入する
if (darkMode.value && gamingMode.value == true) { if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark'; gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) { } else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light'; gaming.value = 'light';
} else { } else {
gaming.value = ''; gaming.value = '';
} }
watch(darkMode, () => { watch(darkMode, () => {
if (darkMode.value && gamingMode.value == true) { if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark'; gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) { } else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light'; gaming.value = 'light';
} else { } else {
gaming.value = ''; gaming.value = '';
} }
}) });
watch(gamingMode, () => { watch(gamingMode, () => {
if (darkMode.value && gamingMode.value == true) { if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark'; gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) { } else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light'; gaming.value = 'light';
} else { } else {
gaming.value = ''; gaming.value = '';
} }
}) });
const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue')); const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue')); const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue'));
const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue')); const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
@ -167,37 +197,36 @@ const DESKTOP_THRESHOLD = 1100;
const MOBILE_THRESHOLD = 500; const MOBILE_THRESHOLD = 500;
onMounted(() => { onMounted(() => {
if ( if (
window.navigator.connection.type === "cellular" && window.navigator.connection.type === 'cellular' &&
!defaultStore.state.enableUltimateDataSaverMode && !defaultStore.state.enableUltimateDataSaverMode &&
defaultStore.state.enableCellularWithUltimateDataSaver defaultStore.state.enableCellularWithUltimateDataSaver
) { ) {
defaultStore.state.enableDataSaverMode = true; defaultStore.state.enableDataSaverMode = true;
defaultStore.state.enableUltimateDataSaverMode = true; defaultStore.state.enableUltimateDataSaverMode = true;
} else if (window.navigator.connection.type !== "cellular" && window.navigator.connection.type !== "undefined" && defaultStore.state.enableDataSaverMode && defaultStore.state.enableCellularWithDataSaver) { } else if (window.navigator.connection.type !== 'cellular' && window.navigator.connection.type !== 'undefined' && defaultStore.state.enableDataSaverMode && defaultStore.state.enableCellularWithDataSaver) {
defaultStore.state.enableDataSaverMode = false; defaultStore.state.enableDataSaverMode = false;
defaultStore.state.enableUltimateDataSaverMode = true; defaultStore.state.enableUltimateDataSaverMode = true;
} }
if ( if (
window.navigator.connection.type === "cellular" && window.navigator.connection.type === 'cellular' &&
!defaultStore.state.enableDataSaverMode && !defaultStore.state.enableDataSaverMode &&
defaultStore.state.enableCellularWithDataSaver defaultStore.state.enableCellularWithDataSaver
) { ) {
defaultStore.state.enableDataSaverMode = true; defaultStore.state.enableDataSaverMode = true;
} else if (window.navigator.connection.type !== 'cellular' && window.navigator.connection.type !== 'undefined' && defaultStore.state.enableDataSaverMode && defaultStore.state.enableCellularWithDataSaver) {
} else if (window.navigator.connection.type !== "cellular" && window.navigator.connection.type !== "undefined" && defaultStore.state.enableDataSaverMode && defaultStore.state.enableCellularWithDataSaver) { defaultStore.state.enableDataSaverMode = false;
defaultStore.state.enableDataSaverMode = false; }
} if (defaultStore.state.enableUltimateDataSaverMode) {
if (defaultStore.state.enableUltimateDataSaverMode) { defaultStore.state.enableDataSaverMode = true;
defaultStore.state.enableDataSaverMode = true; }
}
}); });
// デスクトップでウィンドウを狭くしたときモバイルUIが表示されて欲しいことはあるので deviceKind === 'desktop' の判定は行わない // デスクトップでウィンドウを狭くしたときモバイルUIが表示されて欲しいことはあるので deviceKind === 'desktop' の判定は行わない
const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD); const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD); const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
isMobile.value = deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD; isMobile.value = deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD;
}); });
const pageMetadata = ref<null | PageMetadata>(null); const pageMetadata = ref<null | PageMetadata>(null);
@ -208,107 +237,108 @@ const contents = shallowRef<InstanceType<typeof MkStickyContainer>>();
provide('router', mainRouter); provide('router', mainRouter);
provideMetadataReceiver((metadataGetter) => { provideMetadataReceiver((metadataGetter) => {
const info = metadataGetter(); const info = metadataGetter();
pageMetadata.value = info; pageMetadata.value = info;
if (pageMetadata.value) { if (pageMetadata.value) {
if (isRoot.value && pageMetadata.value.title === instanceName) { if (isRoot.value && pageMetadata.value.title === instanceName) {
document.title = pageMetadata.value.title; document.title = pageMetadata.value.title;
} else { } else {
document.title = `${pageMetadata.value.title} | ${instanceName}`; document.title = `${pageMetadata.value.title} | ${instanceName}`;
}} }
}
}); });
provideReactiveMetadata(pageMetadata); provideReactiveMetadata(pageMetadata);
const menuIndicated = computed(() => { const menuIndicated = computed(() => {
for (const def in navbarItemDef) { for (const def in navbarItemDef) {
if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから
if (navbarItemDef[def].indicated) return true; if (navbarItemDef[def].indicated) return true;
} }
return false; return false;
}); });
const drawerMenuShowing = ref(false); const drawerMenuShowing = ref(false);
mainRouter.on('change', () => { mainRouter.on('change', () => {
drawerMenuShowing.value = false; drawerMenuShowing.value = false;
}); });
if (window.innerWidth > 1024) { if (window.innerWidth > 1024) {
const tempUI = miLocalStorage.getItem('ui_temp'); const tempUI = miLocalStorage.getItem('ui_temp');
if (tempUI) { if (tempUI) {
miLocalStorage.setItem('ui', tempUI); miLocalStorage.setItem('ui', tempUI);
miLocalStorage.removeItem('ui_temp'); miLocalStorage.removeItem('ui_temp');
location.reload(); location.reload();
} }
} }
defaultStore.loaded.then(() => { defaultStore.loaded.then(() => {
if (defaultStore.state.widgets.length === 0) { if (defaultStore.state.widgets.length === 0) {
defaultStore.set('widgets', [{ defaultStore.set('widgets', [{
name: 'calendar', name: 'calendar',
id: 'a', place: 'right', data: {}, id: 'a', place: 'right', data: {},
}, { }, {
name: 'notifications', name: 'notifications',
id: 'b', place: 'right', data: {}, id: 'b', place: 'right', data: {},
}, { }, {
name: 'trends', name: 'trends',
id: 'c', place: 'right', data: {}, id: 'c', place: 'right', data: {},
}]); }]);
} }
}); });
onMounted(() => { onMounted(() => {
if (!isDesktop.value) { if (!isDesktop.value) {
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
if (window.innerWidth >= DESKTOP_THRESHOLD) isDesktop.value = true; if (window.innerWidth >= DESKTOP_THRESHOLD) isDesktop.value = true;
}, {passive: true}); }, { passive: true });
} }
}); });
const onContextmenu = (ev) => { const onContextmenu = (ev) => {
const isLink = (el: HTMLElement) => { const isLink = (el: HTMLElement) => {
if (el.tagName === 'A') return true; if (el.tagName === 'A') return true;
if (el.parentElement) { if (el.parentElement) {
return isLink(el.parentElement); return isLink(el.parentElement);
} }
}; };
if (isLink(ev.target)) return; if (isLink(ev.target)) return;
if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO', 'CANVAS'].includes(ev.target.tagName) || ev.target.attributes['contenteditable']) return; if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO', 'CANVAS'].includes(ev.target.tagName) || ev.target.attributes['contenteditable']) return;
if (window.getSelection()?.toString() !== '') return; if (window.getSelection()?.toString() !== '') return;
const path = mainRouter.getCurrentPath(); const path = mainRouter.getCurrentPath();
os.contextMenu([{ os.contextMenu([{
type: 'label', type: 'label',
text: path, text: path,
}, { }, {
icon: 'ti ti-window-maximize', icon: 'ti ti-window-maximize',
text: i18n.ts.openInWindow, text: i18n.ts.openInWindow,
action: () => { action: () => {
os.pageWindow(path); os.pageWindow(path);
}, },
}], ev); }], ev);
}; };
function top() { function top() {
contents.value.rootEl.scrollTo({ contents.value.rootEl.scrollTo({
top: 0, top: 0,
behavior: 'smooth', behavior: 'smooth',
}); });
} }
const navFooterHeight = ref(0); const navFooterHeight = ref(0);
provide<Ref<number>>(CURRENT_STICKY_BOTTOM, navFooterHeight); provide<Ref<number>>(CURRENT_STICKY_BOTTOM, navFooterHeight);
watch(navFooter, () => { watch(navFooter, () => {
if (navFooter.value) { if (navFooter.value) {
navFooterHeight.value = navFooter.value.offsetHeight; navFooterHeight.value = navFooter.value.offsetHeight;
document.body.style.setProperty('--stickyBottom', `${navFooterHeight.value}px`); document.body.style.setProperty('--stickyBottom', `${navFooterHeight.value}px`);
document.body.style.setProperty('--minBottomSpacing', 'var(--minBottomSpacingMobile)'); document.body.style.setProperty('--minBottomSpacing', 'var(--minBottomSpacingMobile)');
} else { } else {
navFooterHeight.value = 0; navFooterHeight.value = 0;
document.body.style.setProperty('--stickyBottom', '0px'); document.body.style.setProperty('--stickyBottom', '0px');
document.body.style.setProperty('--minBottomSpacing', '0px'); document.body.style.setProperty('--minBottomSpacing', '0px');
} }
}, { }, {
immediate: true, immediate: true,
}); });
useScrollPositionManager(() => contents.value.rootEl, mainRouter); useScrollPositionManager(() => contents.value.rootEl, mainRouter);
@ -569,7 +599,6 @@ $widgets-hide-threshold: 1090px;
background: linear-gradient(90deg, var(--X8), var(--X8)); background: linear-gradient(90deg, var(--X8), var(--X8));
} }
} }
.navButtonIcon { .navButtonIcon {