diff --git a/assets/css/animations.css b/assets/css/animations.css index 605b562..499e050 100644 --- a/assets/css/animations.css +++ b/assets/css/animations.css @@ -15,7 +15,7 @@ /* Enhanced glassmorphism hover effects */ .glass:hover, .glass-strong:hover { - transform: translateY(-2px) scale(1.01); + transform: translateY(-2px); box-shadow: var(--shadow-glass), 0 0 30px rgba(59, 130, 246, 0.15); @@ -306,6 +306,7 @@ } .hover-lift:hover { + /* Lift effect kept for subtle movement */ transform: translateY(-4px); } @@ -314,7 +315,7 @@ } .hover-scale:hover { - transform: scale(1.05); + /* Scale effect removed to avoid distracting growth */ } .hover-glow { diff --git a/assets/css/main.css b/assets/css/main.css index 2e12e2f..ce67061 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -196,7 +196,7 @@ body { .btn-icon:hover { background: var(--accent-primary); - transform: scale(1.1) translateY(-2px); + transform: translateY(-2px); box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4), 0 4px 8px rgba(0, 0, 0, 0.2), diff --git a/components/MusicControls.client.vue b/components/MusicControls.client.vue index a30e9ba..000a77d 100644 --- a/components/MusicControls.client.vue +++ b/components/MusicControls.client.vue @@ -260,7 +260,7 @@ onMounted(() => { max-width: 450px; padding: 12px 16px; border-radius: 16px; - bottom: 5px; + bottom: -10px; } /* Collapsed State Styles */ diff --git a/components/TrackListItem.client.vue b/components/TrackListItem.client.vue index e59dbb7..cff5f8d 100644 --- a/components/TrackListItem.client.vue +++ b/components/TrackListItem.client.vue @@ -3,7 +3,6 @@ :class="[ 'track-item', 'ripple', - 'hover-lift', { 'active': isActive, 'loading': isLoading, @@ -107,7 +106,7 @@ const formatTime = (seconds) => { .track-item:hover { background: var(--bg-glass); - transform: translateX(5px) translateY(-2px); + transform: translateX(5px); box-shadow: 0 6px 20px rgba(59, 130, 246, 0.2), 0 3px 8px rgba(0, 0, 0, 0.1), @@ -126,7 +125,7 @@ const formatTime = (seconds) => { } .track-item.active:hover { - transform: translateX(5px) translateY(-3px) scale(1.02); + transform: translateX(5px); box-shadow: 0 10px 30px rgba(59, 130, 246, 0.5), 0 5px 12px rgba(0, 0, 0, 0.2),