const spotifyGreen = {
300: '#62ec83',
500: '#1db954',
900: '#008827',
}
const musicListActions = {
padding: '1rem 0',
alignItems: 'center',
'@global': {
button: {
border: '1px solid transparent',
backgroundColor: 'inherit',
color: '#b3b3b3',
'&:hover': {
border: '1px solid #b3b3b3',
backgroundColor: 'inherit !important',
},
},
'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: 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:only-child': {
margin: '1.5rem',
},
'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: '#b3b3b3',
},
},
}
export default {
themeName: 'Spotify-ish',
typography: {
fontFamily: "system-ui, 'Helvetica Neue', Helvetica, Arial",
h6: {
fontSize: '1rem',
},
},
palette: {
primary: {
light: spotifyGreen['300'],
main: spotifyGreen['500'],
},
secondary: {
main: '#fff',
contrastText: '#fff',
},
background: {
default: '#121212',
paper: '#121212',
},
type: 'dark',
},
overrides: {
MuiFormGroup: {
root: {
color: spotifyGreen['500'],
},
},
MuiMenuItem: {
root: {
fontSize: '0.875rem',
},
},
MuiDivider: {
root: {
margin: '.75rem 0',
},
},
MuiButton: {
root: {
background: spotifyGreen['500'],
color: '#fff',
border: '1px solid transparent',
borderRadius: 500,
'&:hover': {
background: `${spotifyGreen['900']} !important`,
},
},
textSecondary: {
border: '1px solid #b3b3b3',
background: '#000',
'&:hover': {
border: '1px solid #fff !important',
background: '#000 !important',
},
},
label: {
color: '#fff',
paddingRight: '1rem',
paddingLeft: '0.7rem',
},
},
MuiDrawer: {
root: {
background: '#000',
paddingTop: '10px',
},
},
MuiTableRow: {
root: {
padding: '10px 0',
transition: 'background-color .3s ease',
'&:hover': {
backgroundColor: '#1d1d1d !important',
},
'@global': {
'td:nth-child(4)': {
color: '#fff !important',
},
},
},
},
MuiTableCell: {
root: {
borderBottom: '1px solid #1d1d1d',
padding: '10px !important',
color: '#b3b3b3 !important',
},
head: {
borderBottom: '1px solid #282828',
fontSize: '0.75rem',
textTransform: 'uppercase',
letterSpacing: 1.2,
},
},
MuiAppBar: {
positionFixed: {
backgroundColor: '#000 !important',
boxShadow: 'none',
},
},
NDAlbumGridView: {
albumName: {
marginTop: '0.5rem',
fontWeight: 700,
textTransform: 'none',
color: '#fff',
},
albumSubtitle: {
color: '#b3b3b3',
},
albumContainer: {
backgroundColor: '#181818',
borderRadius: '.5rem',
padding: '.75rem',
transition: 'background-color .3s ease',
'&:hover': {
backgroundColor: '#282828',
},
},
albumPlayButton: {
backgroundColor: spotifyGreen['500'],
borderRadius: '50%',
boxShadow: '0 8px 8px rgb(0 0 0 / 30%)',
padding: '0.35rem',
transition: 'padding .3s ease',
'&:hover': {
background: `${spotifyGreen['500']} !important`,
padding: '0.45rem',
},
},
},
NDPlaylistDetails: {
container: {
background: 'linear-gradient(#1d1d1d, transparent)',
borderRadius: 0,
paddingTop: '2.5rem !important',
boxShadow: 'none',
},
title: {
fontSize: 'calc(1.5rem + 1.5vw);',
fontWeight: 700,
color: '#fff',
},
details: {
fontSize: '.875rem',
color: 'rgba(255,255,255, 0.8)',
},
},
NDAlbumDetails: {
root: {
background: 'linear-gradient(#1d1d1d, transparent)',
borderRadius: 0,
boxShadow: 'none',
},
cardContents: {
alignItems: 'center',
paddingTop: '1.5rem',
},
recordName: {
fontSize: 'calc(1rem + 1.5vw);',
fontWeight: 700,
},
recordArtist: {
fontSize: '.875rem',
fontWeight: 700,
},
recordMeta: {
fontSize: '.875rem',
color: 'rgba(255,255,255, 0.8)',
},
},
NDCollapsibleComment: {
commentBlock: {
fontSize: '.875rem',
color: 'rgba(255,255,255, 0.8)',
},
},
NDAlbumShow: {
albumActions: musicListActions,
},
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',
},
},
'button:first-child>span:first-child>span': {
display: 'none',
},
'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',
fontSize: '0.875rem',
},
songTitle: {
fontWeight: 400,
},
songInfo: {
fontSize: '0.675rem',
color: '#b3b3b3',
},
player: {
border: '10px solid blue',
},
},
NDLogin: {
main: {
boxShadow: 'inset 0 0 0 2000px rgba(0, 0, 0, .75)',
},
systemNameLink: {
color: '#fff',
},
card: {
border: '1px solid #282828',
},
avatar: {
marginBottom: 0,
},
},
RaLayout: {
content: {
padding: '0 !important',
background: 'linear-gradient(#171717, #121212)',
},
},
RaList: {
content: {
backgroundColor: 'inherit',
},
},
RaListToolbar: {
toolbar: {
padding: '0 .55rem !important',
},
},
RaSearchInput: {
input: {
paddingLeft: '.9rem',
border: 0,
'& .MuiInputBase-root': {
backgroundColor: 'white !important',
borderRadius: '20px !important',
color: 'black',
border: '0px',
'& fieldset': {
borderColor: 'white',
},
'&:hover fieldset': {
borderColor: 'white',
},
'&.Mui-focused fieldset': {
borderColor: 'white',
},
'& svg': {
color: 'black !important',
},
'& .MuiOutlinedInput-input:-webkit-autofill': {
borderRadius: '20px 0px 0px 20px',
'-webkit-box-shadow': '0 0 0 100px #c2c1c2 inset',
'-webkit-text-fill-color': 'black',
},
},
},
},
RaFilter: {
form: {
'& .MuiOutlinedInput-input:-webkit-autofill': {
'-webkit-box-shadow': '0 0 0 100px #28282b inset',
'-webkit-text-fill-color': 'white',
},
},
},
RaFilterButton: {
root: {
marginRight: '1rem',
},
},
RaButton: {
button: {
margin: '0 5px 0 5px',
},
},
RaPaginationActions: {
currentPageButton: {
border: '1px solid #b3b3b3',
},
button: {
backgroundColor: 'inherit',
minWidth: 48,
margin: '0 4px',
border: '1px solid #282828',
'@global': {
'> .MuiButton-label': {
padding: 0,
},
},
},
actions: {
'@global': {
'.next-page': {
marginLeft: 8,
marginRight: 8,
},
'.previous-page': {
marginRight: 8,
},
},
},
},
RaSidebar: {
root: {
height: 'initial',
},
},
},
player: {
theme: 'dark',
},
}
