From ec7f5c89b1b50ef03d45847572b91d2d737fc10a Mon Sep 17 00:00:00 2001
From: Xavier Araque <francisco.araque@toolfactory.net>
Date: Tue, 4 Nov 2025 19:58:49 +0100
Subject: [PATCH] fix: loading albbun, play button color

---
 ui/src/themes/SquiddiesGlass.css.js | 41 +++++++++++++++++++++++++++++
 ui/src/themes/SquiddiesGlass.js     | 38 ++++++++++++++++++++++++++
 2 files changed, 79 insertions(+)

diff --git a/ui/src/themes/SquiddiesGlass.css.js b/ui/src/themes/SquiddiesGlass.css.js
index a32716a77..2c8e4f1d6 100644
--- a/ui/src/themes/SquiddiesGlass.css.js
+++ b/ui/src/themes/SquiddiesGlass.css.js
@@ -48,6 +48,37 @@ const stylesheet = `
   color: #c231ab;
 }
 
+.react-jinke-music-player .music-player-controller {
+  color: #c231ab;
+  border: 1px solid #e14ac2;
+}
+
+.react-jinke-music-player .music-player-controller.music-player-playing:before {
+  border: 1px solid rgba(194, 49, 171, 0.3);
+}
+
+.react-jinke-music-player .music-player .destroy-btn {
+  background-color: #c2c1c2;
+  top: -7px;
+  border-radius: 50%;
+  display: flex;
+}
+
+.react-jinke-music-player .music-player .destroy-btn svg {
+  font-size: 20px;
+}
+
+@media screen and (max-width: 767px) {
+  .react-jinke-music-player .music-player .destroy-btn {
+    right: -12px;
+  }
+}
+
+.react-jinke-music-player-mobile-header-right {
+  right: 0;
+  top: 0;
+}
+
 @media screen and (max-width: 767px) {
   .react-jinke-music-player-main svg {
     font-size: 32px;
@@ -129,6 +160,16 @@ a[aria-current="page"] .MuiListItemIcon-root {
     opacity: 0.8;
   }
 }
+
+@keyframes pulse {
+  0% { opacity: 0.5; }
+  100% { opacity: 1; }
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
 `
 
 export default stylesheet
diff --git a/ui/src/themes/SquiddiesGlass.js b/ui/src/themes/SquiddiesGlass.js
index 1bc579f5f..467481606 100644
--- a/ui/src/themes/SquiddiesGlass.js
+++ b/ui/src/themes/SquiddiesGlass.js
@@ -177,6 +177,8 @@ export default {
     },
     MuiCardMedia: {
       root: {
+        position: 'relative',
+        overflow: 'hidden',
         boxShadow: `0 2px 32px rgba(0,0,0,0.5), 0px 1px 5px rgba(0,0,0,0.1)`,
       },
     },
@@ -366,6 +368,29 @@ export default {
       },
       coverParent: {
         zIndex: '99999',
+        position: 'relative',
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        '&::before': {
+          content: '""',
+          position: 'absolute',
+          inset: '0',
+          width: '100%',
+          height: '100%',
+          borderRadius: '50%',
+          animation: 'pulse 1.5s ease-in-out infinite alternate',
+          zIndex: -1,
+        },
+        '&::after': {
+          content: '""',
+          position: 'absolute',
+          inset: '0',
+          zIndex: '-1',
+          borderRadius: '50%',
+          background: 'repeating-conic-gradient(from 0deg, rgba(255,255,255,0.08) 0deg, rgba(255,255,255,0.08) 0.5deg, rgba(0,0,0,1) 1deg)',
+          filter: 'contrast(999) sepia(1)',
+          boxShadow: 'inset 0 0 25px rgba(255,255,255,0.05), inset 0 0 95px rgba(0,0,0,0.9)',
+          animation: 'spin 6s linear infinite',
+        }
       },
       details: {
         zIndex: '99999',
@@ -405,7 +430,19 @@ export default {
         },
       },
     },
+    MuiGridListTile: {
+      tile: {
+        '&:hover': {
+          boxShadow: '0 2px 32px rgba(0,0,0,0.5), 0px 1px 5px rgba(0,0,0,0.1)',
+        },
+      },
+    },
     NDAlbumGridView: {
+      tileBar: {
+        background:
+          'linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0) 100%)',
+        marginBottom: '2px',
+      },
       albumName: {
         marginTop: '0.5rem',
         fontWeight: 700,
@@ -425,6 +462,7 @@ export default {
         },
       },
       albumPlayButton: {
+        color: colors.black,
         backgroundColor: colors.pink[500],
         borderRadius: '50%',
         boxShadow: '0 8px 8px rgb(0 0 0 / 30%)',