+- Moode Forum (https://moodeaudio.org/forum)
+-- Forum: moOde audio player (https://moodeaudio.org/forum/forumdisplay.php?fid=3)
+--- Forum: Feature requests (https://moodeaudio.org/forum/forumdisplay.php?fid=8)
+--- Thread: [SOLVED] Custom scrollbar style for webkit browser (/showthread.php?tid=2611)
RE: Custom scrollbar style for webkit browser - Tim Curtis - 06-18-2020
I'll test it out.
RE: Custom scrollbar style for webkit browser - Tim Curtis - 06-18-2020
(06-18-2020, 07:16 PM)swizzle Wrote: After playing around some with the native macOS implementation (on Mojave anyway) I'm half tempted to just say use the css scrollbars for all because when you hover the thumb on the native ones it shows (when it works...) ugly white scrollbars. Anyway this is my current css...
Code:@media (pointer: fine) {
.scroll ::-webkit-scrollbar {
width: 11px;
}
.scroll ::-webkit-scrollbar-track:hover {
-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
border-radius: 6px;
}
.scroll ::-webkit-scrollbar-thumb {
border-radius: 6px;
background-color: var(--btnshade2);
border:2px solid rgba(0,0,0,0);
background-clip: padding-box;
min-height:1.5em;
}
.scroll ::-webkit-scrollbar-thumb:active {
background-color:var(--textvariant);
}
}
This adds an active color to the thumb when it's clicked/held and changes the track effect back more to the original which is more subtle and works better across the range of themes.
We'd only add/remove the class once on load so it doesn't really make a difference in performance either way but I'm partial to adding a class to add a feature rather than removing one to remove it as it feels more logical but... /spock
These scroll bars look pretty neat :-)
We turn them on if sbw > 0 otherwise for sbw = 0 (overlay scroll bars) we leave them off right?
RE: Custom scrollbar style for webkit browser - swizzle - 06-18-2020
(06-18-2020, 10:58 PM)Tim Curtis Wrote:(06-18-2020, 07:16 PM)swizzle Wrote: After playing around some with the native macOS implementation (on Mojave anyway) I'm half tempted to just say use the css scrollbars for all because when you hover the thumb on the native ones it shows (when it works...) ugly white scrollbars. Anyway this is my current css...
Code:@media (pointer: fine) {
.scroll ::-webkit-scrollbar {
width: 11px;
}
.scroll ::-webkit-scrollbar-track:hover {
-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
border-radius: 6px;
}
.scroll ::-webkit-scrollbar-thumb {
border-radius: 6px;
background-color: var(--btnshade2);
border:2px solid rgba(0,0,0,0);
background-clip: padding-box;
min-height:1.5em;
}
.scroll ::-webkit-scrollbar-thumb:active {
background-color:var(--textvariant);
}
}
This adds an active color to the thumb when it's clicked/held and changes the track effect back more to the original which is more subtle and works better across the range of themes.
We'd only add/remove the class once on load so it doesn't really make a difference in performance either way but I'm partial to adding a class to add a feature rather than removing one to remove it as it feels more logical but... /spock
These scroll bars look pretty neat :-)
We turn them on if sbw > 0 otherwise for sbw = 0 (overlay scroll bars) we leave them off right?
Right, we just need to test sbw and apply the css if it’s true. I also tried this (before the css var is set):
sbw ? $( 'body').addClass('scroll') : sbw = 11;
Which shifts the indexes over so the native scrollbar isn’t actually overlaying anything and the thumb is easier to drag but in the end figured that kind of defeats the point.
RE: Custom scrollbar style for webkit browser - Tim Curtis - 06-18-2020
Gotcha. I'll push the commit tonight.
Nice UI refinement :-) @bitlab @swizzle
RE: Custom scrollbar style for webkit browser - swizzle - 06-19-2020
All @bitlab on this one.
RE: Custom scrollbar style for webkit browser - bitlab - 06-19-2020
Just happy to contribute to Moode
Thanks