-
Notifications
You must be signed in to change notification settings - Fork 179
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
theme/css/general.css: emphasize active sidebar item #809
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is one way that changes background color rather than messing with ::after
s (it doesn't go as wide as I would've liked but I'm fairly certain it's impossible without rewriting a lot more than this).
Not sure if the CSS rule is on the right line now that the selector's changed (or if it matters).
On the light theme, it may be difficult to read the text atop it,
but the Void green on white theme background doesn't technically meet WCAG contrast guidelines even without darkening it (4.44 original background vs 3.38 after dimming out of 4.50).
Should the dimming color change depending on theme? It's also possible to just change the alpha from 25% to a more adequate value for both themes, something like 10%:
looks good generally, a few things:
#sidebar a.active::after {
content: "" / " selected";
} |
8ccc0d0
to
ca83549
Compare
Highlights the background of the selected sidebar link
ca83549
to
ae7faeb
Compare
I do prefer this approach, actually. It adheres to contrast guidelines when using I also played with font weight and text color but concluded that this configuration is best. (In the OP I mentioned that I couldn't figure out how to style the background differently, which referred to my one-track idea to color the background of the sidebar at that item as a full-width band rather than just the item, also removing the need for padding, but I believe that's practically impossible without redefining a bunch of list styles) |
May (help) close #803, appends a bullet character (U+2022, •) to the end of a selected item in the sidebar for visibility.
For screen readers, this should render as "selected" instead.
(I would've tried to color the background differently but I'm not a CSS wizard and this seemed more practical.)