diff --git a/src/client/components/error.vue b/src/client/components/error.vue index 02ebb55f02..76dcbbcb67 100644 --- a/src/client/components/error.vue +++ b/src/client/components/error.vue @@ -1,6 +1,6 @@ <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> diff --git a/src/client/components/notes.vue b/src/client/components/notes.vue index 284957a46b..be8f68e3a6 100644 --- a/src/client/components/notes.vue +++ b/src/client/components/notes.vue @@ -1,7 +1,7 @@ <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; } } diff --git a/src/client/pages/messaging.vue b/src/client/pages/messaging.vue index ba2420d30b..1f6b7183c5 100644 --- a/src/client/pages/messaging.vue +++ b/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) { diff --git a/src/client/pages/not-found.vue b/src/client/pages/not-found.vue index 91e9a1c3f8..e4c1b4de49 100644 --- a/src/client/pages/not-found.vue +++ b/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; } } } diff --git a/src/client/style.scss b/src/client/style.scss index cc6fe35eba..b1c6c9b0b3 100644 --- a/src/client/style.scss +++ b/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; } * {