refactor(client): use css modules

1 files changed, 66 insertions, 73 deletions

diff --git a/packages/frontend/src/components/MkMediaImage.vue b/packages/frontend/src/components/MkMediaImage.vue
index 8dbcfc6faa..6ac56f3ce0 100644
--- a/packages/frontend/src/components/MkMediaImage.vue
+++ b/packages/frontend/src/components/MkMediaImage.vue
@@ -1,22 +1,23 @@
 <template>
-<div v-if="hide" class="qjewsnkg" @click="hide = false">
-	<ImgWithBlurhash class="bg" :hash="image.blurhash" :title="image.comment" :alt="image.comment"/>
-	<div class="text">
-		<div class="wrapper">
+<div v-if="hide" :class="$style.hidden" @click="hide = false">
+	<ImgWithBlurhash style="filter: brightness(0.5);" :hash="image.blurhash" :title="image.comment" :alt="image.comment"/>
+	<div :class="$style.hiddenText">
+		<div :class="$style.hiddenTextWrapper">
 			<b style="display: block;"><i class="ti ti-alert-triangle"></i> {{ $ts.sensitive }}</b>
 			<span style="display: block;">{{ $ts.clickToShow }}</span>
 		</div>
 	</div>
 </div>
-<div v-else class="gqnyydlz">
+<div v-else :class="$style.visible">
 	<a
+		:class="$style.imageContainer"
 		:href="image.url"
 		:title="image.name"
 	>
 		<ImgWithBlurhash :hash="image.blurhash" :src="url" :alt="image.comment || image.name" :title="image.comment || image.name" :cover="false"/>
-		<div v-if="image.type === 'image/gif'" class="gif">GIF</div>
+		<div v-if="image.type === 'image/gif'" :class="$style.gif">GIF</div>
 	</a>
-	<button v-tooltip="$ts.hide" class="_button hide" @click="hide = true"><i class="ti ti-eye-off"></i></button>
+	<button v-tooltip="$ts.hide" :class="$style.hide" class="_button" @click="hide = true"><i class="ti ti-eye-off"></i></button>
 </div>
 </template>
 
@@ -49,85 +50,77 @@ watch(() => props.image, () => {
 });
 </script>
 
-<style lang="scss" scoped>
-.qjewsnkg {
+<style lang="scss" module>
+.hidden {
 	position: relative;
+}
 
-	> .bg {
-		filter: brightness(0.5);
-	}
-
-	> .text {
-		position: absolute;
-		left: 0;
-		top: 0;
-		width: 100%;
-		height: 100%;
-		z-index: 1;
-		display: flex;
-		justify-content: center;
-		align-items: center;
+.hiddenText {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 1;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
 
-		> .wrapper {
-			display: table-cell;
-			text-align: center;
-			font-size: 0.8em;
-			color: #fff;
-		}
-	}
+.hiddenTextWrapper {
+	display: table-cell;
+	text-align: center;
+	font-size: 0.8em;
+	color: #fff;
 }
 
-.gqnyydlz {
+.visible {
 	position: relative;
 	//box-shadow: 0 0 0 1px var(--divider) inset;
 	background: var(--bg);
 	--c: rgb(0 0 0 / 2%);
 	background-image: linear-gradient(45deg, var(--c) 16.67%, var(--bg) 16.67%, var(--bg) 50%, var(--c) 50%, var(--c) 66.67%, var(--bg) 66.67%, var(--bg) 100%);
 	background-size: 16px 16px;
+}
 
-	> .hide {
-		display: block;
-		position: absolute;
-		border-radius: 6px;
-		background-color: var(--accentedBg);
-		-webkit-backdrop-filter: var(--blur, blur(15px));
-		backdrop-filter: var(--blur, blur(15px));
-		color: var(--accent);
-		font-size: 0.8em;
-		padding: 6px 8px;
-		text-align: center;
-		top: 12px;
-		right: 12px;
-
-		> i {
-			display: block;
-		}
-	}
+.hide {
+	display: block;
+	position: absolute;
+	border-radius: 6px;
+	background-color: var(--accentedBg);
+	-webkit-backdrop-filter: var(--blur, blur(15px));
+	backdrop-filter: var(--blur, blur(15px));
+	color: var(--accent);
+	font-size: 0.8em;
+	padding: 6px 8px;
+	text-align: center;
+	top: 12px;
+	right: 12px;
+}
 
-	> a {
-		display: block;
-		cursor: zoom-in;
-		overflow: hidden;
-		width: 100%;
-		height: 100%;
-		background-position: center;
-		background-size: contain;
-		background-repeat: no-repeat;
+.imageContainer {
+	display: block;
+	cursor: zoom-in;
+	overflow: hidden;
+	width: 100%;
+	height: 100%;
+	background-position: center;
+	background-size: contain;
+	background-repeat: no-repeat;
+}
 
-		> .gif {
-			background-color: var(--fg);
-			border-radius: 6px;
-			color: var(--accentLighten);
-			display: inline-block;
-			font-size: 14px;
-			font-weight: bold;
-			left: 12px;
-			opacity: .5;
-			padding: 0 6px;
-			text-align: center;
-			top: 12px;
-			pointer-events: none;
-		}
-	}
+.gif {
+	background-color: var(--fg);
+	border-radius: 6px;
+	color: var(--accentLighten);
+	display: inline-block;
+	font-size: 14px;
+	font-weight: bold;
+	left: 12px;
+	opacity: .5;
+	padding: 0 6px;
+	text-align: center;
+	top: 12px;
+	pointer-events: none;
 }
 </style>