mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2026-05-30 23:40:40 +02:00
[Enhancement]: Add CSS selectors (IDs and/or Classes) to main elements that can be targeted by theme.park #2071
Assignees
adam (Adam Melkus)
Clear assignees
adam (Adam Melkus)
No Assignees
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: starred/audiobookshelf#2071
Reference in New Issue
Block a user
Delete Branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Originally created by @PyrokineticDarkElf on GitHub (Jun 24, 2024).
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
@Grim73 commented on GitHub (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