feat(ui): add Nutball theme (#4544)
* add nutball theme * fix album grid outline * cleanup * Pagination fix + accent color update * Fix animation on Activity icon * style: fix prettier formatting in nutball theme --------- Co-authored-by: Deluan <deluan@navidrome.org>
This commit is contained in:
cafecitopuro
@@ -11,6 +11,7 @@ import GruvboxDarkTheme from './gruvboxDark'
|
|||||||
import CatppuccinMacchiatoTheme from './catppuccinMacchiato'
|
import CatppuccinMacchiatoTheme from './catppuccinMacchiato'
|
||||||
import DraculaTheme from './dracula'
|
import DraculaTheme from './dracula'
|
||||||
import NuclearTheme from './nuclear'
|
import NuclearTheme from './nuclear'
|
||||||
|
import NutballTheme from './nutball'
|
||||||
import AmusicTheme from './amusic'
|
import AmusicTheme from './amusic'
|
||||||
import SquiddiesGlassTheme from './SquiddiesGlass'
|
import SquiddiesGlassTheme from './SquiddiesGlass'
|
||||||
import NautilineTheme from './nautiline'
|
import NautilineTheme from './nautiline'
|
||||||
@@ -33,6 +34,7 @@ export default {
|
|||||||
NautilineTheme,
|
NautilineTheme,
|
||||||
NordTheme,
|
NordTheme,
|
||||||
NuclearTheme,
|
NuclearTheme,
|
||||||
|
NutballTheme,
|
||||||
SpotifyTheme,
|
SpotifyTheme,
|
||||||
SquiddiesGlassTheme,
|
SquiddiesGlassTheme,
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,380 @@
|
|||||||
|
const stylesheet = `
|
||||||
|
html {
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
body::-webkit-scrollbar, body::-webkit-scrollbar-button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-main .music-player-panel {
|
||||||
|
background-color: white!important;
|
||||||
|
box-shadow: none;
|
||||||
|
font-family: monospace;
|
||||||
|
color: black;
|
||||||
|
border-top: 1px solid black;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-main .music-player-panel .panel-content div.img-content {
|
||||||
|
animation: none;
|
||||||
|
box-shadow: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-main .music-player-panel .panel-content .progress-bar-content {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc(50% - 150px);
|
||||||
|
margin-left: 10px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
section.audio-main {
|
||||||
|
position: absolute;
|
||||||
|
width: calc(100% - 131px)!important;
|
||||||
|
bottom: 0;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
span.audio-title {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
span.audio-title .songTitle {
|
||||||
|
color: black!important;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-main .music-player-panel .panel-content .player-content {
|
||||||
|
flex: 1;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
div.player-content > span:first-child {
|
||||||
|
flex: 1!important;
|
||||||
|
justify-content: flex-start!important;
|
||||||
|
}
|
||||||
|
div.player-content > span:first-child svg {
|
||||||
|
width: 50px;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-main .music-player-panel .panel-content .player-content > .group {
|
||||||
|
flex: 0;
|
||||||
|
}
|
||||||
|
.play-sounds svg, .loop-btn svg, .audio-lists-btn svg, .destroy-btn {
|
||||||
|
margin-left: 0!important;
|
||||||
|
}
|
||||||
|
.play-sounds svg, .loop-btn svg, .audio-lists-btn svg, .destroy-btn svg {
|
||||||
|
width: 20px;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-main .music-player-panel .panel-content .player-content .audio-lists-btn {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-main .music-player-panel .panel-content .player-content .audio-lists-btn .audio-lists-icon svg {
|
||||||
|
height: .75em;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-main .music-player-panel .panel-content .progress-bar-content .audio-main .current-time, .react-jinke-music-player-main .music-player-panel .panel-content .progress-bar-content .audio-main .duration {
|
||||||
|
flex-basis: 0;
|
||||||
|
}
|
||||||
|
.progress-bar > div:nth-child(2) > div:nth-child(4) {
|
||||||
|
transform: translateX(-50%) translateY(5%) !important;
|
||||||
|
}
|
||||||
|
.progress-load-bar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.sound-operation > div:nth-child(4) {
|
||||||
|
transform: translateX(-50%) translateY(5%) !important;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-main .music-player-panel .panel-content .player-content .play-sounds .sound-operation {
|
||||||
|
width: 60px;
|
||||||
|
}
|
||||||
|
.rc-slider {
|
||||||
|
border-radius: 0px;
|
||||||
|
border: 1px solid black;
|
||||||
|
padding: 3px 0!important;
|
||||||
|
}
|
||||||
|
.rc-slider .rc-slider-handle {
|
||||||
|
box-shadow: none!important;
|
||||||
|
border-radius: 0px;
|
||||||
|
background-color: black!important;
|
||||||
|
border: hidden!important;
|
||||||
|
}
|
||||||
|
.rc-slider[style*="left: 0%"] {
|
||||||
|
transform: translateX(0) !important;
|
||||||
|
}
|
||||||
|
.rc-slider .rc-slider-track {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-main .rc-slider-rail, .react-jinke-music-player-main.light-theme .rc-slider-rail {
|
||||||
|
background-color: white!important;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-main .music-player-panel .panel-content .player-content .play-sounds .sounds-icon {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.lyric-btn {
|
||||||
|
display: none!important;
|
||||||
|
}
|
||||||
|
button[data-testid="save-queue-button"] {
|
||||||
|
display: none!important;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-main .music-player-panel .panel-content .player-content .audio-lists-btn {
|
||||||
|
box-shadow: 0 0 0 0;
|
||||||
|
margin: 0;
|
||||||
|
margin-left: -8px;
|
||||||
|
margin-right: -5px;
|
||||||
|
}
|
||||||
|
.audio-lists-btn:hover span,
|
||||||
|
.audio-lists-btn:hover svg {
|
||||||
|
color: #a8fe40!important;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-main.light-theme .audio-lists-btn {
|
||||||
|
background-color: white!important;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-main .music-player-panel .panel-content .player-content .audio-lists-btn .audio-lists-num {
|
||||||
|
color: grey;
|
||||||
|
margin-left: 5px;
|
||||||
|
font-size: .7rem;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-main .music-player-panel .panel-content .player-content .hide-panel {
|
||||||
|
margin-left: 2px;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-main .music-player-panel .panel-content .player-content .hide-panel svg {
|
||||||
|
stroke-width: 15px;
|
||||||
|
stroke: #fff;
|
||||||
|
height: .8em;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 810px) {
|
||||||
|
.react-jinke-music-player-main .music-player-panel .panel-content .player-content .play-sounds .sounds-icon {
|
||||||
|
margin-left: 5px;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-main .music-player-panel .panel-content .player-content .loop-btn {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
.play-sounds svg, .loop-btn svg, .audio-lists-btn svg, .destroy-btn {
|
||||||
|
margin-left: -3px!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.panel-content li {
|
||||||
|
flex-grow: 0;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player .music-player-controller,
|
||||||
|
.react-jinke-music-player-main.light-theme .music-player-controller {
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player .music-player-controller:hover,
|
||||||
|
.react-jinke-music-player .music-player-controller:has(+ .destroy-btn:hover) {
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player .music-player-controller .controller-title,
|
||||||
|
.react-jinke-music-player .music-player-controller .music-player-controller-setting {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player .music-player-controller.music-player-playing:before {
|
||||||
|
animation: none;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
@media screen and (max-width:767px) {
|
||||||
|
.react-jinke-music-player .music-player .destroy-btn {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-main .destroy-btn svg {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-main svg {
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-main svg, .react-jinke-music-player-main.light-theme svg {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-main svg:active, .react-jinke-music-player-main svg:hover,
|
||||||
|
.react-jinke-music-player-main.light-theme svg:active, .react-jinke-music-player-main.light-theme svg:hover {
|
||||||
|
color: #a8fe40;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-main .play-mode-title {
|
||||||
|
font-family: monospace;
|
||||||
|
background-color: white;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-mobile,
|
||||||
|
.react-jinke-music-player-main.light-theme .react-jinke-music-player-mobile {
|
||||||
|
font-family: monospace;
|
||||||
|
background-color: rgba(255, 255, 255, .9);
|
||||||
|
color: black!important;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 50px;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-mobile:before {
|
||||||
|
content: " ";
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
text-align: center;
|
||||||
|
width: 90%;
|
||||||
|
height: 700px;
|
||||||
|
background-color: white;
|
||||||
|
border: 1px solid black;
|
||||||
|
z-index: -1;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-mobile-header {
|
||||||
|
align-items: start;
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
justify-content: start;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-mobile-header-title {
|
||||||
|
text-align: left;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-mobile-header-right {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-mobile > .group {
|
||||||
|
flex: 0;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-mobile-cover,
|
||||||
|
.react-jinke-music-player-main.light-theme .react-jinke-music-player-mobile-cover {
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: none;
|
||||||
|
animation: none;
|
||||||
|
border: 1px solid black;
|
||||||
|
margin: 0 auto 4rem auto;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-mobile-cover .cover {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-mobile-progress .current-time {
|
||||||
|
/* margin-right: 17px; */
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-mobile-progress .current-time, .react-jinke-music-player-mobile-progress .duration {
|
||||||
|
color: black!important;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-mobile-progress .rc-slider {
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-mobile-progress .rc-slider-handle {
|
||||||
|
border: 2px solid black;
|
||||||
|
margin-top: -4px;
|
||||||
|
height: 24px;
|
||||||
|
width: 24px;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-mobile-toggle {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
padding: 2rem 0;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-mobile-operation .items .item svg {
|
||||||
|
color: black!important;
|
||||||
|
font-size: 2rem;
|
||||||
|
width: 2rem;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-mobile-operation .items .item svg:hover,
|
||||||
|
.react-jinke-music-player-mobile-operation .items .item button:hover svg {
|
||||||
|
color: #a8fe40!important;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-mobile-operation .items .item .MuiIconButton-root:hover {
|
||||||
|
background-color: rgba(0, 0, 0, 0.0);
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-mobile-operation .MuiButtonBase-root.Mui-disabled {
|
||||||
|
cursor: pointer;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-mobile-operation .items li:nth-child(5) svg {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-mobile-operation .items li:nth-child(5) svg g path:nth-child(2) {
|
||||||
|
stroke-width: .4px;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-mobile-operation .items li:nth-child(2),
|
||||||
|
.react-jinke-music-player-mobile-operation .items li:nth-child(3) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-mobile-play-model-tip {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.audio-lists-panel {
|
||||||
|
overflow-y: scroll;
|
||||||
|
scrollbar-width: none;
|
||||||
|
border-radius: .625rem;
|
||||||
|
bottom: 6.25rem;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-main.light-theme .audio-lists-panel {
|
||||||
|
font-family: monospace;
|
||||||
|
box-shadow: none;
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-main.light-theme .audio-lists-panel-header {
|
||||||
|
text-shadow: none;
|
||||||
|
border-bottom: 1px solid black;
|
||||||
|
}
|
||||||
|
.audio-lists-panel-header-line {
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
.audio-lists-panel-header-close-btn:hover svg {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
.audio-lists-panel-content .audio-item,
|
||||||
|
.react-jinke-music-player-main.light-theme .audio-item {
|
||||||
|
border-radius: 0px;
|
||||||
|
margin: 0;
|
||||||
|
border-bottom: none;
|
||||||
|
box-shadow: none;
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-main.light-theme .audio-lists-panel .audio-lists-panel-content .audio-item:nth-child(2n+1) {
|
||||||
|
background-color: white!important;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-main.light-theme .audio-lists-panel .audio-lists-panel-content .audio-item:nth-child(2n+1):hover {
|
||||||
|
background-color: #fafafa!important;
|
||||||
|
}
|
||||||
|
.audio-lists-panel-content .audio-item .player-singer {
|
||||||
|
width: unset;
|
||||||
|
padding-right: 20px;
|
||||||
|
}
|
||||||
|
.audio-lists-panel-content .audio-item .player-delete:hover svg {
|
||||||
|
color: #a8fe40!important;
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-main .audio-lists-panel-content .audio-item:active .group:not([class=".player-delete"]) svg,
|
||||||
|
.react-jinke-music-player-main .audio-lists-panel-content .audio-item:hover .group:not([class=".player-delete"]) svg,
|
||||||
|
.react-jinke-music-player-main.light-theme .audio-item:active svg,
|
||||||
|
.react-jinke-music-player-main.light-theme .audio-item:hover svg {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.audio-lists-panel-content .audio-item .player-delete {
|
||||||
|
justify-content: center;
|
||||||
|
width: 25px;
|
||||||
|
}
|
||||||
|
.audio-lists-panel-content .audio-item .player-delete svg {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.react-jinke-music-player-main.light-theme .audio-lists-panel .audio-item.playing, .react-jinke-music-player-main.light-theme .audio-lists-panel .audio-item.playing svg {
|
||||||
|
color: #a8fe40!important;
|
||||||
|
}
|
||||||
|
.audio-lists-panel-content .audio-item .player-name,
|
||||||
|
.audio-lists-panel-content .audio-item .player-singer,
|
||||||
|
.react-jinke-music-player-main.light-theme .audio-item.playing .player-singer,
|
||||||
|
.react-jinke-music-player-main.light-theme .audio-lists-panel .audio-item.playing, .react-jinke-music-player-main.light-theme .audio-lists-panel .audio-item.playing .player-delete svg {
|
||||||
|
color: black!important;
|
||||||
|
}
|
||||||
|
.audio-lists-panel-mobile {
|
||||||
|
height: 750px !important;
|
||||||
|
top: calc(100vh / 2 - 375px) !important;
|
||||||
|
width: 91% !important;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.audio-lists-panel-mobile .audio-lists-panel-content {
|
||||||
|
height: auto!important;
|
||||||
|
}
|
||||||
|
.audio-lists-panel-content {
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
@keyframes fromOut {
|
||||||
|
0% {
|
||||||
|
transform:scale(1) translateZ(0)
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform:scale(1) translate3d(0,150%,0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
export default stylesheet
|
||||||
@@ -0,0 +1,684 @@
|
|||||||
|
import stylesheet from './nutball.css.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
themeName: 'Nutball',
|
||||||
|
palette: {
|
||||||
|
primary: {
|
||||||
|
main: '#80ea00',
|
||||||
|
light: '#fff',
|
||||||
|
},
|
||||||
|
secondary: {
|
||||||
|
main: '#80ea00',
|
||||||
|
contrastText: '#fff',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
typography: {
|
||||||
|
fontFamily: 'monospace',
|
||||||
|
h6: {
|
||||||
|
fontSize: '1rem',
|
||||||
|
},
|
||||||
|
h4: {
|
||||||
|
fontSize: '1.2rem',
|
||||||
|
},
|
||||||
|
h1: {
|
||||||
|
fontSize: '1.4rem',
|
||||||
|
},
|
||||||
|
body: {
|
||||||
|
fontFamily: 'monospace',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
overrides: {
|
||||||
|
MuiAppBar: {
|
||||||
|
root: {
|
||||||
|
borderBottom: '1px solid black',
|
||||||
|
},
|
||||||
|
colorSecondary: {
|
||||||
|
color: 'black',
|
||||||
|
backgroundColor: 'white',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiPaper: {
|
||||||
|
elevation1: {
|
||||||
|
boxShadow: 'none',
|
||||||
|
},
|
||||||
|
elevation4: {
|
||||||
|
boxShadow: 'none',
|
||||||
|
},
|
||||||
|
elevation6: {
|
||||||
|
boxShadow: 'none',
|
||||||
|
},
|
||||||
|
elevation8: {
|
||||||
|
boxShadow: 'none',
|
||||||
|
border: '1px solid black',
|
||||||
|
},
|
||||||
|
elevation16: {
|
||||||
|
boxShadow: 'none',
|
||||||
|
borderRight: '1px solid grey!important',
|
||||||
|
},
|
||||||
|
elevation24: {
|
||||||
|
boxShadow: 'none',
|
||||||
|
border: '1px solid black',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiButton: {
|
||||||
|
root: {
|
||||||
|
color: '#80ea00',
|
||||||
|
border: '1px solid rgba(0, 0, 0, 0.23)',
|
||||||
|
transition: 'none',
|
||||||
|
'&[aria-label="Grid"]': {
|
||||||
|
width: '50%',
|
||||||
|
marginLeft: '15px',
|
||||||
|
marginRight: '2px',
|
||||||
|
marginBottom: '10px',
|
||||||
|
'& .MuiButton-label': {
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'&[aria-label="Table"]': {
|
||||||
|
width: '50%',
|
||||||
|
marginRight: '15px',
|
||||||
|
marginLeft: '2px',
|
||||||
|
marginBottom: '10px',
|
||||||
|
'& .MuiButton-label': {
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
textPrimary: {
|
||||||
|
color: 'rgba(0,0,0,.57)',
|
||||||
|
'&:hover': {
|
||||||
|
borderColor: 'black',
|
||||||
|
backgroundColor: '#eaeaea',
|
||||||
|
},
|
||||||
|
'&[aria-label="Grid"]': {
|
||||||
|
color: 'black',
|
||||||
|
borderColor: 'black!important',
|
||||||
|
},
|
||||||
|
'&[aria-label="Table"]': {
|
||||||
|
color: 'black',
|
||||||
|
borderColor: 'black!important',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
textSecondary: {
|
||||||
|
color: 'rgba(0,0,0,.57)',
|
||||||
|
'&:hover': {
|
||||||
|
borderColor: 'black',
|
||||||
|
backgroundColor: '#eaeaea',
|
||||||
|
},
|
||||||
|
'&[aria-label="Grid"]': {
|
||||||
|
color: 'grey',
|
||||||
|
borderColor: 'grey!important',
|
||||||
|
},
|
||||||
|
'&[aria-label="Table"]': {
|
||||||
|
color: 'grey',
|
||||||
|
borderColor: 'grey!important',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
'& svg': {
|
||||||
|
display: 'none',
|
||||||
|
},
|
||||||
|
'& span': {
|
||||||
|
paddingLeft: '0',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
contained: {
|
||||||
|
boxShadow: 'none',
|
||||||
|
'&:hover': {
|
||||||
|
boxShadow: 'none',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiButtonGroup: {
|
||||||
|
groupedTextHorizontal: {
|
||||||
|
justifyContent: 'flex-start',
|
||||||
|
margin: '0 .5rem',
|
||||||
|
'& button': {
|
||||||
|
width: '25%',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
groupedTextPrimary: {
|
||||||
|
'&:not(:last-child)': {
|
||||||
|
border: 'none',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiIconButton: {
|
||||||
|
root: {
|
||||||
|
'&[aria-label="Settings"]': {
|
||||||
|
padding: '12px!important',
|
||||||
|
marginRight: '-9px!important',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiSwitch: {
|
||||||
|
thumb: {
|
||||||
|
color: '#eaeaea',
|
||||||
|
boxShadow: 'none',
|
||||||
|
borderRadius: '0',
|
||||||
|
},
|
||||||
|
track: {
|
||||||
|
borderRadius: '0',
|
||||||
|
},
|
||||||
|
switchBase: {
|
||||||
|
color: '#eaeaea',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiCheckbox: {
|
||||||
|
root: {
|
||||||
|
'& svg': {
|
||||||
|
width: '.8em',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
PrivateSwitchBase: {
|
||||||
|
root: {
|
||||||
|
padding: '8px 8px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
RaButton: {
|
||||||
|
button: {
|
||||||
|
marginRight: '10px',
|
||||||
|
lineHeight: 'normal',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiMenu: {
|
||||||
|
list: {
|
||||||
|
'& p': {
|
||||||
|
fontSize: '.85rem',
|
||||||
|
},
|
||||||
|
'& p:first-of-type': {
|
||||||
|
margin: '6px 1rem',
|
||||||
|
},
|
||||||
|
'& li:has(span.MuiCheckbox-root)': {
|
||||||
|
marginLeft: '-10px',
|
||||||
|
},
|
||||||
|
'& span.MuiCheckbox-root .MuiSvgIcon-root': {
|
||||||
|
width: '.75em',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiMenuItem: {
|
||||||
|
root: {
|
||||||
|
fontSize: '.85rem',
|
||||||
|
minHeight: 'inherit',
|
||||||
|
'&[aria-label="Clear value"]:before': {
|
||||||
|
display: 'block',
|
||||||
|
content: "'(any)'",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiListItem: {
|
||||||
|
button: {
|
||||||
|
'& span.MuiCheckbox-root': {
|
||||||
|
padding: '0px 8px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiTooltip: {
|
||||||
|
tooltip: {
|
||||||
|
backgroundColor: 'rgb(117 117 117)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiCircularProgress: {
|
||||||
|
root: {
|
||||||
|
color: '#80ea00!important',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiAvatar: {
|
||||||
|
img: {
|
||||||
|
borderRadius: '5px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiFab: {
|
||||||
|
root: {
|
||||||
|
boxShadow: 'none',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiTableHead: {
|
||||||
|
root: {
|
||||||
|
boxShadow: 'none!important',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiTableCell: {
|
||||||
|
root: {
|
||||||
|
borderBottom: 'none',
|
||||||
|
},
|
||||||
|
sizeSmall: {
|
||||||
|
'&:last-child': {
|
||||||
|
textAlign: 'right',
|
||||||
|
},
|
||||||
|
'&:last-child:is(th)': {
|
||||||
|
paddingRight: '45px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiTablePagination: {
|
||||||
|
root: {
|
||||||
|
fontSize: '.6rem',
|
||||||
|
},
|
||||||
|
caption: {
|
||||||
|
fontSize: '.6rem',
|
||||||
|
},
|
||||||
|
menuItem: {
|
||||||
|
fontSize: '.6rem',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiTabs: {
|
||||||
|
root: {
|
||||||
|
marginBottom: '1rem',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiToolbar: {
|
||||||
|
gutters: {
|
||||||
|
'@media (min-width: 600px)': {
|
||||||
|
paddingLeft: '16px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
RaListToolbar: {
|
||||||
|
toolbar: {
|
||||||
|
alignItems: 'start',
|
||||||
|
'& form:has(> div:nth-child(3))': {
|
||||||
|
paddingBottom: '.6rem',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
paddingRight: '0!important',
|
||||||
|
marginTop: '-8px',
|
||||||
|
textWrap: 'nowrap',
|
||||||
|
'@media (max-width: 599.95px)': {
|
||||||
|
marginTop: '3px',
|
||||||
|
},
|
||||||
|
'& .MuiButton-text': {
|
||||||
|
height: '2.5rem',
|
||||||
|
padding: '7px 10px',
|
||||||
|
marginRight: '0',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
RaTopToolbar: {
|
||||||
|
root: {
|
||||||
|
'& div:first-of-type > div:first-of-type': {
|
||||||
|
display: 'flex',
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
rowGap: '10px',
|
||||||
|
},
|
||||||
|
'& div:first-of-type > div:first-of-type button': {
|
||||||
|
height: '2rem',
|
||||||
|
},
|
||||||
|
'& div:first-of-type > div:first-of-type .MuiIconButton-root': {
|
||||||
|
padding: '0',
|
||||||
|
marginRight: '2rem',
|
||||||
|
},
|
||||||
|
'& div:first-of-type > div:nth-of-type(2)': {
|
||||||
|
height: '2rem',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
RaToolbar: {
|
||||||
|
toolbar: {
|
||||||
|
backgroundColor: 'white',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
RaFilterButton: {
|
||||||
|
root: {
|
||||||
|
textWrap: 'nowrap',
|
||||||
|
'& button': {
|
||||||
|
'@media (max-width: 599.95px)': {
|
||||||
|
padding: '12px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"&[resource*='song']": {
|
||||||
|
marginLeft: '10px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
RaDeleteWithUndoButton: {
|
||||||
|
deleteButton: {
|
||||||
|
color: 'rgba(0,0,0,.57)',
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.04)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
RaAutocompleteSuggestionList: {
|
||||||
|
suggestionsContainer: {
|
||||||
|
borderRadius: '4px',
|
||||||
|
outline: '1px solid black',
|
||||||
|
backgroundColor: 'white',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
RaEmpty: {
|
||||||
|
message: {
|
||||||
|
marginTop: '3rem',
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
display: 'none',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
RaAutocompleteArrayInput: {
|
||||||
|
chipContainerOutlined: {
|
||||||
|
'&:empty': {
|
||||||
|
margin: '0',
|
||||||
|
},
|
||||||
|
margin: '10px 0',
|
||||||
|
},
|
||||||
|
chip: {
|
||||||
|
margin: '4px 4px 4px 0!important',
|
||||||
|
},
|
||||||
|
inputInput: {
|
||||||
|
flexGrow: '0',
|
||||||
|
'& #genre_id': {
|
||||||
|
flexGrow: '0',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
RaLayout: {
|
||||||
|
content: {
|
||||||
|
width: '100%',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
RaDatagrid: {
|
||||||
|
headerCell: {
|
||||||
|
fontWeight: 'bold',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
NDAlbumShow: {
|
||||||
|
albumActions: {
|
||||||
|
padding: '0',
|
||||||
|
alignItems: 'center',
|
||||||
|
margin: '1rem 0',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiCardContent: {
|
||||||
|
root: {
|
||||||
|
fontFamily: 'monospace',
|
||||||
|
fontSize: '.8rem',
|
||||||
|
'& #now-playing-title': {
|
||||||
|
fontSize: '.8rem',
|
||||||
|
},
|
||||||
|
'&:last-child': {
|
||||||
|
paddingBottom: '16px',
|
||||||
|
},
|
||||||
|
'&[class*="makeStyles-usernameWrap-"]': {
|
||||||
|
paddingBottom: '16px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiDialogContent: {
|
||||||
|
root: {
|
||||||
|
'& .MuiTableCell-sizeSmall:last-child': {
|
||||||
|
textAlign: 'left',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiGridList: {
|
||||||
|
root: {
|
||||||
|
'&:empty': {
|
||||||
|
display: 'none',
|
||||||
|
},
|
||||||
|
backgroundColor: 'white',
|
||||||
|
borderRadius: '4px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiGridListTile: {
|
||||||
|
root: {
|
||||||
|
'@media (max-width: 599.95px)': {
|
||||||
|
padding: '7px!important',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tile: {
|
||||||
|
'& img': {
|
||||||
|
borderRadius: '5px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
NDAlbumGridView: {
|
||||||
|
root: {
|
||||||
|
'&:has(.MuiGridList-root:empty)': {
|
||||||
|
display: 'none',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
albumContainer: {
|
||||||
|
border: '1px solid white',
|
||||||
|
borderRadius: '5px',
|
||||||
|
'& a:hover img': {
|
||||||
|
outline: '1px solid black',
|
||||||
|
},
|
||||||
|
'& a:hover > div:nth-of-type(2)': {
|
||||||
|
border: 'none',
|
||||||
|
outline: '1px solid black',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
albumLink: {
|
||||||
|
paddingRight: '6px',
|
||||||
|
},
|
||||||
|
albumSubtitle: {
|
||||||
|
fontFamily: 'monospace',
|
||||||
|
},
|
||||||
|
tileBar: {
|
||||||
|
transition: 'all 50ms ease-out',
|
||||||
|
},
|
||||||
|
tileBarMobile: {
|
||||||
|
transition: 'all 50ms ease-out',
|
||||||
|
borderLeft: '1px solid black',
|
||||||
|
borderRight: '1px solid black',
|
||||||
|
borderBottom: '1px solid black',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiGridListTileBar: {
|
||||||
|
root: {
|
||||||
|
height: '30px!important',
|
||||||
|
background: 'white!important',
|
||||||
|
borderTop: '1px solid black',
|
||||||
|
borderBottom: '1px solid black',
|
||||||
|
borderRadius: '0 0 5px 5px',
|
||||||
|
},
|
||||||
|
titleWrap: {
|
||||||
|
marginLeft: '0px',
|
||||||
|
},
|
||||||
|
titlePositionBottom: {
|
||||||
|
bottom: '0',
|
||||||
|
},
|
||||||
|
subtitle: {
|
||||||
|
'& button': {
|
||||||
|
color: 'black!important',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
actionIcon: {
|
||||||
|
'& button': {
|
||||||
|
color: 'black!important',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
RaFilter: {
|
||||||
|
form: {
|
||||||
|
width: '100%',
|
||||||
|
'& div.filter-field:first-child': {
|
||||||
|
flex: '1 100%',
|
||||||
|
'& [class*="RaSearchInput-input-"]': {
|
||||||
|
width: '100%',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiInputAdornment: {
|
||||||
|
positionEnd: {
|
||||||
|
justifyContent: 'flex-end',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
RaFilterFormInput: {
|
||||||
|
body: {
|
||||||
|
'& label': {
|
||||||
|
transform: 'translate(14px, -6px) scale(0.75)!important',
|
||||||
|
backgroundColor: '#fafafa',
|
||||||
|
padding: '0 5px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
hideButton: {
|
||||||
|
order: '1',
|
||||||
|
marginLeft: '2px',
|
||||||
|
top: '-7px',
|
||||||
|
padding: '8px',
|
||||||
|
},
|
||||||
|
spacer: {
|
||||||
|
order: '2',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
RaPaginationActions: {
|
||||||
|
actions: {
|
||||||
|
'& button': {
|
||||||
|
border: 'none',
|
||||||
|
fontSize: '.6rem',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
NDAlbumDetails: {
|
||||||
|
cover: {
|
||||||
|
borderRadius: '5px',
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
padding: '0',
|
||||||
|
marginLeft: '1rem',
|
||||||
|
},
|
||||||
|
externalLinks: {
|
||||||
|
marginTop: '5px',
|
||||||
|
},
|
||||||
|
notes: {
|
||||||
|
display: 'none',
|
||||||
|
},
|
||||||
|
root: {
|
||||||
|
'& p': {
|
||||||
|
fontSize: '.7rem',
|
||||||
|
backgroundColor: '#e0e0e0',
|
||||||
|
borderRadius: '10px',
|
||||||
|
width: 'fit-content',
|
||||||
|
padding: '2px 7px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
NDPlaylistDetails: {
|
||||||
|
cover: {
|
||||||
|
borderRadius: '5px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
NDDesktopArtistDetails: {
|
||||||
|
cover: {
|
||||||
|
borderRadius: '0px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
NDMobileArtistDetails: {
|
||||||
|
bgContainer: {
|
||||||
|
background:
|
||||||
|
'linear-gradient(to bottom, rgb(255 255 255 / 51%), rgb(250 250 250))!important',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
NDArtistShow: {
|
||||||
|
actionsContainer: {
|
||||||
|
'& button': {
|
||||||
|
padding: '4px 5px',
|
||||||
|
fontSize: '0.8125rem',
|
||||||
|
height: '2rem',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
NDAudioPlayer: {
|
||||||
|
audioTitle: {
|
||||||
|
color: 'black',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
NDLogin: {
|
||||||
|
main: {
|
||||||
|
background: 'white',
|
||||||
|
'& .MuiFormLabel-root': {
|
||||||
|
color: '#000',
|
||||||
|
},
|
||||||
|
'& .MuiFormLabel-root.Mui-error': {
|
||||||
|
color: '#000',
|
||||||
|
},
|
||||||
|
'& .MuiInput-underline:before': {
|
||||||
|
borderBottom: 'none',
|
||||||
|
},
|
||||||
|
'& .MuiInput-underline:after': {
|
||||||
|
borderBottom: 'none',
|
||||||
|
},
|
||||||
|
'& .MuiFormHelperText-root.Mui-error': {
|
||||||
|
color: '#000',
|
||||||
|
paddingLeft: '10px',
|
||||||
|
},
|
||||||
|
'& .MuiInput-underline:hover:not(.Mui-disabled):before': {
|
||||||
|
borderBottom: 'none',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
card: {
|
||||||
|
minWidth: 300,
|
||||||
|
marginTop: '6em',
|
||||||
|
backgroundColor: '#ffffffe6',
|
||||||
|
border: '1px solid black',
|
||||||
|
},
|
||||||
|
avatar: {
|
||||||
|
marginTop: '1rem',
|
||||||
|
'& img': {
|
||||||
|
filter: 'invert(1)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
icon: {},
|
||||||
|
input: {
|
||||||
|
'& .MuiInput-root': {
|
||||||
|
border: '1px solid black',
|
||||||
|
borderRadius: '4px',
|
||||||
|
padding: '10px',
|
||||||
|
},
|
||||||
|
'& .MuiInputLabel-root': {
|
||||||
|
padding: '10px',
|
||||||
|
},
|
||||||
|
'& .MuiInputLabel-shrink': {
|
||||||
|
transform: 'translate(0, -5.5px) scale(0.75)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
marginTop: '2rem',
|
||||||
|
},
|
||||||
|
button: {
|
||||||
|
boxShadow: 'none',
|
||||||
|
'&:hover': {
|
||||||
|
boxShadow: 'none',
|
||||||
|
backgroundColor: 'rgb(117, 177, 44)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
systemNameLink: {
|
||||||
|
fontFamily: 'monospace',
|
||||||
|
marginBottom: '1rem',
|
||||||
|
color: 'black',
|
||||||
|
'&:before': {
|
||||||
|
content: "'Welcome to '",
|
||||||
|
},
|
||||||
|
'&:after': {
|
||||||
|
content: "' *~*!'",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiCssBaseline: {
|
||||||
|
'@global': {
|
||||||
|
'*::-webkit-scrollbar': {
|
||||||
|
display: 'none',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiBackdrop: {
|
||||||
|
root: {
|
||||||
|
backgroundColor: 'rgba(255, 255, 255, 0.5)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
RaLoading: {
|
||||||
|
message: {
|
||||||
|
fontFamily: 'monospace',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
player: {
|
||||||
|
theme: 'light',
|
||||||
|
stylesheet,
|
||||||
|
},
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user