From 43433399ba89c6b1b8ec1679a204b139a2d04670 Mon Sep 17 00:00:00 2001 From: Xavier Araque Date: Wed, 29 Oct 2025 11:57:08 +0100 Subject: [PATCH 1/7] feat: Add SquiddiesGlass Theme --- ui/src/themes/SquiddiesGlass.css.js | 131 ++++++++ ui/src/themes/SquiddiesGlass.js | 498 ++++++++++++++++++++++++++++ ui/src/themes/index.js | 2 + 3 files changed, 631 insertions(+) create mode 100644 ui/src/themes/SquiddiesGlass.css.js create mode 100644 ui/src/themes/SquiddiesGlass.js diff --git a/ui/src/themes/SquiddiesGlass.css.js b/ui/src/themes/SquiddiesGlass.css.js new file mode 100644 index 000000000..46401f4b2 --- /dev/null +++ b/ui/src/themes/SquiddiesGlass.css.js @@ -0,0 +1,131 @@ +const stylesheet = ` + +.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle { + background: #c231ab +} +.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-track, +.react-jinke-music-player-mobile-progress .rc-slider-track { + background: linear-gradient(to left, #c231ab, #380eff) +} + +.react-jinke-music-player-mobile { + background-color: #171717 !important; +} + +.react-jinke-music-player-mobile-progress .rc-slider-handle { + background: #c231ab; + height: 20px; + width: 20px; + margin-top: -9px; +} + +.react-jinke-music-player-main ::-webkit-scrollbar-thumb { + background-color: #c231ab; +} + +.react-jinke-music-player-pause-icon { + background-color: #c231ab; + border-radius: 50%; + outline: auto; + color: white; +} +.react-jinke-music-player-main .music-player-panel .panel-content .player-content { + z-index: 99999; +} +.react-jinke-music-player-main .music-player-panel .panel-content .player-content .play-btn svg { + border-radius: 50%; + outline: auto; + color: white; +} +.react-jinke-music-player-main .music-player-panel .panel-content .player-content .play-btn svg:hover { + background-color: #c231ab; + border-radius: 50%; + outline: auto; + color: white; +} + +.react-jinke-music-player-main svg:hover { + color: #c231ab; +} + + +@keyframes gradientFlow { + 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } +} + +.RaBulkActionsToolbar .MuiButton-label { + color: white; +} + +a[aria-current="page"] { + color: #c231ab !important; + font-weight: bold; +} +a[aria-current="page"] .MuiListItemIcon-root { + color: #c231ab !important; +} + +.panel-content { + position: relative; + overflow: hidden; + background: linear-gradient(90deg, #311f2f, #0a0912, #2f0c28); + background-size: 300% 300%; + animation: backgroundFlow 10s ease-in-out infinite; +} + +/* Barras del "ecualizador" */ +.panel-content::before { + content: ""; + position: absolute; + inset: 0; + background: repeating-linear-gradient( + 90deg, + rgba(255, 255, 255, 0.05) 0px, + rgba(255, 255, 255, 0.05) 2px, + transparent 1px, + transparent 3px + ); + animation: equalizer 1.8s infinite ease-in-out; + filter: blur(1px); + opacity: 0.5; +} + +@keyframes backgroundFlow { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + +/* Movimiento vertical tipo ecualizador */ +@keyframes equalizer { + 0%, 100% { + transform: scaleY(1); + opacity: 0.2; + } + 25% { + transform: scaleY(1.4); + opacity: 0.9; + } + 50% { + transform: scaleY(0.7); + opacity: 0.2; + } + 75% { + transform: scaleY(1.2); + opacity: 0.8; + } +} + + + +` + +export default stylesheet diff --git a/ui/src/themes/SquiddiesGlass.js b/ui/src/themes/SquiddiesGlass.js new file mode 100644 index 000000000..601f6d551 --- /dev/null +++ b/ui/src/themes/SquiddiesGlass.js @@ -0,0 +1,498 @@ +import stylesheet from './SquiddiesGlass.css.js' + +// Color constants +const colors = { + pink: { + 100: '#fbe3f4', + 200: '#f5b9e3', + 300: '#ec7cd6', + 400: '#e14ac2', + 500: '#c231ab', // base + 600: '#a31a92', + 700: '#8b0f7e', + 800: '#670066', + 900: '#7a006d', + }, + gray: { + 100: '#b3b3b3', // light gray + 200: '#282828', // medium dark + 300: '#1d1d1d', // darker + 400: '#181818', // even darker + 500: '#171717', // darkest + }, + black: '#000', + white: '#fff', + dark: '#121212', +} + +// Shared style objects +const musicListActions = { + padding: '1rem 0', + alignItems: 'center', + '@global': { + button: { + border: '1px solid transparent', + backgroundColor: 'inherit', + color: colors.gray[100], + '&:hover': { + border: `1px solid ${colors.gray[100]}`, + backgroundColor: 'inherit !important', + }, + }, + 'button:first-child:not(:only-child)': { + '@media screen and (max-width: 720px)': { + transform: 'scale(1.5)', + margin: '1em', + '&:hover': { + transform: 'scale(1.6) !important', + }, + }, + transform: 'scale(1.5)', + margin: '1em', + minWidth: 0, + padding: 5, + transition: 'transform .3s ease', + background: colors.pink[500], + color: colors.black, + borderRadius: 500, + border: 0, + '&:hover': { + transform: 'scale(1.4)', + backgroundColor: `${colors.pink[500]} !important`, + border: 0, + }, + }, + 'button:only-child': { + marginTop: '0.3em', + }, + 'button:first-child>span:first-child': { + padding: 0, + }, + 'button:first-child>span:first-child>span': { + display: 'none', + }, + 'button>span:first-child>span, button:not(:first-child)>span:first-child>svg': { + color: colors.gray[100], + }, + }, +} + +export default { + themeName: 'Squiddies Glass', + + typography: { + fontFamily: "system-ui, 'Helvetica Neue', Helvetica, Arial", + h6: { + fontSize: '1rem', // AppBar title + }, + }, + + palette: { + primary: { + light: colors.pink[300], + main: colors.pink[500], + }, + secondary: { + main: colors.white, + contrastText: colors.white, + }, + background: { + default: colors.dark, + paper: colors.dark, + }, + type: 'dark', + }, + + overrides: { + // Material-UI Components + MuiAppBar: { + positionFixed: { + backgroundColor: `${colors.black} !important`, + boxShadow: 'none', + }, + }, + MuiButton: { + root: { + background: colors.pink[500], + color: colors.white, + border: '1px solid transparent', + borderRadius: 500, + '&:hover': { + background: `${colors.pink[900]} !important`, + }, + }, + textSecondary: { + border: `1px solid ${colors.gray[100]}`, + background: colors.black, + '&:hover': { + border: `1px solid ${colors.white} !important`, + background: `${colors.black} !important`, + }, + }, + label: { + color: '#fff', + 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)', + }, + }, + MuiDivider: { + root: { + margin: '.75rem 0', + }, + }, + MuiDrawer: { + root: { + background: colors.gray[500], + paddingTop: '10px', + }, + }, + MuiFormGroup: { + root: { + color: colors.pink[500], + }, + }, + MuiMenuItem: { + root: { + fontSize: '0.875rem', + }, + }, + MuiTableCell: { + root: { + borderBottom: `1px solid ${colors.gray[300]}`, + padding: '10px !important', + color: `${colors.gray[100]} !important`, + '& img': { + filter: 'brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(7463%) hue-rotate(289deg) brightness(95%) contrast(102%);', + }, + '& img + span': { + color: colors.pink[500], + }, + }, + head: { + borderBottom: `1px solid ${colors.gray[200]}`, + fontSize: '0.75rem', + textTransform: 'uppercase', + letterSpacing: 1.2, + }, + }, + MuiTableRow: { + root: { + padding: '10px 0', + transition: 'background-color .3s ease', + '&:hover': { + backgroundColor: `${colors.gray[300]} !important`, + }, + '@global': { + 'td:nth-child(4)': { + color: `${colors.white} !important`, + }, + }, + }, + }, + + // React Admin Components + RaBulkActionsToolbar: { + topToolbar: { + gap: '8px', + }, + }, + RaFilter: { + form: { + '& .MuiOutlinedInput-input:-webkit-autofill': { + '-webkit-box-shadow': `0 0 0 100px #28282b inset`, + '-webkit-text-fill-color': colors.white, + }, + }, + }, + RaFilterButton: { + root: { + marginRight: '1rem', + }, + }, + RaLayout: { + content: { + padding: '0 !important', + background: `linear-gradient(${colors.dark}, ${colors.gray[500]})`, + }, + contentWithSidebar: { + gap: '2px', + } + }, + RaList: { + content: { + backgroundColor: 'inherit', + }, + bulkActionsDisplayed: { + marginTop: '-20px', + }, + }, + RaListToolbar: { + toolbar: { + padding: '0 .55rem !important', + }, + }, + RaPaginationActions: { + currentPageButton: { + border: `1px solid ${colors.gray[100]}`, + }, + button: { + backgroundColor: 'inherit', + minWidth: 48, + margin: '0 4px', + border: `1px solid ${colors.gray[200]}`, + '@global': { + '> .MuiButton-label': { + padding: 0, + }, + }, + }, + actions: { + '@global': { + '.next-page': { + marginLeft: 8, + marginRight: 8, + }, + '.previous-page': { + marginRight: 8, + }, + }, + }, + }, + RaSearchInput: { + input: { + paddingLeft: '.9rem', + border: 0, + '& .MuiInputBase-root': { + backgroundColor: `${colors.white} !important`, + borderRadius: '20px !important', + color: colors.black, + border: '0px', + '& fieldset': { + borderColor: colors.white, + }, + '&:hover fieldset': { + borderColor: colors.white, + }, + '&.Mui-focused fieldset': { + borderColor: colors.white, + }, + '& svg': { + color: `${colors.black} !important`, + }, + '& .MuiOutlinedInput-input:-webkit-autofill': { + borderRadius: '20px 0px 0px 20px', + '-webkit-box-shadow': '0 0 0 100px #c2c1c2 inset', + '-webkit-text-fill-color': colors.black, + }, + }, + }, + }, + RaSidebar: { + root: { + height: 'initial', + borderTopRightRadius: '8px', + borderTopLeftRadius: '8px', + }, + }, + + // Navidrome Custom Components + NDAlbumDetails: { + root: { + borderTopRightRadius: '8px', + borderTopLeftRadius: '8px', + boxShadow: 'none', + background: 'linear-gradient(45deg, #4d3249, #524590, #6d1c5e)', + backgroundSize: '200% 200%', + animation: 'gradientFlow 8s ease-in-out infinite', + position: 'relative', + '&:before': { + content: '""', + position: 'absolute', + top: '0', + left: '0', + width: '100%', + height: '100%', + background: `linear-gradient(to bottom, transparent, ${colors.dark})`, + }, + }, + cardContents: { + alignItems: 'center', + }, + coverParent: { + zIndex: '99999', + }, + details: { + zIndex: '99999', + }, + recordName: { + fontSize: 'calc(1rem + 1.5vw)', + fontWeight: 900, + }, + recordArtist: { + fontSize: '.875rem', + fontWeight: 700, + }, + recordMeta: { + fontSize: '.875rem', + color: 'rgba(255,255,255, 0.8)', + }, + }, + NDAlbumGridView: { + albumName: { + marginTop: '0.5rem', + fontWeight: 700, + textTransform: 'none', + color: colors.white, + }, + albumSubtitle: { + color: colors.gray[100], + }, + albumContainer: { + backgroundColor: colors.gray[400], + borderRadius: '.5rem', + padding: '.75rem', + transition: 'background-color .3s ease', + '&:hover': { + backgroundColor: colors.gray[200], + }, + }, + albumPlayButton: { + backgroundColor: colors.pink[500], + borderRadius: '50%', + boxShadow: '0 8px 8px rgb(0 0 0 / 30%)', + padding: '0.35rem', + transition: 'padding .3s ease', + '&:hover': { + background: `${colors.pink[500]} !important`, + padding: '0.45rem', + }, + }, + }, + NDAlbumShow: { + albumActions: musicListActions, + }, + NDArtistShow: { + actions: { + padding: '2rem 0', + alignItems: 'center', + overflow: 'visible', + minHeight: '120px', + '@global': { + button: { + border: '1px solid transparent', + backgroundColor: 'inherit', + color: colors.gray[100], + margin: '0 0.5rem', + '&:hover': { + border: `1px solid ${colors.gray[100]}`, + 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: colors.pink[500], + color: colors.white, + borderRadius: 500, + border: 0, + '&:hover': { + transform: 'scale(2.1)', + backgroundColor: `${colors.pink[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: colors.gray[100], + }, + }, + }, + actionsContainer: { + overflow: 'visible', + }, + }, + NDAudioPlayer: { + audioTitle: { + color: colors.white, + fontSize: '0.875rem', + }, + songTitle: { + fontWeight: 400, + }, + songInfo: { + fontSize: '0.675rem', + color: colors.gray[100], + }, + player: { + border: '10px solid blue', + }, + }, + NDCollapsibleComment: { + commentBlock: { + fontSize: '.875rem', + color: 'rgba(255,255,255, 0.8)', + }, + }, + NDLogin: { + main: { + boxShadow: 'inset 0 0 0 2000px rgba(0, 0, 0, .75)', + }, + systemNameLink: { + color: colors.white, + }, + card: { + border: `1px solid ${colors.gray[200]}`, + }, + avatar: { + marginBottom: 0, + }, + }, + NDPlaylistDetails: { + container: { + background: `linear-gradient(${colors.gray[300]}, transparent)`, + borderRadius: 0, + paddingTop: '2.5rem !important', + boxShadow: 'none', + }, + title: { + fontSize: 'calc(1.5rem + 1.5vw)', + fontWeight: 700, + color: colors.white, + }, + details: { + fontSize: '.875rem', + color: 'rgba(255,255,255, 0.8)', + }, + }, + NDPlaylistShow: { + playlistActions: musicListActions, + }, + }, + + player: { + theme: 'dark', + stylesheet, + }, +} diff --git a/ui/src/themes/index.js b/ui/src/themes/index.js index 0234d416b..2164d4767 100644 --- a/ui/src/themes/index.js +++ b/ui/src/themes/index.js @@ -10,6 +10,7 @@ import NordTheme from './nord' import GruvboxDarkTheme from './gruvboxDark' import CatppuccinMacchiatoTheme from './catppuccinMacchiato' import NuclearTheme from './nuclear' +import SquiddiesGlassTheme from './SquiddiesGlass' export default { // Classic default themes @@ -27,4 +28,5 @@ export default { NordTheme, NuclearTheme, SpotifyTheme, + SquiddiesGlassTheme, } From b16ab5542da38642ffab6ede09a7c4688c9cf9a5 Mon Sep 17 00:00:00 2001 From: Xavier Araque Date: Wed, 29 Oct 2025 12:24:35 +0100 Subject: [PATCH 2/7] feat: fix commnets by gemini-code-assist in PR --- ui/src/themes/SquiddiesGlass.css.js | 22 ++-------- ui/src/themes/SquiddiesGlass.js | 68 +++++++++++++++++++++++------ 2 files changed, 57 insertions(+), 33 deletions(-) diff --git a/ui/src/themes/SquiddiesGlass.css.js b/ui/src/themes/SquiddiesGlass.css.js index 46401f4b2..2bd0f013d 100644 --- a/ui/src/themes/SquiddiesGlass.css.js +++ b/ui/src/themes/SquiddiesGlass.css.js @@ -48,7 +48,6 @@ const stylesheet = ` color: #c231ab; } - @keyframes gradientFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } @@ -72,10 +71,10 @@ a[aria-current="page"] .MuiListItemIcon-root { overflow: hidden; background: linear-gradient(90deg, #311f2f, #0a0912, #2f0c28); background-size: 300% 300%; - animation: backgroundFlow 10s ease-in-out infinite; + animation: gradientFlow 10s ease-in-out infinite; } -/* Barras del "ecualizador" */ +/* Equalizer bars */ .panel-content::before { content: ""; position: absolute; @@ -92,19 +91,7 @@ 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%; - } -} - -/* Movimiento vertical tipo ecualizador */ +/* Vertical movement, equalizer type */ @keyframes equalizer { 0%, 100% { transform: scaleY(1); @@ -123,9 +110,6 @@ a[aria-current="page"] .MuiListItemIcon-root { opacity: 0.8; } } - - - ` export default stylesheet diff --git a/ui/src/themes/SquiddiesGlass.js b/ui/src/themes/SquiddiesGlass.js index 601f6d551..5929797ce 100644 --- a/ui/src/themes/SquiddiesGlass.js +++ b/ui/src/themes/SquiddiesGlass.js @@ -1,6 +1,10 @@ import stylesheet from './SquiddiesGlass.css.js' -// Color constants +/** + * Color constants used throughout the Squiddies Glass theme. + * Provides a consistent color palette with pink, gray, purple, and basic colors. + * @type {Object} + */ const colors = { pink: { 100: '#fbe3f4', @@ -10,22 +14,32 @@ const colors = { 500: '#c231ab', // base 600: '#a31a92', 700: '#8b0f7e', - 800: '#670066', - 900: '#7a006d', + 800: '#7a006d', + 900: '#670066', }, gray: { + 50: '#c2c1c2', 100: '#b3b3b3', // light gray 200: '#282828', // medium dark 300: '#1d1d1d', // darker 400: '#181818', // even darker 500: '#171717', // darkest }, + purple: { + 400: '#524590', + 500: '#4d3249', + 600: '#6d1c5e', + }, black: '#000', white: '#fff', dark: '#121212', } -// Shared style objects +/** + * Shared style object for music list action buttons. + * Defines common styling for buttons in music lists, including hover effects and responsive scaling. + * @type {Object} + */ const musicListActions = { padding: '1rem 0', alignItems: 'center', @@ -57,7 +71,7 @@ const musicListActions = { borderRadius: 500, border: 0, '&:hover': { - transform: 'scale(1.4)', + transform: 'scale(1.6)', backgroundColor: `${colors.pink[500]} !important`, border: 0, }, @@ -77,16 +91,35 @@ const musicListActions = { }, } +/** + * Squiddies Glass theme configuration object. + * Defines the complete theme structure including typography, palette, component overrides, and player settings. + * @type {Object} + */ export default { + /** + * The name of the theme. + * @type {string} + */ themeName: 'Squiddies Glass', + /** + * Typography settings for the theme. + * Specifies font family and heading sizes. + * @type {Object} + */ typography: { - fontFamily: "system-ui, 'Helvetica Neue', Helvetica, Arial", + fontFamily: "system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif", h6: { fontSize: '1rem', // AppBar title }, }, + /** + * Color palette configuration. + * Defines primary, secondary, and background colors for the theme. + * @type {Object} + */ palette: { primary: { light: colors.pink[300], @@ -103,6 +136,11 @@ export default { type: 'dark', }, + /** + * Component overrides for Material-UI and custom Navidrome components. + * Customizes the appearance and behavior of various UI components. + * @type {Object} + */ overrides: { // Material-UI Components MuiAppBar: { @@ -286,7 +324,7 @@ export default { }, '& .MuiOutlinedInput-input:-webkit-autofill': { borderRadius: '20px 0px 0px 20px', - '-webkit-box-shadow': '0 0 0 100px #c2c1c2 inset', + '-webkit-box-shadow': `0 0 0 100px ${colors.gray[50]} inset`, '-webkit-text-fill-color': colors.black, }, }, @@ -306,7 +344,7 @@ export default { borderTopRightRadius: '8px', borderTopLeftRadius: '8px', boxShadow: 'none', - background: 'linear-gradient(45deg, #4d3249, #524590, #6d1c5e)', + background: `linear-gradient(45deg, ${colors.purple[500]}, ${colors.purple[400]}, ${colors.purple[600]})`, backgroundSize: '200% 200%', animation: 'gradientFlow 8s ease-in-out infinite', position: 'relative', @@ -339,7 +377,7 @@ export default { }, recordMeta: { fontSize: '.875rem', - color: 'rgba(255,255,255, 0.8)', + color: `rgba(${colors.white}, 0.8)`, }, }, NDAlbumGridView: { @@ -445,14 +483,11 @@ export default { fontSize: '0.675rem', color: colors.gray[100], }, - player: { - border: '10px solid blue', - }, }, NDCollapsibleComment: { commentBlock: { fontSize: '.875rem', - color: 'rgba(255,255,255, 0.8)', + color: `rgba(${colors.white}, 0.8)`, }, }, NDLogin: { @@ -483,7 +518,7 @@ export default { }, details: { fontSize: '.875rem', - color: 'rgba(255,255,255, 0.8)', + color: `rgba(${colors.white}, 0.8)`, }, }, NDPlaylistShow: { @@ -491,6 +526,11 @@ export default { }, }, + /** + * Player configuration settings. + * Specifies the player theme and associated stylesheet. + * @type {Object} + */ player: { theme: 'dark', stylesheet, From d619e695c0910ce8184abccee031fb05d6a7017f Mon Sep 17 00:00:00 2001 From: Xavier Araque Date: Wed, 29 Oct 2025 13:55:05 +0100 Subject: [PATCH 3/7] feat: fix Prettier format --- ui/src/themes/SquiddiesGlass.js | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/ui/src/themes/SquiddiesGlass.js b/ui/src/themes/SquiddiesGlass.js index 5929797ce..6e2abbb36 100644 --- a/ui/src/themes/SquiddiesGlass.js +++ b/ui/src/themes/SquiddiesGlass.js @@ -85,9 +85,10 @@ const musicListActions = { 'button:first-child>span:first-child>span': { display: 'none', }, - 'button>span:first-child>span, button:not(:first-child)>span:first-child>svg': { - color: colors.gray[100], - }, + 'button>span:first-child>span, button:not(:first-child)>span:first-child>svg': + { + color: colors.gray[100], + }, }, } @@ -205,7 +206,8 @@ export default { padding: '10px !important', color: `${colors.gray[100]} !important`, '& img': { - filter: 'brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(7463%) hue-rotate(289deg) brightness(95%) contrast(102%);', + filter: + 'brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(7463%) hue-rotate(289deg) brightness(95%) contrast(102%);', }, '& img + span': { color: colors.pink[500], @@ -259,7 +261,7 @@ export default { }, contentWithSidebar: { gap: '2px', - } + }, }, RaList: { content: { @@ -462,9 +464,10 @@ export default { 'button:first-child>span:first-child': { padding: 0, }, - 'button>span:first-child>span, button:not(:first-child)>span:first-child>svg': { - color: colors.gray[100], - }, + 'button>span:first-child>span, button:not(:first-child)>span:first-child>svg': + { + color: colors.gray[100], + }, }, }, actionsContainer: { From d65292b22f924dbcd5193511d4b97471a87c3bfc Mon Sep 17 00:00:00 2001 From: Xavier Araque Date: Wed, 29 Oct 2025 15:38:41 +0100 Subject: [PATCH 4/7] 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, From cbdffc8e4c423e74027b68a96e8cbee20ec57044 Mon Sep 17 00:00:00 2001 From: Xavier Araque Date: Wed, 29 Oct 2025 15:40:17 +0100 Subject: [PATCH 5/7] feat: fix play button, and text mobile, prettier --- ui/src/themes/SquiddiesGlass.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/src/themes/SquiddiesGlass.js b/ui/src/themes/SquiddiesGlass.js index 83f4ab306..6ef470426 100644 --- a/ui/src/themes/SquiddiesGlass.js +++ b/ui/src/themes/SquiddiesGlass.js @@ -384,8 +384,8 @@ export default { }, content: { paddingBottom: '0px !important', - paddingTop: '0px' - } + paddingTop: '0px', + }, }, NDAlbumGridView: { albumName: { From 9cf63bea9cdfab41122c3e096597d2910d6c35a6 Mon Sep 17 00:00:00 2001 From: Xavier Araque Date: Wed, 29 Oct 2025 17:39:43 +0100 Subject: [PATCH 6/7] feat: fix chip, title artist --- ui/src/themes/SquiddiesGlass.css.js | 1 - ui/src/themes/SquiddiesGlass.js | 24 +++++++++++++++++++++--- 2 files changed, 21 insertions(+), 4 deletions(-) diff --git a/ui/src/themes/SquiddiesGlass.css.js b/ui/src/themes/SquiddiesGlass.css.js index f9c5a88db..a32716a77 100644 --- a/ui/src/themes/SquiddiesGlass.css.js +++ b/ui/src/themes/SquiddiesGlass.css.js @@ -54,7 +54,6 @@ const stylesheet = ` } } - @keyframes gradientFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } diff --git a/ui/src/themes/SquiddiesGlass.js b/ui/src/themes/SquiddiesGlass.js index 6ef470426..1bc579f5f 100644 --- a/ui/src/themes/SquiddiesGlass.js +++ b/ui/src/themes/SquiddiesGlass.js @@ -259,6 +259,8 @@ export default { content: { padding: '0 !important', background: `linear-gradient(${colors.dark}, ${colors.gray[500]})`, + borderTopRightRadius: '8px', + borderTopLeftRadius: '8px', }, contentWithSidebar: { gap: '2px', @@ -344,8 +346,6 @@ export default { // Navidrome Custom Components NDAlbumDetails: { root: { - borderTopRightRadius: '8px', - borderTopLeftRadius: '8px', boxShadow: 'none', background: `linear-gradient(45deg, ${colors.purple[500]}, ${colors.purple[400]}, ${colors.purple[600]})`, backgroundSize: '200% 200%', @@ -375,8 +375,9 @@ export default { fontWeight: 900, }, recordArtist: { - fontSize: '.875rem', + fontSize: '1.5rem', fontWeight: 700, + textShadow: '0 2px 16px rgba(0, 0, 0, 0.3)', }, recordMeta: { fontSize: '.875rem', @@ -387,6 +388,23 @@ export default { paddingTop: '0px', }, }, + RaSingleFieldList: { + root: { + '& a:first-of-type > .MuiChip-root': { + marginLeft: '0px', + }, + '& a > .MuiChip-root': { + backgroundColor: colors.pink[500], + fontSize: '0.6rem', + height: '20px', + '& .MuiChip-label': { + color: colors.white, + paddingLeft: '5px', + paddingRight: '5px', + }, + }, + }, + }, NDAlbumGridView: { albumName: { marginTop: '0.5rem', From ec7f5c89b1b50ef03d45847572b91d2d737fc10a Mon Sep 17 00:00:00 2001 From: Xavier Araque Date: Tue, 4 Nov 2025 19:58:49 +0100 Subject: [PATCH 7/7] 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%)',