From b811de53b6c6841ec0816f58ea3c759be6f94a1e Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 19 May 2022 23:23:12 +0900
Subject: [PATCH] fix(client): make emoji stand out more on reaction button
Fix #8520
Close #8521
Co-Authored-By: Johann150 <20990607+Johann150@users.noreply.github.com>
---
.../src/components/reactions-viewer.reaction.vue | 12 ++++++++----
1 file changed, 8 insertions(+), 4 deletions(-)
diff --git a/packages/client/src/components/reactions-viewer.reaction.vue b/packages/client/src/components/reactions-viewer.reaction.vue
index 7dc079fde6..91a90a6996 100644
--- a/packages/client/src/components/reactions-viewer.reaction.vue
+++ b/packages/client/src/components/reactions-viewer.reaction.vue
@@ -7,8 +7,8 @@
:class="{ reacted: note.myReaction == reaction, canToggle }"
@click="toggleReaction()"
>
- <XReactionIcon :reaction="reaction" :custom-emojis="note.emojis"/>
- <span>{{ count }}</span>
+ <XReactionIcon class="icon" :reaction="reaction" :custom-emojis="note.emojis"/>
+ <span class="count">{{ count }}</span>
</button>
</template>
@@ -141,12 +141,16 @@ export default defineComponent({
background: var(--accent);
}
- > span {
+ > .count {
color: var(--fgOnAccent);
}
+
+ > .icon {
+ filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
+ }
}
- > span {
+ > .count {
font-size: 0.9em;
line-height: 32px;
margin: 0 0 0 4px;
--
GitLab