diff --git a/components/account/AccountInfo.vue b/components/account/AccountInfo.vue index 7ed0e444..c8375836 100644 --- a/components/account/AccountInfo.vue +++ b/components/account/AccountInfo.vue @@ -17,18 +17,18 @@ defineOptions({ <template> <component :is="as" flex gap-3 v-bind="$attrs"> <AccountHoverWrapper :disabled="!hoverCard" :account="account" shrink-0> - <AccountAvatar :account="account" w-12 h-12 /> + <AccountAvatar :account="account" account-avatar-normal /> </AccountHoverWrapper> - <div flex="~ col" shrink overflow-hidden> + <div flex="~ col" shrink overflow-hidden justify-center leading-none> <div flex="~" gap-2> <ContentRich - font-bold line-clamp-1 ws-pre-wrap break-all + font-bold line-clamp-1 ws-pre-wrap break-all text-lg :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" /> <AccountBotIndicator v-if="account.bot" /> </div> - <AccountHandle :account="account" text-sm text-secondary-light /> + <AccountHandle :account="account" text-secondary-light /> </div> </component> </template> diff --git a/components/publish/PublishWidget.vue b/components/publish/PublishWidget.vue index 2cf5294d..1460f535 100644 --- a/components/publish/PublishWidget.vue +++ b/components/publish/PublishWidget.vue @@ -182,7 +182,7 @@ defineExpose({ </script> <template> - <div v-if="isMastoInitialised && currentUser" flex="~ col gap-4" py4 px2 sm:px4> + <div v-if="isMastoInitialised && currentUser" flex="~ col gap-4" py3 px2 sm:px4> <template v-if="draft.editingStatus"> <div flex="~ col gap-1"> <div id="state-editing" text-secondary self-center> @@ -194,8 +194,8 @@ defineExpose({ </template> <div flex gap-4 flex-1> - <NuxtLink w-12 h-12 :to="getAccountRoute(currentUser.account)"> - <AccountAvatar :account="currentUser.account" f-full h-full /> + <NuxtLink :to="getAccountRoute(currentUser.account)"> + <AccountAvatar :account="currentUser.account" account-avatar-normal /> </NuxtLink> <!-- This `w-0` style is used to avoid overflow problems in flex layouts,so don't remove it unless you know what you're doing --> <div diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue index f9259bec..f2358194 100644 --- a/components/status/StatusCard.vue +++ b/components/status/StatusCard.vue @@ -76,16 +76,18 @@ const isSelf = $computed(() => status.account.id === currentUser.value?.account. </slot> <StatusReplyingTo v-if="showReplyTo" :status="status" :class="faded ? 'text-secondary-light' : ''" py1 /> </div> - <div flex gap-4 :class="faded ? 'text-secondary' : ''"> + <div flex gap-3 :class="{ 'text-secondary': faded }"> <div relative> - <AccountHoverWrapper :account="status.account" :class="showRebloggedByAvatarOnAvatar ? 'mt-4' : 'mt-1'"> + <template v-if="showRebloggedByAvatarOnAvatar"> + <div absolute top--3px left--0.8 z--1 w-25px h-25px rounded-full> + <AccountAvatar :account="rebloggedBy" /> + </div> + </template> + <AccountHoverWrapper :account="status.account"> <NuxtLink :to="getAccountRoute(status.account)" rounded-full> - <AccountAvatar w-12 h-12 :account="status.account" /> + <AccountAvatar :account="status.account" account-avatar-normal :class="showRebloggedByAvatarOnAvatar ? 'mt-11px ' : 'mt-3px'" /> </NuxtLink> </AccountHoverWrapper> - <div v-if="showRebloggedByAvatarOnAvatar" absolute class="-top-1 -left-2" w-9 h-9 border-bg-base border-3 rounded-full> - <AccountAvatar :account="rebloggedBy" /> - </div> <div v-if="connectReply" w-full h-full flex justify-center> <div h-full class="w-2.5px" bg-border /> </div> diff --git a/unocss.config.ts b/unocss.config.ts index c0387119..0ab11e87 100644 --- a/unocss.config.ts +++ b/unocss.config.ts @@ -46,6 +46,9 @@ export default defineConfig({ 'flex-v-center': 'items-center', 'flex-h-center': 'justify-center', 'bg-hover-overflow': 'relative z-0 transition-colors duration-250 after-content-empty after:(absolute inset--2px bg-transparent rounded-lg z--1 transition-colors duration-250) hover:after:(bg-active)', + + // account + 'account-avatar-normal': 'w-54px h-54px border-3 border-bg-base', }, ], presets: [