PLATINE blur bobine

app/components/Platine.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="platine pointer-events-none" :class="{ 'loading': platineStore.isLoadingTrack, 'mounted': isMounted }"
     ref="platine">
-    <div class="disc pointer-events-auto fixed" ref="discRef" style="background-image: url(/card-dock.svg)" id="disc">
+    <img class="cover" :src="platineStore.currentTrack?.coverId" />
-      <div
+    <div class="disc pointer-events-auto fixed bg-transparent" ref="discRef" id="disc">
-        class="bobine bg-slate-900 bg-opacity-50 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full"
+      <div class="bobine"
         :style="{ height: platineStore.progressPercentage + '%', width: platineStore.progressPercentage + '%' }"></div>
-      <img class="cover" :src="platineStore.currentTrack?.coverId" :alt="platineStore.currentTrack?.title">
+
 
       <div class="disc-label rounded-full bg-cover bg-center">
-        <img src="/favicon.svg" class="size-1/3">
+        <img src="/favicon.svg" class="size-1/2 bg-black rounded-full p-5">
         <div v-if="platineStore.isLoadingTrack" class="loading-indicator">
           <div class="spinner"></div>
         </div>
@@ -16,11 +16,11 @@
       <div v-if="!platineStore.isLoadingTrack" class="absolute top-1/2 right-8 size-1/12 rounded-full bg-esyellow">
       </div>
     </div>
-    <div class="w-full h-1/5 text-base">
+    <!-- <div class="w-full h-1/5 text-base">
       {{ platineStore.currentTrack?.title }}
       <br>
       {{ platineStore.currentTrack?.artist?.name }}
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -64,11 +64,9 @@ watch(() => props.track, (newTrack) => {
   position: relative;
   width: 100%;
   height: 100%;
-  padding: 20px;
 
   .card {
     position: absolute !important;
-    z-index: 99;
     top: -20%;
     left: 50%;
     bottom: 0;
@@ -78,7 +76,6 @@ watch(() => props.track, (newTrack) => {
 
 .disc {
   position: relative;
-  background-color: white;
   aspect-ratio: 1;
   width: 100%;
   overflow: hidden;
@@ -86,10 +83,10 @@ watch(() => props.track, (newTrack) => {
   cursor: grab;
   background-position: center;
   background-size: cover;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
 
-  .dragoOver & {
+  .loading & {
-    background-color: #4CAF50;
+    box-shadow: none;
   }
 }
 
@@ -162,11 +159,12 @@ watch(() => props.track, (newTrack) => {
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   border-radius: 50%;
-  z-index: 10;
 }
 
 .cover {
   position: absolute;
+  top: 0;
+  left: 0;
   border-radius: 100%;
   object-fit: cover;
   width: 100%;
@@ -195,15 +193,6 @@ watch(() => props.track, (newTrack) => {
 }
 
 .bobine {
-  &::before {
+  @apply bg-slate-900 bg-opacity-50 backdrop-blur absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full;
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-size: cover;
-    opacity: 0.7;
-  }
 }
 </style>

app/layouts/default.vue

@@ -45,7 +45,7 @@ const onCardDropped = (card: Track) => {
   transition: bottom 2s ease;
 
   &.mounted {
-    z-index: 60;
+    z-index: 80;
     bottom: 0;
 
     width: 100%;