zio/elk
2
0
Fork 0
Code Releases 2 Packages 1 Activity

feat: styling

Browse source
This commit is contained in:
Anthony Fu 2022-11-14 10:56:48 +08:00
parent 90c45b435f
commit 10143fffec
5 changed files with 86 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

32
components/status/StatusActions.vue
View file

@ -7,21 +7,29 @@ defineProps<{
</script>
<template>
<div flex justify-between gap-4>
<button flex gap-1 justify-center items-center p1 w-full rounded hover="bg-gray/10">
<div i-ri:chat-3-line />
<span>{{ status.repliesCount }}</span>
<div flex gap-8>
<button flex gap-1 items-center w-full rounded op75 hover="op100 text-blue" group>
<div rounded-full p2 group-hover="bg-blue/10">
<div i-ri:chat-3-line />
</div>
<span v-if="status.repliesCount">{{ status.repliesCount }}</span>
</button>
<button flex gap-1 justify-center items-center p1 w-full rounded hover="bg-gray/10">
<div i-ri:repeat-fill />
<span>{{ status.reblogsCount }}</span>
<button flex gap-1 items-center w-full rounded op75 hover="op100 text-green" group>
<div rounded-full p2 group-hover="bg-green/10">
<div i-ri:repeat-fill />
</div>
<span v-if="status.reblogsCount">{{ status.reblogsCount }}</span>
</button>
<button flex gap-1 justify-center items-center p1 w-full rounded hover="bg-gray/10">
<div i-ri:heart-3-line />
<span>{{ status.favouritesCount }}</span>
<button flex gap-1 items-center w-full rounded op75 hover="op100 text-rose" group>
<div rounded-full p2 group-hover="bg-rose/10">
<div i-ri:heart-3-line />
</div>
<span v-if="status.favouritesCount">{{ status.favouritesCount }}</span>
</button>
<button flex gap-1 justify-center items-center p1 w-full rounded hover="bg-gray/10">
<div i-ri:more-2-fill />
<button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group>
<div rounded-full p2 group-hover="bg-purple/10">
<div i-ri:share-circle-line />
</div>
</button>
</div>
</template>