e15896bf32
Add Catppuccin Latte (the light version) theme based on the existing Catppuccin Macchiato theme. The palette and player styling are adapted for light mode while staying as close as practical to the existing Macchiato theme behavior. I've opted to use gray for the color for controls. The dark version appears to mix a few control/accent colors, so for Latte I standardized those choices. This might be worth looking into in a separate PR. It uses gray and blue. Signed-off-by: Love Billenius <lovebillenius@disroot.org> Co-authored-by: Deluan Quintão <deluan@navidrome.org> Signed-off-by: Deluan <deluan@navidrome.org>
203 lines
5.2 KiB
JavaScript
203 lines
5.2 KiB
JavaScript
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: #6c6f85;
|
|
stroke: #6c6f85;
|
|
}
|
|
|
|
.react-jinke-music-player-main svg:active,
|
|
.react-jinke-music-player-main svg:hover {
|
|
color: #7c7f93;
|
|
}
|
|
|
|
.react-jinke-music-player-main.light-theme svg:active,
|
|
.react-jinke-music-player-main.light-theme svg:hover {
|
|
color: #7c7f93;
|
|
}
|
|
|
|
.react-jinke-music-player-mobile-play-model-tip,
|
|
.react-jinke-music-player-main.light-theme .play-mode-title {
|
|
background-color: #6c6f85;
|
|
color: #eff1f5;
|
|
}
|
|
|
|
.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: #6c6f85;
|
|
}
|
|
|
|
.react-jinke-music-player-main ::-webkit-scrollbar-thumb {
|
|
background-color: #6c6f85;
|
|
}
|
|
|
|
.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active {
|
|
box-shadow: 0 0 2px #6c6f85;
|
|
}
|
|
|
|
.react-jinke-music-player-main .audio-item.playing svg {
|
|
color: #6c6f85;
|
|
}
|
|
|
|
.react-jinke-music-player-main .audio-item.playing .player-singer {
|
|
color: #6c6f85 !important;
|
|
}
|
|
|
|
.react-jinke-music-player-main .loading svg {
|
|
color: #6c6f85 !important;
|
|
}
|
|
|
|
.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle {
|
|
border: hidden;
|
|
box-shadow:
|
|
rgba(76, 79, 105, 0.12) 0px 4px 6px,
|
|
rgba(76, 79, 105, 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: #6c6f85 !important;
|
|
border: 1px solid #6c6f85;
|
|
}
|
|
|
|
.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: #e6e9ef;
|
|
color: #4c4f69;
|
|
box-shadow: 0 0 8px rgba(76, 79, 105, 0.15);
|
|
}
|
|
|
|
.react-jinke-music-player-main.light-theme .music-player-panel {
|
|
color: #4c4f69;
|
|
}
|
|
|
|
.audio-lists-panel {
|
|
background-color: #e6e9ef;
|
|
bottom: 6.25rem;
|
|
box-shadow:
|
|
rgba(76, 79, 105, 0.12) 0px 4px 6px,
|
|
rgba(76, 79, 105, 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-content .audio-item:active,
|
|
.audio-lists-panel-content .audio-item:hover {
|
|
background-color: rgba(76, 79, 105, 0.08);
|
|
}
|
|
|
|
.audio-lists-panel-header {
|
|
border-bottom: 1px solid #ccd0da;
|
|
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: #e6e9ef;
|
|
color: #4c4f69;
|
|
}
|
|
|
|
.audio-lists-panel-content .audio-item {
|
|
line-height: 32px;
|
|
color: #4c4f69;
|
|
}
|
|
|
|
.react-jinke-music-player-main .music-player-panel .panel-content .img-content {
|
|
box-shadow:
|
|
rgba(76, 79, 105, 0.12) 0px 4px 6px,
|
|
rgba(76, 79, 105, 0.08) 0px 5px 7px;
|
|
}
|
|
|
|
.react-jinke-music-player-main .music-player-lyric {
|
|
color: #6c6f85; /* subtext0 */
|
|
-webkit-text-stroke: 0.35px #eff1f5;
|
|
font-weight: bolder;
|
|
}
|
|
|
|
.react-jinke-music-player-main .lyric-btn-active,
|
|
.react-jinke-music-player-main .lyric-btn-active svg {
|
|
color: #6c6f85 !important;
|
|
}
|
|
|
|
.audio-lists-panel-content .audio-item.playing,
|
|
.audio-lists-panel-content .audio-item.playing svg {
|
|
color: #6c6f85;
|
|
}
|
|
|
|
.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: #6c6f85;
|
|
}
|
|
|
|
.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: #dce0e8; /* surface1 */
|
|
}
|
|
|
|
/* Mobile */
|
|
.react-jinke-music-player-mobile-cover {
|
|
border: none;
|
|
box-shadow:
|
|
rgba(76, 79, 105, 0.12) 0px 4px 6px,
|
|
rgba(76, 79, 105, 0.08) 0px 5px 7px;
|
|
}
|
|
|
|
.react-jinke-music-player .music-player-controller {
|
|
border: none;
|
|
background-color: #e6e9ef;
|
|
border-color: #e6e9ef;
|
|
box-shadow:
|
|
rgba(76, 79, 105, 0.12) 0px 4px 6px,
|
|
rgba(76, 79, 105, 0.08) 0px 5px 7px;
|
|
color: #6c6f85;
|
|
}
|
|
|
|
.react-jinke-music-player .music-player-controller.music-player-playing:before {
|
|
border: 1px solid rgba(76, 79, 105, 0.18);
|
|
}
|
|
|
|
.react-jinke-music-player .music-player-controller .music-player-controller-setting {
|
|
background: rgba(108, 111, 133, 0.2);
|
|
color: #eff1f5;
|
|
}
|
|
|
|
.react-jinke-music-player-mobile-progress .rc-slider-handle,
|
|
.react-jinke-music-player-mobile-progress .rc-slider-track {
|
|
background-color: #6c6f85;
|
|
}
|
|
|
|
.react-jinke-music-player-mobile-progress .rc-slider-handle {
|
|
border: none;
|
|
}
|
|
`
|
|
|
|
export default stylesheet
|