enhance(frontend): improve and refactor mobile nav footer
This commit is contained in:
syuilo
parent
65b4458474
commit
33e6ebb2ee
|
|
@ -0,0 +1,144 @@
|
|||
<!--
|
||||
SPDX-FileCopyrightText: syuilo and misskey-project
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div ref="rootEl" :class="$style.root">
|
||||
<button :class="$style.item" class="_button" @click="drawerMenuShowing = true">
|
||||
<div :class="$style.itemInner">
|
||||
<i :class="$style.itemIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" :class="$style.itemIndicator" class="_blink"><i class="_indicatorCircle"></i></span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button :class="$style.item" class="_button" @click="mainRouter.push('/')">
|
||||
<div :class="$style.itemInner">
|
||||
<i :class="$style.itemIcon" class="ti ti-home"></i>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button :class="$style.item" class="_button" @click="mainRouter.push('/my/notifications')">
|
||||
<div :class="$style.itemInner">
|
||||
<i :class="$style.itemIcon" class="ti ti-bell"></i>
|
||||
<span v-if="$i?.hasUnreadNotification" :class="$style.itemIndicator" class="_blink">
|
||||
<span class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ $i.unreadNotificationsCount > 99 ? '99+' : $i.unreadNotificationsCount }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button :class="$style.item" class="_button" @click="widgetsShowing = true">
|
||||
<div :class="$style.itemInner">
|
||||
<i :class="$style.itemIcon" class="ti ti-apps"></i>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button :class="[$style.item, $style.post]" class="_button" @click="os.post()">
|
||||
<div :class="$style.itemInner">
|
||||
<i :class="$style.itemIcon" class="ti ti-pencil"></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, useTemplateRef, watch } from 'vue';
|
||||
import { $i } from '@/i.js';
|
||||
import * as os from '@/os.js';
|
||||
import { mainRouter } from '@/router.js';
|
||||
import { navbarItemDef } from '@/navbar.js';
|
||||
|
||||
const drawerMenuShowing = defineModel<boolean>('drawerMenuShowing');
|
||||
const widgetsShowing = defineModel<boolean>('widgetsShowing');
|
||||
|
||||
const rootEl = useTemplateRef('rootEl');
|
||||
|
||||
const menuIndicated = computed(() => {
|
||||
for (const def in navbarItemDef) {
|
||||
if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから
|
||||
if (navbarItemDef[def].indicated) return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
const rootElHeight = ref(0);
|
||||
|
||||
watch(rootEl, () => {
|
||||
if (rootEl.value) {
|
||||
rootElHeight.value = rootEl.value.offsetHeight;
|
||||
window.document.body.style.setProperty('--MI-minBottomSpacing', 'var(--MI-minBottomSpacingMobile)');
|
||||
} else {
|
||||
rootElHeight.value = 0;
|
||||
window.document.body.style.setProperty('--MI-minBottomSpacing', '0px');
|
||||
}
|
||||
}, {
|
||||
immediate: true,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
padding: 12px 12px max(12px, env(safe-area-inset-bottom, 0px)) 12px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
grid-gap: 8px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background: var(--MI_THEME-bg);
|
||||
border-top: solid 0.5px var(--MI_THEME-divider);
|
||||
}
|
||||
|
||||
.item {
|
||||
&.post {
|
||||
.itemInner {
|
||||
background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
|
||||
color: var(--MI_THEME-fgOnAccent);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.itemInner {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
aspect-ratio: 1;
|
||||
width: 100%;
|
||||
max-width: 50px;
|
||||
margin: auto;
|
||||
align-content: center;
|
||||
border-radius: 100%;
|
||||
background: var(--MI_THEME-panel);
|
||||
color: var(--MI_THEME-fg);
|
||||
|
||||
&:hover {
|
||||
background: var(--MI_THEME-panelHighlight);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: hsl(from var(--MI_THEME-panel) h s calc(l - 2));
|
||||
}
|
||||
}
|
||||
|
||||
.itemIcon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.itemIndicator {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: var(--MI_THEME-indicator);
|
||||
font-size: 16px;
|
||||
|
||||
&:has(.itemIndicateValueIcon) {
|
||||
animation: none;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -68,17 +68,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
|
||||
<XNavbarH v-if="!isMobile && prefer.r['deck.navbarPosition'].value === 'bottom'"/>
|
||||
|
||||
<div v-if="isMobile" :class="$style.nav">
|
||||
<button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true"><i :class="$style.navButtonIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" :class="$style.navButtonIndicator" class="_blink"><i class="_indicatorCircle"></i></span></button>
|
||||
<button :class="$style.navButton" class="_button" @click="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" class="_blink">
|
||||
<span class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ $i.unreadNotificationsCount > 99 ? '99+' : $i.unreadNotificationsCount }}</span>
|
||||
</span>
|
||||
</button>
|
||||
<button :class="$style.postButton" class="_button" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
|
||||
</div>
|
||||
<XMobileFooterMenu v-if="isMobile" v-model:drawerMenuShowing="drawerMenuShowing" v-model:widgetsShowing="widgetsShowing"/>
|
||||
</div>
|
||||
|
||||
<Transition
|
||||
|
|
@ -107,19 +97,46 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</div>
|
||||
</Transition>
|
||||
|
||||
<Transition
|
||||
:enterActiveClass="prefer.s.animation ? $style.transition_widgetsDrawerBg_enterActive : ''"
|
||||
:leaveActiveClass="prefer.s.animation ? $style.transition_widgetsDrawerBg_leaveActive : ''"
|
||||
:enterFromClass="prefer.s.animation ? $style.transition_widgetsDrawerBg_enterFrom : ''"
|
||||
:leaveToClass="prefer.s.animation ? $style.transition_widgetsDrawerBg_leaveTo : ''"
|
||||
>
|
||||
<div
|
||||
v-if="widgetsShowing"
|
||||
:class="$style.widgetsDrawerBg"
|
||||
class="_modalBg"
|
||||
@click="widgetsShowing = false"
|
||||
@touchstart.passive="widgetsShowing = false"
|
||||
></div>
|
||||
</Transition>
|
||||
|
||||
<Transition
|
||||
:enterActiveClass="prefer.s.animation ? $style.transition_widgetsDrawer_enterActive : ''"
|
||||
:leaveActiveClass="prefer.s.animation ? $style.transition_widgetsDrawer_leaveActive : ''"
|
||||
:enterFromClass="prefer.s.animation ? $style.transition_widgetsDrawer_enterFrom : ''"
|
||||
:leaveToClass="prefer.s.animation ? $style.transition_widgetsDrawer_leaveTo : ''"
|
||||
>
|
||||
<div v-if="widgetsShowing" :class="$style.widgetsDrawer">
|
||||
<button class="_button" :class="$style.widgetsCloseButton" @click="widgetsShowing = false"><i class="ti ti-x"></i></button>
|
||||
<XWidgets/>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
<XCommon/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, defineAsyncComponent, ref, useTemplateRef } from 'vue';
|
||||
import { defineAsyncComponent, ref, useTemplateRef } from 'vue';
|
||||
import { v4 as uuid } from 'uuid';
|
||||
import XCommon from './_common_/common.vue';
|
||||
import XSidebar from '@/ui/_common_/navbar.vue';
|
||||
import XNavbarH from '@/ui/_common_/navbar-h.vue';
|
||||
import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
|
||||
import XMobileFooterMenu from '@/ui/_common_/mobile-footer-menu.vue';
|
||||
import * as os from '@/os.js';
|
||||
import { navbarItemDef } from '@/navbar.js';
|
||||
import { $i } from '@/i.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { deviceKind } from '@/utility/device-kind.js';
|
||||
|
|
@ -139,6 +156,7 @@ import { columns, layout, columnTypes, switchProfileMenu, addColumn as addColumn
|
|||
|
||||
const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
|
||||
const XAnnouncements = defineAsyncComponent(() => import('@/ui/_common_/announcements.vue'));
|
||||
const XWidgets = defineAsyncComponent(() => import('./_common_/widgets.vue'));
|
||||
|
||||
const columnComponents = {
|
||||
main: XMainColumn,
|
||||
|
|
@ -172,6 +190,7 @@ window.addEventListener('resize', () => {
|
|||
const snapScroll = ref(deviceKind === 'smartphone' || deviceKind === 'tablet');
|
||||
const withWallpaper = prefer.s['deck.wallpaper'] != null;
|
||||
const drawerMenuShowing = ref(false);
|
||||
const widgetsShowing = ref(false);
|
||||
const gap = prefer.r['deck.columnGap'];
|
||||
|
||||
/*
|
||||
|
|
@ -181,14 +200,6 @@ watch(route, () => {
|
|||
});
|
||||
*/
|
||||
|
||||
const menuIndicated = computed(() => {
|
||||
if ($i == null) return false;
|
||||
for (const def in navbarItemDef) {
|
||||
if (navbarItemDef[def].indicated) return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
function showSettings() {
|
||||
os.pageWindow('/settings/deck');
|
||||
}
|
||||
|
|
@ -280,6 +291,28 @@ if (prefer.s['deck.wallpaper'] != null) {
|
|||
transform: translateX(-240px);
|
||||
}
|
||||
|
||||
.transition_widgetsDrawerBg_enterActive,
|
||||
.transition_widgetsDrawerBg_leaveActive {
|
||||
opacity: 1;
|
||||
transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
.transition_widgetsDrawerBg_enterFrom,
|
||||
.transition_widgetsDrawerBg_leaveTo {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.transition_widgetsDrawer_enterActive,
|
||||
.transition_widgetsDrawer_leaveActive {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
.transition_widgetsDrawer_enterFrom,
|
||||
.transition_widgetsDrawer_leaveTo {
|
||||
opacity: 0;
|
||||
transform: translateX(-240px);
|
||||
}
|
||||
|
||||
.root {
|
||||
$nav-hide-threshold: 650px; // TODO: どこかに集約したい
|
||||
|
||||
|
|
@ -427,68 +460,33 @@ if (prefer.s['deck.wallpaper'] != null) {
|
|||
background: var(--MI_THEME-navBg);
|
||||
}
|
||||
|
||||
.nav {
|
||||
padding: 12px 12px max(12px, env(safe-area-inset-bottom, 0px)) 12px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
grid-gap: 8px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(32px));
|
||||
backdrop-filter: var(--MI-blur, blur(32px));
|
||||
background-color: var(--MI_THEME-header);
|
||||
border-top: solid 0.5px var(--MI_THEME-divider);
|
||||
.widgetsDrawerBg {
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.navButton {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
aspect-ratio: 1;
|
||||
width: 100%;
|
||||
max-width: 50px;
|
||||
margin: auto;
|
||||
border-radius: 100%;
|
||||
background: var(--MI_THEME-panel);
|
||||
color: var(--MI_THEME-fg);
|
||||
|
||||
&:hover {
|
||||
background: var(--MI_THEME-panelHighlight);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: hsl(from var(--MI_THEME-panel) h s calc(l - 2));
|
||||
}
|
||||
}
|
||||
|
||||
.postButton {
|
||||
composes: navButton;
|
||||
background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
|
||||
color: var(--MI_THEME-fgOnAccent);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
|
||||
}
|
||||
}
|
||||
|
||||
.navButtonIcon {
|
||||
font-size: 18px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.navButtonIndicator {
|
||||
position: absolute;
|
||||
.widgetsDrawer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: var(--MI_THEME-indicator);
|
||||
font-size: 16px;
|
||||
z-index: 1001;
|
||||
width: 310px;
|
||||
height: 100dvh;
|
||||
padding: var(--MI-margin) var(--MI-margin) calc(var(--MI-margin) + env(safe-area-inset-bottom, 0px)) !important;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
background: var(--MI_THEME-bg);
|
||||
}
|
||||
|
||||
&:has(.itemIndicateValueIcon) {
|
||||
animation: none;
|
||||
font-size: 12px;
|
||||
.widgetsCloseButton {
|
||||
padding: 8px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (min-width: 370px) {
|
||||
.widgetsCloseButton {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -15,18 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</div>
|
||||
<StackingRouterView v-if="prefer.s['experimental.stackingRouterView']" :class="$style.content"/>
|
||||
<RouterView v-else :class="$style.content"/>
|
||||
<div v-if="isMobile" ref="navFooter" :class="$style.nav">
|
||||
<button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true"><i :class="$style.navButtonIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" :class="$style.navButtonIndicator" class="_blink"><i class="_indicatorCircle"></i></span></button>
|
||||
<button :class="$style.navButton" class="_button" @click="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" class="_blink">
|
||||
<span class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ $i.unreadNotificationsCount > 99 ? '99+' : $i.unreadNotificationsCount }}</span>
|
||||
</span>
|
||||
</button>
|
||||
<button :class="$style.navButton" class="_button" @click="widgetsShowing = true"><i :class="$style.navButtonIcon" class="ti ti-apps"></i></button>
|
||||
<button :class="$style.postButton" class="_button" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
|
||||
</div>
|
||||
<XMobileFooterMenu v-if="isMobile" ref="navFooter" v-model:drawerMenuShowing="drawerMenuShowing" v-model:widgetsShowing="widgetsShowing"/>
|
||||
</div>
|
||||
|
||||
<div v-if="isDesktop && !pageMetadata?.needWideArea" :class="$style.widgets">
|
||||
|
|
@ -91,14 +80,15 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineAsyncComponent, provide, onMounted, computed, ref, watch, useTemplateRef } from 'vue';
|
||||
import { defineAsyncComponent, provide, onMounted, computed, ref } from 'vue';
|
||||
import { instanceName } from '@@/js/config.js';
|
||||
import { isLink } from '@@/js/is-link.js';
|
||||
import XCommon from './_common_/common.vue';
|
||||
import type { PageMetadata } from '@/page.js';
|
||||
import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
|
||||
import XMobileFooterMenu from '@/ui/_common_/mobile-footer-menu.vue';
|
||||
import XPreferenceRestore from '@/ui/_common_/PreferenceRestore.vue';
|
||||
import * as os from '@/os.js';
|
||||
import { navbarItemDef } from '@/navbar.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { $i } from '@/i.js';
|
||||
import { provideMetadataReceiver, provideReactiveMetadata } from '@/page.js';
|
||||
|
|
@ -109,11 +99,10 @@ import { prefer } from '@/preferences.js';
|
|||
import { shouldSuggestRestoreBackup } from '@/preferences/utility.js';
|
||||
import { DI } from '@/di.js';
|
||||
|
||||
const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
|
||||
const XWidgets = defineAsyncComponent(() => import('./_common_/widgets.vue'));
|
||||
const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue'));
|
||||
const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
|
||||
const XAnnouncements = defineAsyncComponent(() => import('@/ui/_common_/announcements.vue'));
|
||||
const XPreferenceRestore = defineAsyncComponent(() => import('@/ui/_common_/PreferenceRestore.vue'));
|
||||
|
||||
const isRoot = computed(() => mainRouter.currentRoute.value.name === 'index');
|
||||
|
||||
|
|
@ -129,7 +118,6 @@ window.addEventListener('resize', () => {
|
|||
|
||||
const pageMetadata = ref<null | PageMetadata>(null);
|
||||
const widgetsShowing = ref(false);
|
||||
const navFooter = useTemplateRef('navFooter');
|
||||
|
||||
provide(DI.router, mainRouter);
|
||||
provideMetadataReceiver((metadataGetter) => {
|
||||
|
|
@ -145,14 +133,6 @@ provideMetadataReceiver((metadataGetter) => {
|
|||
});
|
||||
provideReactiveMetadata(pageMetadata);
|
||||
|
||||
const menuIndicated = computed(() => {
|
||||
for (const def in navbarItemDef) {
|
||||
if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから
|
||||
if (navbarItemDef[def].indicated) return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
const drawerMenuShowing = ref(false);
|
||||
|
||||
mainRouter.on('change', () => {
|
||||
|
|
@ -192,20 +172,6 @@ const onContextmenu = (ev) => {
|
|||
},
|
||||
}], ev);
|
||||
};
|
||||
|
||||
const navFooterHeight = ref(0);
|
||||
|
||||
watch(navFooter, () => {
|
||||
if (navFooter.value) {
|
||||
navFooterHeight.value = navFooter.value.offsetHeight;
|
||||
window.document.body.style.setProperty('--MI-minBottomSpacing', 'var(--MI-minBottomSpacingMobile)');
|
||||
} else {
|
||||
navFooterHeight.value = 0;
|
||||
window.document.body.style.setProperty('--MI-minBottomSpacing', '0px');
|
||||
}
|
||||
}, {
|
||||
immediate: true,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
|
|
@ -282,69 +248,6 @@ $widgets-hide-threshold: 1090px;
|
|||
min-height: 0;
|
||||
}
|
||||
|
||||
.nav {
|
||||
padding: 12px 12px max(12px, env(safe-area-inset-bottom, 0px)) 12px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
grid-gap: 8px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background: var(--MI_THEME-bg);
|
||||
border-top: solid 0.5px var(--MI_THEME-divider);
|
||||
}
|
||||
|
||||
.navButton {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
aspect-ratio: 1;
|
||||
width: 100%;
|
||||
max-width: 50px;
|
||||
margin: auto;
|
||||
border-radius: 100%;
|
||||
background: var(--MI_THEME-panel);
|
||||
color: var(--MI_THEME-fg);
|
||||
|
||||
&:hover {
|
||||
background: var(--MI_THEME-panelHighlight);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: hsl(from var(--MI_THEME-panel) h s calc(l - 2));
|
||||
}
|
||||
}
|
||||
|
||||
.postButton {
|
||||
composes: navButton;
|
||||
background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
|
||||
color: var(--MI_THEME-fgOnAccent);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
|
||||
}
|
||||
}
|
||||
|
||||
.navButtonIcon {
|
||||
font-size: 16px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.navButtonIndicator {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: var(--MI_THEME-indicator);
|
||||
font-size: 16px;
|
||||
|
||||
&:has(.itemIndicateValueIcon) {
|
||||
animation: none;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.menuDrawerBg {
|
||||
z-index: 1001;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue