web/PickerItem: always show type badge, prevent right click on video

- fixed type badge centering in webkit
- increased border radius of type badge to match icons inside it
This commit is contained in:
wukko 2024-07-22 16:14:26 +06:00
parent c03337fed9
commit b0a69f9944
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2

View file

@ -26,21 +26,20 @@
downloadFile(item.url);
}}
>
{#if item.type}
<div class="picker-type">
{#if item.type === "video"}
<IconMovie />
{:else if item.type === "photo"}
<IconPhoto />
{/if}
</div>
{/if}
<div class="picker-type">
{#if itemType === "video"}
<IconMovie />
{:else}
<IconPhoto />
{/if}
</div>
<img
class="picker-image"
src={item.thumb ? item.thumb : item.url}
class:loading={!imageLoaded}
class:video-thumbnail={item.thumb}
on:load={() => (imageLoaded = true)}
alt="{$t(`a11y.dialog.picker.item.${itemType}`)} {number}"
@ -77,6 +76,10 @@
opacity: 0.8;
}
.picker-image.video-thumbnail {
pointer-events: none;
}
@media (hover: hover) {
.picker-item:hover .picker-image {
opacity: 0.8;
@ -99,13 +102,13 @@
top: 6px;
left: 6px;
border-radius: 4px;
border-radius: 6px;
pointer-events: none;
}
.picker-type :global(svg) {
width: 21px;
height: 21px;
width: 22px;
height: 22px;
}
</style>