diff --git a/CHANGELOG.md b/CHANGELOG.md index d680a6984f..45fce4977c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,7 @@ ### Client - Fix: ブラーエフェクトを有効にしている状態で高負荷になる問題を修正 +- Fix: カラーバーがリプライには表示されないのを修正 ### Server - センシティブワードの登録にAnd、正規表現が使用できるようになりました。 diff --git a/packages/frontend/src/components/MkNoteSub.vue b/packages/frontend/src/components/MkNoteSub.vue index c293641355..9ac0b7858f 100644 --- a/packages/frontend/src/components/MkNoteSub.vue +++ b/packages/frontend/src/components/MkNoteSub.vue @@ -1,6 +1,7 @@ <template> <div :class="[$style.root, { [$style.children]: depth > 1 }]"> <div :class="$style.main"> + <div v-if="note.channel" :class="$style.colorBar" :style="{ background: note.channel.color }"></div> <MkAvatar :class="$style.avatar" :user="note.user" link preview/> <div :class="$style.body"> <MkNoteHeader :class="$style.header" :note="note" :mini="true"/> @@ -62,6 +63,7 @@ if (props.detail) { .root { padding: 16px 32px; font-size: 0.9em; + position: relative; &.children { padding: 10px 0 0 16px; @@ -73,6 +75,16 @@ if (props.detail) { display: flex; } +.colorBar { + position: absolute; + top: 8px; + left: 8px; + width: 5px; + height: calc(100% - 8px); + border-radius: 999px; + pointer-events: none; +} + .avatar { flex-shrink: 0; display: block;