-
Notifications
You must be signed in to change notification settings - Fork 414
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
Customize scrollbar to fit the theme colors #5056
Conversation
ff88ab4
to
3ecf864
Compare
This looks great! I think this should only happen on windows/linux though. |
@seanyesmunt, ah yes, forgot to mention that I didn't test on mac. |
@seanyesmunt. Ah, I found it ... in |
@seanyesmunt Hm ... it didn't work. Was hoping to do something like the following, but
|
## Issue 4727: Sidebar's transient scrollbar doesn't fit in the Dark Theme ## Approach The 'webkit' API works on Chrome, but Firefox ignores it and uses it's own fancy scrollbar when 'webkit' is used (can't seem to change any properties). It's better than the current look, but still doesn't fit our theme, plus it makes the product look different on different browsers. Firefox now supports the new 'scrollbar' API, so we can now tweak the scrollbar, but the API only provides limited attributes. Don't wanna complicate things by using Javascript, so we'll use Firefox's limited attributes as the common denominator and just live with a plain, rectangle scroll bar BUT with better color to match the theme.
The only downside to this new implementation is that the top-most (or right-most?) scrollbar won't get the customization. Any other sub-components (e.g. sidebar) will get the customization. My guess is that the "top-most" scrollbar is above the `main-wrapper`. I'm not sure if we can (or should) add another className higher than App. The impetus for the customization was the ugly sidebar anyway, so at least we covered that.
3ecf864
to
f9da727
Compare
|
Sorry I missed these messages. Was trying to get an app release out last week but have been having some build issues so this is going in too! Your solution looks great. |
Issue
Closes #4727: Sidebar's transient scrollbar doesn't fit in the Dark Theme
Approach
The 'webkit' API works on Chrome, but Firefox ignores it and uses it's own fancy scrollbar when 'webkit' is used (can't seem to change any properties). It's better than the current look, but still doesn't fit our theme, plus it makes the product look different on different browsers.
Firefox now supports the new 'scrollbar' API, so we can now tweak the scrollbar, but the API only provides limited attributes.
Don't wanna complicate things by using Javascript, so we'll use Firefox's limited attributes as the common denominator and just live with a plain, rectangle scroll bar BUT with better color to match the theme.
I think this color works for both lbry.tv and Odysee (both light and dark on each platform).