🎨

src/client/components/error.vue

 <template>
 <div class="mjndxjcg _panel">
-	<img src="https://xn--931a.moe/assets/error.png" alt=""/>
+	<img src="https://xn--931a.moe/assets/error.png" alt="" class="_ghost"/>
 	<p><fa :icon="faExclamationTriangle"/> {{ $t('error') }}</p>
 	<mk-button @click="() => $emit('retry')" class="button">{{ $t('retry') }}</mk-button>
 </div>
@@ -45,8 +45,6 @@ export default Vue.extend({
 		height: 150px;
 		margin-bottom: 16px;
 		border-radius: 16px;
-		pointer-events: none;
-		user-select: none;
 	}
 }
 </style>

src/client/components/notes.vue

 <template>
 <div class="mk-notes" v-size="[{ max: 500 }]">
 	<div class="empty" v-if="empty">
-		<img src="https://xn--931a.moe/assets/info.png" alt=""/>
+		<img src="https://xn--931a.moe/assets/info.png" alt="" class="_ghost"/>
 		<div>{{ $t('noNotes') }}</div>
 	</div>
 
@@ -88,8 +88,6 @@ export default Vue.extend({
 			height: 128px;
 			margin-bottom: 16px;
 			border-radius: 16px;
-			pointer-events: none;
-			user-select: none;
 		}
 	}
 

src/client/pages/messaging.vue

@@ -31,7 +31,10 @@
 			</div>
 		</router-link>
 	</sequential-entrance>
-	<p class="no-history" v-if="!fetching && messages.length == 0">{{ $t('noHistory') }}</p>
+	<div class="no-history" v-if="!fetching && messages.length == 0">
+		<img src="https://xn--931a.moe/assets/info.png" alt="" class="_ghost"/>
+		<div>{{ $t('noHistory') }}</div>
+	</div>
 	<mk-loading v-if="fetching"/>
 </div>
 </template>
@@ -285,11 +288,15 @@ export default Vue.extend({
 	}
 
 	> .no-history {
-		margin: 0;
-		padding: 2em 1em;
+		padding: 32px;
 		text-align: center;
-		color: #999;
-		font-weight: 500;
+
+		> img {
+			vertical-align: bottom;
+			height: 128px;
+			margin-bottom: 16px;
+			border-radius: 16px;
+		}
 	}
 
 	@media (max-width: 400px) {

src/client/pages/not-found.vue

@@ -5,7 +5,7 @@
 
 	<section class="_card">
 		<div class="_content">
-			<img src="https://xn--931a.moe/assets/not-found.png" alt=""/>
+			<img src="https://xn--931a.moe/assets/not-found.png" alt="" class="_ghost"/>
 			<div>{{ $t('notFoundDescription') }}</div>
 		</div>
 	</section>
@@ -45,8 +45,6 @@ export default Vue.extend({
 				height: 150px;
 				margin-bottom: 16px;
 				border-radius: 16px;
-				pointer-events: none;
-				user-select: none;
 			}
 		}
 	}

src/client/style.scss

@@ -164,6 +164,19 @@ a {
 	}
 }
 
+._noSelect {
+	user-select: none;
+	-webkit-user-select: none;
+	-webkit-touch-callout: none;
+}
+
+._ghost {
+	&, * {
+		@extend ._noSelect;
+		pointer-events: none;
+	}
+}
+
 ._button {
 	appearance: none;
 	padding: 0;
@@ -175,9 +188,7 @@ a {
 	font-size: 1em;
 
 	&, * {
-		user-select: none;
-		-webkit-user-select: none;
-		-webkit-touch-callout: none;
+		@extend ._noSelect;
 	}
 
 	* {