Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2025-01-22 04:27:00 +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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/App.vue
View File

@ -206,7 +206,7 @@ b {
}
.btn {
@apply py-2 lt-md:px-2 md:px-4 rounded cursor-pointer inline-block;
@apply py-2 lt-md:px-2 md:px-4 rounded cursor-pointer inline-block hover:bg-gray-500 hover:text-white;
}
.reset {
@ -238,8 +238,12 @@ b {
@apply text-gray-400 bg-dark-400;
}
.dark .btn {
@apply hover:bg-dark-300;
}
.input {
@apply px-2.5;
@apply px-2.5 rounded-md;
}
.input:focus {
@ -275,15 +279,15 @@ h2 {
}
.link {
@apply hover:(text-dark-300 underline underline-dark-300);
@apply focus:text-red-500 hover:text-red-500;
}
.link-secondary {
@apply hover:(text-dark-400 underline underline-dark-400);
@apply hover:text-dark-400 focus:text-dark-400 underline underline-dark-400;
}
.dark .link {
@apply hover:(text-gray-300 underline underline-gray-300);
@apply focus:text-red-400 hover:text-red-400;
}
.dark .link-secondary {

12
src/components/FooterComponent.vue
View File

@ -2,27 +2,27 @@
<footer class="mt-10 w-full rounded-xl py-4 text-center children:(mx-3)">
<a aria-label="GitHub" href="https://github.com/TeamPiped/Piped" target="_blank">
<i class="i-fa6-brands:github" />
<span v-t="'actions.source_code'" class="ml-2" />
<span v-t="'actions.source_code'" class="ml-2 hover:underline" />
</a>
<a href="https://docs.piped.video/" target="_blank">
<i class="i-fa6-solid:book" />
<span v-t="'actions.documentation'" class="ml-2" />
<span v-t="'actions.documentation'" class="ml-2 hover:underline" />
</a>
<a href="https://github.com/TeamPiped/Piped#donations" target="_blank">
<i class="i-fa6-brands:bitcoin" />
<span v-t="'actions.donations'" class="ml-2" />
<span v-t="'actions.donations'" class="ml-2 hover:underline" />
</a>
<a v-if="statusPageHref" :href="statusPageHref">
<i class="i-fa6-solid:server" />
<span v-t="'actions.status_page'" class="ml-2" />
<span v-t="'actions.status_page'" class="ml-2 hover:underline" />
</a>
<a v-if="donationHref" :href="donationHref">
<i class="i-fa6-solid:money-check" />
<span v-t="'actions.instance_donations'" class="ml-2" />
<span v-t="'actions.instance_donations'" class="ml-2 hover:underline" />
</a>
<a v-if="privacyPolicyHref" :href="privacyPolicyHref" target="_blank">
<i class="i-fa6-solid:eye" />
<span v-t="'actions.instance_privacy_policy'" class="ml-2" />
<span v-t="'actions.instance_privacy_policy'" class="ml-2 hover:underline" />
</a>
</footer>
</template>

30
src/components/NavBar.vue
View File

@ -39,25 +39,25 @@
<!-- navigation bar for large screen devices -->
<ul class="md:text-1xl hidden md:(flex flex flex-1 justify-end children:pl-3)">
<li v-if="shouldShowTrending">
<router-link v-t="'titles.trending'" to="/trending" />
<router-link v-t="'titles.trending'" to="/trending" class="nav-link" />
</li>
<li>
<router-link v-t="'titles.preferences'" to="/preferences" />
<router-link v-t="'titles.preferences'" to="/preferences" class="nav-link" />
</li>
<li v-if="shouldShowLogin">
<router-link v-t="'titles.login'" to="/login" />
<router-link v-t="'titles.login'" to="/login" class="nav-link" />
</li>
<li v-if="shouldShowRegister">
<router-link v-t="'titles.register'" to="/register" />
<router-link v-t="'titles.register'" to="/register" class="nav-link" />
</li>
<li v-if="shouldShowHistory">
<router-link v-t="'titles.history'" to="/history" />
<router-link v-t="'titles.history'" to="/history" class="nav-link" />
</li>
<li>
<router-link v-t="'titles.playlists'" to="/playlists" />
<router-link v-t="'titles.playlists'" to="/playlists" class="nav-link" />
</li>
<li v-if="!shouldShowTrending">
<router-link v-t="'titles.feed'" to="/feed" />
<router-link v-t="'titles.feed'" to="/feed" class="nav-link" />
</li>
</ul>
</nav>
@ -233,6 +233,22 @@ export default {
@apply mx-1;
}
#search-btn:hover {
@apply bg-red-400;
}
.dark #search-btn:hover {
@apply bg-dark-100;
}
.nav-link {
@apply hover:text-red-500;
}
.dark .nav-link {
@apply hover:text-red-400;
}
@media screen and (max-width: 848px) {
#search-btn {
display: none;

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>