diff options
Diffstat (limited to 'packages/frontend/src/components/MkNoteHeader.vue')
| -rw-r--r-- | packages/frontend/src/components/MkNoteHeader.vue | 82 |
1 files changed, 41 insertions, 41 deletions
diff --git a/packages/frontend/src/components/MkNoteHeader.vue b/packages/frontend/src/components/MkNoteHeader.vue index 38bd33ff74..8771168a42 100644 --- a/packages/frontend/src/components/MkNoteHeader.vue +++ b/packages/frontend/src/components/MkNoteHeader.vue @@ -1,12 +1,12 @@ <template> -<header class="kkwtjztg"> - <MkA v-once v-user-preview="note.user.id" class="name" :to="userPage(note.user)"> +<header :class="$style.root"> + <MkA v-once v-user-preview="note.user.id" :class="$style.name" :to="userPage(note.user)"> <MkUserName :user="note.user"/> </MkA> - <div v-if="note.user.isBot" class="is-bot">bot</div> - <div class="username"><MkAcct :user="note.user"/></div> - <div class="info"> - <MkA class="created-at" :to="notePage(note)"> + <div v-if="note.user.isBot" :class="$style.isBot">bot</div> + <div :class="$style.username"><MkAcct :user="note.user"/></div> + <div :class="$style.info"> + <MkA :to="notePage(note)"> <MkTime :time="note.createdAt"/> </MkA> <span v-if="note.visibility !== 'public'" style="margin-left: 0.5em;" :title="i18n.ts._visibility[note.visibility]"> @@ -32,49 +32,49 @@ defineProps<{ }>(); </script> -<style lang="scss" scoped> -.kkwtjztg { +<style lang="scss" module> +.root { display: flex; align-items: baseline; white-space: nowrap; +} - > .name { - flex-shrink: 1; - display: block; - margin: 0 .5em 0 0; - padding: 0; - overflow: hidden; - font-size: 1em; - font-weight: bold; - text-decoration: none; - text-overflow: ellipsis; +.name { + flex-shrink: 1; + display: block; + margin: 0 .5em 0 0; + padding: 0; + overflow: hidden; + font-size: 1em; + font-weight: bold; + text-decoration: none; + text-overflow: ellipsis; - &:hover { - text-decoration: underline; - } + &:hover { + text-decoration: underline; } +} - > .is-bot { - flex-shrink: 0; - align-self: center; - margin: 0 .5em 0 0; - padding: 1px 6px; - font-size: 80%; - border: solid 0.5px var(--divider); - border-radius: 3px; - } +.isBot { + flex-shrink: 0; + align-self: center; + margin: 0 .5em 0 0; + padding: 1px 6px; + font-size: 80%; + border: solid 0.5px var(--divider); + border-radius: 3px; +} - > .username { - flex-shrink: 9999999; - margin: 0 .5em 0 0; - overflow: hidden; - text-overflow: ellipsis; - } +.username { + flex-shrink: 9999999; + margin: 0 .5em 0 0; + overflow: hidden; + text-overflow: ellipsis; +} - > .info { - flex-shrink: 0; - margin-left: auto; - font-size: 0.9em; - } +.info { + flex-shrink: 0; + margin-left: auto; + font-size: 0.9em; } </style> |