MediaMonkey forum

Posted: **Wed Feb 15, 2023 12:48 pm**

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:

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.

Posted: **Sat May 06, 2023 3:25 pm**

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);
    }

MediaMonkey forum

MM5 Skinning - Background hover color in Tracklist Grid

MM5 Skinning - Background hover color in Tracklist Grid

Re: MM5 Skinning - Background hover color in Tracklist Grid