MozillaZine


Bookmark folder & Favicons transform on Hover & Action

Discussion of general topics about Mozilla Firefox
FineWine

User avatar
 
Posts: 227
Joined: July 16th, 2004, 12:21 am

Post Posted August 15th, 2021, 7:55 pm

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

Post Posted August 17th, 2021, 7:35 am

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 */
}

FineWine

User avatar
 
Posts: 227
Joined: July 16th, 2004, 12:21 am

Post Posted August 19th, 2021, 8:52 pm

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

Post Posted August 20th, 2021, 6:30 am

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

More info: viewtopic.php?p=14894756#p14894756

Return to Firefox General


Who is online

Users browsing this forum: Bing [Bot] and 2 guests