<template> <div class="sub" :title="title"> <mk-avatar class="avatar" :user="note.user"/> <div class="main"> <header> <router-link class="name" :to="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</router-link> <span class="is-admin" v-if="note.user.isAdmin">admin</span> <span class="is-bot" v-if="note.user.isBot">bot</span> <span class="is-cat" v-if="note.user.isCat">cat</span> <span class="username"><mk-acct :user="note.user"/></span> <div class="info"> <span class="mobile" v-if="note.viaMobile">%fa:mobile-alt%</span> <router-link class="created-at" :to="note | notePage"> <mk-time :time="note.createdAt"/> </router-link> <span class="visibility" v-if="note.visibility != 'public'"> <template v-if="note.visibility == 'home'">%fa:home%</template> <template v-if="note.visibility == 'followers'">%fa:unlock%</template> <template v-if="note.visibility == 'specified'">%fa:envelope%</template> <template v-if="note.visibility == 'private'">%fa:lock%</template> </span> </div> </header> <div class="body"> <mk-sub-note-content class="text" :note="note"/> </div> </div> </div> </template> <script lang="ts"> import Vue from 'vue'; import dateStringify from '../../../common/scripts/date-stringify'; export default Vue.extend({ props: ['note'], computed: { title(): string { return dateStringify(this.note.createdAt); } } }); </script> <style lang="stylus" scoped> root(isDark) margin 0 padding 16px 32px font-size 0.9em background isDark ? #21242d : #fcfcfc &:after content "" display block clear both > .avatar display block float left margin 0 14px 0 0 width 52px height 52px border-radius 8px > .main float left width calc(100% - 66px) > header display flex align-items baseline margin-bottom 2px white-space nowrap > .name display block margin 0 .5em 0 0 padding 0 overflow hidden color isDark ? #fff : #607073 font-size 1em font-weight bold text-decoration none text-overflow ellipsis &:hover text-decoration underline > .is-admin > .is-bot > .is-cat margin 0 0.5em 0 0 padding 1px 5px font-size 10px color isDark ? #758188 : #aaa border solid 1px isDark ? #57616f : #ddd border-radius 3px &.is-admin border-color isDark ? #d42c41 : #f56a7b color isDark ? #d42c41 : #f56a7b > .username margin 0 .5em 0 0 color isDark ? #606984 : #d1d8da > .info margin-left auto font-size 0.9em > * color isDark ? #606984 : #b2b8bb > .mobile margin-right 6px > .visibility margin-left 6px > .body max-height 128px overflow hidden > .text cursor default margin 0 padding 0 font-size 1.1em color isDark ? #959ba7 : #717171 pre max-height 120px font-size 80% .sub[data-darkmode] root(true) .sub:not([data-darkmode]) root(false) </style>