That is... super weird. Can you try Firefox's Safe Mode, or a new clean profile and see if the issue persists?

I tried to use safe mode and the sidebar appeared. On a hunch, I thought it might be related to the userChrome.css that I was using so I moved that file out and restarted Firefox normally and it appeared. I've been using this css for quite a while now without issues but now this issue appeared. I'm using it to auto hide/show the sidebar. Could you have a look at it and tell me what could be the issue? Thank you!

========================================================
/Sidebar

/* #D1D1D1 = light grey */
/* #474749 = dark grey */
/* #323234 = very dark grey */


#sidebar,
#sidebar-header,
#bookmarksPanel,
#bookmarks-view,
#history-panel,
#historyTree,
#viewButton {
  background: #323234 !important;
  color: #D1D1D1 !important;
}

.sidebar-placesTreechildren::-moz-tree-cell(hover),
.sidebar-placesTreechildren::-moz-tree-row(selected),
.sidebar-placesTreechildren::-moz-tree-cell-text(hover),
.sidebar-placesTreechildren::-moz-tree-cell-text(selected),
#viewButton:hover {
 background: #323234 !important;
 color: #D1D1D1 !important;
}
   
/* Fix for remaining hovering borders */
.sidebar-placesTreechildren::-moz-tree-row {
 outline: none !important;
 border: none !important;
}

/* Hide white splitter (also appears on top right of scrollbar) *//*
#sidebar-splitter {
  opacity: 0 !important;
}
 
/* Add custom splitter between sidebar and content *//*
#sidebar,
#sidebar-header {
  -moz-border-end: 3px solid #474749 !important;
}

/* To right-align the sidebar, replace all occurrences of "left" with "right", and "margin-right" with "margin-left" */

*|*:root {
    --hover-width:    10px;
    --visible-width: 300px;
}

#sidebar-box {
    position:                            relative !important;
    overflow-x:                            hidden !important;
    opacity:                                    0 !important;
    margin-right:   calc(var(--hover-width) * -1) !important;
    left:                      var(--hover-width) !important;
    min-width:                 var(--hover-width) !important;
    max-width:                 var(--hover-width) !important;
    z-index:                           2147483647 !important;

}

#sidebar-box:hover {
    margin-right: calc(var(--visible-width) * -1) !important;
    opacity:                                    1 !important;
    left:                    var(--visible-width) !important;
    min-width:               var(--visible-width) !important;
    max-width:               var(--visible-width) !important;
}

#sidebar {
    opacity: 0 !important;
}

#sidebar:hover {
    opacity: 1 !important;
}

/* #sidebar-header is hidden by default, change "none" to "inherit" to restore it. */

#sidebar-header {
    display: inherit !important;
}

/* #sidebar-splitter styles the divider between the sidebar and the rest of the browser. */

#sidebar-splitter {
}

#sidebar-header,#sidebar-search-container,#bookmarks-view-children,#historyTree {
color: #d0d0d0 !important;
background-color: #323234 !important;
-moz-appearance: none !important;
border-color: transparent !important;
}

#bookmarks-view
{
color: #d0d0d0 !important;
background-color: #474749 !important;
}

It is you need to add a z-index rule to #sidebar-box. I think z-index defaults to 0 and thus the sidebar is hidden.

I've edited your above code and with the changes it now should work properly.

cor-el said

It is you need to add a z-index rule to #sidebar-box. I think z-index defaults to 0 and thus the sidebar is hidden. I've edited your above code and with the changes it now should work properly.

Thank you so much cor-el! It is working fine now.

@ Edtham :

Next time you post on a support forum, please use a different avatar;
the avatar you're using here is offensive to women (like me).