fix(ui): artist buttons in spotify-ish

Signed-off-by: Deluan <deluan@navidrome.org>
2025-06-09 17:56:59 -04:00
parent 5882889a80
commit aee2a1f8be
2 changed files with 85 additions and 22 deletions
@@ -242,6 +242,64 @@ export default {
    NDPlaylistShow: {
      playlistActions: musicListActions,
    },
+    NDArtistShow: {
+      actions: {
+        padding: '2rem 0',
+        alignItems: 'center',
+        overflow: 'visible',
+        minHeight: '120px',
+        '@global': {
+          button: {
+            border: '1px solid transparent',
+            backgroundColor: 'inherit',
+            color: '#b3b3b3',
+            margin: '0 0.5rem',
+            '&:hover': {
+              border: '1px solid #b3b3b3',
+              backgroundColor: 'inherit !important',
+            },
+          },
+          // Hide shuffle button label (first button)
+          'button:first-child>span:first-child>span': {
+            display: 'none',
+          },
+          // Style shuffle button (first button)
+          'button:first-child': {
+            '@media screen and (max-width: 720px)': {
+              transform: 'scale(1.5)',
+              margin: '1rem',
+              '&:hover': {
+                transform: 'scale(1.6) !important',
+              },
+            },
+            transform: 'scale(2)',
+            margin: '1.5rem',
+            minWidth: 0,
+            padding: 5,
+            transition: 'transform .3s ease',
+            background: spotifyGreen['500'],
+            color: '#fff',
+            borderRadius: 500,
+            border: 0,
+            '&:hover': {
+              transform: 'scale(2.1)',
+              backgroundColor: `${spotifyGreen['500']} !important`,
+              border: 0,
+            },
+          },
+          'button:first-child>span:first-child': {
+            padding: 0,
+          },
+          'button>span:first-child>span, button:not(:first-child)>span:first-child>svg':
+            {
+              color: '#b3b3b3',
+            },
+        },
+      },
+      actionsContainer: {
+        overflow: 'visible',
+      },
+    },
    NDAudioPlayer: {
      audioTitle: {
        color: '#fff',