feat(listenbrainz): init

00dani commented 1 month ago

🎉 Theme for ListenBrainz 🎉

ListenBrainz keeps track of music you listen to and provides you with insights into your listening habits. Your listens are associated with music information in the MusicBrainz database to provide more detailed and accurate song metadata, either automatically or through manual song mapping.

preview

💬 Additional Comments 💬

I've thoroughly themed the parts of ListenBrainz I use personally, making sure they look great with all four Catppuccin flavours. However I prefer to use a local music player rather than its built-in player feature, so that area got less attention - I've attempted to make this look nice as well, but I don't know how it behaves with every possible music service.

It's also possible I've entirely missed parts of how ListenBrainz works simply because I haven't been using it all that long. Updates to this style are very welcome! Asking me to look into it is also fine. 👍

🗒 Checklist 🗒

[x] I have read and followed Catppuccin's submission guidelines.
[x] I have made a new directory underneath /styles/<name-of-website> containing the contents of the /template directory.
- [x] I have ensured that the new directory is in lower-kebab-case.
- [x] I have followed the template and kept the preprocessor as LESS.
[x] I have made sure to update the userstyles.yml file with information about the new userstyle.
[x] I have included the following files:
- catppuccin.user.css - all the CSS for the userstyle, based on the template.
- preview.webp - composite image of all four individual flavor screenshots stitched together, generated via Catwalk.

uncenter commented 1 month ago

Click this button here to re-request a review once you have everything themed and fixed: Screenshot 2024-05-23 at 21 44 32 (Arc)

isabelroses commented 1 month ago

We seem to be cliping some corners here: This is missing borders: Active tabs should not have borders: We seem to be losing a good number of various shadows here and there, for example: The contrast on the signin button is a little off, consider using @crust instead

00dani commented 1 month ago

Hey, sorry for the holdup on these fixes! Should be all good now.

The clipped corners for missing or unlinked album art weren't technically a bug with this userstyle. It turns out vanilla ListenBrainz also clips those corners in the same way - it's just much harder to notice with the default colours. Nonetheless, it's fixed now.

I've also restored the missing shadows, making sure they look nice with both light and dark flavours. Those weren't exactly a mistake either, I initially removed the shadows rather than recolouring them intentionally because I liked the flatter look. However keeping them with appropriate recolouring is more consistent with vanilla ListenBrainz so. 👍

I did notice that since I last worked on this, ListenBrainz vanilla has introduced another bug in their default styles: the search bar now has an identifying icon on it, but not in the correct place. With no userstyles applied:

Should I fix that problem in the Catppuccin userstyle, or is it kind of "out of our jurisdiction" to fix upstream bugs?

isabelroses commented 1 month ago

Should I fix that problem in the Catppuccin userstyle, or is it kind of "out of our jurisdiction" to fix upstream bugs?

We leave it up to them to fix it. Its much easier to manage the userstyles that way.

isabelroses commented 1 month ago

Your probaly going to have to merge with main such that https://github.com/catppuccin/userstyles/pull/908#discussion_r1633014580, won't cause a CI failure.

00dani commented 1 month ago

It looks like this style's passing CI now, but the new go.dev userstyle has a problem:

$ deno task lint
Task lint deno run -A ./scripts/lint/main.ts
styles/go.dev/catppuccin.user.css:382
381│       #catppuccin(@lightFlavor, @accentColor);
382│     }
383│   }
   ╰─► error variable @svg is undefined

styles/go.dev/catppuccin.user.css:498:7
497│     .go-Main-navMobile label.go-Label::before {
498│       @svg:escape ('<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="@{text}"><path d="M0 0h24v24H0V0z" fill="none" opacity=".87"/><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 13c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm0 4c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm0-8c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm3 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/></svg>');
499│       background-image: url("data:image/svg+xml,@{svg}");
   ╰─► error Unexpected unknown at-rule "@svg:escape" (at-rule-no-unknown)

I think it's just that this particular SVG has been written as @svg:escape ( rather than @svg: escape(, confusing the LESS parser?

isabelroses commented 1 month ago

I think it's just that this particular SVG has been written as @svg:escape ( rather than @svg: escape(, confusing the LESS parser?

Don't worry about this it was https://github.com/catppuccin/userstyles/pull/973 fixed here.

catppuccin / userstyles