diff --git a/go.mod b/go.mod index 2a22164f6..4c7a95a23 100644 --- a/go.mod +++ b/go.mod @@ -59,14 +59,14 @@ require ( github.com/robfig/cron/v3 v3.0.1 github.com/sabhiram/go-gitignore v0.0.0-20210923224102-525f6e181f06 github.com/santhosh-tekuri/jsonschema/v6 v6.0.2 - github.com/sirupsen/logrus v1.9.3 + github.com/sirupsen/logrus v1.9.4 github.com/spf13/cobra v1.10.2 github.com/spf13/viper v1.21.0 github.com/stretchr/testify v1.11.1 github.com/tetratelabs/wazero v1.11.0 github.com/unrolled/secure v1.17.0 github.com/xrash/smetrics v0.0.0-20250705151800-55b8f293f342 - go.senan.xyz/taglib v0.0.0-00010101000000-000000000000 + go.senan.xyz/taglib v0.11.1 go.uber.org/goleak v1.3.0 golang.org/x/image v0.35.0 golang.org/x/net v0.49.0 @@ -98,7 +98,7 @@ require ( github.com/goccy/go-json v0.10.5 // indirect github.com/goccy/go-yaml v1.19.2 // indirect github.com/google/go-cmp v0.7.0 // indirect - github.com/google/pprof v0.0.0-20260111202518-71be6bfdd440 // indirect + github.com/google/pprof v0.0.0-20260115054156-294ebfa9ad83 // indirect github.com/google/subcommands v1.2.0 // indirect github.com/gorilla/css v1.0.1 // indirect github.com/hashicorp/errwrap v1.1.0 // indirect diff --git a/go.sum b/go.sum index e0a38f6bb..ef3f8389d 100644 --- a/go.sum +++ b/go.sum @@ -110,8 +110,8 @@ github.com/google/go-cmp v0.7.0 h1:wk8382ETsv4JYUZwIsn6YpYiWiBsYLSJiTsyBybVuN8= github.com/google/go-cmp v0.7.0/go.mod h1:pXiqmnSA92OHEEa9HXL2W4E7lf9JzCmGVUdgjX3N/iU= github.com/google/go-pipeline v0.0.0-20230411140531-6cbedfc1d3fc h1:hd+uUVsB1vdxohPneMrhGH2YfQuH5hRIK9u4/XCeUtw= github.com/google/go-pipeline v0.0.0-20230411140531-6cbedfc1d3fc/go.mod h1:SL66SJVysrh7YbDCP9tH30b8a9o/N2HeiQNUm85EKhc= -github.com/google/pprof v0.0.0-20260111202518-71be6bfdd440 h1:oKBqR+eQXiIM7X8K1JEg9aoTEePLq/c6Awe484abOuA= -github.com/google/pprof v0.0.0-20260111202518-71be6bfdd440/go.mod h1:MxpfABSjhmINe3F1It9d+8exIHFvUqtLIRCdOGNXqiI= +github.com/google/pprof v0.0.0-20260115054156-294ebfa9ad83 h1:z2ogiKUYzX5Is6zr/vP9vJGqPwcdqsWjOt+V8J7+bTc= +github.com/google/pprof v0.0.0-20260115054156-294ebfa9ad83/go.mod h1:MxpfABSjhmINe3F1It9d+8exIHFvUqtLIRCdOGNXqiI= github.com/google/subcommands v1.2.0 h1:vWQspBTo2nEqTUFita5/KeEWlUL8kQObDFbub/EN9oE= github.com/google/subcommands v1.2.0/go.mod h1:ZjhPrFU+Olkh9WazFPsl27BQ4UPiG37m3yTrtFlrHVk= github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0= @@ -245,8 +245,8 @@ github.com/segmentio/asm v1.2.1/go.mod h1:BqMnlJP91P8d+4ibuonYZw9mfnzI9HfxselHZr github.com/sethvargo/go-retry v0.3.0 h1:EEt31A35QhrcRZtrYFDTBg91cqZVnFL2navjDrah2SE= github.com/sethvargo/go-retry v0.3.0/go.mod h1:mNX17F0C/HguQMyMyJxcnU471gOZGxCLyYaFyAZraas= github.com/sirupsen/logrus v1.4.2/go.mod h1:tLMulIdttU9McNUspp0xgXVQah82FyeX6MwdIuYE2rE= -github.com/sirupsen/logrus v1.9.3 h1:dueUQJ1C2q9oE3F7wvmSGAaVtTmUizReu6fjN8uqzbQ= -github.com/sirupsen/logrus v1.9.3/go.mod h1:naHLuLoDiP4jHNo9R0sCBMtWGeIprob74mVsIT4qYEQ= +github.com/sirupsen/logrus v1.9.4 h1:TsZE7l11zFCLZnZ+teH4Umoq5BhEIfIzfRDZ1Uzql2w= +github.com/sirupsen/logrus v1.9.4/go.mod h1:ftWc9WdOfJ0a92nsE2jF5u5ZwH8Bv2zdeOC42RjbV2g= github.com/smartystreets/assertions v0.0.0-20180927180507-b2de0cb4f26d h1:zE9ykElWQ6/NYmHa3jpm/yHnI4xSofP+UP6SpjHcSeM= github.com/smartystreets/assertions v0.0.0-20180927180507-b2de0cb4f26d/go.mod h1:OnSkiWE9lh6wB0YB77sQom3nweQdgAjqCqsofrRNTgc= github.com/smartystreets/goconvey v1.6.4 h1:fv0U8FUIMPNf1L9lnHLvLhgicrIVChEkdzIKYqbNC9s= @@ -275,7 +275,6 @@ github.com/stretchr/testify v0.0.0-20161117074351-18a02ba4a312/go.mod h1:a8OnRci github.com/stretchr/testify v1.2.2/go.mod h1:a8OnRcib4nhh0OaRAV+Yts87kKdq0PP7pXfy6kDkUVs= github.com/stretchr/testify v1.4.0/go.mod h1:j7eGeouHqKxXV5pUuKE4zz7dFj8WfuZ+81PSLYec5m4= github.com/stretchr/testify v1.6.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg= -github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg= github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg= github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO+kdMU+MU= github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo= @@ -364,7 +363,6 @@ golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7w golang.org/x/sys v0.0.0-20210615035016-665e8c7367d1/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg= golang.org/x/sys v0.0.0-20220520151302-bc2c85ada10a/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg= golang.org/x/sys v0.0.0-20220615213510-4f61da869c0c/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg= -golang.org/x/sys v0.0.0-20220715151400-c0bba94af5f8/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg= golang.org/x/sys v0.0.0-20220722155257-8c9f86f7a55f/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg= golang.org/x/sys v0.5.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg= golang.org/x/sys v0.8.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg= diff --git a/plugins/cmd/ndpgen/go.mod b/plugins/cmd/ndpgen/go.mod index 42e6067d0..af9fce441 100644 --- a/plugins/cmd/ndpgen/go.mod +++ b/plugins/cmd/ndpgen/go.mod @@ -4,10 +4,10 @@ go 1.25 require ( github.com/extism/go-pdk v1.1.3 - github.com/onsi/ginkgo/v2 v2.27.3 - github.com/onsi/gomega v1.38.3 + github.com/onsi/ginkgo/v2 v2.27.5 + github.com/onsi/gomega v1.39.0 github.com/santhosh-tekuri/jsonschema/v6 v6.0.2 - golang.org/x/tools v0.40.0 + golang.org/x/tools v0.41.0 gopkg.in/yaml.v3 v3.0.1 ) @@ -16,11 +16,11 @@ require ( github.com/go-logr/logr v1.4.3 // indirect github.com/go-task/slim-sprig/v3 v3.0.0 // indirect github.com/google/go-cmp v0.7.0 // indirect - github.com/google/pprof v0.0.0-20250403155104-27863c87afa6 // indirect + github.com/google/pprof v0.0.0-20260115054156-294ebfa9ad83 // indirect go.yaml.in/yaml/v3 v3.0.4 // indirect - golang.org/x/mod v0.31.0 // indirect - golang.org/x/net v0.48.0 // indirect + golang.org/x/mod v0.32.0 // indirect + golang.org/x/net v0.49.0 // indirect golang.org/x/sync v0.19.0 // indirect - golang.org/x/sys v0.39.0 // indirect - golang.org/x/text v0.32.0 // indirect + golang.org/x/sys v0.40.0 // indirect + golang.org/x/text v0.33.0 // indirect ) diff --git a/plugins/cmd/ndpgen/go.sum b/plugins/cmd/ndpgen/go.sum index c74b0683f..952672d0e 100644 --- a/plugins/cmd/ndpgen/go.sum +++ b/plugins/cmd/ndpgen/go.sum @@ -20,8 +20,8 @@ github.com/goccy/go-yaml v1.18.0 h1:8W7wMFS12Pcas7KU+VVkaiCng+kG8QiFeFwzFb+rwuw= github.com/goccy/go-yaml v1.18.0/go.mod h1:XBurs7gK8ATbW4ZPGKgcbrY1Br56PdM69F7LkFRi1kA= github.com/google/go-cmp v0.7.0 h1:wk8382ETsv4JYUZwIsn6YpYiWiBsYLSJiTsyBybVuN8= github.com/google/go-cmp v0.7.0/go.mod h1:pXiqmnSA92OHEEa9HXL2W4E7lf9JzCmGVUdgjX3N/iU= -github.com/google/pprof v0.0.0-20250403155104-27863c87afa6 h1:BHT72Gu3keYf3ZEu2J0b1vyeLSOYI8bm5wbJM/8yDe8= -github.com/google/pprof v0.0.0-20250403155104-27863c87afa6/go.mod h1:boTsfXsheKC2y+lKOCMpSfarhxDeIzfZG1jqGcPl3cA= +github.com/google/pprof v0.0.0-20260115054156-294ebfa9ad83 h1:z2ogiKUYzX5Is6zr/vP9vJGqPwcdqsWjOt+V8J7+bTc= +github.com/google/pprof v0.0.0-20260115054156-294ebfa9ad83/go.mod h1:MxpfABSjhmINe3F1It9d+8exIHFvUqtLIRCdOGNXqiI= github.com/joshdk/go-junit v1.0.0 h1:S86cUKIdwBHWwA6xCmFlf3RTLfVXYQfvanM5Uh+K6GE= github.com/joshdk/go-junit v1.0.0/go.mod h1:TiiV0PqkaNfFXjEiyjWM3XXrhVyCa1K4Zfga6W52ung= github.com/kr/pretty v0.3.1 h1:flRD4NNwYAUpkphVc1HcthR4KEIFJ65n8Mw5qdRn3LE= @@ -32,10 +32,10 @@ github.com/maruel/natural v1.1.1 h1:Hja7XhhmvEFhcByqDoHz9QZbkWey+COd9xWfCfn1ioo= github.com/maruel/natural v1.1.1/go.mod h1:v+Rfd79xlw1AgVBjbO0BEQmptqb5HvL/k9GRHB7ZKEg= github.com/mfridman/tparse v0.18.0 h1:wh6dzOKaIwkUGyKgOntDW4liXSo37qg5AXbIhkMV3vE= github.com/mfridman/tparse v0.18.0/go.mod h1:gEvqZTuCgEhPbYk/2lS3Kcxg1GmTxxU7kTC8DvP0i/A= -github.com/onsi/ginkgo/v2 v2.27.3 h1:ICsZJ8JoYafeXFFlFAG75a7CxMsJHwgKwtO+82SE9L8= -github.com/onsi/ginkgo/v2 v2.27.3/go.mod h1:ArE1D/XhNXBXCBkKOLkbsb2c81dQHCRcF5zwn/ykDRo= -github.com/onsi/gomega v1.38.3 h1:eTX+W6dobAYfFeGC2PV6RwXRu/MyT+cQguijutvkpSM= -github.com/onsi/gomega v1.38.3/go.mod h1:ZCU1pkQcXDO5Sl9/VVEGlDyp+zm0m1cmeG5TOzLgdh4= +github.com/onsi/ginkgo/v2 v2.27.5 h1:ZeVgZMx2PDMdJm/+w5fE/OyG6ILo1Y3e+QX4zSR0zTE= +github.com/onsi/ginkgo/v2 v2.27.5/go.mod h1:ArE1D/XhNXBXCBkKOLkbsb2c81dQHCRcF5zwn/ykDRo= +github.com/onsi/gomega v1.39.0 h1:y2ROC3hKFmQZJNFeGAMeHZKkjBL65mIZcvrLQBF9k6Q= +github.com/onsi/gomega v1.39.0/go.mod h1:ZCU1pkQcXDO5Sl9/VVEGlDyp+zm0m1cmeG5TOzLgdh4= github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM= github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4= github.com/rogpeppe/go-internal v1.13.1 h1:KvO1DLK/DRN07sQ1LQKScxyZJuNnedQ5/wKSR38lUII= @@ -54,18 +54,18 @@ github.com/tidwall/sjson v1.2.5 h1:kLy8mja+1c9jlljvWTlSazM7cKDRfJuR/bOJhcY5NcY= github.com/tidwall/sjson v1.2.5/go.mod h1:Fvgq9kS/6ociJEDnK0Fk1cpYF4FIW6ZF7LAe+6jwd28= go.yaml.in/yaml/v3 v3.0.4 h1:tfq32ie2Jv2UxXFdLJdh3jXuOzWiL1fo0bu/FbuKpbc= go.yaml.in/yaml/v3 v3.0.4/go.mod h1:DhzuOOF2ATzADvBadXxruRBLzYTpT36CKvDb3+aBEFg= -golang.org/x/mod v0.31.0 h1:HaW9xtz0+kOcWKwli0ZXy79Ix+UW/vOfmWI5QVd2tgI= -golang.org/x/mod v0.31.0/go.mod h1:43JraMp9cGx1Rx3AqioxrbrhNsLl2l/iNAvuBkrezpg= -golang.org/x/net v0.48.0 h1:zyQRTTrjc33Lhh0fBgT/H3oZq9WuvRR5gPC70xpDiQU= -golang.org/x/net v0.48.0/go.mod h1:+ndRgGjkh8FGtu1w1FGbEC31if4VrNVMuKTgcAAnQRY= +golang.org/x/mod v0.32.0 h1:9F4d3PHLljb6x//jOyokMv3eX+YDeepZSEo3mFJy93c= +golang.org/x/mod v0.32.0/go.mod h1:SgipZ/3h2Ci89DlEtEXWUk/HteuRin+HHhN+WbNhguU= +golang.org/x/net v0.49.0 h1:eeHFmOGUTtaaPSGNmjBKpbng9MulQsJURQUAfUwY++o= +golang.org/x/net v0.49.0/go.mod h1:/ysNB2EvaqvesRkuLAyjI1ycPZlQHM3q01F02UY/MV8= golang.org/x/sync v0.19.0 h1:vV+1eWNmZ5geRlYjzm2adRgW2/mcpevXNg50YZtPCE4= golang.org/x/sync v0.19.0/go.mod h1:9KTHXmSnoGruLpwFjVSX0lNNA75CykiMECbovNTZqGI= -golang.org/x/sys v0.39.0 h1:CvCKL8MeisomCi6qNZ+wbb0DN9E5AATixKsvNtMoMFk= -golang.org/x/sys v0.39.0/go.mod h1:OgkHotnGiDImocRcuBABYBEXf8A9a87e/uXjp9XT3ks= -golang.org/x/text v0.32.0 h1:ZD01bjUt1FQ9WJ0ClOL5vxgxOI/sVCNgX1YtKwcY0mU= -golang.org/x/text v0.32.0/go.mod h1:o/rUWzghvpD5TXrTIBuJU77MTaN0ljMWE47kxGJQ7jY= -golang.org/x/tools v0.40.0 h1:yLkxfA+Qnul4cs9QA3KnlFu0lVmd8JJfoq+E41uSutA= -golang.org/x/tools v0.40.0/go.mod h1:Ik/tzLRlbscWpqqMRjyWYDisX8bG13FrdXp3o4Sr9lc= +golang.org/x/sys v0.40.0 h1:DBZZqJ2Rkml6QMQsZywtnjnnGvHza6BTfYFWY9kjEWQ= +golang.org/x/sys v0.40.0/go.mod h1:OgkHotnGiDImocRcuBABYBEXf8A9a87e/uXjp9XT3ks= +golang.org/x/text v0.33.0 h1:B3njUFyqtHDUI5jMn1YIr5B0IE2U0qck04r6d4KPAxE= +golang.org/x/text v0.33.0/go.mod h1:LuMebE6+rBincTi9+xWTY8TztLzKHc/9C1uBCG27+q8= +golang.org/x/tools v0.41.0 h1:a9b8iMweWG+S0OBnlU36rzLp20z1Rp10w+IY2czHTQc= +golang.org/x/tools v0.41.0/go.mod h1:XSY6eDqxVNiYgezAVqqCeihT4j1U2CCsqvH3WhQpnlg= google.golang.org/protobuf v1.36.7 h1:IgrO7UwFQGJdRNXH/sQux4R1Dj1WAKcLElzeeRaXV2A= google.golang.org/protobuf v1.36.7/go.mod h1:jduwjTPXsFjZGTmRluh+L6NjiWu7pchiJ2/5YcXBHnY= gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0= diff --git a/ui/public/fonts/Unbounded-Variable.woff2 b/ui/public/fonts/Unbounded-Variable.woff2 new file mode 100644 index 000000000..96d8ff5fa Binary files /dev/null and b/ui/public/fonts/Unbounded-Variable.woff2 differ diff --git a/ui/src/album/AlbumDetails.jsx b/ui/src/album/AlbumDetails.jsx index 8213eb9d4..7b38e53da 100644 --- a/ui/src/album/AlbumDetails.jsx +++ b/ui/src/album/AlbumDetails.jsx @@ -228,7 +228,7 @@ const AlbumDetails = (props) => { let notes = albumInfo?.notes?.replace(new RegExp('<.*>', 'g'), '') || record.notes - if (notes !== undefined) { + if (notes) { notes += '..' } @@ -340,7 +340,7 @@ const AlbumDetails = (props) => { )} )} - {isDesktop && ( + {isDesktop && notes && ( { {!isDesktop && record['comment'] && ( )} - {!isDesktop && ( + {!isDesktop && notes && (
props.color, - visibility: (props) => - props.visible === false ? 'hidden' : props.loved ? 'visible' : 'inherit', +const useStyles = makeStyles( + { + love: { + color: (props) => props.color, + visibility: (props) => + props.visible === false + ? 'hidden' + : props.loved + ? 'visible' + : 'inherit', + }, }, -}) + { name: 'NDLoveButton' }, +) export const LoveButton = ({ resource, @@ -25,9 +33,11 @@ export const LoveButton = ({ component: Button, addLabel, disabled, + className, + record: recordProp, ...rest }) => { - const record = useRecordContext(rest) || {} + const record = useRecordContext({ record: recordProp }) || {} const classes = useStyles({ color, visible, loved: record.starred }) const [toggleLove, loading] = useToggleLove(resource, record) @@ -48,7 +58,7 @@ export const LoveButton = ({ onClick={handleToggleLove} size={'small'} disabled={disabled || loading || record.missing} - className={classes.love} + className={clsx(classes.love, className)} title={ isDateSet(record.starredAt) ? new Date(record.starredAt).toLocaleString() diff --git a/ui/src/layout/UserMenu.jsx b/ui/src/layout/UserMenu.jsx index c7a3deaf4..a5757a73c 100644 --- a/ui/src/layout/UserMenu.jsx +++ b/ui/src/layout/UserMenu.jsx @@ -28,6 +28,9 @@ import { useDispatch } from 'react-redux' const useStyles = makeStyles((theme) => ({ user: {}, + button: { + color: 'inherit', + }, avatar: { width: theme.spacing(4), height: theme.spacing(4), @@ -72,12 +75,11 @@ const UserMenu = (props) => {
{loaded && identity.avatar ? ( { return ( - + {permissions === 'admin' ? ( { + const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex) + return result + ? { + r: parseInt(result[1], 16), + g: parseInt(result[2], 16), + b: parseInt(result[3], 16), + } + : null +} + +const rgb = hexToRgb(ACCENT_COLOR) +const rgba = (alpha) => + rgb ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})` : 'transparent' + +const tokens = { + colors: { + accent: { + main: ACCENT_COLOR, + faded: rgba(0.1), + hover: rgba(0.15), + }, + background: { + primary: '#FFFFFF', + secondary: '#F5F5F7', + tertiary: '#E5E5EA', + }, + text: { + primary: '#1A1A1A', + secondary: '#8E8E93', + tertiary: '#AEAEB2', + }, + ui: { + separator: 'rgba(0, 0, 0, 0.08)', + shadow: 'rgba(0, 0, 0, 0.04)', + glassBg: 'rgba(255, 255, 255, 0.72)', + }, + }, + typography: { + fontFamily: { + base: [ + '-apple-system', + 'BlinkMacSystemFont', + '"SF Pro Text"', + '"Helvetica Neue"', + 'Arial', + 'sans-serif', + ].join(','), + heading: '"Unbounded", sans-serif', + }, + fontFace: ` + @font-face { + font-family: 'Unbounded'; + font-style: normal; + font-weight: 300 800; + font-display: swap; + src: url('/fonts/Unbounded-Variable.woff2') format('woff2'); + } + `, + }, + spacing: { + xs: '0.25rem', + sm: '0.5rem', + md: '0.75rem', + lg: '1rem', + xl: '1.5rem', + }, + radii: { + sm: '0.25rem', + md: '0.5rem', + lg: '0.625rem', + xl: '0.75rem', + full: '50%', + pill: '1rem', + }, + breakpoints: { + xs: 599, + sm: 600, + md: 720, + lg: 1280, + }, + sizing: { + cover: { + sm: '14em', + lg: '18em', + }, + icon: '1.25rem', + iconMinWidth: '2.5rem', + }, + blur: '1.25rem', +} + +const { colors, typography, spacing, radii, sizing, breakpoints } = tokens + +// ============================================ +// REUSABLE STYLE FACTORIES +// ============================================ + +const headingStyle = (weight, letterSpacing) => ({ + fontFamily: typography.fontFamily.heading, + fontWeight: weight, + ...(letterSpacing && { letterSpacing }), +}) + +const coverSizing = () => ({ + [`@media (min-width: ${breakpoints.sm}px)`]: { + height: sizing.cover.sm, + width: sizing.cover.sm, + minWidth: sizing.cover.sm, + }, + [`@media (min-width: ${breakpoints.lg}px)`]: { + height: sizing.cover.lg, + width: sizing.cover.lg, + minWidth: sizing.cover.lg, + }, +}) + +const customTooltipStyle = () => ({ + display: 'inline', + position: 'absolute', + bottom: '100%', + left: '50%', + transform: 'translateX(-50%)', + marginBottom: spacing.xs, + fontSize: '0.75rem', + whiteSpace: 'nowrap', + backgroundColor: colors.text.primary, + color: colors.background.primary, + padding: `${spacing.xs} ${spacing.sm}`, + borderRadius: radii.sm, + zIndex: 9999, +}) + +const actionButtonsStyle = () => ({ + padding: `${spacing.lg} 0`, + alignItems: 'center', + '@global': { + button: { + border: '1px solid transparent', + backgroundColor: colors.background.secondary, + color: colors.text.secondary, + margin: `0 ${spacing.sm}`, + borderRadius: radii.full, + minWidth: 0, + padding: spacing.lg, + position: 'relative', + '&:hover': { + backgroundColor: `${colors.background.tertiary} !important`, + border: '1px solid transparent', + }, + }, + 'button:first-child:not(:only-child)': { + [`@media screen and (max-width: ${breakpoints.md}px)`]: { + transform: 'scale(1.5)', + margin: spacing.lg, + '&:hover': { + transform: 'scale(1.6) !important', + }, + }, + transform: 'scale(2)', + margin: spacing.xl, + minWidth: 0, + padding: '0.3125rem', + transition: 'transform .3s ease', + background: colors.accent.main, + color: '#fff', + borderRadius: radii.full, + border: 0, + '&:hover': { + transform: 'scale(2.1)', + backgroundColor: `${colors.accent.main} !important`, + border: 0, + }, + }, + 'button:only-child': { + margin: spacing.xl, + }, + 'button:first-child>span:first-child': { + padding: 0, + }, + 'button>span:first-child>span': { + display: 'none', + }, + 'button:not(:first-child):hover>span:first-child>span': + customTooltipStyle(), + 'button:not(:first-child)>span:first-child>svg': { + color: colors.text.secondary, + }, + }, +}) + +const menuIconStyle = () => ({ + color: colors.text.primary, + minWidth: sizing.iconMinWidth, + '& svg': { + fontSize: sizing.icon, + }, +}) + +const activeLinkStyle = { + color: `${colors.accent.main} !important`, + '& .MuiListItemIcon-root': { + color: `${colors.accent.main} !important`, + }, +} + +// ============================================ +// THEME DEFINITION +// ============================================ + +// Note: !important declarations are required to override react-admin and third-party component styles +const NautilineTheme = { + themeName: 'Nautiline', + palette: { + type: 'light', + primary: { + main: colors.accent.main, + contrastText: '#FFFFFF', + }, + secondary: { + main: colors.accent.main, + contrastText: '#FFFFFF', + }, + background: { + default: colors.background.primary, + paper: colors.background.primary, + }, + text: { + primary: colors.text.primary, + secondary: colors.text.secondary, + }, + action: { + active: colors.accent.main, + hover: colors.accent.faded, + selected: colors.accent.faded, + }, + }, + typography: { + fontFamily: typography.fontFamily.base, + h1: headingStyle(700, '-0.02em'), + h2: headingStyle(700, '-0.02em'), + h3: headingStyle(600, '-0.01em'), + h4: headingStyle(600), + h5: headingStyle(600), + h6: headingStyle(600), + subtitle1: { fontWeight: 500 }, + subtitle2: { fontWeight: 500 }, + body1: { fontWeight: 400 }, + body2: { fontWeight: 400 }, + button: { fontWeight: 500, textTransform: 'none' }, + }, + shape: { + borderRadius: radii.xl, + }, + overrides: { + MuiCssBaseline: { + '@global': { + '@font-face': { + fontFamily: 'Unbounded', + fontStyle: 'normal', + fontWeight: '300 800', + fontDisplay: 'swap', + src: "url('/fonts/Unbounded-Variable.woff2') format('woff2')", + }, + body: { + backgroundColor: colors.background.primary, + }, + }, + }, + MuiAppBar: { + root: { + boxShadow: 'none', + borderBottom: `1px solid ${colors.ui.separator}`, + }, + colorSecondary: { + backgroundColor: colors.background.primary, + color: colors.text.primary, + }, + }, + MuiToolbar: { + root: { + backgroundColor: colors.background.primary, + }, + }, + MuiPaper: { + root: { + backgroundColor: colors.background.primary, + }, + elevation1: { + boxShadow: `0 0.0625rem 0.1875rem ${colors.ui.shadow}`, + }, + elevation2: { + boxShadow: `0 0.125rem ${spacing.sm} ${colors.ui.shadow}`, + }, + }, + MuiCard: { + root: { + backgroundColor: colors.background.primary, + borderRadius: radii.xl, + boxShadow: `0 0.125rem ${spacing.sm} ${colors.ui.shadow}`, + }, + }, + MuiButton: { + root: { + borderRadius: radii.md, + textTransform: 'none', + fontWeight: 600, + }, + contained: { + boxShadow: 'none', + '&:hover': { boxShadow: 'none' }, + }, + containedPrimary: { + backgroundColor: colors.accent.main, + '&:hover': { + backgroundColor: colors.accent.main, + filter: 'brightness(0.9)', + }, + }, + text: { + color: colors.accent.main, + }, + }, + MuiIconButton: { + root: { + color: colors.text.primary, + '&:hover': { + backgroundColor: colors.accent.faded, + }, + }, + colorPrimary: { + color: colors.accent.main, + }, + sizeSmall: { + padding: spacing.md, + }, + }, + MuiSvgIcon: { + colorPrimary: { + color: colors.accent.main, + }, + }, + MuiCheckbox: { + root: { + color: 'rgba(0, 0, 0, 0.15)', + '&$checked': { + color: colors.accent.main, + }, + }, + }, + MuiChip: { + root: { + backgroundColor: colors.background.secondary, + color: colors.text.primary, + borderRadius: radii.pill, + }, + colorPrimary: { + backgroundColor: colors.accent.faded, + color: colors.accent.main, + }, + }, + MuiTableRow: { + root: { + '&:hover': { + backgroundColor: `${colors.accent.faded} !important`, + }, + }, + }, + MuiTableCell: { + root: { + borderBottomColor: 'rgba(0, 0, 0, 0.04)', + }, + head: { + backgroundColor: colors.background.secondary, + color: colors.text.secondary, + fontWeight: 600, + fontSize: '0.75rem', + textTransform: 'uppercase', + letterSpacing: '0.05em', + }, + body: { + color: colors.text.primary, + }, + }, + MuiListItem: { + root: { + color: colors.text.primary, + '&:hover': { + backgroundColor: colors.accent.faded, + }, + '&$selected': { + backgroundColor: colors.accent.faded, + color: colors.accent.main, + '& .MuiListItemIcon-root': { + color: colors.accent.main, + }, + '&:hover': { + backgroundColor: colors.accent.faded, + }, + }, + }, + button: { + color: colors.text.primary, + '&:hover': { + backgroundColor: colors.accent.faded, + color: colors.text.primary, + }, + }, + }, + MuiListItemIcon: { + root: menuIconStyle(), + }, + MuiListItemText: { + primary: { + color: 'inherit', + }, + }, + MuiMenuItem: { + root: { + fontSize: '0.875rem', + paddingTop: '4px', + paddingBottom: '4px', + paddingLeft: '10px', + margin: '5px', + borderRadius: radii.md, + color: colors.text.primary, + }, + }, + MuiDrawer: { + paper: { + backgroundColor: colors.background.primary, + borderRight: `1px solid ${colors.ui.separator}`, + }, + }, + MuiSlider: { + root: { + color: colors.accent.main, + }, + track: { + backgroundColor: colors.accent.main, + }, + thumb: { + backgroundColor: colors.accent.main, + '&:hover': { + boxShadow: `0 0 0 ${spacing.sm} ${colors.accent.faded}`, + }, + }, + rail: { + backgroundColor: colors.background.tertiary, + }, + }, + MuiLinearProgress: { + root: { + backgroundColor: colors.background.tertiary, + borderRadius: radii.sm, + }, + bar: { + backgroundColor: colors.accent.main, + borderRadius: radii.sm, + }, + }, + MuiTabs: { + root: { + borderBottom: `1px solid ${colors.ui.separator}`, + }, + indicator: { + backgroundColor: colors.accent.main, + height: '0.1875rem', + borderRadius: '0.1875rem 0.1875rem 0 0', + }, + }, + MuiTab: { + root: { + textTransform: 'none', + fontWeight: 500, + fontFamily: typography.fontFamily.heading, + '&$selected': { + color: colors.accent.main, + fontWeight: 600, + }, + }, + }, + MuiInputBase: { + root: { + backgroundColor: colors.background.secondary, + borderRadius: radii.lg, + }, + }, + MuiOutlinedInput: { + root: { + borderRadius: radii.lg, + '& $notchedOutline': { + borderColor: colors.ui.separator, + }, + '&:hover $notchedOutline': { + borderColor: colors.text.tertiary, + }, + '&$focused $notchedOutline': { + borderColor: colors.accent.main, + borderWidth: '0.125rem', + }, + }, + }, + MuiFilledInput: { + root: { + backgroundColor: colors.background.secondary, + borderRadius: radii.lg, + '&:hover': { + backgroundColor: colors.background.tertiary, + }, + '&$focused': { + backgroundColor: colors.background.secondary, + }, + }, + }, + MuiFab: { + primary: { + backgroundColor: colors.accent.main, + '&:hover': { + backgroundColor: colors.accent.main, + filter: 'brightness(0.9)', + }, + }, + }, + MuiAvatar: { + root: { + borderRadius: radii.md, + }, + }, + MuiRating: { + iconFilled: { + color: colors.accent.main, + }, + iconHover: { + color: colors.accent.main, + }, + }, + MuiTooltip: { + tooltip: { + backgroundColor: colors.text.primary, + color: colors.background.primary, + fontSize: '0.75rem', + padding: `${spacing.xs} ${spacing.sm}`, + borderRadius: radii.sm, + }, + }, + MuiBottomNavigation: { + root: { + backgroundColor: colors.ui.glassBg, + backdropFilter: `blur(${tokens.blur})`, + borderTop: `1px solid ${colors.ui.separator}`, + }, + }, + MuiBottomNavigationAction: { + root: { + color: colors.text.secondary, + '&$selected': { + color: colors.accent.main, + }, + }, + label: { + fontFamily: typography.fontFamily.heading, + fontSize: '0.65rem', + '&$selected': { + fontSize: '0.65rem', + }, + }, + }, + NDAppBar: { + root: { + color: colors.text.primary, + }, + }, + NDLogin: { + main: { + backgroundColor: colors.background.primary, + }, + card: { + backgroundColor: colors.background.primary, + borderRadius: radii.pill, + boxShadow: `0 ${spacing.xs} ${spacing.xl} ${colors.ui.shadow}`, + }, + }, + NDAlbumGridView: { + albumContainer: { + borderRadius: radii.md, + '& img': { + borderRadius: radii.md, + }, + }, + albumTitle: { + fontWeight: 600, + color: colors.text.primary, + }, + albumSubtitle: { + color: colors.text.secondary, + }, + albumPlayButton: { + backgroundColor: colors.accent.main, + borderRadius: radii.full, + boxShadow: `0 ${spacing.sm} ${spacing.sm} rgba(0, 0, 0, 0.15)`, + padding: '0.35rem', + transition: 'padding .3s ease', + '&:hover': { + backgroundColor: `${colors.accent.main} !important`, + padding: '0.45rem', + }, + }, + }, + NDAlbumDetails: { + root: { + [`@media (max-width: ${breakpoints.xs}px)`]: { + padding: '0.7em', + width: '100%', + minWidth: 'unset', + }, + }, + cardContents: { + [`@media (max-width: ${breakpoints.xs}px)`]: { + flexDirection: 'column', + alignItems: 'center', + }, + }, + details: { + [`@media (max-width: ${breakpoints.xs}px)`]: { + width: '100%', + }, + }, + cover: { + borderRadius: radii.md, + }, + coverParent: { + marginRight: spacing.xl, + [`@media (max-width: ${breakpoints.xs}px)`]: { + width: '100%', + height: 'auto', + minWidth: 'unset', + aspectRatio: '1', + marginRight: 0, + marginBottom: spacing.lg, + }, + ...coverSizing(), + }, + recordName: { + fontSize: '1.75rem', + fontWeight: 700, + marginBottom: '0.15rem', + }, + recordArtist: { + marginBottom: spacing.md, + }, + recordMeta: { + marginBottom: spacing.sm, + }, + genreList: { + marginTop: spacing.md, + }, + loveButton: { + marginLeft: spacing.sm, + }, + }, + NDAlbumShow: { + albumActions: actionButtonsStyle(), + }, + NDPlaylistShow: { + playlistActions: actionButtonsStyle(), + }, + NDSubMenu: { + icon: menuIconStyle(), + menuHeader: { + color: colors.text.primary, + '& .MuiTypography-root': { + color: colors.text.primary, + }, + }, + actionIcon: { + marginLeft: spacing.sm, + }, + }, + RaMenuItemLink: { + root: { + color: `${colors.text.primary} !important`, + '& .MuiListItemIcon-root': menuIconStyle(), + '&[class*="makeStyles-active"]': activeLinkStyle, + }, + active: activeLinkStyle, + }, + NDDesktopArtistDetails: { + root: { + [`@media (min-width: ${breakpoints.sm}px)`]: { + padding: '1em', + }, + [`@media (min-width: ${breakpoints.lg}px)`]: { + padding: '1em', + }, + }, + cover: { + borderRadius: radii.md, + ...coverSizing(), + }, + artistImage: { + borderRadius: radii.md, + marginRight: spacing.xl, + [`@media (min-width: ${breakpoints.sm}px)`]: { + height: sizing.cover.sm, + width: sizing.cover.sm, + minWidth: sizing.cover.sm, + maxHeight: sizing.cover.sm, + minHeight: sizing.cover.sm, + }, + [`@media (min-width: ${breakpoints.lg}px)`]: { + height: sizing.cover.lg, + width: sizing.cover.lg, + minWidth: sizing.cover.lg, + maxHeight: sizing.cover.lg, + minHeight: sizing.cover.lg, + }, + }, + artistName: { + fontSize: '1.75rem', + fontWeight: 700, + marginBottom: spacing.sm, + }, + }, + NDMobileArtistDetails: { + cover: { + borderRadius: radii.md, + }, + artistImage: { + borderRadius: radii.md, + }, + }, + RaList: { + content: { + overflow: 'visible', + }, + }, + RaBulkActionsToolbar: { + topToolbar: { + backgroundColor: 'transparent', + boxShadow: 'none', + padding: spacing.sm, + '@global': { + button: { + border: '1px solid transparent', + backgroundColor: colors.background.secondary, + color: colors.text.secondary, + margin: `0 ${spacing.xs}`, + borderRadius: radii.full, + minWidth: 0, + padding: spacing.sm, + position: 'relative', + '&:hover': { + backgroundColor: `${colors.background.tertiary} !important`, + border: '1px solid transparent', + }, + }, + 'button>span:first-child>span': { + display: 'none', + }, + 'button:hover>span:first-child>span': customTooltipStyle(), + 'button>span:first-child>svg': { + color: colors.text.secondary, + }, + }, + }, + }, + RaPaginationActions: { + currentPageButton: { + backgroundColor: colors.accent.faded, + }, + }, + }, + player: { + theme: 'light', + stylesheet: ` + @font-face { + font-family: 'Unbounded'; + font-style: normal; + font-weight: 300 800; + font-display: swap; + src: url('/fonts/Unbounded-Variable.woff2') format('woff2'); + } + + .react-jinke-music-player-main { + background-color: ${colors.background.primary} !important; + font-family: ${typography.fontFamily.base} !important; + } + + .react-jinke-music-player-main .music-player-panel { + background-color: ${colors.ui.glassBg} !important; + backdrop-filter: blur(${tokens.blur}) !important; + -webkit-backdrop-filter: blur(${tokens.blur}) !important; + border-top: 1px solid ${colors.ui.separator} !important; + box-shadow: 0 -0.125rem 1.25rem rgba(0, 0, 0, 0.06) !important; + } + + .react-jinke-music-player-main svg { + color: ${colors.text.primary} !important; + } + + .react-jinke-music-player-main svg:hover { + color: ${colors.accent.main} !important; + } + + .react-jinke-music-player-main .rc-slider-track, + .react-jinke-music-player-main .rc-slider-handle { + background-color: ${colors.accent.main} !important; + } + + .react-jinke-music-player-main .rc-slider-handle { + border-color: ${colors.accent.main} !important; + } + + .react-jinke-music-player-main .rc-slider-rail { + background-color: ${colors.background.secondary} !important; + } + + .react-jinke-music-player-main .rc-slider { + height: 4px !important; + } + + .react-jinke-music-player-main .rc-slider-rail, + .react-jinke-music-player-main .rc-slider-track { + height: 4px !important; + border-radius: 2px !important; + } + + .react-jinke-music-player-main .rc-slider-handle { + width: 12px !important; + height: 12px !important; + margin-top: -4px !important; + } + + .react-jinke-music-player-main .audio-lists-panel, + .react-jinke-music-player-main .audio-lists-panel-content { + background-color: ${colors.background.primary} !important; + } + + .react-jinke-music-player-main .audio-lists-panel-content .audio-item { + background-color: transparent !important; + color: ${colors.text.primary} !important; + } + + .react-jinke-music-player-main .audio-lists-panel-content .audio-item:hover { + background-color: ${colors.accent.faded} !important; + } + + .react-jinke-music-player-main .audio-lists-panel-content .audio-item.playing { + background-color: ${colors.accent.faded} !important; + color: ${colors.accent.main} !important; + } + + .react-jinke-music-player-main .lyric-btn-active, + .react-jinke-music-player-main .play-mode-title { + color: ${colors.accent.main} !important; + } + + .react-jinke-music-player-main .music-player-panel .player-content .music-player-controller .music-player-info .music-player-title { + color: ${colors.text.primary} !important; + font-weight: 600 !important; + font-family: ${typography.fontFamily.heading} !important; + } + + .react-jinke-music-player-main .music-player-panel .player-content .music-player-controller .music-player-info .music-player-artist { + color: ${colors.text.secondary} !important; + } + + .react-jinke-music-player-main.mini-player { + background-color: ${colors.ui.glassBg} !important; + backdrop-filter: blur(${tokens.blur}) !important; + -webkit-backdrop-filter: blur(${tokens.blur}) !important; + border-radius: ${radii.xl} !important; + box-shadow: 0 ${spacing.xs} 1.25rem rgba(0, 0, 0, 0.08) !important; + } + + + .MuiTypography-h1, + .MuiTypography-h2, + .MuiTypography-h3, + .MuiTypography-h4, + .MuiTypography-h5, + .MuiTypography-h6 { + font-family: ${typography.fontFamily.heading} !important; + } + `, + }, +} + +export default NautilineTheme