🎨

2 files changed, 142 insertions, 132 deletions

diff --git a/packages/frontend/src/ui/_common_/navbar-h.vue b/packages/frontend/src/ui/_common_/navbar-h.vue
index aa86ae0d36..64da4647b6 100644
--- a/packages/frontend/src/ui/_common_/navbar-h.vue
+++ b/packages/frontend/src/ui/_common_/navbar-h.vue
@@ -4,40 +4,40 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div class="azykntjl">
-	<div class="body">
-		<div class="left">
-			<button v-click-anime class="item _button instance" @click="openInstanceMenu">
-				<img :src="instance.iconUrl ?? '/favicon.ico'" draggable="false"/>
+<div :class="[$style.root, acrylic ? $style.acrylic : null]">
+	<div :class="$style.body">
+		<div :class="$style.left">
+			<button v-click-anime :class="[$style.item, $style.instance]" class="_button" @click="openInstanceMenu">
+				<img :class="$style.instanceIcon" :src="instance.iconUrl ?? '/favicon.ico'" draggable="false"/>
 			</button>
-			<MkA v-click-anime v-tooltip="i18n.ts.timeline" class="item index" activeClass="active" to="/" exact>
-				<i class="ti ti-home ti-fw"></i>
+			<MkA v-click-anime v-tooltip="i18n.ts.timeline" :class="$style.item" activeClass="active" to="/" exact>
+				<i :class="$style.itemIcon" class="ti ti-home ti-fw"></i>
 			</MkA>
 			<template v-for="item in menu">
-				<div v-if="item === '-'" class="divider"></div>
-				<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime v-tooltip="navbarItemDef[item].title" class="item _button" :class="item" activeClass="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
-					<i class="ti-fw" :class="navbarItemDef[item].icon"></i>
-					<span v-if="navbarItemDef[item].indicated" class="indicator _blink"><i class="_indicatorCircle"></i></span>
+				<div v-if="item === '-'" :class="$style.divider"></div>
+				<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime v-tooltip="navbarItemDef[item].title" class="_button" :class="$style.item" activeClass="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
+					<i :class="[$style.itemIcon, navbarItemDef[item].icon]" class="ti-fw"></i>
+					<span v-if="navbarItemDef[item].indicated" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
 				</component>
 			</template>
-			<div class="divider"></div>
+			<div :class="$style.divider"></div>
 			<MkA v-if="$i && ($i.isAdmin || $i.isModerator)" v-click-anime v-tooltip="i18n.ts.controlPanel" class="item" activeClass="active" to="/admin" :behavior="settingsWindowed ? 'window' : null">
-				<i class="ti ti-dashboard ti-fw"></i>
+				<i :class="$style.itemIcon" class="ti ti-dashboard ti-fw"></i>
 			</MkA>
-			<button v-click-anime class="item _button" @click="more">
-				<i class="ti ti-dots ti-fw"></i>
-				<span v-if="otherNavItemIndicated" class="indicator _blink"><i class="_indicatorCircle"></i></span>
+			<button v-click-anime :class="$style.item" class="_button" @click="more">
+				<i :class="$style.itemIcon" class="ti ti-dots ti-fw"></i>
+				<span v-if="otherNavItemIndicated" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
 			</button>
 		</div>
-		<div class="right">
-			<MkA v-click-anime v-tooltip="i18n.ts.settings" class="item" activeClass="active" to="/settings" :behavior="settingsWindowed ? 'window' : null">
-				<i class="ti ti-settings ti-fw"></i>
+		<div :class="$style.right">
+			<MkA v-click-anime v-tooltip="i18n.ts.settings" :class="$style.item" activeClass="active" to="/settings" :behavior="settingsWindowed ? 'window' : null">
+				<i :class="$style.itemIcon" class="ti ti-settings ti-fw"></i>
 			</MkA>
-			<button v-if="$i" v-click-anime class="item _button account" @click="openAccountMenu">
-				<MkAvatar :user="$i" class="avatar"/><MkAcct class="acct" :user="$i"/>
+			<button v-if="$i" v-click-anime :class="[$style.item, $style.account]" class="_button" @click="openAccountMenu">
+				<MkAvatar :user="$i" :class="$style.avatar"/><MkAcct :class="$style.acct" :user="$i"/>
 			</button>
-			<div class="post" @click="os.post()">
-				<MkButton class="button" gradate full rounded>
+			<div :class="$style.post" @click="os.post()">
+				<MkButton :class="$style.postButton" gradate rounded>
 					<i class="ti ti-pencil ti-fw"></i>
 				</MkButton>
 			</div>
@@ -61,6 +61,10 @@ import { getHTMLElementOrNull } from '@/utility/get-dom-node-or-null.js';
 
 const WINDOW_THRESHOLD = 1400;
 
+const props = defineProps<{
+	acrylic?: boolean;
+}>();
+
 const settingsWindowed = ref(window.innerWidth > WINDOW_THRESHOLD);
 const menu = ref(prefer.s.menu);
 // const menuDisplay = computed(store.makeGetterSetter('menuDisplay'));
@@ -100,134 +104,140 @@ onMounted(() => {
 
 </script>
 
-<style lang="scss" scoped>
-.azykntjl {
-	$height: 60px;
-	$avatar-size: 32px;
-	$avatar-margin: 8px;
+<style lang="scss" module>
+.root {
+	--height: 60px;
 
 	position: sticky;
 	top: 0;
 	z-index: 1000;
 	width: 100%;
-	height: $height;
-	background: color(from var(--MI_THEME-bg) srgb r g b / 0.75);
-	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
-	backdrop-filter: var(--MI-blur, blur(15px));
+	height: var(--height);
+	contain: strict;
+	background: var(--MI_THEME-navBg);
 
-	> .body {
-		max-width: 1380px;
-		margin: 0 auto;
-		display: flex;
-		overflow: auto;
-		overflow-y: clip;
-		white-space: nowrap;
+	&.acrylic {
+		background: color(from var(--MI_THEME-bg) srgb r g b / 0.75);
+		-webkit-backdrop-filter: var(--MI-blur, blur(15px));
+		backdrop-filter: var(--MI-blur, blur(15px));
+	}
+}
 
-		> .right,
-		> .left {
+.body {
+	max-width: 1380px;
+	margin: 0 auto;
+	display: flex;
+	overflow: auto;
+	overflow-y: clip;
+	white-space: nowrap;
+}
 
-			> .item {
-				position: relative;
-				font-size: 0.9em;
-				display: inline-block;
-				padding: 0 12px;
-				line-height: $height;
+.item {
+	position: relative;
+	font-size: 0.9em;
+	display: inline-block;
+	padding: 0 12px;
+	line-height: var(--height);
 
-				> i,
-				> .avatar {
-					margin-right: 0;
-				}
+	&:hover {
+		text-decoration: none;
+		color: light-dark(hsl(from var(--MI_THEME-navFg) h s calc(l - 17)), hsl(from var(--MI_THEME-navFg) h s calc(l + 17)));
+	}
 
-				> i {
-					left: 10px;
-				}
+	&.active {
+		color: var(--MI_THEME-navActive);
+	}
+}
 
-				> .avatar {
-					width: $avatar-size;
-					height: $avatar-size;
-					vertical-align: middle;
-				}
+.itemIcon {
+	margin-right: 0;
+	left: 10px;
+}
 
-				> .indicator {
-					position: absolute;
-					top: 0;
-					left: 0;
-					color: var(--MI_THEME-navIndicator);
-					font-size: 8px;
-				}
+.avatar {
+	margin-right: 0;
+	width: 32px;
+	height: 32px;
+	vertical-align: middle;
+}
 
-				&:hover {
-					text-decoration: none;
-					color: light-dark(hsl(from var(--MI_THEME-navFg) h s calc(l - 17)), hsl(from var(--MI_THEME-navFg) h s calc(l + 17)));
-				}
+.acct {
+	margin-left: 8px;
 
-				&.active {
-					color: var(--MI_THEME-navActive);
-				}
-			}
+	@media (max-width: 1200px) {
+		display: none;
+	}
+}
 
-			> .divider {
-				display: inline-block;
-				height: 16px;
-				margin: 0 10px;
-				border-right: solid 0.5px var(--MI_THEME-divider);
-			}
-		}
+.indicator {
+	position: absolute;
+	top: 0;
+	left: 0;
+	color: var(--MI_THEME-navIndicator);
+	font-size: 8px;
+}
 
-		> .left {
-			> .instance {
-				display: inline-block;
-				position: relative;
-				width: 56px;
-				height: 100%;
-				vertical-align: bottom;
-				position: sticky;
-				top: 0;
-				left: 0;
-				z-index: 1;
+.divider {
+	display: inline-block;
+	height: 16px;
+	margin: 0 10px;
+	border-right: solid 0.5px var(--MI_THEME-divider);
+}
 
-				> img {
-					display: inline-block;
-					width: 24px;
-					position: absolute;
-					top: 0;
-					right: 0;
-					bottom: 0;
-					left: 0;
-					margin: auto;
-				}
-			}
-		}
+.instance {
+	display: inline-block;
+	position: relative;
+	width: 56px;
+	height: 100%;
+	vertical-align: bottom;
+	position: sticky;
+	top: 0;
+	left: 0;
+	z-index: 1;
+}
 
-		> .right {
-			margin-left: auto;
-			position: sticky;
-			top: 0;
-			right: 0;
+.instanceIcon {
+	display: inline-block;
+	width: 24px;
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	margin: auto;
+}
 
-			> .post {
-				display: inline-block;
-				margin-right: 8px;
+.right {
+	display: flex;
+	align-items: center;
+	margin-left: auto;
+	position: sticky;
+	top: 0;
+	right: 0;
+	z-index: 1;
+	contain: content;
+	background: var(--MI_THEME-navBg);
+}
+.acrylic .right {
+	background: transparent;
+}
 
-				> .button {
-					width: 40px;
-					height: 40px;
-					padding: 0;
-					min-width: 0;
-				}
-			}
+.post {
+	display: inline-block;
+	margin-right: 8px;
+}
 
-			> .account {
-				display: inline-flex;
-				align-items: center;
-				vertical-align: top;
-				margin-right: 8px;
+.postButton {
+	width: 40px;
+	height: 40px;
+	padding: 0;
+	min-width: 0;
+}
 
-				> .acct {
-					margin-left: 8px;
-				}
-			}
-		}
-	}
+.account {
+	display: inline-flex;
+	align-items: center;
+	vertical-align: top;
+	margin-right: 8px;
 }
 </style>
diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue
index ff8e91663a..0941c25467 100644
--- a/packages/frontend/src/ui/deck.vue
+++ b/packages/frontend/src/ui/deck.vue
@@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<XSidebar v-if="!isMobile && prefer.r['deck.navbarPosition'].value === 'left'"/>
 
 		<div :class="[$style.main, { [$style.withWallpaper]: withWallpaper, [$style.withSidebarAndTitlebar]: !isMobile && prefer.r['deck.navbarPosition'].value === 'left' && prefer.r.showTitlebar.value }]" :style="{ backgroundImage: prefer.s['deck.wallpaper'] != null ? `url(${ prefer.s['deck.wallpaper'] })` : '' }">
-			<XNavbarH v-if="!isMobile && prefer.r['deck.navbarPosition'].value === 'top'"/>
+			<XNavbarH v-if="!isMobile && prefer.r['deck.navbarPosition'].value === 'top'" :acrylic="withWallpaper"/>
 
 			<XReloadSuggestion v-if="shouldSuggestReload"/>
 			<XPreferenceRestore v-if="shouldSuggestRestoreBackup"/>
@@ -71,7 +71,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 			</div>
 
-			<XNavbarH v-if="!isMobile && prefer.r['deck.navbarPosition'].value === 'bottom'"/>
+			<XNavbarH v-if="!isMobile && prefer.r['deck.navbarPosition'].value === 'bottom'" :acrylic="withWallpaper"/>
 
 			<XMobileFooterMenu v-if="isMobile" v-model:drawerMenuShowing="drawerMenuShowing" v-model:widgetsShowing="widgetsShowing"/>
 		</div>