diff options
Diffstat (limited to 'packages/frontend/src/components/MkUserCardMini.vue')
| -rw-r--r-- | packages/frontend/src/components/MkUserCardMini.vue | 104 |
1 files changed, 43 insertions, 61 deletions
diff --git a/packages/frontend/src/components/MkUserCardMini.vue b/packages/frontend/src/components/MkUserCardMini.vue index 9ec5c7b5c7..aa76f21863 100644 --- a/packages/frontend/src/components/MkUserCardMini.vue +++ b/packages/frontend/src/components/MkUserCardMini.vue @@ -4,13 +4,13 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<div v-adaptive-bg :class="[$style.root, { yellow: user.isSilenced, red: user.isSuspended, gray: false }]"> - <MkAvatar class="avatar" :user="user" indicator/> - <div class="body"> - <span class="name"><MkUserName class="name" :user="user"/></span> - <span class="sub"><span class="acct _monospace">@{{ acct(user) }}</span></span> +<div v-adaptive-bg :class="[$style.root]"> + <MkAvatar :class="$style.avatar" :user="user" indicator/> + <div :class="$style.body"> + <span :class="$style.name"><MkUserName :user="user"/></span> + <span :class="$style.sub"><span class="_monospace">@{{ acct(user) }}</span></span> </div> - <MkMiniChart v-if="chartValues" class="chart" :src="chartValues"/> + <MkMiniChart v-if="chartValues" :class="$style.chart" :src="chartValues"/> </div> </template> @@ -42,71 +42,53 @@ onMounted(() => { </script> <style lang="scss" module> -.root { - $bodyTitleHieght: 18px; - $bodyInfoHieght: 16px; +$bodyTitleHieght: 18px; +$bodyInfoHieght: 16px; +.root { display: flex; align-items: center; padding: 16px; background: var(--panel); border-radius: 8px; +} - > :global(.avatar) { - display: block; - width: ($bodyTitleHieght + $bodyInfoHieght); - height: ($bodyTitleHieght + $bodyInfoHieght); - margin-right: 12px; - } - - > :global(.body) { - flex: 1; - overflow: hidden; - font-size: 0.9em; - color: var(--fg); - padding-right: 8px; - - > :global(.name) { - display: block; - width: 100%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - line-height: $bodyTitleHieght; - } - - > :global(.sub) { - display: block; - width: 100%; - font-size: 95%; - opacity: 0.7; - line-height: $bodyInfoHieght; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } +.avatar { + display: block; + width: ($bodyTitleHieght + $bodyInfoHieght); + height: ($bodyTitleHieght + $bodyInfoHieght); + margin-right: 12px; +} - > :global(.chart) { - height: 30px; - } +.body { + flex: 1; + overflow: hidden; + font-size: 0.9em; + color: var(--fg); + padding-right: 8px; +} - &:global(.yellow) { - --c: rgb(255 196 0 / 15%); - background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%); - background-size: 16px 16px; - } +.name { + display: block; + width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + line-height: $bodyTitleHieght; +} - &:global(.red) { - --c: rgb(255 0 0 / 15%); - background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%); - background-size: 16px 16px; - } +.sub { + display: block; + width: 100%; + font-size: 95%; + opacity: 0.7; + line-height: $bodyInfoHieght; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} - &:global(.gray) { - --c: var(--bg); - background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%); - background-size: 16px 16px; - } +.chart { + height: 30px; } </style> |