feat(frontend): タイトルバーを表示できるように

This commit is contained in:
syuilo
2025-04-29 09:43:15 +09:00
parent 2e91cd6d45
commit d6ae4c980b
11 changed files with 213 additions and 100 deletions

View File

@@ -7,7 +7,6 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="[$style.root, { [$style.iconOnly]: iconOnly }]">
<div :class="$style.body">
<div :class="$style.top">
<div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
<button v-tooltip.noDelay.right="instance.name ?? i18n.ts.instance" class="_button" :class="$style.instance" @click="openInstanceMenu">
<img :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon" style="viewTransitionName: navbar-serverIcon;"/>
</button>
@@ -183,12 +182,9 @@ function menuEdit() {
}
.body {
position: fixed;
top: 0;
left: 0;
z-index: 1001;
position: relative;
width: var(--nav-icon-only-width);
height: 100dvh;
height: 100%;
box-sizing: border-box;
overflow: auto;
overflow-x: clip;
@@ -303,18 +299,6 @@ function menuEdit() {
backdrop-filter: var(--MI-blur, blur(8px));
}
.banner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
}
.instance {
position: relative;
display: block;
@@ -335,6 +319,7 @@ function menuEdit() {
display: inline-block;
width: 38px;
aspect-ratio: 1;
border-radius: 8px;
}
.bottom {
@@ -559,6 +544,7 @@ function menuEdit() {
display: inline-block;
width: 30px;
aspect-ratio: 1;
border-radius: 8px;
}
.bottom {