Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
PyrokineticDarkElf opened this issue Jun 24, 2024 · 1 comment
Labels
enhancement New feature or request

Comments

@PyrokineticDarkElf
Copy link

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):
image

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

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

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

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:
image

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

Audiobookshelf Server Version

v2.10.1

Current Implementation (Screenshot)

All of them

@PyrokineticDarkElf PyrokineticDarkElf added the enhancement New feature or request label Jun 24, 2024
@Grim73
Copy link

Grim73 commented Sep 6, 2024

I am also interested in this. Been switching to dracula theme UI wide, would be nice to more easily implement this rather than relying on Stylus

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants