fix: reduce media asset card hover background opacity for button visibility (#8020)

## Summary
Reduces the MediaAssetCard hover background opacity to 20% so buttons
within the card stand out during hover interactions.

## Changes
- **What**: Changed `hover:bg-modal-card-background-hovered` to
`hover:bg-modal-card-background-hovered/20` in MediaAssetCard.vue

## Context
During design review, it was identified that the button hover color
matches the card hover color, making it difficult to distinguish button
hover states. This fix applies reduced opacity to the card background
hover, ensuring buttons remain visually distinct.

<img width="659" height="302" alt="스크린샷 2026-01-13 오후 2 39 40"
src="https://github.com/user-attachments/assets/a77b408e-46a5-4725-9afb-2260bda0f8c9"
/>

🤖 Generated with [Claude Code](https://claude.com/claude-code)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8020-fix-reduce-media-asset-card-hover-background-opacity-for-button-visibility-2e76d73d365081b1afcefe17ac6db6ac)
by [Unito](https://www.unito.io)
This commit is contained in:
Jin Yi
2026-01-13 15:49:10 +09:00
committed by GitHub
parent 0f1e54530c
commit 6f3855f5f1

View File

@@ -17,7 +17,7 @@
'gap-2 select-none group',
selected
? 'ring-3 ring-inset ring-modal-card-border-highlighted'
: 'hover:bg-modal-card-background-hovered'
: 'hover:bg-modal-card-background-hovered/20'
)
"
:data-selected="selected"