Revert "enhance(frontend): データセーバーモードで隠れる画像を増やす等 (#11779)"

This reverts commit 22d966e92dabffba23178a4afb5853882ba7249e.

1 files changed, 21 insertions, 22 deletions

diff --git a/packages/frontend/src/components/MkPagePreview.vue b/packages/frontend/src/components/MkPagePreview.vue
index 65464956be..53920da50d 100644
--- a/packages/frontend/src/components/MkPagePreview.vue
+++ b/packages/frontend/src/components/MkPagePreview.vue
@@ -5,15 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <MkA :to="`/@${page.user.username}/pages/${page.name}`" class="vhpxefrj" tabindex="-1">
-	<div v-if="page.eyeCatchingImage" class="thumbnail">
-		<MediaImage
-			:image="page.eyeCatchingImage"
-			:disableImageLink="true"
-			:controls="false"
-			:cover="true"
-			:class="$style.eyeCatchingImageRoot"
-		/>
-	</div>
+	<div v-if="page.eyeCatchingImage" class="thumbnail" :style="`background-image: url('${page.eyeCatchingImage.thumbnailUrl}')`"></div>
 	<article>
 		<header>
 			<h1 :title="page.title">{{ page.title }}</h1>
@@ -31,22 +23,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { } from 'vue';
 import * as Misskey from 'misskey-js';
 import { userName } from '@/filters/user';
-import MediaImage from '@/components/MkMediaImage.vue';
 
 const props = defineProps<{
 	page: Misskey.entities.Page;
 }>();
 </script>
 
-<style module>
-.eyeCatchingImageRoot {
-	width: 100%;
-	height: 200px;
-	border-radius: var(--radius) var(--radius) 0 0;
-	overflow: hidden;
-}
-</style>
-
 <style lang="scss" scoped>
 .vhpxefrj {
 	display: block;
@@ -57,15 +39,32 @@ const props = defineProps<{
 	}
 
 	> .thumbnail {
+		width: 100%;
+		height: 200px;
+		background-position: center;
+		background-size: cover;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		> button {
+			font-size: 3.5em;
+			opacity: 0.7;
+
+			&:hover {
+				font-size: 4em;
+				opacity: 0.9;
+			}
+		}
+
 		& + article {
-			border-radius: 0 0 var(--radius) var(--radius);
+			left: 100px;
+			width: calc(100% - 100px);
 		}
 	}
 
 	> article {
-		background-color: var(--panel);
 		padding: 16px;
-		border-radius: var(--radius);
 
 		> header {
 			margin-bottom: 8px;