[Q:MM24:Skins] How to skin the scrollbars?

[peter_h]

New to MM5... and trying to work out how to skin it using CSS... I'm currently at my wit's end trying to find out how to skin the scrollbars.

All my CSS over-rides appear to do nothing to affect the scrollbars. I even can't seem to find any container elements for them using "Inspect element". I'm a beginner at MM5, so I may have missed something.

Are they directly drawn onto a canvas, programmatically, with .JS code hiding somewhere?

Any pointers would be much appreciated. Thanks!

[drakinite]

Hey there, thanks for making skins for MM! Scrollbars are notoriously confusing when styling with CSS, since they're not actually an HTML element that you're able to view. Instead, it's a "pseudo-element". Here's a quick guide on how to access the scrollbar pseudo elements: https://www.w3schools.com/howto/howto_c ... ollbar.asp

If you search through the .less code for the Material Design and Metro M (Classic) skins for those pseudo elements, you'll be able to see two different examples of how to style the scrollbars, the latter of which is more complex/stylized, if I recall correctly.

[peter_h]

Hmmm... this is not what I expected. Again... there maybe something missing in my understanding here?...

I did eventually manage to affect the scrollbars, but NOT by modifying the values of any references to ::-webkit-scrollbar-... that were pre-existing in the skin files. My base skin is Metro M (Classic). There is only one file in the skin that has them: \skin\skin_scrollbar.less

I went as far as making my changes really obvious with some gaudy color-scheme, e.g....

Code: Select all

@scrollbarSize: @units1_9;
@scrollbarTrackColor: red;// lighten(@secondaryColor, 6%);
@scrollbarHighlightColor: pink;//lighten(@secondaryColor, 20%);

::-webkit-scrollbar {
    width: @scrollbarSize;
    height: @scrollbarSize;
    border: 1px solid @baseColor;
}
 
/* Track */
::-webkit-scrollbar-track {
    background: blue;//@scrollbarTrackColor;
    padding: 2px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: green;//lighten(@baseColor, 10%);
    border: 2px solid @scrollbarTrackColor;
    min-height: 6.5%;
}
::-webkit-scrollbar-thumb:active{
    background: yellow;//@baseColor;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

::-webkit-scrollbar-button:single-button {   
    background-color: orange;//@scrollbarTrackColor;
    fill: red;//@baseColor;
    width: @scrollbarSize;
    height: @scrollbarSize;
    background-size: @scrollbarSize + @units0_5;
    background-position: center;
    transition: background-color@animationTime ease-out;
    &:hover{
        background-color: @scrollbarHighlightColor;
    }
}
::-webkit-scrollbar-button:single-button:vertical:decrement{
    background-image: url('/skin/icon/upArrow.svg');
}
::-webkit-scrollbar-button:single-button:vertical:increment{
    background-image: url('/skin/icon/downArrow.svg');
}
::-webkit-scrollbar-button:single-button:horizontal:decrement{
    background-image: url('/skin/icon/leftArrow.svg');
}
::-webkit-scrollbar-button:single-button:horizontal:increment{
    background-image: url('/skin/icon/rightArrow.svg');
}

body
{  /* This is scrollbar fallback for IE and other non-WebKit browsers, where support for skinned scrollbars is limited*/
   scrollbar-face-color: red;//@highlightBgColor;
   scrollbar-arrow-color: blue;//@textColor;
   scrollbar-track-color: green;//@controlColor;
   scrollbar-shadow-color: yellow;//@highlightBgColor;
   scrollbar-highlight-color: orange;//@highlightBgColor;
   scrollbar-3dlight-color: pink;//@highlightBgColor;
   scrollbar-darkshadow-color: cyan;//@highlightBgColor;
}

I also made sure I did a soft-refresh of Chromium after every change. I also tried a restart of MM, to no change.

I only managed to get the scrollbars to change once I'd copy/pasted all the code from \skin\skin_scrollbar.less onto the end of my \skin\skin_custom.less file! :\

Why don't any mods of \skin\skin_scrollbar.less have any effect? I've also tried putting the mods into \skin\skin_scrollbar_add.less , and that also is ineffective.

Here's my mods with some new scrollbar styling...


Tip for the Skinning Manual: For the horizontal scrollbar, the image texture needed to be rotated 90 degrees. Current CSS doesn't support transfomations of the bkd image without transfoming the whole element, or without convoluted "CSS tricks". So I duplicated the vertical image and created a rotated copy. However, to my befuddlement (again!), I couldn't get it to work initially... and no amount of Chromium Skin Refreshing would show the image.
After some experimentation, I discovered that for new images referenced in the \images\ folder to show up, I needed a complete restart of MM.

[drakinite]

Why don't any mods of \skin\skin_scrollbar.less have any effect? I've also tried putting the mods into \skin\skin_scrollbar_add.less , and that also is ineffective.

When you say "mods of skin/skin_scrollbar.less", do you mean that you're actually editing the source files inside C:/Program Files? Or are you just referring to the contents of skin/skin_scrollbar.less inside your own addon? (I'm using the word "addon" here instead of "skin" to keep myself from saying the word "skin" a thousand times in different contexts)

skin_scrollbar.less should be included just like any other skin file, one line 8 of skin_complete.less (in the "base skin" in program files/MediaMonkey/skin/skin_complete.less).

In your addon files, if you create /skin/skin_scrollbar.less, then it will replace the contents of skin_scrollbar.less from the "base skin" (the one in program files/MediaMonkey/skin/), while if you create /skin/skin_scrollbar_add.less, it'll add your code to the end of the aforementioned file. If I recall correctly, Metro M (classic) has skin_scrollbar.less instead of skin_scrollbar_add.less because I wanted to completely replace the scrollbar code in the "base skin".

(for clarity, when I say "base skin" I mean the code that creates the ugly green mess that you can see if you don't load a skin, or if you load a skin that's completely empty.)

The only reason I can imagine your code not showing up would be if you added a /skin/skin_complete.less in your addon's files, and you removed the @import statement that loads skin_scrollbar.less. That, or you made a typo in the file name?

[peter_h]

I've only been modding files in the \skin\ directory.
I started with MetroM skin loaded.
I've put all my mods in one file: skin_custom.less (It was empty when I started)
To see what property mods affected what on screen, I changed values in \skin\skin_scrollbar.less directly. However, nothing changed on screen (after a chromium refresh), no matter what values I changed.