[Enhancement]: Add CSS selectors (IDs and/or Classes) to main elements that can be targeted by theme.park

[PyrokineticDarkElf]

Type of Enhancement

Web Interface/Frontend

Describe the Feature/Enhancement

I have added a theme to theme.park which can modify the styles of services by adding a additional CSS file.

The theme works pretty well, see: Added CSS for Audiobookshelf #556.

There are some areas of the theme that could look a lot better, but due to the very limited amount of unique CSS selectors available to target, it is very hard to style some elements. I appreciate the use of TailwindCSS and the need to keep the server light weight, but a few selectors could go a long way :D

I would be very grateful if we could work together to implement some selectors on some pages and elements, so I can re-write the theme to be a little more accurate/precise.

Why would this be helpful?

A few ABS users have already shown interested in theme.park: #1705

The selectors would allow for better support and keep the app looking slick!
They would also allow for more targeted styling and potentially some cooler looks! (subjectively speaking of course)

Future Implementation (Screenshot)

Off the top of my head:

Buttons could share a class to make them a little simpler to target.

As could dropdowns

The SVGs could all share a class (some are from different libraries and use different selectors currently):

Tables found all over the app could have classes for their headers and alternating rows:

Pop-ups could do with a handful of selectors since they're quite hard to target currently:

It would also be nice to be able to target the Listening session tiles:

And I appreciate this one may be a lot harder to implement, but being able to generate the year in review as HTML would allow us to also style this page:

On a side note, What's this element for:

Audiobookshelf Server Version

v2.10.1

Current Implementation (Screenshot)

All of them