MM5 Skinning - Background hover color in Tracklist Grid

To discuss development of addons / skins / customization of MediaMonkey.

Moderators: jiri, drakinite, Addon Administrators

chris_a_johnson
Posts: 19
Joined: Sun Jul 17, 2011 8:33 pm

MM5 Skinning - Background hover color in Tracklist Grid

Post by chris_a_johnson »

I am hoping that this is an easy question to answer. I am working on my new skin (nearly done), but can't figure out how to control the hover background color when hovering over tracks in the Tracklist grid.

I changed the hover color in the main view, but this is also being applied in the Tracklist grid and I would like it to operate the way it does in the default Material Design skin where the hover color is slightly darker than the existing background.

Here is what I have now:
Image

The code I am trying to get to work is:

Code: Select all

//Color for tracklists in grids
@popupBgColor: mix(@highlightColor, @baseColor, 20%);
@popupColor: contrast(@popupBgColor, black, white);
[data-control-class=TracklistGrid] .lvPopup .lvItem {

	&[data-hover]:not([data-disabled]) {
		background-color: @popupBgColor!important;
		color: @popupColor!important;
	}
	&[data-selected][data-hover] {
		background-color: @popupColor;
		color: @popupBgColor;
	}
}
The default in the Material Design skin automatically creates the background color based on the album colors and then applies a slightly different hover color. The code references a uniqueid for these items, but I do not know how to reference them properly to create the same effect.

Thanks for your help.
drakinite
Posts: 970
Joined: Tue May 12, 2020 10:06 am
Contact:

Re: MM5 Skinning - Background hover color in Tracklist Grid

Post by drakinite »

Sorry for the really late response. Check templates_add.js. This is the code that overrides the hover color to be based on the background color (which is in turn based on the album art color).

Code: Select all


    if ((clr[0] + clr[1] + clr[2]) / 3 < 128) {
        var hClr = getShiftedRGB(20, clr);
        templates.setPopupListColors(div.controlClass.uniqueID, {
            text: 'white',
            hover: hClr,
            select: getShiftedRGB(50, clr),
            hoverSelect: getShiftedRGB(70, clr),
            nowplaying: nowPlayingClr,
            iconsHover: hClr,
            textHover: 'rgb(255, 215, 70)'
        }, div.parentElement.controlClass.uniqueID);
    } else {
        var hClr = getShiftedRGB(-20, clr);
        templates.setPopupListColors(div.controlClass.uniqueID, {
            text: 'black',
            hover: hClr,
            select: getShiftedRGB(-50, clr),
            hoverSelect: getShiftedRGB(-70, clr),
            nowplaying: nowPlayingClr,
            iconsHover: hClr,
            textHover: 'rgb(90, 90, 0)'
        }, div.parentElement.controlClass.uniqueID);
    }
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.
Post Reply