From 2fdc1677f7210e46433e40c9bfccd9da6d7ae309 Mon Sep 17 00:00:00 2001 From: edthu <127602296+edthu@users.noreply.github.com> Date: Sat, 11 May 2024 20:08:51 +0300 Subject: [PATCH] Add Catppuccin Macchiato Theme (#3014) * Added Catppuccin Macchiato theme * fixed index.js formatting --- ui/src/themes/catppuccinMacchiato.css.js | 153 +++++++++++++++++++++++ ui/src/themes/catppuccinMacchiato.js | 104 +++++++++++++++ ui/src/themes/index.js | 2 + 3 files changed, 259 insertions(+) create mode 100644 ui/src/themes/catppuccinMacchiato.css.js create mode 100644 ui/src/themes/catppuccinMacchiato.js diff --git a/ui/src/themes/catppuccinMacchiato.css.js b/ui/src/themes/catppuccinMacchiato.css.js new file mode 100644 index 000000000..d75e41994 --- /dev/null +++ b/ui/src/themes/catppuccinMacchiato.css.js @@ -0,0 +1,153 @@ +module.exports = ` + +.react-jinke-music-player-main svg:active, .react-jinke-music-player-main svg:hover { + color: #00a4dc +} + +.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: #00a4dc +} + +.react-jinke-music-player-main ::-webkit-scrollbar-thumb { + background-color: #00a4dc; +} + +.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active { + box-shadow: 0 0 2px #00a4dc +} + +.react-jinke-music-player-main .audio-item.playing svg { + color: #00a4dc +} + +.react-jinke-music-player-main .audio-item.playing .player-singer { + color: #00a4dc !important +} + +.react-jinke-music-player-main .loading svg { + color: #00a4dc !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 { + height: 6px; +} + +.rc-slider { + padding: 3px 0; +} + +.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 { + background-color: #1e2030; + color: #24273a + box-shadow: 0 0 8px rgba(0, 0, 0, 0.25); +} + +.audio-lists-panel { + background-color: #1e2030; + 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; +} + +.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: #acb3d2; + -webkit-text-stroke: 0.5px #2E3440; + font-weight: bolder; +} + +.react-jinke-music-player-main .lyric-btn-active, .react-jinke-music-player-main .lyric-btn-active svg { + color: #acb3d2 !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: #00a4dc +} + +.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: #00a4dc +} + +.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: #363a4f; +} + +/* 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: #00a4dc; +} + +.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: #00a4dc; +} + +.react-jinke-music-player-mobile-progress .rc-slider-handle { + border: none; +} + +` diff --git a/ui/src/themes/catppuccinMacchiato.js b/ui/src/themes/catppuccinMacchiato.js new file mode 100644 index 000000000..a54df4d99 --- /dev/null +++ b/ui/src/themes/catppuccinMacchiato.js @@ -0,0 +1,104 @@ +export default { + themeName: 'Catppuccin Macchiato', + palette: { + primary: { + main: '#c6a0f6', + }, + secondary: { + main: '#1e2030', + contrastText: '#cad3f5', + }, + type: 'dark', + background: { + default: '#24273a', + }, + }, + overrides: { + MuiPaper: { + root: { + color: '#cad3f5', + backgroundColor: '#1e2030', + MuiSnackbarContent: { + root: { + color: '#cad3f5', + backgroundColor: '#ed8796', + }, + message: { + color: '#cad3f5', + backgroundColor: '#ed8796', + }, + }, + }, + }, + MuiButton: { + textPrimary: { + color: '#8aadf4', + }, + textSecondary: { + color: '#cad3f5', + }, + }, + MuiChip: { + clickable: { + background: '#1e2030', + }, + }, + MuiFormGroup: { + root: { + color: '#cad3f5', + }, + }, + MuiFormHelperText: { + root: { + Mui: { + error: { + color: '#ed8796', + }, + }, + }, + }, + MuiTableHead: { + root: { + color: '#cad3f5', + background: '#1e2030', + }, + }, + MuiTableCell: { + root: { + color: '#cad3f5', + background: '#1e2030 !important', + }, + head: { + color: '#cad3f5', + background: '#1e2030 !important', + }, + }, + NDLogin: { + systemNameLink: { + color: '#c6a0f6', + }, + icon: {}, + welcome: { + color: '#cad3f5', + }, + card: { + minWidth: 300, + background: '#24273a', + }, + avatar: {}, + button: { + boxShadow: '3px 3px 5px #24273a', + }, + }, + NDMobileArtistDetails: { + bgContainer: { + background: + 'linear-gradient(to bottom, rgba(52 52 52 / 72%), rgb(48 48 48))!important', + }, + }, + }, + player: { + theme: 'dark', + stylesheet: require('./catppuccinMacchiato.css.js'), + }, +} diff --git a/ui/src/themes/index.js b/ui/src/themes/index.js index ee0cdf6e2..5169d466b 100644 --- a/ui/src/themes/index.js +++ b/ui/src/themes/index.js @@ -8,6 +8,7 @@ import MonokaiTheme from './monokai' import ElectricPurpleTheme from './electricPurple' import NordTheme from './nord' import GruvboxDarkTheme from './gruvboxDark' +import CatppuccinMacchiatoTheme from './catppuccinMacchiato' export default { // Classic default themes @@ -15,6 +16,7 @@ export default { DarkTheme, // New themes should be added here, in alphabetic order + CatppuccinMacchiatoTheme, ElectricPurpleTheme, ExtraDarkTheme, GreenTheme,