From bdf1547a42360830c833bfadef3937de3897c1ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?=
 <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sat, 18 Jul 2026 23:04:21 +0900
Subject: [PATCH] =?UTF-8?q?refactor(frontend):=20=E3=83=A1=E3=83=87?=
 =?UTF-8?q?=E3=82=A3=E3=82=A2=E3=83=A1=E3=83=8B=E3=83=A5=E3=83=BC=E3=81=AE?=
 =?UTF-8?q?=E3=83=A1=E3=83=8B=E3=83=A5=E3=83=BC=E3=83=9C=E3=82=BF=E3=83=B3?=
 =?UTF-8?q?=E3=81=AE=E3=82=B9=E3=82=BF=E3=82=A4=E3=83=AB=E3=82=92=E7=B5=B1?=
 =?UTF-8?q?=E4=B8=80=20(#17742)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix

* fix

* refactor
---
 .../frontend/src/components/MkMediaImage.vue  | 32 +++++++------------
 .../frontend/src/components/MkMediaVideo.vue  | 24 +++++---------
 2 files changed, 20 insertions(+), 36 deletions(-)

diff --git a/packages/frontend/src/components/MkMediaImage.vue b/packages/frontend/src/components/MkMediaImage.vue
index 01f449753b..dee6db5e26 100644
--- a/packages/frontend/src/components/MkMediaImage.vue
+++ b/packages/frontend/src/components/MkMediaImage.vue
@@ -61,8 +61,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div v-if="image.comment" :class="$style.indicator">ALT</div>
 			<div v-if="image.isSensitive" :class="$style.indicator" style="color: var(--MI_THEME-warn);" :title="i18n.ts.sensitive"><i class="ti ti-eye-exclamation"></i></div>
 		</div>
-		<button :class="$style.menu" class="_button" @click.stop="showMenu"><i class="ti ti-dots" style="vertical-align: middle;"></i></button>
-		<i class="ti ti-eye-off" :class="$style.hide" @click.stop="hide = true"></i>
+		<button :class="[$style.menu, $style.menuBottom]" class="_button" @click.stop="showMenu"><i class="ti ti-dots" style="vertical-align: middle;"></i></button>
+		<button :class="[$style.menu, $style.menuTop]" class="_button" @click.stop="hide = true"><i class="ti ti-eye-off" style="vertical-align: middle;"></i></button>
 	</template>
 </div>
 </template>
@@ -174,23 +174,6 @@ function onContextmenu(ev: PointerEvent) {
 	cursor: pointer;
 }
 
-.hide {
-	display: block;
-	position: absolute;
-	background-color: rgba(0, 0, 0, 0.3);
-	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
-	backdrop-filter: var(--MI-blur, blur(15px));
-	border-radius: 0 0 0 9px;
-	color: #fff;
-	font-size: 12px;
-	opacity: .5;
-	padding: 5px 8px;
-	text-align: center;
-	cursor: pointer;
-	top: 0;
-	right: 0;
-}
-
 .hiddenTextWrapper {
 	display: table-cell;
 	text-align: center;
@@ -221,16 +204,25 @@ html[data-color-scheme=light] .visible {
 	background-color: rgba(0, 0, 0, 0.3);
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));
-	border-radius: 9px 0 0 0;
 	color: #fff;
 	font-size: 0.8em;
 	width: 28px;
 	height: 28px;
 	text-align: center;
+}
+
+.menuBottom {
+	border-radius: 8px 0 8px 0;
 	bottom: 0;
 	right: 0;
 }
 
+.menuTop {
+	border-radius: 0 8px 0 8px;
+	top: 0;
+	right: 0;
+}
+
 .imageContainer {
 	display: block;
 	overflow: hidden;
diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
index a03b58d479..d9d02b0afe 100644
--- a/packages/frontend/src/components/MkMediaVideo.vue
+++ b/packages/frontend/src/components/MkMediaVideo.vue
@@ -42,8 +42,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<i class="ti ti-player-play"></i>
 			</div>
 		</div>
-		<button :class="$style.menu" class="_button" @click.stop="showMenu"><i class="ti ti-dots" style="vertical-align: middle;"></i></button>
-		<i class="ti ti-eye-off" :class="$style.hide" @click.stop="hide = true"></i>
+		<button :class="[$style.menu, $style.menuBottom]" class="_button" @click.stop="showMenu"><i class="ti ti-dots" style="vertical-align: middle;"></i></button>
+		<button :class="[$style.menu, $style.menuTop]" class="_button" @click.stop="hide = true"><i class="ti ti-eye-off" style="vertical-align: middle;"></i></button>
 	</div>
 </div>
 </template>
@@ -184,29 +184,21 @@ function onContextmenu(ev: PointerEvent) {
 	background-color: rgba(0, 0, 0, 0.3);
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));
-	border-radius: 9px 0 0 0;
 	color: #fff;
 	font-size: 0.8em;
 	width: 28px;
 	height: 28px;
 	text-align: center;
+}
+
+.menuBottom {
+	border-radius: 8px 0 8px 0;
 	bottom: 0;
 	right: 0;
 }
 
-.hide {
-	display: block;
-	position: absolute;
-	background-color: rgba(0, 0, 0, 0.3);
-	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
-	backdrop-filter: var(--MI-blur, blur(15px));
-	border-radius: 0 0 0 9px;
-	color: #fff;
-	font-size: 12px;
-	opacity: .5;
-	padding: 5px 8px;
-	text-align: center;
-	cursor: pointer;
+.menuTop {
+	border-radius: 0 8px 0 8px;
 	top: 0;
 	right: 0;
 }