Bookmark folder & Favicons transform on Hover & Action

Discussion of general topics about Mozilla Firefox
Post Reply
User avatar
FineWine
Posts: 230
Joined: July 16th, 2004, 12:21 am

Bookmark folder & Favicons transform on Hover & Action

Post by FineWine »

For years I have had css code to transform various icons on Hover & Action. For several versions now FF has steadily broken this code due to new ID's & Elements etc and I've had to rediscover these new things. The following working code is where I am at:

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;
}
As you can see I like/enjoy animations/transformations. Back in the old days (yes I said that) I used to use a whole browser theme by CatThief "Mostly Crystal" and loved it.

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
morat
Posts: 6405
Joined: February 3rd, 2009, 6:29 pm

Re: Bookmark folder & Favicons transform on Hover & Action

Post by morat »

You can use the _moz-menuactive attribute to style the history and bookmarks menu.

Code: Select all

/* rotate icons on hover */

menuitem[_moz-menuactive] > hbox > .menu-iconic-icon {
  transform: rotate(30deg) !important;
  -moz-transform: rotate(30deg) !important;
}
You can't use some css properties with the treechildren element.

Code: Select all

.sidebar-placesTreechildren::-moz-tree-image {
  transform: rotate(30deg) !important;      /* fails */
  -moz-transform: rotate(30deg) !important; /* fails */
  filter: hue-rotate(30deg) !important;     /* fails */
  color: orange !important;                 /* succeeds */
}
User avatar
FineWine
Posts: 230
Joined: July 16th, 2004, 12:21 am

Re: Bookmark folder & Favicons transform on Hover & Action

Post by FineWine »

It appears that I am using the correct 'Selectors' for these areas BUT MacOS and the menubar popups use a native style and the 'Transform' selector is not supported. Also apparently 'Transform' is not supported in the 'Sidebar' Tree style css on any OS FF. :(
morat
Posts: 6405
Joined: February 3rd, 2009, 6:29 pm

Re: Bookmark folder & Favicons transform on Hover & Action

Post by morat »

There is a pref to disable the Mac native context menus.

More info: http://forums.mozillazine.org/viewtopic ... #p14894756
Post Reply