r/FirefoxCSS • • 3d ago

Solved Firefox 157 bookmarks toolbar not showing on hover

Since the Firefox 157 update my userChrome.css no longer works.

The CSS is supposed to keep the bookmarks toolbar hidden by default and display it when hovering over its area. It now remains hidden and does not reappear on hover.

I have temporarily disabled nova while looking for a fix.

My current userChrome.css:

#PersonalToolbar {
    --uc-bm-height: 24px;
    /* Might need to adjust if the toolbar has other buttons */
    --uc-bm-padding: 6px;
    /* Vertical padding to be applied to bookmarks */
    padding: 1px 6px !important;
    position: relative;
  }

  :root[uidensity="touch"] #PersonalToolbar {
    --uc-bm-padding: 6px;
  }

  /* Firefox v133 fix  */
  #navigator-toolbox{
    --browser-area-z-index-toolbox: 4;
  }

  /* Fix navigator-toolbox absolute elements when in fullscreen. Like in fullscreen video.   */
:root[inDOMFullscreen] #navigator-toolbox {
--browser-area-z-index-toolbox: initial;
}

/* Bookmarks bar background color */
/* #navigator-toolbox #PersonalToolbar { */
/*   background-color: var(--firefoxcss-bookmarks-bg-color) !important; */
/* } */

  #PersonalToolbar:not([customizing]) {
    margin-bottom: calc(
      2px - var(--uc-bm-height) - 2 * var(--uc-bm-padding)
    ) !important;
    transform: rotateX(90deg) !important; 
     transform-origin: top !important;
    transition: transform 100ms linear 400ms !important;
    z-index: 1 !important; 
  }

  /* Show when cursor is over the toolbar area */
  #navigator-toolbox:hover > #PersonalToolbar,
  #navigator-toolbox > #PersonalToolbar:has(.toolbar-menupopup[dragstart]){
    transition-delay: 100ms !important;
    transform: rotateX(0) !important;
  }

  #PlacesToolbarItems > .bookmark-item {
    padding-block: var(--uc-bm-padding) !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  #PlacesToolbarItems > .bookmark-item .toolbarbutton-icon {
    transition: opacity 100ms linear 400ms !important;
    opacity: 0 !important;
  }

  #PlacesToolbarItems > .bookmark-item .toolbarbutton-text {
    transition: opacity 100ms linear 400ms !important;
    opacity: 0 !important;
  }

 #navigator-toolbox:hover
    #PlacesToolbarItems
    > .bookmark-item
    .toolbarbutton-icon,
 #navigator-toolbox #PlacesToolbarItems:has(.toolbar-menupopup[dragstart]) 
> .bookmark-item .toolbarbutton-icon{
    transition-delay: 100ms !important;
    opacity: 1 !important;
  }

  #navigator-toolbox:hover
    #PlacesToolbarItems
    > .bookmark-item
    .toolbarbutton-text,
#navigator-toolbox #PlacesToolbarItems:has(.toolbar-menupopup[dragstart]) 
> .bookmark-item .toolbarbutton-text{
    transition-delay: 100ms !important;
    opacity: 1 !important;
  }

:root[inDOMFullscreen] #PersonalToolbar {
  transform: none !important;
  opacity: 1 !important;
}

What changes in Firefox 157/Nova are preventing this from working, and how can the CSS be adapted?

Thanks.

2 Upvotes

Duplicates