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 DraculaTheme from './dracula'
|
||||||
import NuclearTheme from './nuclear'
|
import NuclearTheme from './nuclear'
|
||||||
import NutballTheme from './nutball'
|
import NutballTheme from './nutball'
|
||||||
|
import RosePineTheme from './rosePine'
|
||||||
|
import RosePineDawnTheme from './rosePineDawn'
|
||||||
|
import RosePineMoonTheme from './rosePineMoon'
|
||||||
import AmusicTheme from './amusic'
|
import AmusicTheme from './amusic'
|
||||||
import SquiddiesGlassTheme from './SquiddiesGlass'
|
import SquiddiesGlassTheme from './SquiddiesGlass'
|
||||||
import NautilineTheme from './nautiline'
|
import NautilineTheme from './nautiline'
|
||||||
|
|
@ -43,6 +46,9 @@ export default {
|
||||||
NordTheme,
|
NordTheme,
|
||||||
NuclearTheme,
|
NuclearTheme,
|
||||||
NutballTheme,
|
NutballTheme,
|
||||||
|
RosePineDawnTheme,
|
||||||
|
RosePineMoonTheme,
|
||||||
|
RosePineTheme,
|
||||||
SpotifyTheme,
|
SpotifyTheme,
|
||||||
SquiddiesGlassTheme,
|
SquiddiesGlassTheme,
|
||||||
TokyoNightLightTheme,
|
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