enhance(frontend): 미디어 그리드 레이아옷 조정

- 여러 장의 이미지가 있을 때 표시되는 아이콘을 보다 명확하게 볼 수 있도록 개선됨 - 배경과 같은 이미지를 구분하기 쉽도록 배경색 및 구분선 추가
kokonect-link · Nov 14, 2024 · b2337f5 · b2337f5
1 parent 849389e
commit b2337f5
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git 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
@@ -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) {