[SOLVED] Custom scrollbar style for webkit browser

[bitlab]

When viewing moOde on a desktop PC (Win 10) with Chrome it show the default scrollbars.
At the side of the screen it doesn't matter that much, but in the middle of the screen like with the playlist or tag view it is al little distracting from nice moOde interface.
Using chrome on my mobiles device, just behave different and don't require fixing. Don't know how it looks on other webkit based desktop browsers ?

Below is an css example that applies a smooth scrollbar style, only for webkit devices with a precise pointer, like desktop devices.
I know it won't make my music sound better, but it just annoys that it deviates from overal moOde style.

           

Code:

/* only target normal monitors */
@media (pointer: fine) {
    ::-webkit-scrollbar {
        width: 12px;
    }
    
    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
    }
    
    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
        background-color: var(--textvariant);
    }
}

[swizzle]

Looks like a nice improvement, it always grated seeing uglywhite scroll bars on non-Apple screenshots. We couldn’t do this before as there were too many non-WebKit browsers but I guess the Blink hegemony is useful at last. We’ll probably need to avoid this on Macs, and possibly iOS with trackpad/pencil.

[swizzle]

Looking at this a bit more, how useful do people find the quick-jump way index on desktop? Maybe we can trim that out as it’s mainly a mobile thing.

You’ll want to adjust the #albumcovers rule set in panels.css like:

width:calc(100% - var(--sbw)); // account for scrollbar width
margin-left:var(--sbw); // re-center

This possibly solves another issue posted earlier, I’ll link that here. Note that this means we’d also need to shrink the thumbs a bit.

If we leave the index in we’d need to account for it as well, and we’ll definitely want to explore excepting the Apple devices out of the bespoke scrollbar.

[the_bertrum]

Looking at this a bit more, how useful do people find the quick-jump way index on desktop? Maybe we can trim that out as it’s mainly a mobile thing.

If you are referring to the alphabet list on the right of lists, my experience is almost exactly the opposite. I use the index a lot on the desktop but find it next to useless on mobile.  It is too small to press with any accuracy, and on my phone the list truncates at "Y".

[Tim Curtis]

I did a few tests.

OS X system setting "Show scroll bars":
1. "Automatically based on mouse or trackpad" which enables system-wide overlay scroll bars results in no apparent change in scroll bar appearance.
2. "Always" results in the @media query having the desired effect. It's a vast improvement over the uglywhite bars.

Looking at it with both dark and light themes it might benefit from being less pronounced. Try adding opacity:.25 to the thumb.

[vinnn]

Looking at this a bit more, how useful do people find the quick-jump way index on desktop? Maybe we can trim that out as it’s mainly a mobile thing.

I too find this invaluable.
Don't know about the size of your collection @swizzle but without the quick-jump I'd be scrolling for ages trying to get to artists past C (and it's faster than using the search dialogue).

[bitlab]

@swizzle if like @the_bertrum indicates if the quick-jump referes to alphabet list, I also use it a lot.

[bitlab]

@Tim Curtis I only have testedfor the desktop with Windows 10 and Chrome. Firefox offcourse ignores the css. And my mobile devices don't match the media query (as intended).


For the opacity you can't use the opacity prop here. It needs to be part of the color itself, something like:

Code:

background:rgba(var(--textvariant),0.25) !important;

And that is indeed an improvement.

[bitlab]

@Tim Curtis @swizzle by the way I used the gulp workflow for editing & testing this feature; -) 
This made it possible to play css file on the desktop and see direct results.

[Tim Curtis]

I promise, I'll do some gulping after the new Radio view is finished. The metadata is updated but I haven't had time to begin coding the view yet.

Btw, what minifiers are u using in the gulp builder?