From 317bc6f3840e4c7a82313034b1eaaa497a065990 Mon Sep 17 00:00:00 2001 From: gatzenga Date: Sun, 12 Jul 2026 00:54:58 +0200 Subject: [PATCH 1/3] Add Shelv theme --- ui/src/themes/index.js | 2 + ui/src/themes/shelv.js | 572 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 574 insertions(+) create mode 100644 ui/src/themes/shelv.js diff --git a/ui/src/themes/index.js b/ui/src/themes/index.js index 98705da30..e08314037 100644 --- a/ui/src/themes/index.js +++ b/ui/src/themes/index.js @@ -19,6 +19,7 @@ import RosePineMoonTheme from './rosePineMoon' import AmusicTheme from './amusic' import SquiddiesGlassTheme from './SquiddiesGlass' import NautilineTheme from './nautiline' +import ShelvTheme from './shelv' import MoonbaseAlphaTheme from './moonbaseAlpha' import MoonbaseBravoTheme from './moonbaseBravo' import TokyoNightLightTheme from './tokyoNightLight' @@ -49,6 +50,7 @@ export default { RosePineDawnTheme, RosePineMoonTheme, RosePineTheme, + ShelvTheme, SpotifyTheme, SquiddiesGlassTheme, TokyoNightLightTheme, diff --git a/ui/src/themes/shelv.js b/ui/src/themes/shelv.js new file mode 100644 index 000000000..646bfa882 --- /dev/null +++ b/ui/src/themes/shelv.js @@ -0,0 +1,572 @@ +import NautilineTheme from './nautiline' + +const colors = { + accent: '#7C3AED', + accentBright: '#8B5CF6', + accentSoft: 'rgba(124, 58, 237, 0.16)', + accentHover: 'rgba(124, 58, 237, 0.24)', + danger: '#F44336', + background: '#000000', + surface: '#1B1720', + elevated: '#27202D', + text: '#F7F5FA', + textSecondary: '#A9A4B0', + textTertiary: '#77717F', + separator: 'rgba(165, 125, 190, 0.16)', +} + +const appleFont = [ + '-apple-system', + 'BlinkMacSystemFont', + '"SF Pro Display"', + '"SF Pro Text"', + '"Helvetica Neue"', + 'Arial', + 'sans-serif', +].join(', ') + +const replacements = [ + [/"Unbounded", sans-serif/g, appleFont], + [/#009688/gi, colors.accent], + [/rgba\(0, 150, 136, 0\.1\)/g, colors.accentSoft], + [/rgba\(0, 150, 136, 0\.15\)/g, colors.accentHover], + [/#FFFFFF/gi, colors.background], + [/#F5F5F7/gi, colors.surface], + [/#E5E5EA/gi, colors.elevated], + [/#1A1A1A/gi, colors.text], + [/#8E8E93/gi, colors.textSecondary], + [/#AEAEB2/gi, colors.textTertiary], + [/rgba\(0, 0, 0, 0\.08\)/g, colors.separator], + [/rgba\(0, 0, 0, 0\.04\)/g, 'rgba(0, 0, 0, 0.28)'], + [/rgba\(255, 255, 255, 0\.72\)/g, 'rgba(27, 23, 32, 0.9)'], +] + +const recolor = (value) => { + if (typeof value === 'string') { + return replacements.reduce( + (result, [pattern, replacement]) => result.replace(pattern, replacement), + value, + ) + } + + if (Array.isArray(value)) return value.map(recolor) + + if (value && typeof value === 'object') { + return Object.fromEntries( + Object.entries(value).map(([key, child]) => [key, recolor(child)]), + ) + } + + return value +} + +const base = recolor(NautilineTheme) + +const formButtonBase = { + minWidth: 96, + minHeight: 40, + padding: '8px 14px', + borderRadius: '8px !important', + boxShadow: 'none', +} + +const formSaveButton = { + ...formButtonBase, + color: '#FFFFFF !important', + backgroundColor: `${colors.accent} !important`, + border: '1px solid transparent', + '&:hover': { + backgroundColor: `${colors.accentBright} !important`, + boxShadow: 'none', + }, + '&.Mui-disabled': { + color: `${colors.textTertiary} !important`, + backgroundColor: `${colors.elevated} !important`, + borderColor: colors.separator, + }, +} + +const ShelvTheme = { + ...base, + themeName: 'Shelv', + typography: { + ...base.typography, + fontFamily: appleFont, + h1: { ...base.typography.h1, fontFamily: appleFont, fontWeight: 700 }, + h2: { ...base.typography.h2, fontFamily: appleFont, fontWeight: 700 }, + h3: { ...base.typography.h3, fontFamily: appleFont, fontWeight: 650 }, + h4: { ...base.typography.h4, fontFamily: appleFont, fontWeight: 650 }, + h5: { ...base.typography.h5, fontFamily: appleFont, fontWeight: 600 }, + h6: { ...base.typography.h6, fontFamily: appleFont, fontWeight: 600 }, + button: { + ...base.typography.button, + fontFamily: appleFont, + fontWeight: 600, + letterSpacing: '-0.01em', + }, + }, + palette: { + ...base.palette, + type: 'dark', + primary: { main: colors.accent, contrastText: '#FFFFFF' }, + secondary: { main: colors.accentBright, contrastText: '#FFFFFF' }, + background: { default: colors.background, paper: colors.surface }, + text: { primary: colors.text, secondary: colors.textSecondary }, + divider: colors.separator, + action: { + ...base.palette.action, + active: colors.accentBright, + hover: colors.accentSoft, + selected: colors.accentHover, + }, + }, + shape: { borderRadius: 10 }, + overrides: { + ...base.overrides, + MuiCssBaseline: { + ...base.overrides.MuiCssBaseline, + '@global': { + ...base.overrides.MuiCssBaseline['@global'], + body: { + backgroundColor: colors.background, + }, + '*': { + scrollbarColor: `${colors.elevated} transparent`, + }, + }, + }, + MuiButton: { + ...base.overrides.MuiButton, + root: { + ...base.overrides.MuiButton.root, + borderRadius: 6, + }, + }, + RaSaveButton: { + ...base.overrides.RaSaveButton, + button: { + ...base.overrides.RaSaveButton?.button, + ...formSaveButton, + }, + }, + NDPluginShow: { + ...base.overrides.NDPluginShow, + saveButton: { + ...base.overrides.NDPluginShow?.saveButton, + ...formSaveButton, + }, + }, + MuiIconButton: { + ...base.overrides.MuiIconButton, + root: { + ...base.overrides.MuiIconButton.root, + borderRadius: 999, + transition: 'background-color 120ms ease, color 120ms ease', + '&:hover': { + backgroundColor: colors.accentSoft, + color: colors.accentBright, + }, + }, + }, + MuiCheckbox: { + ...base.overrides.MuiCheckbox, + root: { + ...base.overrides.MuiCheckbox.root, + color: 'rgba(165, 125, 190, 0.68)', + '&:hover': { + color: colors.text, + backgroundColor: colors.accentSoft, + }, + '&$checked': { + color: colors.accentBright, + }, + }, + }, + MuiPaper: { + ...base.overrides.MuiPaper, + root: { + ...base.overrides.MuiPaper.root, + backgroundColor: colors.surface, + backgroundImage: 'none', + }, + }, + MuiPopover: { + ...base.overrides.MuiPopover, + root: { + ...base.overrides.MuiPopover?.root, + '&[id="menu-appbar"], &[id="panel-activity"], &[id="panel-nowplaying"]': + { + '& .MuiPopover-paper': { + backgroundColor: colors.surface, + borderRadius: 10, + overflow: 'hidden', + }, + '& .MuiCard-root': { + backgroundColor: 'transparent', + borderRadius: 0, + boxShadow: 'none', + }, + '& .MuiCardContent-root, & .MuiCardActions-root': { + backgroundColor: 'transparent', + }, + }, + }, + }, + MuiTableCell: { + ...base.overrides.MuiTableCell, + root: { + ...base.overrides.MuiTableCell.root, + borderBottomColor: colors.separator, + }, + head: { + ...base.overrides.MuiTableCell.head, + backgroundColor: colors.surface, + color: colors.textSecondary, + }, + }, + MuiTableRow: { + ...base.overrides.MuiTableRow, + root: { + ...base.overrides.MuiTableRow.root, + backgroundColor: colors.surface, + '&:hover': { + backgroundColor: `${colors.elevated} !important`, + }, + }, + }, + RaDatagrid: { + ...base.overrides.RaDatagrid, + rowCell: { + ...base.overrides.RaDatagrid?.rowCell, + '&&': { + paddingTop: '14px !important', + paddingBottom: '14px !important', + }, + }, + }, + RaList: { + ...base.overrides.RaList, + root: { + ...base.overrides.RaList?.root, + backgroundColor: colors.surface, + border: `1px solid ${colors.separator}`, + borderRadius: 14, + overflow: 'hidden', + '& > .MuiBox-root:last-child': { + paddingBottom: 24, + }, + }, + toolbar: { + ...base.overrides.RaList?.toolbar, + backgroundColor: colors.surface, + alignItems: 'center', + border: `1px solid ${colors.separator}`, + borderBottom: 0, + borderRadius: '14px 14px 0 0', + boxSizing: 'border-box', + '& + div > .MuiCard-root': { + borderLeft: `1px solid ${colors.separator}`, + borderRight: `1px solid ${colors.separator}`, + }, + '& ~ .MuiTablePagination-root': { + borderLeft: `1px solid ${colors.separator}`, + borderRight: `1px solid ${colors.separator}`, + borderBottom: `1px solid ${colors.separator}`, + borderRadius: '0 0 14px 14px', + overflow: 'hidden', + }, + '& ~ .MuiCardContent-root': { + minHeight: 80, + padding: '20px 24px !important', + boxSizing: 'border-box', + backgroundColor: colors.surface, + borderLeft: `1px solid ${colors.separator}`, + borderRight: `1px solid ${colors.separator}`, + borderBottom: `1px solid ${colors.separator}`, + borderRadius: '0 0 14px 14px', + color: colors.textSecondary, + '& .MuiTypography-root': { + fontSize: '1rem', + fontWeight: 400, + textAlign: 'left', + }, + }, + }, + content: { + ...base.overrides.RaList.content, + marginTop: 0, + backgroundColor: colors.surface, + borderRadius: 0, + boxShadow: 'none', + overflow: 'hidden', + }, + }, + RaEmpty: { + ...base.overrides.RaEmpty, + message: { + ...base.overrides.RaEmpty?.message, + '&:last-child': { + paddingBottom: 24, + }, + }, + toolbar: { + ...base.overrides.RaEmpty?.toolbar, + paddingBottom: 24, + }, + }, + RaListToolbar: { + ...base.overrides.RaListToolbar, + toolbar: { + ...base.overrides.RaListToolbar?.toolbar, + backgroundColor: colors.surface, + paddingLeft: '16px !important', + paddingRight: '16px !important', + borderBottom: `1px solid ${colors.separator}`, + }, + actions: { + ...base.overrides.RaListToolbar?.actions, + backgroundColor: colors.surface, + }, + }, + RaSimpleList: { + ...base.overrides.RaSimpleList, + link: { + ...base.overrides.RaSimpleList?.link, + '& .MuiListItem-root': { + paddingTop: 16, + paddingBottom: 16, + }, + }, + }, + RaArtistSimpleList: { + ...base.overrides.RaArtistSimpleList, + listItem: { + ...base.overrides.RaArtistSimpleList?.listItem, + padding: 16, + }, + rightIcon: { + ...base.overrides.RaArtistSimpleList?.rightIcon, + top: '50%', + }, + }, + MuiTablePagination: { + ...base.overrides.MuiTablePagination, + root: { + ...base.overrides.MuiTablePagination?.root, + backgroundColor: colors.surface, + borderTop: `1px solid ${colors.separator}`, + borderBottom: 0, + }, + }, + RaToolbar: { + ...base.overrides.RaToolbar, + toolbar: { + ...base.overrides.RaToolbar?.toolbar, + backgroundColor: 'transparent', + boxShadow: 'none', + '& .MuiButton-root': { + ...formButtonBase, + fontWeight: 600, + transition: + 'background-color 120ms ease, border-color 120ms ease, color 120ms ease', + }, + '& .MuiButton-root .MuiButton-label svg': { + fontSize: '18px !important', + }, + '& .ra-delete-button': { + color: '#FFFFFF !important', + backgroundColor: `${colors.danger} !important`, + border: '1px solid transparent', + '&:hover': { + color: '#FFFFFF !important', + backgroundColor: '#C62828 !important', + borderColor: 'transparent', + }, + '&.Mui-disabled': { + color: 'rgba(255, 92, 87, 0.38) !important', + backgroundColor: `${colors.elevated} !important`, + borderColor: colors.separator, + }, + }, + }, + desktopToolbar: { + ...base.overrides.RaToolbar?.desktopToolbar, + width: 'fit-content', + minHeight: 0, + padding: '0 16px !important', + gap: 12, + }, + defaultToolbar: { + ...base.overrides.RaToolbar?.defaultToolbar, + justifyContent: 'flex-start', + gap: 12, + }, + mobileToolbar: { + ...base.overrides.RaToolbar?.mobileToolbar, + backgroundColor: colors.surface, + }, + }, + RaAppBar: { + ...base.overrides.RaAppBar, + title: { + ...base.overrides.RaAppBar?.title, + color: colors.accentBright, + }, + }, + NDPlaylistShow: { + ...base.overrides.NDPlaylistShow, + playlistActions: { + ...base.overrides.NDPlaylistShow?.playlistActions, + padding: '0 8px', + alignItems: 'center', + '& > div': { + justifyContent: 'space-between', + alignItems: 'center', + }, + '& > div > div': { + display: 'flex', + alignItems: 'center', + }, + '@global': { + ...base.overrides.NDPlaylistShow?.playlistActions?.['@global'], + button: { + ...base.overrides.NDPlaylistShow?.playlistActions?.['@global'] + ?.button, + margin: '0 4px', + padding: 8, + }, + 'button:first-child:not(:only-child)': { + ...base.overrides.NDPlaylistShow?.playlistActions?.['@global']?.[ + 'button:first-child:not(:only-child)' + ], + transform: 'scale(1.35)', + margin: '4px 10px', + padding: 4, + '@media screen and (max-width: 720px)': { + transform: 'scale(1.25)', + margin: '4px 8px', + '&:hover': { + transform: 'scale(1.3) !important', + }, + }, + '&:hover': { + ...base.overrides.NDPlaylistShow?.playlistActions?.['@global']?.[ + 'button:first-child:not(:only-child)' + ]?.['&:hover'], + transform: 'scale(1.42) !important', + }, + }, + 'button:only-child': { + ...base.overrides.NDPlaylistShow?.playlistActions?.['@global']?.[ + 'button:only-child' + ], + margin: 4, + padding: 4, + backgroundColor: 'transparent', + }, + }, + }, + }, + MuiAppBar: { + ...base.overrides.MuiAppBar, + root: { + ...base.overrides.MuiAppBar.root, + backgroundColor: 'rgba(0, 0, 0, 0.9)', + backdropFilter: 'blur(16px)', + borderBottom: `1px solid ${colors.separator}`, + }, + colorSecondary: { + backgroundColor: 'rgba(0, 0, 0, 0.9)', + color: colors.text, + }, + }, + MuiToolbar: { + root: { backgroundColor: 'transparent' }, + }, + MuiDialog: { + ...base.overrides.MuiDialog, + paper: { + ...base.overrides.MuiDialog?.paper, + borderRadius: 12, + border: `1px solid ${colors.separator}`, + boxShadow: '0 18px 48px rgba(0, 0, 0, 0.38)', + '& #config-panel .MuiButton-root + .MuiButton-root': { + marginLeft: 12, + }, + }, + }, + MuiTooltip: { + ...base.overrides.MuiTooltip, + tooltip: { + ...base.overrides.MuiTooltip?.tooltip, + borderRadius: 8, + backgroundColor: colors.elevated, + color: colors.text, + border: `1px solid ${colors.separator}`, + }, + }, + }, + player: { + ...base.player, + theme: 'dark', + stylesheet: `${base.player.stylesheet} + .react-jinke-music-player-main .music-player-panel .player-content svg { + font-size: 28px !important; + } + + .react-jinke-music-player-main .music-player-panel .player-content .play-btn svg, + .react-jinke-music-player-main .music-player-panel .player-content .play-btn:hover svg, + .react-jinke-music-player-mobile-toggle .play-btn svg { + color: ${colors.accent} !important; + } + + .react-jinke-music-player-main .music-player-panel .player-content .play-btn svg { + font-size: 36px !important; + } + + .react-jinke-music-player-main .music-player-panel .player-content .lyric-btn svg { + font-size: 22px !important; + } + + .react-jinke-music-player-main .music-player-panel .player-content .audio-lists-btn { + min-width: auto !important; + padding: 0 4px !important; + background-color: transparent !important; + box-shadow: none !important; + } + + .react-jinke-music-player-main .audio-lists-panel, + .react-jinke-music-player-main .audio-lists-panel-content, + .audio-lists-panel, + .audio-lists-panel-content { + background-color: ${colors.elevated} !important; + } + + .react-jinke-music-player-main .audio-lists-panel-header, + .audio-lists-panel-header { + background-color: #30263A !important; + border-bottom: 1px solid ${colors.separator} !important; + box-shadow: none !important; + } + + .react-jinke-music-player-main .audio-lists-panel-content .audio-item, + .audio-lists-panel-content .audio-item { + background-color: ${colors.surface} !important; + border-bottom: 1px solid ${colors.separator} !important; + } + + .react-jinke-music-player-main .audio-lists-panel-content .audio-item:hover, + .audio-lists-panel-content .audio-item:hover { + background-color: ${colors.accentSoft} !important; + } + + .react-jinke-music-player-main .audio-lists-panel-content .audio-item.playing, + .audio-lists-panel-content .audio-item.playing { + background-color: ${colors.accentHover} !important; + color: ${colors.accentBright} !important; + } + `, + }, +} + +export default ShelvTheme From 3627fbd54a7457a7cf8d00af00cf22fe4a919552 Mon Sep 17 00:00:00 2001 From: gatzenga Date: Sun, 12 Jul 2026 01:32:03 +0200 Subject: [PATCH 2/3] Update Shelv theme --- ui/src/themes/shelv.js | 1221 ++++++++++++++++++++++++++-------------- 1 file changed, 812 insertions(+), 409 deletions(-) diff --git a/ui/src/themes/shelv.js b/ui/src/themes/shelv.js index 646bfa882..285072e2c 100644 --- a/ui/src/themes/shelv.js +++ b/ui/src/themes/shelv.js @@ -1,203 +1,712 @@ -import NautilineTheme from './nautiline' - -const colors = { - accent: '#7C3AED', - accentBright: '#8B5CF6', - accentSoft: 'rgba(124, 58, 237, 0.16)', - accentHover: 'rgba(124, 58, 237, 0.24)', - danger: '#F44336', - background: '#000000', - surface: '#1B1720', - elevated: '#27202D', - text: '#F7F5FA', - textSecondary: '#A9A4B0', - textTertiary: '#77717F', - separator: 'rgba(165, 125, 190, 0.16)', -} - -const appleFont = [ - '-apple-system', - 'BlinkMacSystemFont', - '"SF Pro Display"', - '"SF Pro Text"', - '"Helvetica Neue"', - 'Arial', - 'sans-serif', -].join(', ') - -const replacements = [ - [/"Unbounded", sans-serif/g, appleFont], - [/#009688/gi, colors.accent], - [/rgba\(0, 150, 136, 0\.1\)/g, colors.accentSoft], - [/rgba\(0, 150, 136, 0\.15\)/g, colors.accentHover], - [/#FFFFFF/gi, colors.background], - [/#F5F5F7/gi, colors.surface], - [/#E5E5EA/gi, colors.elevated], - [/#1A1A1A/gi, colors.text], - [/#8E8E93/gi, colors.textSecondary], - [/#AEAEB2/gi, colors.textTertiary], - [/rgba\(0, 0, 0, 0\.08\)/g, colors.separator], - [/rgba\(0, 0, 0, 0\.04\)/g, 'rgba(0, 0, 0, 0.28)'], - [/rgba\(255, 255, 255, 0\.72\)/g, 'rgba(27, 23, 32, 0.9)'], -] - -const recolor = (value) => { - if (typeof value === 'string') { - return replacements.reduce( - (result, [pattern, replacement]) => result.replace(pattern, replacement), - value, - ) - } - - if (Array.isArray(value)) return value.map(recolor) - - if (value && typeof value === 'object') { - return Object.fromEntries( - Object.entries(value).map(([key, child]) => [key, recolor(child)]), - ) - } - - return value -} - -const base = recolor(NautilineTheme) - -const formButtonBase = { - minWidth: 96, - minHeight: 40, - padding: '8px 14px', - borderRadius: '8px !important', - boxShadow: 'none', -} - -const formSaveButton = { - ...formButtonBase, - color: '#FFFFFF !important', - backgroundColor: `${colors.accent} !important`, - border: '1px solid transparent', - '&:hover': { - backgroundColor: `${colors.accentBright} !important`, - boxShadow: 'none', - }, - '&.Mui-disabled': { - color: `${colors.textTertiary} !important`, - backgroundColor: `${colors.elevated} !important`, - borderColor: colors.separator, - }, -} +/** + * Shelv Theme for Navidrome + * A standalone dark theme with a modern violet interface. + */ const ShelvTheme = { - ...base, themeName: 'Shelv', + palette: { + type: 'dark', + primary: { main: '#7C3AED', contrastText: '#FFFFFF' }, + secondary: { main: '#8B5CF6', contrastText: '#FFFFFF' }, + background: { default: '#000000', paper: '#1B1720' }, + text: { primary: '#F7F5FA', secondary: '#A9A4B0' }, + action: { + active: '#8B5CF6', + hover: 'rgba(124, 58, 237, 0.16)', + selected: 'rgba(124, 58, 237, 0.24)', + }, + divider: 'rgba(165, 125, 190, 0.16)', + }, typography: { - ...base.typography, - fontFamily: appleFont, - h1: { ...base.typography.h1, fontFamily: appleFont, fontWeight: 700 }, - h2: { ...base.typography.h2, fontFamily: appleFont, fontWeight: 700 }, - h3: { ...base.typography.h3, fontFamily: appleFont, fontWeight: 650 }, - h4: { ...base.typography.h4, fontFamily: appleFont, fontWeight: 650 }, - h5: { ...base.typography.h5, fontFamily: appleFont, fontWeight: 600 }, - h6: { ...base.typography.h6, fontFamily: appleFont, fontWeight: 600 }, - button: { - ...base.typography.button, - fontFamily: appleFont, - fontWeight: 600, + fontFamily: + '-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif', + h1: { + fontFamily: + '-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif', + fontWeight: 700, + letterSpacing: '-0.02em', + }, + h2: { + fontFamily: + '-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif', + fontWeight: 700, + letterSpacing: '-0.02em', + }, + h3: { + fontFamily: + '-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif', + fontWeight: 650, letterSpacing: '-0.01em', }, - }, - palette: { - ...base.palette, - type: 'dark', - primary: { main: colors.accent, contrastText: '#FFFFFF' }, - secondary: { main: colors.accentBright, contrastText: '#FFFFFF' }, - background: { default: colors.background, paper: colors.surface }, - text: { primary: colors.text, secondary: colors.textSecondary }, - divider: colors.separator, - action: { - ...base.palette.action, - active: colors.accentBright, - hover: colors.accentSoft, - selected: colors.accentHover, + h4: { + fontFamily: + '-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif', + fontWeight: 650, + }, + h5: { + fontFamily: + '-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif', + fontWeight: 600, + }, + h6: { + fontFamily: + '-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif', + fontWeight: 600, + }, + subtitle1: { fontWeight: 500 }, + subtitle2: { fontWeight: 500 }, + body1: { fontWeight: 400 }, + body2: { fontWeight: 400 }, + button: { + fontWeight: 600, + textTransform: 'none', + fontFamily: + '-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif', + letterSpacing: '-0.01em', }, }, shape: { borderRadius: 10 }, overrides: { - ...base.overrides, MuiCssBaseline: { - ...base.overrides.MuiCssBaseline, '@global': { - ...base.overrides.MuiCssBaseline['@global'], - body: { - backgroundColor: colors.background, - }, - '*': { - scrollbarColor: `${colors.elevated} transparent`, - }, + body: { backgroundColor: '#000000' }, + '*': { scrollbarColor: '#27202D transparent' }, + }, + }, + MuiAppBar: { + root: { + boxShadow: 'none', + borderBottom: '1px solid rgba(165, 125, 190, 0.16)', + backgroundColor: 'rgba(0, 0, 0, 0.9)', + backdropFilter: 'blur(16px)', + }, + colorSecondary: { + backgroundColor: 'rgba(0, 0, 0, 0.9)', + color: '#F7F5FA', + }, + }, + MuiToolbar: { root: { backgroundColor: 'transparent' } }, + MuiPaper: { + root: { backgroundColor: '#1B1720', backgroundImage: 'none' }, + elevation1: { boxShadow: '0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.28)' }, + elevation2: { boxShadow: '0 0.125rem 0.5rem rgba(0, 0, 0, 0.28)' }, + }, + MuiCard: { + root: { + backgroundColor: '#000000', + borderRadius: '0.75rem', + boxShadow: '0 0.125rem 0.5rem rgba(0, 0, 0, 0.28)', }, }, MuiButton: { - ...base.overrides.MuiButton, + root: { borderRadius: 6, textTransform: 'none', fontWeight: 600 }, + contained: { boxShadow: 'none', '&:hover': { boxShadow: 'none' } }, + containedPrimary: { + backgroundColor: '#7C3AED', + '&:hover': { backgroundColor: '#7C3AED', filter: 'brightness(0.9)' }, + }, + text: { color: '#7C3AED' }, + }, + MuiIconButton: { root: { - ...base.overrides.MuiButton.root, - borderRadius: 6, + color: '#F7F5FA', + '&:hover': { + backgroundColor: 'rgba(124, 58, 237, 0.16)', + color: '#8B5CF6', + }, + borderRadius: 999, + transition: 'background-color 120ms ease, color 120ms ease', + }, + colorPrimary: { color: '#7C3AED' }, + sizeSmall: { padding: '0.75rem' }, + }, + MuiSvgIcon: { colorPrimary: { color: '#7C3AED' } }, + MuiCheckbox: { + root: { + color: 'rgba(165, 125, 190, 0.68)', + '&$checked': { color: '#8B5CF6' }, + '&:hover': { + color: '#F7F5FA', + backgroundColor: 'rgba(124, 58, 237, 0.16)', + }, }, }, - RaSaveButton: { - ...base.overrides.RaSaveButton, + MuiChip: { + root: { + backgroundColor: '#1B1720', + color: '#F7F5FA', + borderRadius: '1rem', + }, + colorPrimary: { + backgroundColor: 'rgba(124, 58, 237, 0.16)', + color: '#7C3AED', + }, + }, + MuiTableRow: { + root: { + '&:hover': { backgroundColor: '#27202D !important' }, + backgroundColor: '#1B1720', + }, + }, + MuiTableCell: { + root: { borderBottomColor: 'rgba(165, 125, 190, 0.16)' }, + head: { + backgroundColor: '#1B1720', + color: '#A9A4B0', + fontWeight: 600, + fontSize: '0.75rem', + textTransform: 'uppercase', + letterSpacing: '0.05em', + }, + body: { color: '#F7F5FA' }, + }, + MuiListItem: { + root: { + color: '#F7F5FA', + '&:hover': { backgroundColor: 'rgba(124, 58, 237, 0.16)' }, + '&$selected': { + backgroundColor: 'rgba(124, 58, 237, 0.16)', + color: '#7C3AED', + '& .MuiListItemIcon-root': { color: '#7C3AED' }, + '&:hover': { backgroundColor: 'rgba(124, 58, 237, 0.16)' }, + }, + }, button: { - ...base.overrides.RaSaveButton?.button, - ...formSaveButton, + color: '#F7F5FA', + '&:hover': { + backgroundColor: 'rgba(124, 58, 237, 0.16)', + color: '#F7F5FA', + }, + }, + }, + MuiListItemIcon: { + root: { + color: '#F7F5FA', + minWidth: '2.5rem', + '& svg': { fontSize: '1.25rem' }, + }, + }, + MuiListItemText: { primary: { color: 'inherit' } }, + MuiMenuItem: { + root: { + fontSize: '0.875rem', + paddingTop: '4px', + paddingBottom: '4px', + paddingLeft: '10px', + margin: '5px', + borderRadius: '0.5rem', + color: '#F7F5FA', + }, + }, + MuiDrawer: { + paper: { + backgroundColor: '#000000', + borderRight: '1px solid rgba(165, 125, 190, 0.16)', + }, + }, + MuiSlider: { + root: { color: '#7C3AED' }, + track: { backgroundColor: '#7C3AED' }, + thumb: { + backgroundColor: '#7C3AED', + '&:hover': { boxShadow: '0 0 0 0.5rem rgba(124, 58, 237, 0.16)' }, + }, + rail: { backgroundColor: '#27202D' }, + }, + MuiLinearProgress: { + root: { backgroundColor: '#27202D', borderRadius: '0.25rem' }, + bar: { backgroundColor: '#7C3AED', borderRadius: '0.25rem' }, + }, + MuiTabs: { + root: { borderBottom: '1px solid rgba(165, 125, 190, 0.16)' }, + indicator: { + backgroundColor: '#7C3AED', + height: '0.1875rem', + borderRadius: '0.1875rem 0.1875rem 0 0', + }, + }, + MuiTab: { + root: { + textTransform: 'none', + fontWeight: 500, + fontFamily: + '-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif', + '&$selected': { color: '#7C3AED', fontWeight: 600 }, + }, + }, + MuiInputBase: { + root: { backgroundColor: '#1B1720', borderRadius: '0.625rem' }, + }, + MuiOutlinedInput: { + root: { + borderRadius: '0.625rem', + '& $notchedOutline': { borderColor: 'rgba(165, 125, 190, 0.16)' }, + '&:hover $notchedOutline': { borderColor: '#77717F' }, + '&$focused $notchedOutline': { + borderColor: '#7C3AED', + borderWidth: '0.125rem', + }, + }, + }, + MuiFilledInput: { + root: { + backgroundColor: '#1B1720', + borderRadius: '0.625rem', + '&:hover': { backgroundColor: '#27202D' }, + '&$focused': { backgroundColor: '#1B1720' }, + }, + }, + MuiFab: { + primary: { + backgroundColor: '#7C3AED', + '&:hover': { backgroundColor: '#7C3AED', filter: 'brightness(0.9)' }, + }, + }, + MuiAvatar: { root: { borderRadius: '0.5rem' } }, + MuiRating: { + iconFilled: { color: '#7C3AED' }, + iconHover: { color: '#7C3AED' }, + }, + MuiTooltip: { + tooltip: { + backgroundColor: '#27202D', + color: '#F7F5FA', + fontSize: '0.75rem', + padding: '0.25rem 0.5rem', + borderRadius: 8, + border: '1px solid rgba(165, 125, 190, 0.16)', + }, + }, + MuiBottomNavigation: { + root: { + backgroundColor: 'rgba(27, 23, 32, 0.9)', + backdropFilter: 'blur(1.25rem)', + borderTop: '1px solid rgba(165, 125, 190, 0.16)', + }, + }, + MuiBottomNavigationAction: { + root: { color: '#A9A4B0', '&$selected': { color: '#7C3AED' } }, + label: { + fontFamily: + '-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif', + fontSize: '0.65rem', + '&$selected': { fontSize: '0.65rem' }, + }, + }, + NDAppBar: { root: { color: '#F7F5FA' } }, + NDLogin: { + main: { backgroundColor: '#000000' }, + card: { + backgroundColor: '#000000', + borderRadius: '1rem', + boxShadow: '0 0.25rem 1.5rem rgba(0, 0, 0, 0.28)', + }, + }, + NDAlbumGridView: { + albumContainer: { + borderRadius: '0.5rem', + '& img': { borderRadius: '0.5rem' }, + }, + albumTitle: { fontWeight: 600, color: '#F7F5FA' }, + albumSubtitle: { color: '#A9A4B0' }, + albumPlayButton: { + backgroundColor: '#7C3AED', + borderRadius: '50%', + boxShadow: '0 0.5rem 0.5rem rgba(0, 0, 0, 0.15)', + padding: '0.35rem', + transition: 'padding .3s ease', + '&:hover': { + backgroundColor: '#7C3AED !important', + padding: '0.45rem', + }, + }, + }, + NDAlbumDetails: { + root: { + '@media (max-width: 599px)': { padding: '0.7em', minWidth: 'unset' }, + }, + cardContents: { + '@media (max-width: 599px)': { + flexDirection: 'column', + alignItems: 'center', + }, + }, + details: { '@media (max-width: 599px)': { width: '100%' } }, + cover: { borderRadius: '0.5rem' }, + coverParent: { + marginRight: '1.5rem', + '@media (max-width: 599px)': { + width: '100%', + height: 'auto', + minWidth: 'unset', + aspectRatio: '1', + marginRight: 0, + marginBottom: '1rem', + }, + '@media (min-width: 600px)': { + height: '14em', + width: '14em', + minWidth: '14em', + }, + '@media (min-width: 1280px)': { + height: '18em', + width: '18em', + minWidth: '18em', + }, + }, + recordName: { + fontSize: '1.75rem', + fontWeight: 700, + marginBottom: '0.15rem', + }, + recordArtist: { marginBottom: '0.75rem' }, + recordMeta: { marginBottom: '0.5rem' }, + genreList: { marginTop: '0.75rem' }, + loveButton: { marginLeft: '0.5rem' }, + }, + NDAlbumShow: { + albumActions: { + padding: '1rem 0', + alignItems: 'center', + '@global': { + button: { + border: '1px solid transparent', + backgroundColor: '#1B1720', + color: '#A9A4B0', + margin: '0 0.5rem', + borderRadius: '50%', + minWidth: 0, + padding: '1rem', + position: 'relative', + '&:hover': { + backgroundColor: '#27202D !important', + border: '1px solid transparent', + }, + }, + 'button:first-child:not(:only-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: '0.3125rem', + transition: 'transform .3s ease', + background: '#7C3AED', + color: '#fff', + borderRadius: '50%', + border: 0, + '&:hover': { + transform: 'scale(2.1)', + backgroundColor: '#7C3AED !important', + border: 0, + }, + }, + 'button:only-child': { margin: '1.5rem' }, + 'button:first-child>span:first-child': { padding: 0 }, + 'button>span:first-child>span': { display: 'none' }, + 'button:not(:first-child):hover>span:first-child>span': { + display: 'inline', + position: 'absolute', + bottom: '100%', + left: '50%', + transform: 'translateX(-50%)', + marginBottom: '0.25rem', + fontSize: '0.75rem', + whiteSpace: 'nowrap', + backgroundColor: '#F7F5FA', + color: '#000000', + padding: '0.25rem 0.5rem', + borderRadius: '0.25rem', + zIndex: 9999, + }, + 'button:not(:first-child)>span:first-child>svg': { color: '#A9A4B0' }, + }, + }, + }, + NDPlaylistShow: { + playlistActions: { + padding: '0 8px', + alignItems: 'center', + '@global': { + button: { + border: '1px solid transparent', + backgroundColor: '#1B1720', + color: '#A9A4B0', + margin: '0 4px', + borderRadius: '50%', + minWidth: 0, + padding: 8, + position: 'relative', + '&:hover': { + backgroundColor: '#27202D !important', + border: '1px solid transparent', + }, + }, + 'button:first-child:not(:only-child)': { + '@media screen and (max-width: 720px)': { + transform: 'scale(1.25)', + margin: '4px 8px', + '&:hover': { transform: 'scale(1.3) !important' }, + }, + transform: 'scale(1.35)', + margin: '4px 10px', + minWidth: 0, + padding: 4, + transition: 'transform .3s ease', + background: '#7C3AED', + color: '#fff', + borderRadius: '50%', + border: 0, + '&:hover': { + transform: 'scale(1.42) !important', + backgroundColor: '#7C3AED !important', + border: 0, + }, + }, + 'button:only-child': { + margin: 4, + padding: 4, + backgroundColor: 'transparent', + }, + 'button:first-child>span:first-child': { padding: 0 }, + 'button>span:first-child>span': { display: 'none' }, + 'button:not(:first-child):hover>span:first-child>span': { + display: 'inline', + position: 'absolute', + bottom: '100%', + left: '50%', + transform: 'translateX(-50%)', + marginBottom: '0.25rem', + fontSize: '0.75rem', + whiteSpace: 'nowrap', + backgroundColor: '#F7F5FA', + color: '#000000', + padding: '0.25rem 0.5rem', + borderRadius: '0.25rem', + zIndex: 9999, + }, + 'button:not(:first-child)>span:first-child>svg': { color: '#A9A4B0' }, + }, + '& > div': { justifyContent: 'space-between', alignItems: 'center' }, + '& > div > div': { display: 'flex', alignItems: 'center' }, + }, + }, + NDSubMenu: { + icon: { + color: '#F7F5FA', + minWidth: '2.5rem', + '& svg': { fontSize: '1.25rem' }, + }, + menuHeader: { + color: '#F7F5FA', + '& .MuiTypography-root': { color: '#F7F5FA' }, + }, + actionIcon: { marginLeft: '0.5rem' }, + }, + RaMenuItemLink: { + root: { + color: '#F7F5FA !important', + '& .MuiListItemIcon-root': { + color: '#F7F5FA', + minWidth: '2.5rem', + '& svg': { fontSize: '1.25rem' }, + }, + '&[class*="makeStyles-active"]': { + color: '#7C3AED !important', + '& .MuiListItemIcon-root': { color: '#7C3AED !important' }, + }, + }, + active: { + color: '#7C3AED !important', + '& .MuiListItemIcon-root': { color: '#7C3AED !important' }, + }, + }, + NDDesktopArtistDetails: { + root: { + '@media (min-width: 600px)': { padding: '1em' }, + '@media (min-width: 1280px)': { padding: '1em' }, + }, + cover: { + borderRadius: '0.5rem', + '@media (min-width: 600px)': { + height: '14em', + width: '14em', + minWidth: '14em', + }, + '@media (min-width: 1280px)': { + height: '18em', + width: '18em', + minWidth: '18em', + }, + }, + artistImage: { + borderRadius: '0.5rem', + marginRight: '1.5rem', + '@media (min-width: 600px)': { + height: '14em', + width: '14em', + minWidth: '14em', + maxHeight: '14em', + minHeight: '14em', + }, + '@media (min-width: 1280px)': { + height: '18em', + width: '18em', + minWidth: '18em', + maxHeight: '18em', + minHeight: '18em', + }, + }, + artistName: { + fontSize: '1.75rem', + fontWeight: 700, + marginBottom: '0.5rem', + }, + }, + NDMobileArtistDetails: { + cover: { borderRadius: '0.5rem' }, + artistImage: { borderRadius: '0.5rem' }, + }, + RaList: { + content: { + overflow: 'hidden', + marginTop: 0, + backgroundColor: '#1B1720', + borderRadius: 0, + boxShadow: 'none', + }, + root: { + backgroundColor: '#1B1720', + border: '1px solid rgba(165, 125, 190, 0.16)', + borderRadius: 14, + overflow: 'hidden', + '& > .MuiBox-root:last-child': { paddingBottom: 24 }, + }, + toolbar: { + backgroundColor: '#1B1720', + alignItems: 'center', + border: '1px solid rgba(165, 125, 190, 0.16)', + borderBottom: 0, + borderRadius: '14px 14px 0 0', + boxSizing: 'border-box', + '& + div > .MuiCard-root': { + borderLeft: '1px solid rgba(165, 125, 190, 0.16)', + borderRight: '1px solid rgba(165, 125, 190, 0.16)', + }, + '& ~ .MuiTablePagination-root': { + borderLeft: '1px solid rgba(165, 125, 190, 0.16)', + borderRight: '1px solid rgba(165, 125, 190, 0.16)', + borderBottom: '1px solid rgba(165, 125, 190, 0.16)', + borderRadius: '0 0 14px 14px', + overflow: 'hidden', + }, + '& ~ .MuiCardContent-root': { + minHeight: 80, + padding: '20px 24px !important', + boxSizing: 'border-box', + backgroundColor: '#1B1720', + borderLeft: '1px solid rgba(165, 125, 190, 0.16)', + borderRight: '1px solid rgba(165, 125, 190, 0.16)', + borderBottom: '1px solid rgba(165, 125, 190, 0.16)', + borderRadius: '0 0 14px 14px', + color: '#A9A4B0', + '& .MuiTypography-root': { + fontSize: '1rem', + fontWeight: 400, + textAlign: 'left', + }, + }, + }, + }, + RaBulkActionsToolbar: { + topToolbar: { + backgroundColor: 'transparent', + boxShadow: 'none', + padding: '0.5rem', + '@global': { + button: { + border: '1px solid transparent', + backgroundColor: '#1B1720', + color: '#A9A4B0', + margin: '0 0.25rem', + borderRadius: '50%', + minWidth: 0, + padding: '0.5rem', + position: 'relative', + '&:hover': { + backgroundColor: '#27202D !important', + border: '1px solid transparent', + }, + }, + 'button>span:first-child>span': { display: 'none' }, + 'button:hover>span:first-child>span': { + display: 'inline', + position: 'absolute', + bottom: '100%', + left: '50%', + transform: 'translateX(-50%)', + marginBottom: '0.25rem', + fontSize: '0.75rem', + whiteSpace: 'nowrap', + backgroundColor: '#F7F5FA', + color: '#000000', + padding: '0.25rem 0.5rem', + borderRadius: '0.25rem', + zIndex: 9999, + }, + 'button>span:first-child>svg': { color: '#A9A4B0' }, + }, + }, + }, + RaPaginationActions: { + currentPageButton: { backgroundColor: 'rgba(124, 58, 237, 0.16)' }, + }, + RaSaveButton: { + button: { + minWidth: 96, + minHeight: 40, + padding: '8px 14px', + borderRadius: '8px !important', + boxShadow: 'none', + color: '#FFFFFF !important', + backgroundColor: '#7C3AED !important', + border: '1px solid transparent', + '&:hover': { backgroundColor: '#8B5CF6 !important', boxShadow: 'none' }, + '&.Mui-disabled': { + color: '#77717F !important', + backgroundColor: '#27202D !important', + borderColor: 'rgba(165, 125, 190, 0.16)', + }, }, }, NDPluginShow: { - ...base.overrides.NDPluginShow, saveButton: { - ...base.overrides.NDPluginShow?.saveButton, - ...formSaveButton, - }, - }, - MuiIconButton: { - ...base.overrides.MuiIconButton, - root: { - ...base.overrides.MuiIconButton.root, - borderRadius: 999, - transition: 'background-color 120ms ease, color 120ms ease', - '&:hover': { - backgroundColor: colors.accentSoft, - color: colors.accentBright, + minWidth: 96, + minHeight: 40, + padding: '8px 14px', + borderRadius: '8px !important', + boxShadow: 'none', + color: '#FFFFFF !important', + backgroundColor: '#7C3AED !important', + border: '1px solid transparent', + '&:hover': { backgroundColor: '#8B5CF6 !important', boxShadow: 'none' }, + '&.Mui-disabled': { + color: '#77717F !important', + backgroundColor: '#27202D !important', + borderColor: 'rgba(165, 125, 190, 0.16)', }, }, }, - MuiCheckbox: { - ...base.overrides.MuiCheckbox, - root: { - ...base.overrides.MuiCheckbox.root, - color: 'rgba(165, 125, 190, 0.68)', - '&:hover': { - color: colors.text, - backgroundColor: colors.accentSoft, - }, - '&$checked': { - color: colors.accentBright, - }, - }, - }, - MuiPaper: { - ...base.overrides.MuiPaper, - root: { - ...base.overrides.MuiPaper.root, - backgroundColor: colors.surface, - backgroundImage: 'none', - }, - }, MuiPopover: { - ...base.overrides.MuiPopover, root: { - ...base.overrides.MuiPopover?.root, '&[id="menu-appbar"], &[id="panel-activity"], &[id="panel-nowplaying"]': { '& .MuiPopover-paper': { - backgroundColor: colors.surface, + backgroundColor: '#1B1720', borderRadius: 10, overflow: 'hidden', }, @@ -212,160 +721,51 @@ const ShelvTheme = { }, }, }, - MuiTableCell: { - ...base.overrides.MuiTableCell, - root: { - ...base.overrides.MuiTableCell.root, - borderBottomColor: colors.separator, - }, - head: { - ...base.overrides.MuiTableCell.head, - backgroundColor: colors.surface, - color: colors.textSecondary, - }, - }, - MuiTableRow: { - ...base.overrides.MuiTableRow, - root: { - ...base.overrides.MuiTableRow.root, - backgroundColor: colors.surface, - '&:hover': { - backgroundColor: `${colors.elevated} !important`, - }, - }, - }, RaDatagrid: { - ...base.overrides.RaDatagrid, rowCell: { - ...base.overrides.RaDatagrid?.rowCell, '&&': { paddingTop: '14px !important', paddingBottom: '14px !important', }, }, }, - RaList: { - ...base.overrides.RaList, - root: { - ...base.overrides.RaList?.root, - backgroundColor: colors.surface, - border: `1px solid ${colors.separator}`, - borderRadius: 14, - overflow: 'hidden', - '& > .MuiBox-root:last-child': { - paddingBottom: 24, - }, - }, - toolbar: { - ...base.overrides.RaList?.toolbar, - backgroundColor: colors.surface, - alignItems: 'center', - border: `1px solid ${colors.separator}`, - borderBottom: 0, - borderRadius: '14px 14px 0 0', - boxSizing: 'border-box', - '& + div > .MuiCard-root': { - borderLeft: `1px solid ${colors.separator}`, - borderRight: `1px solid ${colors.separator}`, - }, - '& ~ .MuiTablePagination-root': { - borderLeft: `1px solid ${colors.separator}`, - borderRight: `1px solid ${colors.separator}`, - borderBottom: `1px solid ${colors.separator}`, - borderRadius: '0 0 14px 14px', - overflow: 'hidden', - }, - '& ~ .MuiCardContent-root': { - minHeight: 80, - padding: '20px 24px !important', - boxSizing: 'border-box', - backgroundColor: colors.surface, - borderLeft: `1px solid ${colors.separator}`, - borderRight: `1px solid ${colors.separator}`, - borderBottom: `1px solid ${colors.separator}`, - borderRadius: '0 0 14px 14px', - color: colors.textSecondary, - '& .MuiTypography-root': { - fontSize: '1rem', - fontWeight: 400, - textAlign: 'left', - }, - }, - }, - content: { - ...base.overrides.RaList.content, - marginTop: 0, - backgroundColor: colors.surface, - borderRadius: 0, - boxShadow: 'none', - overflow: 'hidden', - }, - }, RaEmpty: { - ...base.overrides.RaEmpty, - message: { - ...base.overrides.RaEmpty?.message, - '&:last-child': { - paddingBottom: 24, - }, - }, - toolbar: { - ...base.overrides.RaEmpty?.toolbar, - paddingBottom: 24, - }, + message: { '&:last-child': { paddingBottom: 24 } }, + toolbar: { paddingBottom: 24 }, }, RaListToolbar: { - ...base.overrides.RaListToolbar, toolbar: { - ...base.overrides.RaListToolbar?.toolbar, - backgroundColor: colors.surface, + backgroundColor: '#1B1720', paddingLeft: '16px !important', paddingRight: '16px !important', - borderBottom: `1px solid ${colors.separator}`, - }, - actions: { - ...base.overrides.RaListToolbar?.actions, - backgroundColor: colors.surface, + borderBottom: '1px solid rgba(165, 125, 190, 0.16)', }, + actions: { backgroundColor: '#1B1720' }, }, RaSimpleList: { - ...base.overrides.RaSimpleList, - link: { - ...base.overrides.RaSimpleList?.link, - '& .MuiListItem-root': { - paddingTop: 16, - paddingBottom: 16, - }, - }, + link: { '& .MuiListItem-root': { paddingTop: 16, paddingBottom: 16 } }, }, RaArtistSimpleList: { - ...base.overrides.RaArtistSimpleList, - listItem: { - ...base.overrides.RaArtistSimpleList?.listItem, - padding: 16, - }, - rightIcon: { - ...base.overrides.RaArtistSimpleList?.rightIcon, - top: '50%', - }, + listItem: { padding: 16 }, + rightIcon: { top: '50%' }, }, MuiTablePagination: { - ...base.overrides.MuiTablePagination, root: { - ...base.overrides.MuiTablePagination?.root, - backgroundColor: colors.surface, - borderTop: `1px solid ${colors.separator}`, + backgroundColor: '#1B1720', + borderTop: '1px solid rgba(165, 125, 190, 0.16)', borderBottom: 0, }, }, RaToolbar: { - ...base.overrides.RaToolbar, toolbar: { - ...base.overrides.RaToolbar?.toolbar, backgroundColor: 'transparent', boxShadow: 'none', '& .MuiButton-root': { - ...formButtonBase, + minWidth: 96, + minHeight: 40, + padding: '8px 14px', + borderRadius: '8px !important', + boxShadow: 'none', fontWeight: 600, transition: 'background-color 120ms ease, border-color 120ms ease, color 120ms ease', @@ -375,7 +775,7 @@ const ShelvTheme = { }, '& .ra-delete-button': { color: '#FFFFFF !important', - backgroundColor: `${colors.danger} !important`, + backgroundColor: '#F44336 !important', border: '1px solid transparent', '&:hover': { color: '#FFFFFF !important', @@ -384,132 +784,135 @@ const ShelvTheme = { }, '&.Mui-disabled': { color: 'rgba(255, 92, 87, 0.38) !important', - backgroundColor: `${colors.elevated} !important`, - borderColor: colors.separator, + backgroundColor: '#27202D !important', + borderColor: 'rgba(165, 125, 190, 0.16)', }, }, }, desktopToolbar: { - ...base.overrides.RaToolbar?.desktopToolbar, width: 'fit-content', minHeight: 0, padding: '0 16px !important', gap: 12, }, - defaultToolbar: { - ...base.overrides.RaToolbar?.defaultToolbar, - justifyContent: 'flex-start', - gap: 12, - }, - mobileToolbar: { - ...base.overrides.RaToolbar?.mobileToolbar, - backgroundColor: colors.surface, - }, - }, - RaAppBar: { - ...base.overrides.RaAppBar, - title: { - ...base.overrides.RaAppBar?.title, - color: colors.accentBright, - }, - }, - NDPlaylistShow: { - ...base.overrides.NDPlaylistShow, - playlistActions: { - ...base.overrides.NDPlaylistShow?.playlistActions, - padding: '0 8px', - alignItems: 'center', - '& > div': { - justifyContent: 'space-between', - alignItems: 'center', - }, - '& > div > div': { - display: 'flex', - alignItems: 'center', - }, - '@global': { - ...base.overrides.NDPlaylistShow?.playlistActions?.['@global'], - button: { - ...base.overrides.NDPlaylistShow?.playlistActions?.['@global'] - ?.button, - margin: '0 4px', - padding: 8, - }, - 'button:first-child:not(:only-child)': { - ...base.overrides.NDPlaylistShow?.playlistActions?.['@global']?.[ - 'button:first-child:not(:only-child)' - ], - transform: 'scale(1.35)', - margin: '4px 10px', - padding: 4, - '@media screen and (max-width: 720px)': { - transform: 'scale(1.25)', - margin: '4px 8px', - '&:hover': { - transform: 'scale(1.3) !important', - }, - }, - '&:hover': { - ...base.overrides.NDPlaylistShow?.playlistActions?.['@global']?.[ - 'button:first-child:not(:only-child)' - ]?.['&:hover'], - transform: 'scale(1.42) !important', - }, - }, - 'button:only-child': { - ...base.overrides.NDPlaylistShow?.playlistActions?.['@global']?.[ - 'button:only-child' - ], - margin: 4, - padding: 4, - backgroundColor: 'transparent', - }, - }, - }, - }, - MuiAppBar: { - ...base.overrides.MuiAppBar, - root: { - ...base.overrides.MuiAppBar.root, - backgroundColor: 'rgba(0, 0, 0, 0.9)', - backdropFilter: 'blur(16px)', - borderBottom: `1px solid ${colors.separator}`, - }, - colorSecondary: { - backgroundColor: 'rgba(0, 0, 0, 0.9)', - color: colors.text, - }, - }, - MuiToolbar: { - root: { backgroundColor: 'transparent' }, + defaultToolbar: { justifyContent: 'flex-start', gap: 12 }, + mobileToolbar: { backgroundColor: '#1B1720' }, }, + RaAppBar: { title: { color: '#8B5CF6' } }, MuiDialog: { - ...base.overrides.MuiDialog, paper: { - ...base.overrides.MuiDialog?.paper, borderRadius: 12, - border: `1px solid ${colors.separator}`, + border: '1px solid rgba(165, 125, 190, 0.16)', boxShadow: '0 18px 48px rgba(0, 0, 0, 0.38)', - '& #config-panel .MuiButton-root + .MuiButton-root': { - marginLeft: 12, - }, - }, - }, - MuiTooltip: { - ...base.overrides.MuiTooltip, - tooltip: { - ...base.overrides.MuiTooltip?.tooltip, - borderRadius: 8, - backgroundColor: colors.elevated, - color: colors.text, - border: `1px solid ${colors.separator}`, + '& #config-panel .MuiButton-root + .MuiButton-root': { marginLeft: 12 }, }, }, }, player: { - ...base.player, theme: 'dark', - stylesheet: `${base.player.stylesheet} + stylesheet: ` +.react-jinke-music-player-main { + background-color: #000000 !important; + font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif !important; + } + + .react-jinke-music-player-main .music-player-panel { + background-color: rgba(27, 23, 32, 0.9) !important; + backdrop-filter: blur(1.25rem) !important; + -webkit-backdrop-filter: blur(1.25rem) !important; + border-top: 1px solid rgba(165, 125, 190, 0.16) !important; + box-shadow: 0 -0.125rem 1.25rem rgba(0, 0, 0, 0.06) !important; + } + + .react-jinke-music-player-main svg { + color: #F7F5FA !important; + } + + .react-jinke-music-player-main svg:hover { + color: #7C3AED !important; + } + + .react-jinke-music-player-main .rc-slider-track, + .react-jinke-music-player-main .rc-slider-handle { + background-color: #7C3AED !important; + } + + .react-jinke-music-player-main .rc-slider-handle { + border-color: #7C3AED !important; + } + + .react-jinke-music-player-main .rc-slider-rail { + background-color: #1B1720 !important; + } + + .react-jinke-music-player-main .rc-slider { + height: 4px !important; + } + + .react-jinke-music-player-main .rc-slider-rail, + .react-jinke-music-player-main .rc-slider-track { + height: 4px !important; + border-radius: 2px !important; + } + + .react-jinke-music-player-main .rc-slider-handle { + width: 12px !important; + height: 12px !important; + margin-top: -4px !important; + } + + .react-jinke-music-player-main .audio-lists-panel, + .react-jinke-music-player-main .audio-lists-panel-content { + background-color: #000000 !important; + } + + .react-jinke-music-player-main .audio-lists-panel-content .audio-item { + background-color: transparent !important; + color: #F7F5FA !important; + } + + .react-jinke-music-player-main .audio-lists-panel-content .audio-item:hover { + background-color: rgba(124, 58, 237, 0.16) !important; + } + + .react-jinke-music-player-main .audio-lists-panel-content .audio-item.playing { + background-color: rgba(124, 58, 237, 0.16) !important; + color: #7C3AED !important; + } + + .react-jinke-music-player-main .lyric-btn-active, + .react-jinke-music-player-main .play-mode-title { + color: #7C3AED !important; + } + + .react-jinke-music-player-main .music-player-panel .player-content .music-player-controller .music-player-info .music-player-title { + color: #F7F5FA !important; + font-weight: 600 !important; + font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important; + } + + .react-jinke-music-player-main .music-player-panel .player-content .music-player-controller .music-player-info .music-player-artist { + color: #A9A4B0 !important; + } + + .react-jinke-music-player-main.mini-player { + background-color: rgba(27, 23, 32, 0.9) !important; + backdrop-filter: blur(1.25rem) !important; + -webkit-backdrop-filter: blur(1.25rem) !important; + border-radius: 0.75rem !important; + box-shadow: 0 0.25rem 1.25rem rgba(165, 125, 190, 0.16) !important; + } + + + .MuiTypography-h1, + .MuiTypography-h2, + .MuiTypography-h3, + .MuiTypography-h4, + .MuiTypography-h5, + .MuiTypography-h6 { + font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important; + } + .react-jinke-music-player-main .music-player-panel .player-content svg { font-size: 28px !important; } @@ -517,7 +920,7 @@ const ShelvTheme = { .react-jinke-music-player-main .music-player-panel .player-content .play-btn svg, .react-jinke-music-player-main .music-player-panel .player-content .play-btn:hover svg, .react-jinke-music-player-mobile-toggle .play-btn svg { - color: ${colors.accent} !important; + color: #7C3AED !important; } .react-jinke-music-player-main .music-player-panel .player-content .play-btn svg { @@ -539,31 +942,31 @@ const ShelvTheme = { .react-jinke-music-player-main .audio-lists-panel-content, .audio-lists-panel, .audio-lists-panel-content { - background-color: ${colors.elevated} !important; + background-color: #27202D !important; } .react-jinke-music-player-main .audio-lists-panel-header, .audio-lists-panel-header { background-color: #30263A !important; - border-bottom: 1px solid ${colors.separator} !important; + border-bottom: 1px solid rgba(165, 125, 190, 0.16) !important; box-shadow: none !important; } .react-jinke-music-player-main .audio-lists-panel-content .audio-item, .audio-lists-panel-content .audio-item { - background-color: ${colors.surface} !important; - border-bottom: 1px solid ${colors.separator} !important; + background-color: #1B1720 !important; + border-bottom: 1px solid rgba(165, 125, 190, 0.16) !important; } .react-jinke-music-player-main .audio-lists-panel-content .audio-item:hover, .audio-lists-panel-content .audio-item:hover { - background-color: ${colors.accentSoft} !important; + background-color: rgba(124, 58, 237, 0.16) !important; } .react-jinke-music-player-main .audio-lists-panel-content .audio-item.playing, .audio-lists-panel-content .audio-item.playing { - background-color: ${colors.accentHover} !important; - color: ${colors.accentBright} !important; + background-color: rgba(124, 58, 237, 0.24) !important; + color: #8B5CF6 !important; } `, }, From f87fea6e22cb869db7b2fb76be97f90b2e6b52a3 Mon Sep 17 00:00:00 2001 From: gatzenga Date: Sun, 12 Jul 2026 03:43:14 +0200 Subject: [PATCH 3/3] Update Shelv Theme --- ui/src/themes/shelv.js | 42 +++++++++++++++++++++++++++++++----------- 1 file changed, 31 insertions(+), 11 deletions(-) diff --git a/ui/src/themes/shelv.js b/ui/src/themes/shelv.js index 285072e2c..e1aa677c3 100644 --- a/ui/src/themes/shelv.js +++ b/ui/src/themes/shelv.js @@ -147,6 +147,10 @@ const ShelvTheme = { root: { '&:hover': { backgroundColor: '#27202D !important' }, backgroundColor: '#1B1720', + '&:has(> td.column-title) > td': { + paddingTop: '6px !important', + paddingBottom: '6px !important', + }, }, }, MuiTableCell: { @@ -367,17 +371,17 @@ const ShelvTheme = { }, NDAlbumShow: { albumActions: { - padding: '1rem 0', + padding: '0 8px', alignItems: 'center', '@global': { button: { border: '1px solid transparent', backgroundColor: '#1B1720', color: '#A9A4B0', - margin: '0 0.5rem', + margin: '0 4px', borderRadius: '50%', minWidth: 0, - padding: '1rem', + padding: 8, position: 'relative', '&:hover': { backgroundColor: '#27202D !important', @@ -386,26 +390,30 @@ const ShelvTheme = { }, 'button:first-child:not(:only-child)': { '@media screen and (max-width: 720px)': { - transform: 'scale(1.5)', - margin: '1rem', - '&:hover': { transform: 'scale(1.6) !important' }, + transform: 'scale(1.25)', + margin: '4px 8px', + '&:hover': { transform: 'scale(1.3) !important' }, }, - transform: 'scale(2)', - margin: '1.5rem', + transform: 'scale(1.35)', + margin: '4px 10px', minWidth: 0, - padding: '0.3125rem', + padding: 4, transition: 'transform .3s ease', background: '#7C3AED', color: '#fff', borderRadius: '50%', border: 0, '&:hover': { - transform: 'scale(2.1)', + transform: 'scale(1.42) !important', backgroundColor: '#7C3AED !important', border: 0, }, }, - 'button:only-child': { margin: '1.5rem' }, + 'button:only-child': { + margin: 4, + padding: 4, + backgroundColor: 'transparent', + }, 'button:first-child>span:first-child': { padding: 0 }, 'button>span:first-child>span': { display: 'none' }, 'button:not(:first-child):hover>span:first-child>span': { @@ -425,6 +433,9 @@ const ShelvTheme = { }, 'button:not(:first-child)>span:first-child>svg': { color: '#A9A4B0' }, }, + '& > div': { justifyContent: 'space-between', alignItems: 'center' }, + '& > div > div': { display: 'flex', alignItems: 'center' }, + '& > div > div:first-child': { marginLeft: -16 }, }, }, NDPlaylistShow: { @@ -493,6 +504,7 @@ const ShelvTheme = { }, '& > div': { justifyContent: 'space-between', alignItems: 'center' }, '& > div > div': { display: 'flex', alignItems: 'center' }, + '& > div > div:first-child': { marginLeft: -16 }, }, }, NDSubMenu: { @@ -597,6 +609,11 @@ const ShelvTheme = { borderLeft: '1px solid rgba(165, 125, 190, 0.16)', borderRight: '1px solid rgba(165, 125, 190, 0.16)', }, + '&:has([class*="NDAlbumShow-albumActions"]) + div > .MuiCard-root': { + borderBottom: '1px solid rgba(165, 125, 190, 0.16)', + borderRadius: '0 0 14px 14px !important', + overflow: 'hidden', + }, '& ~ .MuiTablePagination-root': { borderLeft: '1px solid rgba(165, 125, 190, 0.16)', borderRight: '1px solid rgba(165, 125, 190, 0.16)', @@ -745,6 +762,9 @@ const ShelvTheme = { RaSimpleList: { link: { '& .MuiListItem-root': { paddingTop: 16, paddingBottom: 16 } }, }, + RaSongSimpleList: { + listItem: { paddingTop: 5, paddingBottom: 5 }, + }, RaArtistSimpleList: { listItem: { padding: 16 }, rightIcon: { top: '50%' },