polish sidebar and loading states

- Sidebar: stronger shadow, consistent hover borders across menu sections
- Loading: waveform inherits parent color, unified subtle pulse animation
- Loading: reduced opacity to /35 with custom pulse-subtle keyframe

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: francofrizzo

src/assets/styles.css

@@ -136,6 +136,17 @@
   transform: translateY(12px);
 }
 
+/* Subtle pulse — fades to 60% instead of 0 */
+@keyframes pulse-subtle {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.6;
+  }
+}
+
 /* Simple fade in */
 @keyframes fade-in {
   from {

src/components/navigation/SongMenu.vue

@@ -41,7 +41,7 @@ const otherCollectionMenuItems = computed(() => {
         <label for="my-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
         <div class="flex min-h-full w-80 lg:p-3">
           <div
-            class="from-primary/12 to-base-100/12 bg-base-100/40 text-base-content border-base-200 lg:rounded-box flex w-full flex-col gap-6 border bg-linear-to-t px-3 py-4 shadow-lg backdrop-blur-lg lg:px-1"
+            class="from-primary/12 to-base-100/12 bg-base-100/40 text-base-content border-base-200 lg:rounded-box flex w-full flex-col gap-6 border bg-linear-to-t px-3 py-4 shadow-2xl backdrop-blur-lg lg:px-1"
           >
             <div v-if="currentCollection" class="flex flex-col gap-2">
               <div class="flex items-center justify-between gap-2 pr-3 pl-5">
@@ -87,8 +87,8 @@ const otherCollectionMenuItems = computed(() => {
                     :class="[
                       'border-l-2',
                       currentSong?.id === song.id
-                        ? 'menu-active bg-primary/12 text-primary border-primary font-semibold'
-                        : 'hover:bg-base-content/6 hover:border-base-content/15 border-transparent'
+                        ? 'menu-active bg-primary/20 text-primary border-primary font-semibold'
+                        : 'hover:border-base-content/10 border-transparent'
                     ]"
                     @click="isOpen = false"
                   >
@@ -119,7 +119,7 @@ const otherCollectionMenuItems = computed(() => {
                         collectionSlug: otherCollection.slug
                       }
                     }"
-                    class="flex items-center gap-1.5"
+                    class="hover:border-base-content/10 flex items-center gap-1.5 border-l-2 border-transparent"
                     @click="isOpen = false"
                   >
                     {{ otherCollection.title }}

src/components/player/MultitrackPlayer.vue

@@ -812,11 +812,12 @@ const initializeAudioContext = async () => {
             v-if="!isReady && tracksVisible"
             class="bg-base-100/80 md:rounded-box absolute inset-0 z-10 flex items-center justify-center backdrop-blur-[1px] select-none"
           >
-            <div class="text-base-content/50 flex flex-col items-center gap-4">
+            <div
+              class="text-base-content/35 flex flex-col items-center gap-4"
+              style="animation: pulse-subtle 3s ease-in-out infinite"
+            >
               <LoadingWaveform size="lg" :bar-count="12" />
-              <span class="animate-pulse text-sm tracking-wide" style="animation-duration: 3s"
-                >Cargando...</span
-              >
+              <span class="text-sm tracking-wide">Cargando...</span>
             </div>
           </div>
         </div>

src/components/ui/LoadingScreen.vue

@@ -4,9 +4,14 @@ import LoadingWaveform from "@/components/ui/LoadingWaveform.vue";
 
 <template>
   <div
-    class="bg-base-200 text-base-content/50 flex h-dvh w-full flex-col items-center justify-center gap-6 p-2 text-lg select-none"
+    class="bg-base-200 text-base-content/35 flex h-dvh w-full flex-col items-center justify-center p-2 text-lg select-none"
   >
-    <LoadingWaveform size="lg" :bar-count="14" />
-    <span class="animate-pulse tracking-wide" style="animation-duration: 3s">Cargando...</span>
+    <div
+      class="flex flex-col items-center gap-6"
+      style="animation: pulse-subtle 3s ease-in-out infinite"
+    >
+      <LoadingWaveform size="lg" :bar-count="14" />
+      <span class="tracking-wide">Cargando...</span>
+    </div>
   </div>
 </template>

src/components/ui/LoadingWaveform.vue

@@ -44,11 +44,14 @@ const barMax = (i: number) =>
 </script>
 
 <template>
-  <div class="flex items-center" :style="{ gap: `${config.gap}px`, height: `${config.maxHeight}px` }">
+  <div
+    class="flex items-center"
+    :style="{ gap: `${config.gap}px`, height: `${config.maxHeight}px` }"
+  >
     <div
       v-for="i in barCount"
       :key="i"
-      class="bg-base-content/15 loading-bar rounded-full"
+      class="loading-bar rounded-full bg-current"
       :style="{
         width: `${config.barWidth}px`,
         animationDelay: `${barOffset(i)}s`,