Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-12-25 23:13:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use windicss classes.

Browse Source
This commit is contained in:
Kavin 2022-06-24 23:28:06 +01:00
parent 54117a3add
commit 3941b1d86e
No known key found for this signature in database
GPG Key ID: 49451E4482CC5BCD
1 changed files with 7 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/ChaptersBar.vue
View File

@ -20,10 +20,10 @@
<!-- mobile view --> <!-- mobile view -->
<div v-else class="flex overflow-x-auto"> <div v-else class="flex overflow-x-auto">
<div :key="chapter.start" v-for="chapter in chapters" @click="$emit('seek', chapter.start)" class="chapter"> <div :key="chapter.start" v-for="chapter in chapters" @click="$emit('seek', chapter.start)" class="chapter">
<img :src="chapter.image" :alt="chapter.title" class="" /> <img :src="chapter.image" :alt="chapter.title" />
<div class="m-1 flex"> <div class="m-1 flex">
<span class="text-truncate text-sm" :title="chapter.title" v-text="chapter.title" /> <span class="text-truncate text-sm" :title="chapter.title" v-text="chapter.title" />
<span class="text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" /> <span class="px-1 text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
</div> </div>
</div> </div>
</div> </div>
@ -34,32 +34,22 @@
height: 5px; height: 5px;
} }
.chapter { .chapter {
@apply cursor-pointer; @apply cursor-pointer self-center p-2.5;
align-self: center;
padding: 10px;
img { img {
width: 100%; @apply w-full h-full;
height: 100%;
} }
} }
.chapter-vertical { .chapter-vertical {
@apply cursor-pointer; @apply cursor-pointer self-center p-2.5;
align-self: center;
padding: 10px;
img { img {
width: 30%; @apply w-3/10 h-3/10;
height: 30%;
} }
} }
.chapter-vertical:hover { .chapter-vertical:hover {
@apply bg-gray-500; @apply bg-gray-500;
} }
.text-truncate { .text-truncate {
white-space: nowrap; @apply truncate overflow-hidden inline-block w-10em;
width: 10em;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
} }
</style> </style>