fix(web): transition bg and border-radius (#27438)

* fix(web): transition bg and border-radius

* also transition thumb
pull/27401/head^2
Mees Frensel 2026-04-01 16:34:49 +02:00 committed by GitHub
parent d1e2e8ab4e
commit da4b88fc14
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 15 additions and 3 deletions

View File

@ -208,7 +208,11 @@
</script>
<div
class={['group focus-visible:outline-none flex overflow-hidden', backgroundColorClass, { 'rounded-xl': selected }]}
class={[
'group focus-visible:outline-none flex overflow-hidden transition-[background-color,border-radius]',
backgroundColorClass,
{ 'rounded-xl': selected },
]}
style:width="{width}px"
style:height="{height}px"
onmouseenter={onMouseEnter}
@ -248,8 +252,16 @@
]}
>
<ImageThumbnail
class={['absolute group-focus-visible:rounded-lg', { 'rounded-xl': selected }, imageClass]}
brokenAssetClass={['z-1 absolute group-focus-visible:rounded-lg', { 'rounded-xl': selected }, brokenAssetClass]}
class={[
'absolute group-focus-visible:rounded-lg transition-[border-radius]',
{ 'rounded-xl': selected },
imageClass,
]}
brokenAssetClass={[
'z-1 absolute group-focus-visible:rounded-lg transition-[border-radius]',
{ 'rounded-xl': selected },
brokenAssetClass,
]}
url={getAssetMediaUrl({ id: asset.id, size: AssetMediaSize.Thumbnail, cacheKey: asset.thumbhash })}
altText={$getAltText(asset)}
widthStyle="{width}px"