diff --git a/ui/src/themes/index.js b/ui/src/themes/index.js index f65948438..e6cd4e0ff 100644 --- a/ui/src/themes/index.js +++ b/ui/src/themes/index.js @@ -15,6 +15,8 @@ import NutballTheme from './nutball' import AmusicTheme from './amusic' import SquiddiesGlassTheme from './SquiddiesGlass' import NautilineTheme from './nautiline' +import MoonbaseAlphaTheme from './moonbaseAlpha' +import MoonbaseBravoTheme from './moonbaseBravo' export default { // Classic default themes @@ -31,6 +33,8 @@ export default { GruvboxDarkTheme, LigeraTheme, MonokaiTheme, + MoonbaseAlphaTheme, + MoonbaseBravoTheme, NautilineTheme, NordTheme, NuclearTheme, diff --git a/ui/src/themes/moonbaseAlpha.css.js b/ui/src/themes/moonbaseAlpha.css.js new file mode 100644 index 000000000..757cfc03c --- /dev/null +++ b/ui/src/themes/moonbaseAlpha.css.js @@ -0,0 +1,63 @@ +const stylesheet = ` + +.react-jinke-music-player-main svg:active, .react-jinke-music-player-main svg:hover { + color: #9a7420 +} + +.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: #b8862e; + border-color: #9a7420 +} + +.react-jinke-music-player-main ::-webkit-scrollbar-thumb { + background-color: #c9b896; +} + +.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active { + box-shadow: 0 0 2px #b8862e +} + +.react-jinke-music-player-main .audio-item.playing svg { + color: #9a7420 +} + +.react-jinke-music-player-main .audio-item.playing .player-singer { + color: #9a7420 !important +} + +.react-jinke-music-player-main .rc-slider-rail { + background-color: #ddd7cc !important +} + +.react-jinke-music-player-main .lyric-btn { + color: #1a1917 !important +} + +.react-jinke-music-player-main .music-player-panel { + color: #1a1917 !important +} + +.react-jinke-music-player-main .lyric-btn-active svg { + color: #9a7420 !important +} + +.music-player-lyric { + color: #9a7420 !important +} + +.audio-lists-panel-content .audio-item.playing, .audio-lists-panel-content .audio-item.playing svg { + color: #9a7420 +} +.audio-lists-panel-content .audio-item:active .group:not(.player-delete) svg, .audio-lists-panel-content .audio-item:hover .group:not(.player-delete) svg { + color: #9a7420 +} + +.progress-bar-content .audio-title a { + color: #1a1917 +} + +.MuiCheckbox-colorSecondary.Mui-checked { + color: #b8862e !important +} +` +export default stylesheet diff --git a/ui/src/themes/moonbaseAlpha.js b/ui/src/themes/moonbaseAlpha.js new file mode 100644 index 000000000..51d8a2696 --- /dev/null +++ b/ui/src/themes/moonbaseAlpha.js @@ -0,0 +1,90 @@ +import stylesheet from './moonbaseAlpha.css.js' + +export default { + themeName: 'Moonbase - Alpha', + palette: { + primary: { + main: '#9a7420', + }, + secondary: { + main: '#ede8df', + contrastText: '#1a1917', + }, + type: 'light', + background: { + default: '#f5f0e8', + }, + }, + overrides: { + MuiPaper: { + root: { + color: '#1a1917', + backgroundColor: '#faf8f4', + }, + }, + MuiButton: { + textPrimary: { + color: '#9a7420', + }, + textSecondary: { + color: '#1a1917', + }, + }, + MuiChip: { + clickable: { + background: '#ede8df', + }, + }, + MuiFormGroup: { + root: { + color: '#1a1917', + }, + }, + MuiFormHelperText: { + error: { + color: '#b04a2e', + }, + }, + MuiTableHead: { + root: { + color: '#6b635a', + background: '#f5f0e8 !important', + }, + }, + MuiTableCell: { + root: { + color: '#1a1917', + background: '#faf8f4 !important', + }, + head: { + color: '#6b635a', + background: '#f5f0e8 !important', + }, + }, + NDLogin: { + systemNameLink: { + color: '#9a7420', + }, + welcome: { + color: '#1a1917', + }, + card: { + minWidth: 300, + background: '#faf8f4', + }, + button: { + boxShadow: '3px 3px 5px rgba(0, 0, 0, 0.12)', + }, + }, + NDMobileArtistDetails: { + bgContainer: { + background: + 'linear-gradient(to bottom, rgba(245, 240, 232, 0.72), #faf8f4)!important', + }, + }, + }, + player: { + theme: 'light', + stylesheet, + }, +} diff --git a/ui/src/themes/moonbaseBravo.css.js b/ui/src/themes/moonbaseBravo.css.js new file mode 100644 index 000000000..580b054cc --- /dev/null +++ b/ui/src/themes/moonbaseBravo.css.js @@ -0,0 +1,63 @@ +const stylesheet = ` + +.react-jinke-music-player-main svg:active, .react-jinke-music-player-main svg:hover { + color: #d4a039 +} + +.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: #d4a039; + border-color: #b8862e +} + +.react-jinke-music-player-main ::-webkit-scrollbar-thumb { + background-color: #d4a039; +} + +.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active { + box-shadow: 0 0 2px #d4a039 +} + +.react-jinke-music-player-main .audio-item.playing svg { + color: #d4a039 +} + +.react-jinke-music-player-main .audio-item.playing .player-singer { + color: #d4a039 !important +} + +.react-jinke-music-player-main .rc-slider-rail { + background-color: #2a2a27 !important +} + +.react-jinke-music-player-main .lyric-btn { + color: #e5ddd3 !important +} + +.react-jinke-music-player-main .music-player-panel { + color: #e5ddd3 !important +} + +.react-jinke-music-player-main .lyric-btn-active svg { + color: #d4a039 !important +} + +.music-player-lyric { + color: #d4a039 !important +} + +.audio-lists-panel-content .audio-item.playing, .audio-lists-panel-content .audio-item.playing svg { + color: #d4a039 +} +.audio-lists-panel-content .audio-item:active .group:not(.player-delete) svg, .audio-lists-panel-content .audio-item:hover .group:not(.player-delete) svg { + color: #d4a039 +} + +.progress-bar-content .audio-title a { + color: #e5ddd3 +} + +.MuiCheckbox-colorSecondary.Mui-checked { + color: #d4a039 !important +} +` +export default stylesheet diff --git a/ui/src/themes/moonbaseBravo.js b/ui/src/themes/moonbaseBravo.js new file mode 100644 index 000000000..87585df29 --- /dev/null +++ b/ui/src/themes/moonbaseBravo.js @@ -0,0 +1,90 @@ +import stylesheet from './moonbaseBravo.css.js' + +export default { + themeName: 'Moonbase - Bravo', + palette: { + primary: { + main: '#d4a039', + }, + secondary: { + main: '#1e1e1c', + contrastText: '#e5ddd3', + }, + type: 'dark', + background: { + default: '#0a0a09', + }, + }, + overrides: { + MuiPaper: { + root: { + color: '#e5ddd3', + backgroundColor: '#141413', + }, + }, + MuiButton: { + textPrimary: { + color: '#d4a039', + }, + textSecondary: { + color: '#e5ddd3', + }, + }, + MuiChip: { + clickable: { + background: '#1e1e1c', + }, + }, + MuiFormGroup: { + root: { + color: '#e5ddd3', + }, + }, + MuiFormHelperText: { + error: { + color: '#c45c3c', + }, + }, + MuiTableHead: { + root: { + color: '#8a8278', + background: '#0a0a09 !important', + }, + }, + MuiTableCell: { + root: { + color: '#e5ddd3', + background: '#141413 !important', + }, + head: { + color: '#8a8278', + background: '#0a0a09 !important', + }, + }, + NDLogin: { + systemNameLink: { + color: '#d4a039', + }, + welcome: { + color: '#e5ddd3', + }, + card: { + minWidth: 300, + background: '#1e1e1c', + }, + button: { + boxShadow: '3px 3px 5px #0a0a09', + }, + }, + NDMobileArtistDetails: { + bgContainer: { + background: + 'linear-gradient(to bottom, rgba(10, 10, 9, 0.72), #141413)!important', + }, + }, + }, + player: { + theme: 'dark', + stylesheet, + }, +}