From 6f3855f5f1143b1d893f6a92932b35528f35168f Mon Sep 17 00:00:00 2001
From: Jin Yi <jin12cc@gmail.com>
Date: Tue, 13 Jan 2026 15:49:10 +0900
Subject: [PATCH] fix: reduce media asset card hover background opacity for
 button visibility (#8020)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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)
---
 src/platform/assets/components/MediaAssetCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/platform/assets/components/MediaAssetCard.vue b/src/platform/assets/components/MediaAssetCard.vue
index 73273611bb..dc11606485 100644
--- a/src/platform/assets/components/MediaAssetCard.vue
+++ b/src/platform/assets/components/MediaAssetCard.vue
@@ -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"