From 11378b17c58897060c94c73900f44dad35409dea Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Wed, 19 Mar 2025 09:31:01 +0900
Subject: 🎨
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/global/StackingRouterView.vue   | 23 +++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

(limited to 'packages/frontend/src/components/global/StackingRouterView.vue')

diff --git a/packages/frontend/src/components/global/StackingRouterView.vue b/packages/frontend/src/components/global/StackingRouterView.vue
index 8a4afe7360..d1ca655dee 100644
--- a/packages/frontend/src/components/global/StackingRouterView.vue
+++ b/packages/frontend/src/components/global/StackingRouterView.vue
@@ -17,9 +17,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div v-if="i > 0" :class="$style.tabBg" @click="back()"></div>
 		<div :class="$style.tabFg" @click.stop="back()">
 			<div v-if="i > 0" :class="$style.tabMenu">
+				<svg :class="$style.tabMenuShape" viewBox="0 0 24 16">
+					<g transform="matrix(2.04108e-17,-0.333333,0.222222,1.36072e-17,21.3333,15.9989)">
+						<path d="M23.997,-42C47.903,-23.457 47.997,12 47.997,12L-0.003,12L-0.003,-96C-0.003,-96 0.091,-60.543 23.997,-42Z" style="fill:var(--MI_THEME-panel);"/>
+					</g>
+				</svg>
 				<button :class="$style.tabMenuButton" class="_button" @click.stop="mount"><i class="ti ti-rectangle"></i></button>
 				<button :class="$style.tabMenuButton" class="_button" @click.stop="back"><i class="ti ti-x"></i></button>
 			</div>
+			<div v-if="i > 0" :class="$style.tabBorder"></div>
 			<div :class="$style.tabContent" class="_pageContainer" @click.stop="">
 				<Suspense :timeout="0">
 					<component :is="tab.component" v-bind="Object.fromEntries(tab.props)"/>
@@ -223,9 +229,24 @@ onBeforeUnmount(() => {
 }
 
 .tabMenu {
+	position: relative;
 	margin-left: auto;
 	padding: 0 4px;
-	background: var(--MI_THEME-bg);
+	background: var(--MI_THEME-panel);
+}
+
+.tabMenuShape {
+	position: absolute;
+	bottom: -1px;
+	left: -100%;
+	height: calc(100% + 1px);
+	width: 129%;
+	pointer-events: none;
+}
+
+.tabBorder {
+	height: 6px;
+	background: var(--MI_THEME-panel);
 }
 
 .tabMenuButton {
-- 
cgit v1.2.3-freya

