mirror of
https://github.com/navidrome/navidrome.git
synced 2026-07-09 17:18:45 +00:00
feat(ui): add rose pine themes (#5664)
Some checks failed
Pipeline: Test, Lint, Build / Get version info (push) Has been cancelled
Pipeline: Test, Lint, Build / Lint Go code (push) Has been cancelled
Pipeline: Test, Lint, Build / Test Go code (push) Has been cancelled
Pipeline: Test, Lint, Build / Test Go code (Windows) (push) Has been cancelled
Pipeline: Test, Lint, Build / Test JS code (push) Has been cancelled
Pipeline: Test, Lint, Build / Lint i18n files (push) Has been cancelled
Pipeline: Test, Lint, Build / Check Docker configuration (push) Has been cancelled
Pipeline: Test, Lint, Build / Build (push) Has been cancelled
Pipeline: Test, Lint, Build / Build-1 (push) Has been cancelled
Pipeline: Test, Lint, Build / Build-2 (push) Has been cancelled
Pipeline: Test, Lint, Build / Build-3 (push) Has been cancelled
Pipeline: Test, Lint, Build / Build-4 (push) Has been cancelled
Pipeline: Test, Lint, Build / Build-5 (push) Has been cancelled
Pipeline: Test, Lint, Build / Build-6 (push) Has been cancelled
Pipeline: Test, Lint, Build / Build-7 (push) Has been cancelled
Pipeline: Test, Lint, Build / Build-8 (push) Has been cancelled
Pipeline: Test, Lint, Build / Build-9 (push) Has been cancelled
Pipeline: Test, Lint, Build / Build-10 (push) Has been cancelled
Pipeline: Test, Lint, Build / Push to GHCR (push) Has been cancelled
Pipeline: Test, Lint, Build / Push to Docker Hub (push) Has been cancelled
Pipeline: Test, Lint, Build / Cleanup digest artifacts (push) Has been cancelled
Pipeline: Test, Lint, Build / Build Windows installers (push) Has been cancelled
Pipeline: Test, Lint, Build / Package/Release (push) Has been cancelled
Pipeline: Test, Lint, Build / Upload Linux PKG (push) Has been cancelled
Some checks failed
Pipeline: Test, Lint, Build / Get version info (push) Has been cancelled
Pipeline: Test, Lint, Build / Lint Go code (push) Has been cancelled
Pipeline: Test, Lint, Build / Test Go code (push) Has been cancelled
Pipeline: Test, Lint, Build / Test Go code (Windows) (push) Has been cancelled
Pipeline: Test, Lint, Build / Test JS code (push) Has been cancelled
Pipeline: Test, Lint, Build / Lint i18n files (push) Has been cancelled
Pipeline: Test, Lint, Build / Check Docker configuration (push) Has been cancelled
Pipeline: Test, Lint, Build / Build (push) Has been cancelled
Pipeline: Test, Lint, Build / Build-1 (push) Has been cancelled
Pipeline: Test, Lint, Build / Build-2 (push) Has been cancelled
Pipeline: Test, Lint, Build / Build-3 (push) Has been cancelled
Pipeline: Test, Lint, Build / Build-4 (push) Has been cancelled
Pipeline: Test, Lint, Build / Build-5 (push) Has been cancelled
Pipeline: Test, Lint, Build / Build-6 (push) Has been cancelled
Pipeline: Test, Lint, Build / Build-7 (push) Has been cancelled
Pipeline: Test, Lint, Build / Build-8 (push) Has been cancelled
Pipeline: Test, Lint, Build / Build-9 (push) Has been cancelled
Pipeline: Test, Lint, Build / Build-10 (push) Has been cancelled
Pipeline: Test, Lint, Build / Push to GHCR (push) Has been cancelled
Pipeline: Test, Lint, Build / Push to Docker Hub (push) Has been cancelled
Pipeline: Test, Lint, Build / Cleanup digest artifacts (push) Has been cancelled
Pipeline: Test, Lint, Build / Build Windows installers (push) Has been cancelled
Pipeline: Test, Lint, Build / Package/Release (push) Has been cancelled
Pipeline: Test, Lint, Build / Upload Linux PKG (push) Has been cancelled
* feat(theme): add rose pine themes fix checkboxes * feat(theme): apply review suggestions * feat(theme): fix toolbar background in mobile view * feat(theme): small css improvements
This commit is contained in:
Patrick
GitHub
parent
d4387c5502
commit
89aa58a713
7 changed files with 824 additions and 0 deletions
|
|
@ -13,6 +13,9 @@ import CatppuccinLatteTheme from './catppuccinLatte'
|
|||
import DraculaTheme from './dracula'
|
||||
import NuclearTheme from './nuclear'
|
||||
import NutballTheme from './nutball'
|
||||
import RosePineTheme from './rosePine'
|
||||
import RosePineDawnTheme from './rosePineDawn'
|
||||
import RosePineMoonTheme from './rosePineMoon'
|
||||
import AmusicTheme from './amusic'
|
||||
import SquiddiesGlassTheme from './SquiddiesGlass'
|
||||
import NautilineTheme from './nautiline'
|
||||
|
|
@ -43,6 +46,9 @@ export default {
|
|||
NordTheme,
|
||||
NuclearTheme,
|
||||
NutballTheme,
|
||||
RosePineDawnTheme,
|
||||
RosePineMoonTheme,
|
||||
RosePineTheme,
|
||||
SpotifyTheme,
|
||||
SquiddiesGlassTheme,
|
||||
TokyoNightLightTheme,
|
||||
|
|
|
|||
148
ui/src/themes/rosePine.css.js
Normal file
148
ui/src/themes/rosePine.css.js
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
const stylesheet = `
|
||||
|
||||
.react-jinke-music-player-main svg:active, .react-jinke-music-player-main svg:hover {
|
||||
color: #c4a7e7
|
||||
}
|
||||
|
||||
.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: #ebbcba
|
||||
}
|
||||
|
||||
.react-jinke-music-player-main ::-webkit-scrollbar-thumb {
|
||||
background-color: #ebbcba;
|
||||
}
|
||||
|
||||
.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active {
|
||||
box-shadow: 0 0 2px #ebbcba
|
||||
}
|
||||
|
||||
.react-jinke-music-player-main .audio-item.playing svg {
|
||||
color: #ebbcba
|
||||
}
|
||||
|
||||
.react-jinke-music-player-main .audio-item.playing .player-singer {
|
||||
color: #ebbcba !important
|
||||
}
|
||||
|
||||
.react-jinke-music-player-main .loading svg {
|
||||
color: #ebbcba !important
|
||||
}
|
||||
|
||||
|
||||
.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle {
|
||||
border: none;
|
||||
box-shadow:rgba(25, 23, 36, 0.35) 0px 4px 6px, rgba(25, 23, 36, 0.2) 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: #1f1d2e;
|
||||
color: #e0def4;
|
||||
box-shadow: 0 0 8px rgba(25, 23, 36, 0.35);
|
||||
}
|
||||
|
||||
.audio-lists-panel {
|
||||
background-color: #1f1d2e;
|
||||
bottom: 6.25rem;
|
||||
box-shadow:rgba(25, 23, 36, 0.35) 0px 4px 6px, rgba(25, 23, 36, 0.2) 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);
|
||||
}
|
||||
|
||||
|
||||
.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(25, 23, 36, 0.35) 0px 4px 6px, rgba(25, 23, 36, 0.2) 0px 5px 7px;
|
||||
}
|
||||
|
||||
.react-jinke-music-player-main .music-player-lyric {
|
||||
color: #908caa;
|
||||
-webkit-text-stroke: 0.5px #191724;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.react-jinke-music-player-main .lyric-btn-active, .react-jinke-music-player-main .lyric-btn-active svg {
|
||||
color: #908caa !important;
|
||||
}
|
||||
|
||||
.audio-lists-panel-header {
|
||||
border-bottom:1px solid #26233a;
|
||||
box-shadow:none;
|
||||
}
|
||||
|
||||
.audio-lists-panel-content .audio-item.playing, .audio-lists-panel-content .audio-item.playing svg {
|
||||
color: #ebbcba
|
||||
}
|
||||
|
||||
.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: #ebbcba
|
||||
}
|
||||
|
||||
.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: #26233a;
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
|
||||
.react-jinke-music-player-mobile-cover {
|
||||
border: none;
|
||||
box-shadow:rgba(25, 23, 36, 0.35) 0px 4px 6px, rgba(25, 23, 36, 0.2) 0px 5px 7px;
|
||||
}
|
||||
|
||||
.react-jinke-music-player .music-player-controller {
|
||||
border: none;
|
||||
background-color: #1f1d2e;
|
||||
border-color: #1f1d2e;
|
||||
box-shadow:rgba(25, 23, 36, 0.35) 0px 4px 6px, rgba(25, 23, 36, 0.2) 0px 5px 7px;
|
||||
color: #ebbcba;
|
||||
}
|
||||
|
||||
.react-jinke-music-player .music-player-controller .music-player-controller-setting {
|
||||
color: rgba(196,167,231,.3);
|
||||
}
|
||||
|
||||
.react-jinke-music-player-mobile-progress .rc-slider-handle, .react-jinke-music-player-mobile-progress .rc-slider-track {
|
||||
background-color: #ebbcba;
|
||||
}
|
||||
|
||||
.react-jinke-music-player-mobile-progress .rc-slider-handle {
|
||||
border: none;
|
||||
}
|
||||
`
|
||||
|
||||
export default stylesheet
|
||||
108
ui/src/themes/rosePine.js
Normal file
108
ui/src/themes/rosePine.js
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
import stylesheet from './rosePine.css.js'
|
||||
|
||||
export default {
|
||||
themeName: 'Rosé Pine',
|
||||
palette: {
|
||||
primary: {
|
||||
main: '#ebbcba',
|
||||
},
|
||||
secondary: {
|
||||
main: '#1f1d2e',
|
||||
contrastText: '#e0def4',
|
||||
},
|
||||
type: 'dark',
|
||||
background: {
|
||||
default: '#191724',
|
||||
paper: '#1f1d2e',
|
||||
},
|
||||
},
|
||||
overrides: {
|
||||
MuiPaper: {
|
||||
root: {
|
||||
color: '#e0def4',
|
||||
backgroundColor: '#1f1d2e',
|
||||
},
|
||||
},
|
||||
MuiButton: {
|
||||
textPrimary: {
|
||||
color: '#31748f',
|
||||
},
|
||||
textSecondary: {
|
||||
color: '#e0def4',
|
||||
},
|
||||
},
|
||||
MuiIconButton: {
|
||||
colorSecondary: {
|
||||
color: '#6e6a86',
|
||||
},
|
||||
},
|
||||
MuiChip: {
|
||||
clickable: {
|
||||
background: '#26233a',
|
||||
},
|
||||
},
|
||||
MuiCheckbox: {
|
||||
colorSecondary: {
|
||||
color: '#6e6a86',
|
||||
'&$checked': {
|
||||
color: '#ebbcba',
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiFormGroup: {
|
||||
root: {
|
||||
color: '#e0def4',
|
||||
},
|
||||
},
|
||||
MuiFormHelperText: {
|
||||
root: {
|
||||
'&$error': {
|
||||
color: '#eb6f92',
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiTableHead: {
|
||||
root: {
|
||||
color: '#e0def4',
|
||||
background: '#1f1d2e',
|
||||
},
|
||||
},
|
||||
MuiTableCell: {
|
||||
root: {
|
||||
color: '#e0def4',
|
||||
background: '#1f1d2e !important',
|
||||
},
|
||||
head: {
|
||||
color: '#e0def4',
|
||||
background: '#1f1d2e !important',
|
||||
},
|
||||
},
|
||||
NDLogin: {
|
||||
systemNameLink: {
|
||||
color: '#ebbcba',
|
||||
},
|
||||
icon: {},
|
||||
welcome: {
|
||||
color: '#e0def4',
|
||||
},
|
||||
card: {
|
||||
minWidth: 300,
|
||||
background: '#191724',
|
||||
},
|
||||
avatar: {},
|
||||
button: {
|
||||
boxShadow: '3px 3px 5px rgba(25, 23, 36, 0.35)',
|
||||
},
|
||||
},
|
||||
NDMobileArtistDetails: {
|
||||
bgContainer: {
|
||||
background:
|
||||
'linear-gradient(to bottom, rgba(25, 23, 36, 0.72), rgb(25, 23, 36))!important',
|
||||
},
|
||||
},
|
||||
},
|
||||
player: {
|
||||
theme: 'dark',
|
||||
stylesheet,
|
||||
},
|
||||
}
|
||||
198
ui/src/themes/rosePineDawn.css.js
Normal file
198
ui/src/themes/rosePineDawn.css.js
Normal file
|
|
@ -0,0 +1,198 @@
|
|||
const stylesheet = `
|
||||
.react-jinke-music-player-main.light-theme svg,
|
||||
.react-jinke-music-player .music-player-controller,
|
||||
.react-jinke-music-player .audio-circle-process-bar circle[class='stroke'] {
|
||||
color: #797593;
|
||||
stroke: #797593;
|
||||
}
|
||||
|
||||
.react-jinke-music-player-main svg:active,
|
||||
.react-jinke-music-player-main svg:hover {
|
||||
color: #907aa9;
|
||||
}
|
||||
|
||||
.react-jinke-music-player-main.light-theme svg:active,
|
||||
.react-jinke-music-player-main.light-theme svg:hover {
|
||||
color: #907aa9;
|
||||
}
|
||||
|
||||
.react-jinke-music-player-mobile-play-model-tip,
|
||||
.react-jinke-music-player-main.light-theme .play-mode-title {
|
||||
background-color: #d7827e;
|
||||
color: #faf4ed;
|
||||
}
|
||||
|
||||
.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: #d7827e;
|
||||
}
|
||||
|
||||
.react-jinke-music-player-main ::-webkit-scrollbar-thumb {
|
||||
background-color: #d7827e;
|
||||
}
|
||||
|
||||
.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active {
|
||||
box-shadow: 0 0 2px #d7827e;
|
||||
}
|
||||
|
||||
.react-jinke-music-player-main .audio-item.playing svg {
|
||||
color: #d7827e;
|
||||
}
|
||||
|
||||
.react-jinke-music-player-main .audio-item.playing .player-singer {
|
||||
color: #d7827e !important;
|
||||
}
|
||||
|
||||
.react-jinke-music-player-main .loading svg {
|
||||
color: #d7827e !important;
|
||||
}
|
||||
|
||||
.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle {
|
||||
border: none;
|
||||
box-shadow:
|
||||
rgba(70, 66, 97, 0.12) 0px 4px 6px,
|
||||
rgba(70, 66, 97, 0.08) 0px 5px 7px;
|
||||
}
|
||||
|
||||
.rc-slider-rail,
|
||||
.rc-slider-track {
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.rc-slider {
|
||||
padding: 3px 0;
|
||||
}
|
||||
|
||||
.react-jinke-music-player-main.light-theme .rc-switch-checked {
|
||||
background-color: #d7827e !important;
|
||||
border: 1px solid #d7827e;
|
||||
}
|
||||
|
||||
.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: #fffaf3;
|
||||
color: #464261;
|
||||
box-shadow: 0 0 8px rgba(70, 66, 97, 0.12);
|
||||
}
|
||||
|
||||
.react-jinke-music-player-main.light-theme .music-player-panel {
|
||||
color: #464261;
|
||||
}
|
||||
|
||||
.audio-lists-panel {
|
||||
background-color: #fffaf3;
|
||||
bottom: 6.25rem;
|
||||
box-shadow:
|
||||
rgba(70, 66, 97, 0.12) 0px 4px 6px,
|
||||
rgba(70, 66, 97, 0.08) 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-header {
|
||||
border-bottom: 1px solid #f2e9e1;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.react-jinke-music-player-main.light-theme .audio-lists-panel-header {
|
||||
background-color: #fffaf3;
|
||||
color: #464261;
|
||||
}
|
||||
|
||||
.audio-lists-panel-content .audio-item {
|
||||
line-height: 32px;
|
||||
color: #464261;
|
||||
}
|
||||
|
||||
.react-jinke-music-player-main .music-player-panel .panel-content .img-content {
|
||||
box-shadow:
|
||||
rgba(70, 66, 97, 0.12) 0px 4px 6px,
|
||||
rgba(70, 66, 97, 0.08) 0px 5px 7px;
|
||||
}
|
||||
|
||||
.react-jinke-music-player-main .music-player-lyric {
|
||||
color: #797593;
|
||||
-webkit-text-stroke: 0.35px #faf4ed;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.react-jinke-music-player-main .lyric-btn-active,
|
||||
.react-jinke-music-player-main .lyric-btn-active svg {
|
||||
color: #797593 !important;
|
||||
}
|
||||
|
||||
.audio-lists-panel-content .audio-item.playing,
|
||||
.audio-lists-panel-content .audio-item.playing svg {
|
||||
color: #d7827e;
|
||||
}
|
||||
|
||||
.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: #d7827e;
|
||||
}
|
||||
|
||||
.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: #f2e9e1;
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
.react-jinke-music-player-mobile-cover {
|
||||
border: none;
|
||||
box-shadow:
|
||||
rgba(70, 66, 97, 0.12) 0px 4px 6px,
|
||||
rgba(70, 66, 97, 0.08) 0px 5px 7px;
|
||||
}
|
||||
|
||||
.react-jinke-music-player .music-player-controller {
|
||||
border: none;
|
||||
background-color: #fffaf3;
|
||||
border-color: #fffaf3;
|
||||
box-shadow:
|
||||
rgba(70, 66, 97, 0.12) 0px 4px 6px,
|
||||
rgba(70, 66, 97, 0.08) 0px 5px 7px;
|
||||
color: #d7827e;
|
||||
}
|
||||
|
||||
.react-jinke-music-player .music-player-controller.music-player-playing:before {
|
||||
border: 1px solid rgba(70, 66, 97, 0.18);
|
||||
}
|
||||
|
||||
.react-jinke-music-player .music-player-controller .music-player-controller-setting {
|
||||
background: rgba(215, 130, 126, 0.2);
|
||||
color: #faf4ed;
|
||||
}
|
||||
|
||||
.react-jinke-music-player-mobile-progress .rc-slider-handle,
|
||||
.react-jinke-music-player-mobile-progress .rc-slider-track {
|
||||
background-color: #d7827e;
|
||||
}
|
||||
|
||||
.react-jinke-music-player-mobile-progress .rc-slider-handle {
|
||||
border: none;
|
||||
}
|
||||
`
|
||||
|
||||
export default stylesheet
|
||||
108
ui/src/themes/rosePineDawn.js
Normal file
108
ui/src/themes/rosePineDawn.js
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
import stylesheet from './rosePineDawn.css.js'
|
||||
|
||||
export default {
|
||||
themeName: 'Rosé Pine Dawn',
|
||||
palette: {
|
||||
primary: {
|
||||
main: '#d7827e',
|
||||
},
|
||||
secondary: {
|
||||
main: '#fffaf3',
|
||||
contrastText: '#464261',
|
||||
},
|
||||
type: 'light',
|
||||
background: {
|
||||
default: '#faf4ed',
|
||||
paper: '#fffaf3',
|
||||
},
|
||||
},
|
||||
overrides: {
|
||||
MuiPaper: {
|
||||
root: {
|
||||
color: '#464261',
|
||||
backgroundColor: '#fffaf3',
|
||||
},
|
||||
},
|
||||
MuiButton: {
|
||||
textPrimary: {
|
||||
color: '#286983',
|
||||
},
|
||||
textSecondary: {
|
||||
color: '#464261',
|
||||
},
|
||||
},
|
||||
MuiIconButton: {
|
||||
colorSecondary: {
|
||||
color: '#9893a5',
|
||||
},
|
||||
},
|
||||
MuiChip: {
|
||||
clickable: {
|
||||
background: '#f2e9e1',
|
||||
},
|
||||
},
|
||||
MuiCheckbox: {
|
||||
colorSecondary: {
|
||||
color: '#9893a5',
|
||||
'&$checked': {
|
||||
color: '#d7827e',
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiFormGroup: {
|
||||
root: {
|
||||
color: '#464261',
|
||||
},
|
||||
},
|
||||
MuiFormHelperText: {
|
||||
root: {
|
||||
'&$error': {
|
||||
color: '#b4637a',
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiTableHead: {
|
||||
root: {
|
||||
color: '#464261',
|
||||
background: '#fffaf3',
|
||||
},
|
||||
},
|
||||
MuiTableCell: {
|
||||
root: {
|
||||
color: '#464261',
|
||||
background: '#fffaf3 !important',
|
||||
},
|
||||
head: {
|
||||
color: '#464261',
|
||||
background: '#fffaf3 !important',
|
||||
},
|
||||
},
|
||||
NDLogin: {
|
||||
systemNameLink: {
|
||||
color: '#d7827e',
|
||||
},
|
||||
icon: {},
|
||||
welcome: {
|
||||
color: '#464261',
|
||||
},
|
||||
card: {
|
||||
minWidth: 300,
|
||||
background: '#faf4ed',
|
||||
},
|
||||
avatar: {},
|
||||
button: {
|
||||
boxShadow: '3px 3px 5px rgba(87, 82, 121, 0.12)',
|
||||
},
|
||||
},
|
||||
NDMobileArtistDetails: {
|
||||
bgContainer: {
|
||||
background:
|
||||
'linear-gradient(to bottom, rgba(250, 244, 237, 0.72), rgb(250, 244, 237))!important',
|
||||
},
|
||||
},
|
||||
},
|
||||
player: {
|
||||
theme: 'light',
|
||||
stylesheet,
|
||||
},
|
||||
}
|
||||
148
ui/src/themes/rosePineMoon.css.js
Normal file
148
ui/src/themes/rosePineMoon.css.js
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
const stylesheet = `
|
||||
|
||||
.react-jinke-music-player-main svg:active, .react-jinke-music-player-main svg:hover {
|
||||
color: #c4a7e7
|
||||
}
|
||||
|
||||
.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: #ea9a97
|
||||
}
|
||||
|
||||
.react-jinke-music-player-main ::-webkit-scrollbar-thumb {
|
||||
background-color: #ea9a97;
|
||||
}
|
||||
|
||||
.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active {
|
||||
box-shadow: 0 0 2px #ea9a97
|
||||
}
|
||||
|
||||
.react-jinke-music-player-main .audio-item.playing svg {
|
||||
color: #ea9a97
|
||||
}
|
||||
|
||||
.react-jinke-music-player-main .audio-item.playing .player-singer {
|
||||
color: #ea9a97 !important
|
||||
}
|
||||
|
||||
.react-jinke-music-player-main .loading svg {
|
||||
color: #ea9a97 !important
|
||||
}
|
||||
|
||||
|
||||
.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle {
|
||||
border: none;
|
||||
box-shadow:rgba(35, 33, 54, 0.35) 0px 4px 6px, rgba(35, 33, 54, 0.2) 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: #2a273f;
|
||||
color: #e0def4;
|
||||
box-shadow: 0 0 8px rgba(35, 33, 54, 0.35);
|
||||
}
|
||||
|
||||
.audio-lists-panel {
|
||||
background-color: #2a273f;
|
||||
bottom: 6.25rem;
|
||||
box-shadow:rgba(35, 33, 54, 0.35) 0px 4px 6px, rgba(35, 33, 54, 0.2) 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);
|
||||
}
|
||||
|
||||
|
||||
.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(35, 33, 54, 0.35) 0px 4px 6px, rgba(35, 33, 54, 0.2) 0px 5px 7px;
|
||||
}
|
||||
|
||||
.react-jinke-music-player-main .music-player-lyric {
|
||||
color: #908caa;
|
||||
-webkit-text-stroke: 0.5px #232136;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.react-jinke-music-player-main .lyric-btn-active, .react-jinke-music-player-main .lyric-btn-active svg {
|
||||
color: #908caa !important;
|
||||
}
|
||||
|
||||
.audio-lists-panel-header {
|
||||
border-bottom:1px solid #393552;
|
||||
box-shadow:none;
|
||||
}
|
||||
|
||||
.audio-lists-panel-content .audio-item.playing, .audio-lists-panel-content .audio-item.playing svg {
|
||||
color: #ea9a97
|
||||
}
|
||||
|
||||
.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: #ea9a97
|
||||
}
|
||||
|
||||
.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: #393552;
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
|
||||
.react-jinke-music-player-mobile-cover {
|
||||
border: none;
|
||||
box-shadow:rgba(35, 33, 54, 0.35) 0px 4px 6px, rgba(35, 33, 54, 0.2) 0px 5px 7px;
|
||||
}
|
||||
|
||||
.react-jinke-music-player .music-player-controller {
|
||||
border: none;
|
||||
background-color: #2a273f;
|
||||
border-color: #2a273f;
|
||||
box-shadow:rgba(35, 33, 54, 0.35) 0px 4px 6px, rgba(35, 33, 54, 0.2) 0px 5px 7px;
|
||||
color: #ea9a97;
|
||||
}
|
||||
|
||||
.react-jinke-music-player .music-player-controller .music-player-controller-setting {
|
||||
color: rgba(196,167,231,.3);
|
||||
}
|
||||
|
||||
.react-jinke-music-player-mobile-progress .rc-slider-handle, .react-jinke-music-player-mobile-progress .rc-slider-track {
|
||||
background-color: #ea9a97;
|
||||
}
|
||||
|
||||
.react-jinke-music-player-mobile-progress .rc-slider-handle {
|
||||
border: none;
|
||||
}
|
||||
`
|
||||
|
||||
export default stylesheet
|
||||
108
ui/src/themes/rosePineMoon.js
Normal file
108
ui/src/themes/rosePineMoon.js
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
import stylesheet from './rosePineMoon.css.js'
|
||||
|
||||
export default {
|
||||
themeName: 'Rosé Pine Moon',
|
||||
palette: {
|
||||
primary: {
|
||||
main: '#ea9a97',
|
||||
},
|
||||
secondary: {
|
||||
main: '#2a273f',
|
||||
contrastText: '#e0def4',
|
||||
},
|
||||
type: 'dark',
|
||||
background: {
|
||||
default: '#232136',
|
||||
paper: '#2a273f',
|
||||
},
|
||||
},
|
||||
overrides: {
|
||||
MuiPaper: {
|
||||
root: {
|
||||
color: '#e0def4',
|
||||
backgroundColor: '#2a273f',
|
||||
},
|
||||
},
|
||||
MuiButton: {
|
||||
textPrimary: {
|
||||
color: '#3e8fb0',
|
||||
},
|
||||
textSecondary: {
|
||||
color: '#e0def4',
|
||||
},
|
||||
},
|
||||
MuiIconButton: {
|
||||
colorSecondary: {
|
||||
color: '#6e6a86',
|
||||
},
|
||||
},
|
||||
MuiChip: {
|
||||
clickable: {
|
||||
background: '#393552',
|
||||
},
|
||||
},
|
||||
MuiCheckbox: {
|
||||
colorSecondary: {
|
||||
color: '#6e6a86',
|
||||
'&$checked': {
|
||||
color: '#ea9a97',
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiFormGroup: {
|
||||
root: {
|
||||
color: '#e0def4',
|
||||
},
|
||||
},
|
||||
MuiFormHelperText: {
|
||||
root: {
|
||||
'&$error': {
|
||||
color: '#eb6f92',
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiTableHead: {
|
||||
root: {
|
||||
color: '#e0def4',
|
||||
background: '#2a273f',
|
||||
},
|
||||
},
|
||||
MuiTableCell: {
|
||||
root: {
|
||||
color: '#e0def4',
|
||||
background: '#2a273f !important',
|
||||
},
|
||||
head: {
|
||||
color: '#e0def4',
|
||||
background: '#2a273f !important',
|
||||
},
|
||||
},
|
||||
NDLogin: {
|
||||
systemNameLink: {
|
||||
color: '#ea9a97',
|
||||
},
|
||||
icon: {},
|
||||
welcome: {
|
||||
color: '#e0def4',
|
||||
},
|
||||
card: {
|
||||
minWidth: 300,
|
||||
background: '#232136',
|
||||
},
|
||||
avatar: {},
|
||||
button: {
|
||||
boxShadow: '3px 3px 5px rgba(35, 33, 54, 0.35)',
|
||||
},
|
||||
},
|
||||
NDMobileArtistDetails: {
|
||||
bgContainer: {
|
||||
background:
|
||||
'linear-gradient(to bottom, rgba(35, 33, 54, 0.72), rgb(35, 33, 54))!important',
|
||||
},
|
||||
},
|
||||
},
|
||||
player: {
|
||||
theme: 'dark',
|
||||
stylesheet,
|
||||
},
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue