Code: Select all
/*************************/
/* ROTATE ICONS ON HOVER */
/*************************/
/*rotate icons on hover*/
#nav-bar toolbarbutton:hover .toolbarbutton-badge-stack,
checkbox:hover > .checkbox-check,
menuitem:hover > hbox > .menu-iconic-icon,
toolbarbutton:hover > image,
button:hover > .button-box > .button-icon {
transform: rotate(30deg) !important;
-moz-transform: rotate(30deg) !important;
}
/*rotate icons on active (clicked)*/
#nav-bar toolbarbutton:active .toolbarbutton-badge-stack,
checkbox:active > .checkbox-check,
menuitem:active > hbox > .menu-iconic-icon,
toolbarbutton:active > .toolbarbutton-icon,
button:active > .button-box > .button-icon {
transform: rotate(75deg) !important;
-moz-transform: rotate(75deg) !important;
}
/*if it doesn't have this then the icons get swapped to the other side on hover*/
#nav-bar toolbarbutton > .toolbarbutton-badge-stack,
checkbox > .checkbox-check,
menuitem > hbox > .menu-iconic-icon,
toolbarbutton > .toolbarbutton-icon,
button > .button-box > .button-icon {
transform: rotate(0) !important;
-moz-transform: rotate(0) !important;
}
BUT
For the life of me I can not find the correct combination of ID's & elements to achieve these transformations with the folder icons & favicons within the History and Bookmarks menus from the menubar and the folder icons & favicons within the Sidebar.
I have tried the following:
#bookmarks-view .sidebar-placesTreechildren::-moz-tree-image
#bookmarks-view treechildren::-moz-tree-image
#bookmarks-view.sidebar-placesTree > treecols > treecolpicker.treecol-image
.bookmark-item > .menu-iconic-left > .menu-iconic-icon
#bookmarksMenu .menu-iconic-icon
#BMB_bookmarksPopup
.sidebar-panel .sidebar-placesTreechildren::-moz-tree-image