diff --git a/apps/web/src/pages/viral-video/ViralVideoPage.css b/apps/web/src/pages/viral-video/ViralVideoPage.css index 32a584922..63379cfd8 100644 --- a/apps/web/src/pages/viral-video/ViralVideoPage.css +++ b/apps/web/src/pages/viral-video/ViralVideoPage.css @@ -1509,7 +1509,7 @@ } .vv-thumb-card { position: relative; - border: 1px solid #e5e7eb; + border: 2px solid #e5e7eb; border-radius: 8px; overflow: hidden; cursor: pointer; @@ -1517,11 +1517,19 @@ transition: all 0.15s; } .vv-thumb-card:hover { - border-color: #7c3aed; + border-color: #c4b5fd; } -.vv-thumb-card.picked { +.vv-thumb-card.selected { border-color: #7c3aed; - box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15); + box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18); +} +.vv-thumb-card.selected::after { + content: ""; + position: absolute; + inset: 0; + background: rgba(124, 58, 237, 0.1); + pointer-events: none; + z-index: 1; } .vv-thumb-ph { aspect-ratio: 1; @@ -1541,7 +1549,7 @@ } .vv-asset-image { position: relative; - border: 1px solid #e5e7eb; + border: 2px solid #e5e7eb; border-radius: 8px; overflow: hidden; cursor: pointer; @@ -1553,18 +1561,21 @@ position: absolute; top: 6px; right: 6px; - width: 22px; - height: 22px; + width: 24px; + height: 24px; border-radius: 50%; background: #7c3aed; color: #fff; display: none; align-items: center; justify-content: center; - font-size: 12px; + font-size: 13px; font-weight: 700; + z-index: 2; + box-shadow: 0 2px 6px rgba(124, 58, 237, 0.4); + border: 2px solid #fff; } -.vv-thumb-card.picked .vv-thumb-check { +.vv-thumb-card.selected .vv-thumb-check { display: flex; } .vv-thumb-name {