fix: audioCover animation and estimatedMins style (#523)

* fix: audioCover animation and estimatedMins style * fix: zindex in audio cover
RSSNext · Sep 20, 2024 · 11ff31b · 11ff31b
1 parent 0dc4b86
commit 11ff31b
Showing 1 changed file with 6 additions and 3 deletions.
diff --git a/apps/renderer/src/modules/entry-column/templates/list-item-template.tsx b/apps/renderer/src/modules/entry-column/templates/list-item-template.tsx
@@ -235,7 +235,7 @@ function AudioCover({
 
       <div
         className={cn(
-          "center absolute inset-0 w-full transition-all duration-200 ease-in-out group-hover:opacity-100",
+          "center absolute inset-0 w-full transition-all duration-200 ease-in-out group-hover:-translate-y-2 group-hover:opacity-100",
           playStatus ? "opacity-100" : "opacity-0",
         )}
         onClick={handleClickPlay}
@@ -255,8 +255,11 @@ function AudioCover({
       </div>
 
       {!!estimatedMins && (
-        <div className="absolute bottom-0 w-full rounded-b-sm bg-white/50 text-center text-[13px] opacity-0 backdrop-blur duration-100 group-hover:opacity-100 dark:bg-neutral-900/70">
-          {formatEstimatedMins(estimatedMins)}
+        <div className="absolute bottom-0 w-full overflow-hidden rounded-b-sm text-center ">
+          <div className="absolute left-0 top-0 size-full bg-white/50 opacity-0 duration-200 group-hover:opacity-100 dark:bg-neutral-900/70" />
+          <div className="text-[13px] opacity-0 backdrop-blur-none duration-200 group-hover:opacity-100 group-hover:backdrop-blur-sm">
+            {formatEstimatedMins(estimatedMins)}
+          </div>
         </div>
       )}
     </div>