search

jothepro / doxygen-awesome-css

Custom CSS theme for doxygen html-documentation with lots of customization parameters.
https://jothepro.github.io/doxygen-awesome-css/
MIT License
1.04k stars 118 forks source link

Fix the shadows that style the code example line numbers #18

Closed r0ckarong closed 3 years ago

r0ckarong commented 3 years ago

I was playing around with the color theme for the code examples and noticed that after 626 lines the formatting of the line number broke. The CSS uses some box shadows that extend 9999 pixels in two directions to style that area. Unfortunately with long code examples (like in the "Files" overview) this is not enough and you "outrun" that shadow pretty quickly.

Also the second shadow that styles the "border" fencing off the line number area from the actual code area was a hardcoded color and wouldn't follow darkmode or any other color settings. I just swapped the hardcoded rgba value for the color of the actual line number, that gives enough contrast and looks nice.

shadow_error

After extending the shadow area by a cool 990000 pixels to avoid future problems: shadow_error_million

jothepro commented 3 years ago

That's the moment when the dirty hacks are starting to haunt me 😆

Apparently the default code fragment theme uses different colors for line numbers & the border. I tested your change with it and think that a white border line does look a bit too harsh in the default theme:

Bildschirmfoto 2021-05-07 um 14 05 27

I agree that the border color should be configurable, but it has to be a separate CSS variable in order to work well with the default theme.

r0ckarong commented 3 years ago

That's the moment when the dirty hacks are starting to haunt me 😆

Apparently the default code fragment theme uses different colors for line numbers & the border. I tested your change with it and think that a white border line does look a bit too harsh in the default theme:

Bildschirmfoto 2021-05-07 um 14 05 27

I agree that the border color should be configurable, but it has to be a separate CSS variable in order to work well with the default theme.

Then I would opt for a --fragment-linenumber-border variable that can be set. In my case I would just fill that with var(--fragment-linenumber-color) but then everybody can decide how they want to solve it. I can amend the PR with this change if you want.

r0ckarong commented 3 years ago

I've now added a very subtle grey border color and changed the shorthand codes to long ones. They looked out of place in the list.

shadow_basetheme

jothepro commented 3 years ago

Thank you for your contribution, @r0ckarong !