From c04c071aecdb73522b5e8ec3d7734c7f9a85b0bd Mon Sep 17 00:00:00 2001
From: naskya <m@naskya.net>
Date: Thu, 23 May 2024 22:40:49 +0900
Subject: [PATCH] fix (client): notification reply-to style
!10899
---
.../src/components/note/MkNoteHeaderInfo.vue | 28 ++++++++++++++++++-
1 file changed, 27 insertions(+), 1 deletion(-)
diff --git a/packages/client/src/components/note/MkNoteHeaderInfo.vue b/packages/client/src/components/note/MkNoteHeaderInfo.vue
index bbd7120aaf..702d062df8 100644
--- a/packages/client/src/components/note/MkNoteHeaderInfo.vue
+++ b/packages/client/src/components/note/MkNoteHeaderInfo.vue
@@ -16,7 +16,7 @@
<div v-if="pinned" class="info">
<i :class="icon('ph-push-pin')"></i>{{ i18n.ts.pinnedNote }}
</div>
- <div v-if="collapsedReply && appearNote.reply" class="info">
+ <div v-if="collapsedReply && appearNote.reply" class="reply-to">
<MkAvatar class="avatar" :user="appearNote.reply.user" />
<MkUserName class="username" :user="appearNote.reply.user"></MkUserName>
<Mfm
@@ -68,4 +68,30 @@ defineProps<{
color: inherit;
}
}
+
+.reply-to {
+ color: var(--fgTransparentWeak);
+
+ .avatar {
+ width: 1.2em;
+ height: 1.2em;
+ border-radius: 2em;
+ overflow: hidden;
+ margin-right: 0.4em;
+ margin-bottom: 0.2em;
+ background: var(--panelHighlight);
+ }
+ .username {
+ font-weight: 700;
+ flex-shrink: 0;
+ max-width: 30%;
+ &::after {
+ content: ": ";
+ }
+ }
+ &:hover,
+ &:focus-within {
+ color: var(--fg);
+ }
+}
</style>