diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index d430eefb7eb4a009b916ba50a701c18a327475a3..59cdc7a209b5ced0df903b2eaa2dac6b4339c873 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -4,15 +4,13 @@
<x-sub :note="p.reply"/>
</div>
<div class="renote" v-if="isRenote">
- <p>
- <router-link class="avatar-anchor" :to="note.user | userPage" v-user-preview="note.userId">
- <img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
- </router-link>
- %fa:retweet%
- <span>{{ '%i18n:!@reposted-by%'.substr(0, '%i18n:!@reposted-by%'.indexOf('{')) }}</span>
- <a class="name" :href="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</a>
- <span>{{ '%i18n:!@reposted-by%'.substr('%i18n:!@reposted-by%'.indexOf('}') + 1) }}</span>
- </p>
+ <router-link class="avatar-anchor" :to="note.user | userPage" v-user-preview="note.userId">
+ <img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
+ </router-link>
+ %fa:retweet%
+ <span>{{ '%i18n:!@reposted-by%'.substr(0, '%i18n:!@reposted-by%'.indexOf('{')) }}</span>
+ <a class="name" :href="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</a>
+ <span>{{ '%i18n:!@reposted-by%'.substr('%i18n:!@reposted-by%'.indexOf('}') + 1) }}</span>
<mk-time :time="note.createdAt"/>
</div>
<article>
@@ -324,36 +322,44 @@ root(isDark)
border-radius 4px
> .renote
+ display flex
+ align-items baseline
+ padding 16px 32px
+ line-height 28px
color #9dbb00
background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
- > p
- margin 0
- padding 16px 32px
- line-height 28px
+ .avatar-anchor
+ display inline-block
+
+ .avatar
+ vertical-align bottom
+ width 28px
+ height 28px
+ margin 0 8px 0 0
+ border-radius 6px
- .avatar-anchor
- display inline-block
+ [data-fa]
+ margin-right 4px
- .avatar
- vertical-align bottom
- width 28px
- height 28px
- margin 0 8px 0 0
- border-radius 6px
+ > span
+ flex-shrink 0
- [data-fa]
- margin-right 4px
+ &:last-of-type
+ margin-right 8px
- .name
- font-weight bold
+ .name
+ overflow hidden
+ flex-shrink 1
+ text-overflow ellipsis
+ white-space nowrap
+ font-weight bold
> .mk-time
- position absolute
- top 16px
- right 32px
+ display block
+ margin-left auto
+ flex-shrink 0
font-size 0.9em
- line-height 28px
& + article
padding-top 8px
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index 71fa43aea209b6834485ce6ecaf7a2bd3913916a..6b7c64f047639e6970066af1237ea953a7f60879 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -4,15 +4,13 @@
<x-sub :note="p.reply"/>
</div>
<div class="renote" v-if="isRenote">
- <p>
- <router-link class="avatar-anchor" :to="note.user | userPage">
- <img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
- </router-link>
- %fa:retweet%
- <span>{{ '%i18n:!@reposted-by%'.substr(0, '%i18n:!@reposted-by%'.indexOf('{')) }}</span>
- <router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>
- <span>{{ '%i18n:!@reposted-by%'.substr('%i18n:!@reposted-by%'.indexOf('}') + 1) }}</span>
- </p>
+ <router-link class="avatar-anchor" :to="note.user | userPage">
+ <img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+ </router-link>
+ %fa:retweet%
+ <span>{{ '%i18n:!@reposted-by%'.substr(0, '%i18n:!@reposted-by%'.indexOf('{')) }}</span>
+ <router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>
+ <span>{{ '%i18n:!@reposted-by%'.substr('%i18n:!@reposted-by%'.indexOf('}') + 1) }}</span>
<mk-time :time="note.createdAt"/>
</div>
<article>
@@ -251,42 +249,47 @@ export default Vue.extend({
font-size 16px
> .renote
+ display flex
+ align-items baseline
+ padding 8px 16px
+ line-height 28px
color #9dbb00
background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
- > p
- margin 0
- padding 8px 16px
- line-height 28px
+ @media (min-width 500px)
+ padding 16px
- @media (min-width 500px)
- padding 16px
+ .avatar-anchor
+ display inline-block
+
+ .avatar
+ vertical-align bottom
+ width 28px
+ height 28px
+ margin 0 8px 0 0
+ border-radius 6px
- .avatar-anchor
- display inline-block
+ [data-fa]
+ margin-right 4px
- .avatar
- vertical-align bottom
- width 28px
- height 28px
- margin 0 8px 0 0
- border-radius 6px
+ > span
+ flex-shrink 0
- [data-fa]
- margin-right 4px
+ &:last-of-type
+ margin-right 8px
- .name
- font-weight bold
+ .name
+ overflow hidden
+ flex-shrink 1
+ text-overflow ellipsis
+ white-space nowrap
+ font-weight bold
> .mk-time
- position absolute
- top 8px
- right 16px
+ display block
+ margin-left auto
+ flex-shrink 0
font-size 0.9em
- line-height 28px
-
- @media (min-width 500px)
- top 16px
& + article
padding-top 8px