diff --git a/ui/src/themes/index.js b/ui/src/themes/index.js index c64addfe3..512a9d195 100644 --- a/ui/src/themes/index.js +++ b/ui/src/themes/index.js @@ -6,6 +6,7 @@ import SpotifyTheme from './spotify' import LigeraTheme from './ligera' import MonokaiTheme from './monokai' import ElectricPurpleTheme from './electricPurple' +import NordTheme from './nord' export default { // Classic default themes @@ -18,5 +19,6 @@ export default { GreenTheme, LigeraTheme, MonokaiTheme, + NordTheme, SpotifyTheme, } diff --git a/ui/src/themes/nord.css.js b/ui/src/themes/nord.css.js new file mode 100644 index 000000000..f6b6f9329 --- /dev/null +++ b/ui/src/themes/nord.css.js @@ -0,0 +1,167 @@ +module.exports = ` + +.react-jinke-music-player-main svg:active, .react-jinke-music-player-main svg:hover { + color: #81A1C1 +} + +.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle, .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-track { + background-color: #5E81AC +} + +.react-jinke-music-player-main ::-webkit-scrollbar-thumb { + background-color: #5E81AC; +} + +.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active { + box-shadow: 0 0 2px #5E81AC +} + +.react-jinke-music-player-main .audio-item.playing svg { + color: #5E81AC +} + +.react-jinke-music-player-main .audio-item.playing .player-singer { + color: #5E81AC !important +} + +.react-jinke-music-player-main .loading svg { + color: #5E81AC !important +} + + +.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle { + border: hidden; + box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px; +} + + +.rc-slider-rail, .rc-slider-track { + border-radius: 1rem; + height: 6px; +} + +.rc-slider { + padding: 3px 0; +} + +.progress-bar > div:nth-child(2) > div:nth-child(4) { + transform: translateX(-50%) translateY(5%) !important; +} + +.sound-operation > div:nth-child(4) { + transform: translateX(-50%) translateY(5%) !important; +} + +.sound-operation { + padding: 4px 0; +} + +.react-jinke-music-player-main .music-player-panel .panel-content .player-content .play-sounds .sound-operation { + width: 50px; +} + +.react-jinke-music-player-main .music-player-panel { + background-color: #2E3440; + color: #ECEFF4 + box-shadow: 0 0 8px rgba(0, 0, 0, 0.25); +} + +.audio-lists-panel { + background-color: #2E3440; + border-radius: .625rem; + bottom: 6.25rem; + box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px; +} + +.audio-lists-panel-content .audio-item.playing { + background-color: rgba(0, 0, 0, 0); +} + +.audio-lists-panel-content .audio-item:nth-child(2n+1) { + background-color: rgba(0, 0, 0, 0); +} + +.audio-lists-panel-content .audio-item:active, +.audio-lists-panel-content .audio-item:hover { + background-color:rgba(255, 255, 255, 0.08); +} + +.audio-lists-panel-header { + border-bottom:1px solid #242936; +} + +.react-jinke-music-player-main .music-player-panel .panel-content .player-content .audio-lists-btn { + background-color:rgba(0,0,0,0); + box-shadow:0 0 0 0; +} + + +.audio-lists-panel-content .audio-item { + line-height: 32px; + padding: 4px 20px; + border-radius: 8px; + margin: 3px; +} + +.react-jinke-music-player-main .music-player-panel .panel-content .img-content { + box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px; +} + +.react-jinke-music-player-main .music-player-lyric { + color: #D8DEE9; + -webkit-text-stroke: 2px #2E3440; + font-weight: bolder; +} + +.react-jinke-music-player-main .lyric-btn-active, .react-jinke-music-player-main .lyric-btn-active svg { + color: #D8DEE9 !important; +} + +.audio-lists-panel-header { + border-bottom:1px solid rgba(0, 0, 0, 0.25); + box-shadow:none; +} + +.audio-lists-panel-content .audio-item.playing, .audio-lists-panel-content .audio-item.playing svg { + color: #5E81AC +} + +.audio-lists-panel-content .audio-item:active .group:not([class=".player-delete"]) svg, .audio-lists-panel-content .audio-item:hover .group:not([class=".player-delete"]) svg { + color: #5E81AC +} + +.audio-lists-panel-content .audio-item .player-icons { + scale: 75%; +} + +.audio-lists-panel-content .audio-item:active, +.audio-lists-panel-content .audio-item:hover { + background-color: #3B4252; +} + +/* Mobile */ + +.react-jinke-music-player-mobile-cover { + border: none; + box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px; +} + +.react-jinke-music-player .music-player-controller { + border: none; + box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px; + color: #5E81AC; +} + +.react-jinke-music-player .music-player-controller .music-player-controller-setting { + color: rgba(122,160,236,.3); +} + +.react-jinke-music-player-mobile-progress .rc-slider-handle, .react-jinke-music-player-mobile-progress .rc-slider-track { + background-color: #5E81AC; +} + +.react-jinke-music-player-mobile-progress .rc-slider-handle { + border: none; +} + +` diff --git a/ui/src/themes/nord.js b/ui/src/themes/nord.js new file mode 100644 index 000000000..c90124d63 --- /dev/null +++ b/ui/src/themes/nord.js @@ -0,0 +1,420 @@ +// For Album, Playlist +const musicListActions = { + alignItems: 'center', + '@global': { + button: { + margin: 5, + }, + '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', + backgroundColor: '#5E81AC !important', + color: '#fff', + borderRadius: 500, + border: 0, + '&:hover': { + transform: 'scale(2.1)', + backgroundColor: '#5E81AC !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: 'rgba(255, 255, 255, 0.8)', + }, + }, +} + +export default { + themeName: 'Nord', + palette: { + primary: { + main: '#D8DEE9', + }, + secondary: { + main: '#4C566A', + }, + type: 'dark', + }, + overrides: { + MuiFormGroup: { + root: { + color: '#D8DEE9', + }, + }, + MuiMenuItem: { + root: { + fontSize: '0.875rem', + paddingTop: '4px', + paddingBottom: '4px', + paddingLeft: '10px', + margin: '5px', + borderRadius: '8px', + }, + }, + MuiDivider: { + root: { + margin: '.75rem 0', + }, + }, + MuiButton: { + root: { + backgroundColor: '#4C566A !important', + border: '1px solid transparent', + borderRadius: 500, + '&:hover': { + backgroundColor: `${'#5E81AC !important'}`, + }, + }, + label: { + color: '#D8DEE9', + paddingRight: '1rem', + paddingLeft: '0.7rem', + }, + contained: { + boxShadow: 'none', + '&:hover': { + boxShadow: 'none', + }, + }, + }, + MuiIconButton: { + label: { + color: '#D8DEE9', + }, + }, + MuiDrawer: { + root: { + background: '#2E3440', + paddingTop: '10px', + }, + }, + + MuiList: { + root: { + color: '#D8DEE9', + background: 'none', + }, + }, + MuiListItem: { + button: { + transition: 'background-color .1s ease !important', + }, + }, + MuiPaper: { + root: { + backgroundColor: '#3B4252', + }, + rounded: { + borderRadius: '8px', + }, + elevation1: { + boxShadow: 'none', + }, + }, + MuiTableRow: { + root: { + color: '#434C5E', + transition: 'background-color .3s ease', + '&:hover': { + backgroundColor: '#434C5E !important', + }, + '&:last-child': { + borderBottom: '1px solid #4C566A !important', + }, + }, + head: { + color: '#4C566A', + }, + }, + MuiToolbar: { + root: { + backgroundColor: '#3B4252 !important', + }, + }, + MuiTableCell: { + root: { + borderBottom: 'none', + color: '#b3b3b3 !important', + padding: '10px !important', + }, + head: { + borderBottom: '1px solid #2E3440', + fontSize: '0.75rem', + textTransform: 'uppercase', + letterSpacing: 1.2, + backgroundColor: '#4C566A !important', + color: '#D8DEE9 !important', + }, + body: { + color: '#D8DEE9 !important', + }, + }, + MuiSwitch: { + track: { + width: '89%', + transform: 'translateX(.1rem) scale(140%)', + opacity: '0.7 !important', + backgroundColor: 'rgba(255,255,255,0.25)', + }, + thumb: { + transform: 'scale(60%)', + boxShadow: 'none', + }, + }, + RaToolBar: { + regular: { + backgroundColor: 'none !important', + }, + }, + MuiAppBar: { + positionFixed: { + backgroundColor: '#4C566A !important', + boxShadow: + 'rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px', + }, + }, + MuiOutlinedInput: { + root: { + borderRadius: '8px', + '&:hover': { + borderColor: '#D8DEE9', + }, + }, + notchedOutline: { + transition: 'border-color .1s', + }, + }, + MuiSelect: { + select: { + '&:focus': { + borderRadius: '8px', + }, + }, + }, + MuiChip: { + root: { + backgroundColor: '#4C566A', + }, + }, + NDAlbumGridView: { + albumName: { + marginTop: '0.5rem', + fontWeight: 700, + textTransform: 'none', + color: '#E5E9F0', + }, + albumSubtitle: { + color: '#b3b3b3', + }, + albumContainer: { + backgroundColor: '#434C5E', + borderRadius: '8px', + padding: '.75rem', + transition: 'background-color .3s ease', + '&:hover': { + backgroundColor: '#4C566A', + }, + }, + albumPlayButton: { + backgroundColor: '#5E81AC', + borderRadius: '50%', + boxShadow: '0 8px 8px rgb(0 0 0 / 30%)', + padding: '0.35rem', + transition: 'padding .3s ease', + '&:hover': { + background: `${'#5E81AC'} !important`, + padding: '0.45rem', + }, + }, + }, + NDPlaylistDetails: { + container: { + borderRadius: 0, + paddingTop: '2.5rem !important', + boxShadow: 'none', + }, + title: { + fontSize: 'calc(1.5rem + 1.5vw);', + fontWeight: 700, + color: '#fff', + }, + details: { + fontSize: '.875rem', + minWidth: '75vw', + color: 'rgba(255,255,255, 0.8)', + }, + }, + NDAlbumShow: { + albumActions: musicListActions, + }, + NDPlaylistShow: { + playlistActions: musicListActions, + }, + NDAlbumDetails: { + root: { + background: '#434C5E', + borderRadius: 0, + boxShadow: '0 8px 8px rgb(0 0 0 / 20%)', + }, + 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)', + }, + commentBlock: { + fontSize: '.875rem', + color: 'rgba(255,255,255, 0.8)', + }, + }, + NDAudioPlayer: { + audioTitle: { + color: '#D8DEE9', + fontSize: '0.875rem', + }, + songTitle: { + fontWeight: 400, + }, + songInfo: { + fontSize: '0.675rem', + color: '#b3b3b3', + }, + player: { + border: '10px solid #4C566A', + backgroundColor: '#4C566A !important', + }, + }, + NDLogin: { + main: { + boxShadow: 'inset 0 0 0 2000px rgba(0, 0, 0, .75)', + }, + systemNameLink: { + color: '#fff', + }, + card: { + border: '1px solid #282828', + }, + avatar: { + marginBottom: 0, + }, + }, + NDSubMenu: { + sidebarIsClosed: { + '& a': { + paddingLeft: '10px', + }, + }, + }, + RaLayout: { + content: { + padding: '0 !important', + background: '#3B4252', + }, + root: { + backgroundColor: '#2E3440', + }, + }, + RaList: { + content: { + backgroundColor: '#3B4252', + borderRadius: '0px', + }, + }, + RaListToolbar: { + toolbar: { + backgroundColor: '#2E3440', + padding: '0 .55rem !important', + }, + }, + RaSidebar: { + fixed: { + backgroundColor: '#2E3440', + }, + drawerPaper: { + backgroundColor: '#2E3440 !important', + }, + }, + RaSearchInput: { + input: { + paddingLeft: '.9rem', + marginTop: '36px', + border: 0, + }, + }, + RaDatagrid: { + headerCell: { + '&:first-child': { + borderTopLeftRadius: '0px !important', + }, + '&:last-child': { + borderTopRightRadius: '0px !important', + }, + }, + }, + RaButton: { + button: { + margin: '0 5px 0 5px', + }, + }, + RaPaginationActions: { + currentPageButton: { + border: '2px solid rgba(255,255,255,0.25)', + }, + button: { + backgroundColor: '#4C566A', + minWidth: 48, + margin: '0 4px', + '@global': { + '> .MuiButton-label': { + padding: 0, + }, + }, + }, + actions: { + '@global': { + '.next-page': { + marginLeft: 8, + marginRight: 8, + }, + '.previous-page': { + marginRight: 8, + }, + }, + }, + }, + }, + player: { + theme: 'dark', + stylesheet: require('./nord.css.js'), + }, +}