VueTube/NUXT/components/playlistCard.vue

78 lines
1.9 KiB
Vue

<template>
<v-card
v-ripple
class="background d-flex flex-row overflow-hidden mb-4 mx-4"
:class="
$store.state.tweaks.roundThumb && $store.state.tweaks.roundTweak > 0
? $vuetify.theme.dark
? 'lighten-1'
: 'darken-1'
: ''
"
:style="{
borderRadius: $store.state.tweaks.roundThumb
? `${$store.state.tweaks.roundTweak / 2}rem`
: '0',
}"
flat
>
<v-img
contain
src="/dev.svg"
class="background"
style="position: relative; max-width: 8rem !important"
:class="$vuetify.theme.dark ? 'lighten-2' : 'darken-2'"
:style="{
borderRadius: $store.state.tweaks.roundThumb
? `${$store.state.tweaks.roundTweak / 4}rem`
: '0',
}"
>
<div
class="background d-flex flex-column justify-center align-center"
style="
position: absolute;
top: 0;
right: 0;
width: 40%;
height: 100%;
opacity: 0.5;
"
>
<div>420</div>
<v-icon>mdi-playlist-play</v-icon>
</div>
</v-img>
<div class="pa-4" v-emoji>
<b>Work in Progress</b>
<div
class="background--text caption"
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
>
Bottom Text <br />
420 videos
</div>
</div>
<v-spacer></v-spacer>
<div class="d-flex flex-column">
<v-btn
text
tile
elevation="0"
style="width: 50px !important; height: 50px !important"
>
<v-icon>mdi-share-outline</v-icon>
</v-btn>
<v-btn
text
tile
elevation="0"
style="width: 50px !important; height: 50px !important"
>
<v-icon>mdi-plus-box-multiple-outline</v-icon>
</v-btn>
</div>
</v-card>
</template>