From b2337f554b2efffdb12984ccfb00d1996fde9d29 Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Thu, 14 Nov 2024 16:19:55 +0900
Subject: [PATCH] =?UTF-8?q?enhance(frontend):=20=EB=AF=B8=EB=94=94?=
 =?UTF-8?q?=EC=96=B4=20=EA=B7=B8=EB=A6=AC=EB=93=9C=20=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=EC=95=84=EC=98=B7=20=EC=A1=B0=EC=A0=95=20=20=20-=20=EC=97=AC?=
 =?UTF-8?q?=EB=9F=AC=20=EC=9E=A5=EC=9D=98=20=EC=9D=B4=EB=AF=B8=EC=A7=80?=
 =?UTF-8?q?=EA=B0=80=20=EC=9E=88=EC=9D=84=20=EB=95=8C=20=ED=91=9C=EC=8B=9C?=
 =?UTF-8?q?=EB=90=98=EB=8A=94=20=EC=95=84=EC=9D=B4=EC=BD=98=EC=9D=84=20?=
 =?UTF-8?q?=EB=B3=B4=EB=8B=A4=20=EB=AA=85=ED=99=95=ED=95=98=EA=B2=8C=20?=
 =?UTF-8?q?=EB=B3=BC=20=EC=88=98=20=EC=9E=88=EB=8F=84=EB=A1=9D=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0=EB=90=A8=20=20=20-=20=EB=B0=B0=EA=B2=BD=EA=B3=BC=20?=
 =?UTF-8?q?=EA=B0=99=EC=9D=80=20=EC=9D=B4=EB=AF=B8=EC=A7=80=EB=A5=BC=20?=
 =?UTF-8?q?=EA=B5=AC=EB=B6=84=ED=95=98=EA=B8=B0=20=EC=89=BD=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EB=B0=B0=EA=B2=BD=EC=83=89=20=EB=B0=8F=20=EA=B5=AC?=
 =?UTF-8?q?=EB=B6=84=EC=84=A0=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG_CHERRYPICK.md                       |  3 +++
 .../pages/user/index.timeline.files.files.vue | 21 ++++++++++++++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG_CHERRYPICK.md b/CHANGELOG_CHERRYPICK.md
index 1e5cba666e..601d1664af 100644
--- a/CHANGELOG_CHERRYPICK.md
+++ b/CHANGELOG_CHERRYPICK.md
@@ -29,6 +29,9 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2024xx](CHANGE
 Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2024xx](CHANGELOG.md#2024xx) 문서를 참고하십시오.
 
 ### Client
+- Enhance: 미디어 그리드 레이아옷 조정
+  - 여러 장의 이미지가 있을 때 표시되는 아이콘을 보다 명확하게 볼 수 있도록 개선됨
+  - 배경과 같은 이미지를 구분하기 쉽도록 배경색 및 구분선 추가
 - Fix: 아바타 장식에서 가이드라인이 표시되지 않음
 
 ---
diff --git a/packages/frontend/src/pages/user/index.timeline.files.files.vue b/packages/frontend/src/pages/user/index.timeline.files.files.vue
index 358a25d8ab..0d9c9927ac 100644
--- a/packages/frontend/src/pages/user/index.timeline.files.files.vue
+++ b/packages/frontend/src/pages/user/index.timeline.files.files.vue
@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div v-if="files.files.length > 0" :class="$style.root">
+<div v-if="files.files.length > 0" :class="[$style.root, $style.visible]">
 	<div v-if="files.files[0].isSensitive && !showingFiles.includes(files.files[0].id)" :key="files.id + files.files[0].id" :class="$style.img" @click="showingFiles.push(files.files[0].id)">
 		<!-- TODO: 画像以外のファイルに対応 -->
 		<ImgWithBlurhash :class="$style.sensitiveImg" :hash="files.files[0].blurhash" :src="thumbnail(files.files[0])" :title="files.files[0].name" :forceBlurhash="true"/>
@@ -124,6 +124,24 @@ onUnmounted(() => {
 	cursor: pointer;
 }
 
+.visible {
+	position: relative;
+	-webkit-tap-highlight-color: transparent;
+	//box-shadow: 0 0 0 1px var(--MI_THEME-divider) inset;
+	background: var(--MI_THEME-bg);
+	background-size: 16px 16px;
+}
+
+html[data-color-scheme=dark] .visible {
+	--c: rgb(255 255 255 / 2%);
+	background-image: linear-gradient(45deg, var(--c) 16.67%, var(--MI_THEME-bg) 16.67%, var(--MI_THEME-bg) 50%, var(--c) 50%, var(--c) 66.67%, var(--MI_THEME-bg) 66.67%, var(--MI_THEME-bg) 100%);
+}
+
+html[data-color-scheme=light] .visible {
+	--c: rgb(0 0 0 / 2%);
+	background-image: linear-gradient(45deg, var(--c) 16.67%, var(--MI_THEME-bg) 16.67%, var(--MI_THEME-bg) 50%, var(--c) 50%, var(--c) 66.67%, var(--MI_THEME-bg) 66.67%, var(--MI_THEME-bg) 100%);
+}
+
 .multipleImg {
 	filter: brightness(0.9);
 }
@@ -135,6 +153,7 @@ onUnmounted(() => {
 	font-size: 1.45em;
 	color: #fff;
 	opacity: .9;
+	filter: drop-shadow(0 0 1.5px #b3b3b3);
 }
 
 @container (max-width: 785px) {