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

To discuss development of addons / skins / customization of MediaMonkey v5 / v2024

Moderators: jiri, drakinite, Addon Administrators

peter_h
Posts: 146
Joined: Mon Mar 12, 2007 4:38 pm

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

Post by 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! :)
:) Pete, from Wellington, New Zealand.

Currently evaluating a migration from MM4 (4.1.31.1919 on Win7 SP1/16Gig RAM/intel) to MM2024 (latest Debug version on Win11 24H2/16GB RAM/intel)

**If you're wondering why I'm still on MM4: It still has more useful-to-me plugins; and I prefer the GUI's responsiveness, panes spreadable over multi-monitors flexibility, and predictability (all coz it's more Windows-native). I also hate "flat design" for its visual inefficiency. For me, MM4's benefits are still > MM5, and MM5's downsides < MM4. There still appears to be way less MM5 plugins -- even after all this time. MM5 docs for plugin developers seem very undeveloped to me -- which makes me uninclined to invest into learning how to improve MM5 for my own wants.
drakinite
Posts: 977
Joined: Tue May 12, 2020 10:06 am
Contact:

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

Post by 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.
Image
Student electrical-computer engineer, web programmer, part-time MediaMonkey developer, full-time MediaMonkey enthusiast
I uploaded many addons to MM's addon page, but not all of those were created by me. "By drakinite, Submitted by drakinite" means I made it on my own time. "By Ventis Media, Inc., Submitted by drakinite" means it may have been made by me or another MediaMonkey developer, so instead of crediting/thanking me, please thank the team. You can still ask me for support on any of our addons.
peter_h
Posts: 146
Joined: Mon Mar 12, 2007 4:38 pm

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

Post by 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... :D
Image

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.
:) Pete, from Wellington, New Zealand.

Currently evaluating a migration from MM4 (4.1.31.1919 on Win7 SP1/16Gig RAM/intel) to MM2024 (latest Debug version on Win11 24H2/16GB RAM/intel)

**If you're wondering why I'm still on MM4: It still has more useful-to-me plugins; and I prefer the GUI's responsiveness, panes spreadable over multi-monitors flexibility, and predictability (all coz it's more Windows-native). I also hate "flat design" for its visual inefficiency. For me, MM4's benefits are still > MM5, and MM5's downsides < MM4. There still appears to be way less MM5 plugins -- even after all this time. MM5 docs for plugin developers seem very undeveloped to me -- which makes me uninclined to invest into learning how to improve MM5 for my own wants.
drakinite
Posts: 977
Joined: Tue May 12, 2020 10:06 am
Contact:

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

Post by drakinite »

peter_h wrote: Tue Nov 12, 2024 10:05 pm 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?
Image
Student electrical-computer engineer, web programmer, part-time MediaMonkey developer, full-time MediaMonkey enthusiast
I uploaded many addons to MM's addon page, but not all of those were created by me. "By drakinite, Submitted by drakinite" means I made it on my own time. "By Ventis Media, Inc., Submitted by drakinite" means it may have been made by me or another MediaMonkey developer, so instead of crediting/thanking me, please thank the team. You can still ask me for support on any of our addons.
peter_h
Posts: 146
Joined: Mon Mar 12, 2007 4:38 pm

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

Post by 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.
:) Pete, from Wellington, New Zealand.

Currently evaluating a migration from MM4 (4.1.31.1919 on Win7 SP1/16Gig RAM/intel) to MM2024 (latest Debug version on Win11 24H2/16GB RAM/intel)

**If you're wondering why I'm still on MM4: It still has more useful-to-me plugins; and I prefer the GUI's responsiveness, panes spreadable over multi-monitors flexibility, and predictability (all coz it's more Windows-native). I also hate "flat design" for its visual inefficiency. For me, MM4's benefits are still > MM5, and MM5's downsides < MM4. There still appears to be way less MM5 plugins -- even after all this time. MM5 docs for plugin developers seem very undeveloped to me -- which makes me uninclined to invest into learning how to improve MM5 for my own wants.
Post Reply