fix styles on photo card

This commit is contained in:
Hayden 2022-12-03 16:37:26 -09:00
parent c1c3e30a39
commit afed0dd0a1
No known key found for this signature in database
GPG key ID: 17CF79474E257545

View file

@ -396,9 +396,9 @@
<DetailsSection :details="itemDetails" />
</BaseCard>
<BaseCard>
<BaseCard v-if="photos && photos.length >0">
<template #title> Photos </template>
<div class="container p-4 flex flex-wrap gap-2 mx-auto max-h-[500px] overflow-scroll">
<div class="container border-t border-gray-300 p-4 flex flex-wrap gap-2 mx-auto max-h-[500px] overflow-y-scroll scroll-bg">
<button v-for="(img, i) in photos" :key="i" @click="openDialog(img)">
<img class="rounded max-h-[200px]" :src="img.src" />
</button>
@ -465,9 +465,20 @@
</BaseContainer>
</template>
<style>
<style lang="css" scoped>
/* Style dialog background */
dialog::backdrop {
background: rgba(0, 0, 0, 0.5);
}
.scroll-bg::-webkit-scrollbar {
width: 0.5rem;
}
.scroll-bg::-webkit-scrollbar-thumb {
border-radius: 0.25rem;
@apply bg-base-300
}
</style>