#sidebar-box, #history-panel, #bookmarksPanel, Folder Icons and Favicons

[ChasCB]

Apologies as this is not an issue with your current css code but rather a request for help coding my own css. I could not find away to contact you but from within here.

I currently have been able to transform: rotate(30deg) most of my menus etc that have folder icons or favicons next to their labels.

/*rotate icons 30deg on hover*/
#nav-bar toolbarbutton:hover > .toolbarbutton-badge-stack,
#PlacesToolbarItems menuitem:hover > .menu-icon,
#PlacesChevronPopup > menu:hover > .menu-icon,
#PlacesChevronPopup .bookmark-item:hover > .menu-icon,
#contentAreaContextMenu > menu:hover > .menu-icon,
#contentAreaContextMenu > menuitem:hover > .menu-icon,
menuitem:hover > .menu-icon,
toolbarbutton:hover > image,
button:hover > .button-box > .button-icon {
  transform: rotate(30deg) !important;
  -moz-transform: rotate(30deg) !important;
}

However, there are two areas which I have spent many hours trying to include into the above code.
The #sidebar-box, #history-panel, #bookmarksPanel, folder Icons and favicons, this has eluded me totally. The Browser Toolbox is usually my friend but not in this instance.
The other area is the Main-Menubar menus and submenu's icons which I am in the process of iconising. However, I have a sneaky suspicion that this could be macOS related, so I am concentrating on everything within the browser window itself.

reddit and github and internet searches have proved fruityless in this.

Thank you in advance.

[MrOtherGuy]

For the sidebar column icons you can use this:

div.buttons-wrapper moz-button:hover{
  --uc-transform: rotate(30deg);
}
#main-button > .button-background{
  transform: var(--uc-transform,none)
}

.sidebar-placesTreechildren::-moz-tree-image(hover){
  background: red !important;
}

The selector for sidebar history-panel and bookmarks panel icons would be .sidebar-placesTreechildren::-moz-tree-image(hover), but parts of <treechildren> don't support transform at all because they are not elements or nodes in any real sense. treechildren parts support only a very limited set of css properties, for example background-color.

[ChasCB]

Thank you. The only one that worked was:

.sidebar-placesTreechildren::-moz-tree-image(hover){
  background: red !important;
}

So yes, transform does not work. I even tried pulling apart Aris-t2: https://github.com/Aris-t2/CustomCSSforFx/blob/master/current/css/generalui/bookmark_icons_colorized.css which I use to insert bookmark folder icons.

But no such luck.

This transform also does not appear to work on any: #main-menubar > menu > menuitem > menupopup:hover > .men-icon,

I did change one thing within Aris's code, I replaced the .menu-iconic-icon with .menu-icon.

It is such a shame that Aris has stepped back, his wealth of knowledge will be sadly missed.