mirror/advplyr.audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-08-01 08:44:40 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

Tailwind V4 migration initial commit

Browse source
This commit is contained in:
mikiher 2025-03-16 16:41:37 +02:00
parent d60ccff5e8
commit 30db5d50fb
186 changed files with 1858 additions and 1324 deletions
Download patch file Download diff file Expand all files Collapse all files

14
client/components/modals/player/QueueItemRow.vue
View file

@ -1,7 +1,7 @@
<template>
<div v-if="item" class="w-full flex items-center px-4 py-2" :class="wrapperClass" @mouseover="mouseover" @mouseleave="mouseleave">
<covers-preview-cover :src="coverUrl" :width="48" :book-cover-aspect-ratio="bookCoverAspectRatio" :show-resolution="false" />
<div class="flex-grow px-2 py-1 queue-item-row-content truncate">
<div class="grow px-2 py-1 queue-item-row-content truncate">
<p class="text-gray-200 text-sm truncate">{{ title }}</p>
<p class="text-gray-300 text-sm">{{ subtitle }}</p>
<p v-if="caption" class="text-gray-400 text-xs">{{ caption }}</p>
@ -9,10 +9,10 @@
<div class="w-28">
<p v-if="isOpenInPlayer" class="text-sm text-right text-gray-400">{{ $strings.ButtonPlaying }}</p>
<div v-else-if="isHovering" class="flex items-center justify-end -mx-1">
<button class="outline-none mx-1 flex items-center" @click.stop="playClick">
<button class="outline-hidden mx-1 flex items-center" @click.stop="playClick">
<span class="material-symbols fill text-2xl text-success">play_arrow</span>
</button>
<button class="outline-none mx-1 flex items-center" @click.stop="removeClick">
<button class="outline-hidden mx-1 flex items-center" @click.stop="removeClick">
<span class="material-symbols text-2xl text-error">close</span>
</button>
</div>
@ -72,9 +72,9 @@ export default {
return this.$store.getters['getIsMediaStreaming'](this.libraryItemId, this.episodeId)
},
wrapperClass() {
if (this.isOpenInPlayer) return 'bg-yellow-400 bg-opacity-10'
if (this.index % 2 === 0) return 'bg-gray-300 bg-opacity-5 hover:bg-opacity-10'
return 'bg-bg hover:bg-gray-300 hover:bg-opacity-10'
if (this.isOpenInPlayer) return 'bg-yellow-400/10'
if (this.index % 2 === 0) return 'bg-gray-300/5 hover:bg-gray-300/10'
return 'bg-bg hover:bg-gray-300/10'
}
},
methods: {
@ -99,4 +99,4 @@ export default {
.queue-item-row-content {
max-width: calc(100% - 48px - 128px);
}
</style>
</style>