Transform / Rotate on hover & active/select
I have managed to transform / rotate almost all of my various buttons, bookmark folder icons & site favicons and also other icons like in the appmenu and the locationbar/ac_popup pane various search favicons along the bottom of that panel. (see below code)
However I have been unable to achieve the same with the follow areas: - bookmark/history sidebar. - menubar History and Bookmarks drop down menus & submenus. - locationbar/ac_popup panel site favicons
/*************************/
/* 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;
}