control scrollbar styling

[12rambau]

Fix #633

WIP

[choldgraf]

looks like a good start! lemme know when you'd like a review - I think we can also implement the "dark / light toggle" logic inside those mixins - even though this would now be in a different place from _colors.scss, I feel like it's more sensible to have it inside the mixins, what do you think?

[12rambau]

I can't really test it, I'm on a mac computer and my system is overriding all the navbars (that's also why I never noticed the problem). I'll test it over my FAO laptop on Monday to check the behavior on a Windows machine.

think we can also implement the "dark / light toggle" logic inside those mixin

I don't really see which logic you're talking about. there's not that much logic in the toggle apart from a double set of colors (which I think is just fine in the _colors.scss file). Unless you're talking about this (

pydata-sphinx-theme/src/pydata_sphinx_theme/assets/styles/components/_switcher-theme.scss

Line 21 in 281e103

html[data-mode="auto"] #theme-switch a[data-mode="auto"] {

)

[choldgraf]

Ah never mind about my comments on colors, I'm being silly and was thinking we'd have to define specific background and foreground colors for the scroll bars. Ignore my statement!

[choldgraf]

hmm - for some reason, on my screen the scrollbar is only showing up when I hover over the scrollbar area, not the whole sidebar...so something seems to be off with the "hover" event

[damianavila]

hmm - for some reason, on my screen the scrollbar is only showing up when I hover over the scrollbar area, not the whole sidebar...so something seems to be off with the "hover" event

I see the same behavior...

[12rambau]

Add a grey scrollbar to both the body and the primary sidebar. The scrolllbar is using the background color for the track (if not the body one uses a black background by default) and a grey/white coloring. I decided to remove any hover behavior because I don't think they are very helpful (open to discussion). happy to hear your feedbacks

[choldgraf]

FYI this is looking pretty good to me now!

[choldgraf]

Could we apply the same styling to the in-page toc?

And it might be useful to do the same for other major page elements (e.g., code blocks and div elements with scroll), but that might be better for a subsequent PR if it'd be complicated

[12rambau]

And it might be useful to do the same for other major page elements (e.g., code blocks and div elements with scroll)

as it's a mixin function it's nothing really. I've never used div or code-block that are scrollable. Is there examples in the doc so that I can test it ? (I'm mainly looking for the css class/id)

[choldgraf]

Any of the code blocks with relatively wide content should demonstrate how horizontal scrollbars look. For example, narrow your screen and look here:

https://pydata-sphinx-theme.readthedocs.io/en/stable/demo/example_pandas.html

Though we could also provide an example in theme-specific-elements to show off the sidebars in an easier-to-find way

[choldgraf]

This looks really nice to me - I'm +1 on merging and iterating in future PRs if we find more things to improve here. WDYT?

[choldgraf]

OK let's merge this in and see how people like it!

[damianavila]

I like it!!!