Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2026-05-03 14:07:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add more hover effects for better UX

Browse Source
This commit is contained in:
keyboardreamer
2024-01-03 21:21:27 +08:00
committed by Bnyro
parent aaeddb3903
commit 03f43d525e
4 changed files with 49 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/VideoItem.vue
View File

@@ -1,7 +1,7 @@
<template>
<div v-if="showVideo" class="flex flex-col flex-justify-between">
<router-link
class="inline-block w-full focus:underline hover:underline"
class="inline-block w-full focus:text-red-400 hover:text-red-400"
:to="{
path: '/watch',
query: {
@@ -15,7 +15,7 @@
<div class="w-full">
<img
loading="lazy"
class="aspect-video w-full object-contain"
class="aspect-video w-full rounded-md object-contain"
:src="thumbnail"
:alt="title"
:class="{ 'shorts-img': item.isShort, 'opacity-75': item.watched }"
@@ -82,7 +82,7 @@
<i v-if="item.uploaderVerified" class="i-fa6-solid:check ml-1.5" />
</router-link>
<div v-if="item.views >= 0 || item.uploadedDate" class="mt-1 text-xs text-gray-300 font-normal">
<div v-if="item.views >= 0 || item.uploadedDate" class="video-info">
<span v-if="item.views >= 0">
<i class="i-fa6-solid:eye" />
<span class="pl-1" v-text="`${numberFormat(item.views)} •`" />
@@ -271,4 +271,12 @@ export default {
.shorts-img {
@apply w-full object-contain;
}
.video-info {
@apply mt-1 text-xs text-gray-600 font-normal;
}
.dark .video-info {
@apply text-gray-400;
}
</style>