Changing Color of Large Icons When Hovering

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

Moderators: jiri, drakinite, Addon Administrators

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

Changing Color of Large Icons When Hovering

Post by chris_a_johnson »

Is there a way to change the actual color of the large icons that you see in the Home main list when you hover over them? I can change the background color when hovering, but I want to change the color of the icon itself. I've tried adding a .largeIconHoverColor definition in the Icons.add.less file and calling it from a listview.add.less command and from within the icons.add.less file, but these don't seem to work.
Thank you.
drakinite
Posts: 850
Joined: Tue May 12, 2020 10:06 am
Contact:

Re: Changing Color of Large Icons When Hovering

Post by drakinite »

You'll first need a selector for the "parent" of the icons you're trying to modify. Not sure what you mean by "Home main list", so I'm gonna assume you mean the media tree on the left. The CSS selector [data-id="mediaTree"] will work for that.

Then you need a selector for the icons. svg works, because all icons are SVG.

Lastly, you need to add a :hover selector, depending on when you want to trigger the color to change. If you want it to ONLY change when you mouse over the icon itself, this'll work:

Code: Select all

[data-id="mediaTree"] svg:hover {
	fill: @largeIconHoverColor;
}
fyi this is assuming you set @largeIconHoverColor as a LESS variable.

If you want it to change when you mouse over the associated list item in the media tree, you'll also need the .lvItem selector, which is a CSS class applied to each item in a List View:

Code: Select all

[data-id="mediaTree"] .lvItem:hover svg {
	fill: @largeIconHoverColor;
}
Image
Student electrical-computer engineer, web programmer, part-time MediaMonkey developer, full-time MediaMonkey enthusiast
Post Reply