From d65292b22f924dbcd5193511d4b97471a87c3bfc Mon Sep 17 00:00:00 2001
From: Xavier Araque <francisco.araque@toolfactory.net>
Date: Wed, 29 Oct 2025 15:38:41 +0100
Subject: [PATCH] feat: fix play button, and text mobile

---
 ui/src/themes/SquiddiesGlass.css.js | 22 +++++++++++++++++-
 ui/src/themes/SquiddiesGlass.js     | 35 ++++++++++++++++++-----------
 2 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/ui/src/themes/SquiddiesGlass.css.js b/ui/src/themes/SquiddiesGlass.css.js
index 2bd0f013d..f9c5a88db 100644
--- a/ui/src/themes/SquiddiesGlass.css.js
+++ b/ui/src/themes/SquiddiesGlass.css.js
@@ -1,7 +1,7 @@
 const stylesheet = `
 
 .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle {
-    background: #c231ab
+  background: #c231ab
 }
 .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-track,
 .react-jinke-music-player-mobile-progress .rc-slider-track {
@@ -48,6 +48,13 @@ const stylesheet = `
   color: #c231ab;
 }
 
+@media screen and (max-width: 767px) {
+  .react-jinke-music-player-main svg {
+    font-size: 32px;
+  }
+}
+
+
 @keyframes gradientFlow {
   0% { background-position: 0% 50%; }
   50% { background-position: 100% 50%; }
@@ -62,6 +69,7 @@ a[aria-current="page"] {
   color: #c231ab !important;
   font-weight: bold;
 }
+
 a[aria-current="page"] .MuiListItemIcon-root {
   color: #c231ab !important;
 }
@@ -91,6 +99,18 @@ a[aria-current="page"] .MuiListItemIcon-root {
   opacity: 0.5;
 }
 
+@keyframes backgroundFlow {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
 /* Vertical movement, equalizer type */
 @keyframes equalizer {
   0%, 100% {
diff --git a/ui/src/themes/SquiddiesGlass.js b/ui/src/themes/SquiddiesGlass.js
index 6e2abbb36..83f4ab306 100644
--- a/ui/src/themes/SquiddiesGlass.js
+++ b/ui/src/themes/SquiddiesGlass.js
@@ -55,23 +55,23 @@ const musicListActions = {
     },
     'button:first-child:not(:only-child)': {
       '@media screen and (max-width: 720px)': {
-        transform: 'scale(1.5)',
+        transform: 'scale(1.3)',
         margin: '1em',
         '&:hover': {
-          transform: 'scale(1.6) !important',
+          transform: 'scale(1.2) !important',
         },
       },
-      transform: 'scale(1.5)',
+      transform: 'scale(1.3)',
       margin: '1em',
       minWidth: 0,
       padding: 5,
       transition: 'transform .3s ease',
       background: colors.pink[500],
-      color: colors.black,
+      color: `${colors.black} !important`,
       borderRadius: 500,
       border: 0,
       '&:hover': {
-        transform: 'scale(1.6)',
+        transform: 'scale(1.2)',
         backgroundColor: `${colors.pink[500]} !important`,
         border: 0,
       },
@@ -81,6 +81,7 @@ const musicListActions = {
     },
     'button:first-child>span:first-child': {
       padding: 0,
+      color: `${colors.black} !important`,
     },
     'button:first-child>span:first-child>span': {
       display: 'none',
@@ -169,14 +170,14 @@ export default {
         },
       },
       label: {
-        color: '#fff',
+        color: colors.white,
         paddingRight: '1rem',
         paddingLeft: '0.7rem',
       },
     },
     MuiCardMedia: {
       root: {
-        boxShadow: '0 2px 32px rgba(0,0,0,0.6), 0px 1px 5px rgba(0,0,0,0.4)',
+        boxShadow: `0 2px 32px rgba(0,0,0,0.5), 0px 1px 5px rgba(0,0,0,0.1)`,
       },
     },
     MuiDivider: {
@@ -244,7 +245,7 @@ export default {
     RaFilter: {
       form: {
         '& .MuiOutlinedInput-input:-webkit-autofill': {
-          '-webkit-box-shadow': `0 0 0 100px #28282b inset`,
+          '-webkit-box-shadow': `0 0 0 100px ${colors.gray[50]} inset`,
           '-webkit-text-fill-color': colors.white,
         },
       },
@@ -361,7 +362,7 @@ export default {
         },
       },
       cardContents: {
-        alignItems: 'center',
+        alignItems: 'flex-start',
       },
       coverParent: {
         zIndex: '99999',
@@ -381,6 +382,10 @@ export default {
         fontSize: '.875rem',
         color: `rgba(${colors.white}, 0.8)`,
       },
+      content: {
+        paddingBottom: '0px !important',
+        paddingTop: '0px'
+      }
     },
     NDAlbumGridView: {
       albumName: {
@@ -463,6 +468,7 @@ export default {
           },
           'button:first-child>span:first-child': {
             padding: 0,
+            color: `${colors.black} !important`,
           },
           'button>span:first-child>span, button:not(:first-child)>span:first-child>svg':
             {
@@ -477,13 +483,16 @@ export default {
     NDAudioPlayer: {
       audioTitle: {
         color: colors.white,
-        fontSize: '0.875rem',
+        fontSize: '1.5rem',
+        '& span:nth-child(3)': {
+          fontSize: '0.8rem',
+        },
       },
       songTitle: {
-        fontWeight: 400,
+        fontWeight: 900,
       },
       songInfo: {
-        fontSize: '0.675rem',
+        fontSize: '0.9rem',
         color: colors.gray[100],
       },
     },
@@ -495,7 +504,7 @@ export default {
     },
     NDLogin: {
       main: {
-        boxShadow: 'inset 0 0 0 2000px rgba(0, 0, 0, .75)',
+        boxShadow: `inset 0 0 0 2000px rgba(${colors.black}, .75)`,
       },
       systemNameLink: {
         color: colors.white,