userChrome.css

/* Style the main sidebar content */
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar,
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] .sidebar-browser-stack {
  border-radius: 12px !important;
  overflow: hidden !important;
  background: var(--toolbar-bgcolor) !important;
  border: 1px solid var(--chrome-content-separator-color) !important;
}

/* Remove the header if you want it even cleaner */
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar-header {
  display: none !important;
}

/* Add subtle shadow for depth */
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Improve the hover area */
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 0;
  width: 15px;
  height: 100%;
  z-index: 999;
  pointer-events: auto;
  border-radius: 12px 0 0 12px;
}

/* Firefox 133+ Compatibility Fix - Add this to the TOP of your userChrome.css */

/* Force sidebar to respect the autohide behavior */
#sidebar-box {
  position: fixed !important;
  z-index: 1000 !important;
  left: 0 !important;
  top: var(--tab-min-height, 33px) !important; /* Start below the tab bar */
  height: calc(100vh - var(--tab-min-height, 33px)) !important; /* Adjust height accordingly */
  margin: 0 !important;
  padding: 0 !important;
}

/* Alternative approach - uses relative positioning instead of fixed */
/* Try this if the fixed positioning causes issues */
/*
#sidebar-box {
  position: relative !important;
  z-index: 1000 !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  padding: 0 !important;
}

#browser {
  position: relative !important;
}

#sidebar-box {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  height: 100% !important;
  z-index: 999 !important;
}
*/

/* Ensure the sidebar container behaves correctly */
#sidebar-box .sidebar-browser-stack {
  width: var(--uc-sidebar-width, 0px) !important;
  transition: width var(--uc-autohide-transition-duration, 115ms) var(--uc-autohide-transition-type, linear) var(--uc-autohide-sidebar-delay, 600ms) !important;
}

#sidebar-box:hover .sidebar-browser-stack {
  width: var(--uc-sidebar-hover-width, 280px) !important;
  transition-delay: 0ms !important;
}

/* Fix for Sidebery specifically */
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] .sidebar-browser-stack {
  overflow: hidden !important;
}

/* Alternative approach - try this if the above doesn't work */
/* Replace your existing CSS variables section with this: */
/*
:where(#main-window) #browser{
  --uc-sidebar-width: 1px !important;
  --uc-sidebar-hover-width: 280px !important;
}

#sidebar-box {
  width: var(--uc-sidebar-width) !important;
  min-width: var(--uc-sidebar-width) !important;
  max-width: var(--uc-sidebar-width) !important;
  overflow: visible !important;
  position: relative !important;
  transition: all 0.2s ease !important;
}

#sidebar-box:hover {
  width: var(--uc-sidebar-hover-width) !important;
  min-width: var(--uc-sidebar-hover-width) !important;
  max-width: var(--uc-sidebar-hover-width) !important;
}
*/

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Show sidebar only when the cursor is over it.
   The border controlling sidebar width will be removed so you'll need to modify
   these values to change width.
   By default the internal layout of sidebar changes when hovered, but this can
   be changed by setting pref "userchrome.autohide-sidebar.static-layout.enabled" to true
 */

/* Note: If you want only *some* sidebar to be auto-hidden, then you can use [sidebarcommand] attribute selector.
   For example, to only affect Sidebery's sidebar replace all instances of #sidebar-box with
   #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"].
   To find the sidebarcommand value for any other sidebar, open that sidebar and use Browser Toolbox to inspect it.
   See: https://firefox-source-docs.mozilla.org/devtools-user/browser_toolbox/index.html
*/
:where(#main-window) #browser{
  --uc-sidebar-width: 0px;
  --uc-sidebar-hover-width: 280px;
}
#main-window[sizemode="fullscreen"] #browser{
  --uc-sidebar-width: 1px;
}
#sidebar-box{
  --uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */
  --uc-autohide-transition-duration: 115ms;
  --uc-autohide-transition-type: linear;
  --browser-area-z-index-sidebar: 3;
  position: relative;
  min-width: var(--uc-sidebar-width) !important;
  width: var(--uc-sidebar-width) !important;
  max-width: var(--uc-sidebar-width) !important;
  z-index: var(--browser-area-z-index-sidebar,3);
  background-color: inherit;
  /* This directionality flipper is played so that sidebar "grows" into the right direction */
  direction: ltr;
  &:is([positionend],[sidebar-positionend]):not(:-moz-locale-dir(rtl)){
    direction: rtl;
  }
}
.sidebar-browser-stack{
  background: inherit;
}
#main-window[sizemode="fullscreen"] #browser{ --uc-sidebar-width: 1px; }

#sidebar-splitter{ display: none }

#sidebar-header{
  overflow: hidden;
  color: var(--chrome-color, inherit) !important;
  padding-inline: 0 !important;
}

#sidebar-header::before,
#sidebar-header::after{
  content: "";
  display: flex;
  padding-left: 8px;
}

#sidebar-header,
#sidebar{
  transition: min-width var(--uc-autohide-transition-duration) var(--uc-autohide-transition-type) var(--uc-autohide-sidebar-delay) !important;
  min-width: var(--uc-sidebar-width) !important;
  will-change: min-width;
  direction: ltr;
  &:-moz-locale-dir(rtl){
    direction: rtl;
  }
}
#sidebar-box:hover > #sidebar-header,
#sidebar-box:hover > #sidebar,
#sidebar-box:hover > .sidebar-browser-stack > #sidebar{
  min-width: var(--uc-sidebar-hover-width) !important;
  transition-delay: 0ms !important;
}

.sidebar-panel{
  background-color: transparent !important;
  color: var(--newtab-text-primary-color) !important;
}

.sidebar-panel #search-box{
  -moz-appearance: none !important;
  background-color: rgba(249,249,250,0.1) !important;
  color: inherit !important;
}

/* Add sidebar divider and give it background */

#sidebar,
#sidebar-header{
  background-color: inherit !important;
  border-inline: 1px solid rgb(80,80,80);
  border-inline-width: 0px 1px;
}

#sidebar-box:not([positionend],[sidebar-positionend]) > :-moz-locale-dir(rtl),
#sidebar-box:is([positionend],[sidebar-positionend]) > *{
  border-inline-width: 1px 0px;
}
@media -moz-pref("sidebar.revamp") {
  #sidebar, #sidebar-header{ border-style: none }
  #sidebar-box{ padding: 0 !important; }
}
/* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */

#sidebar-box:not([positionend],[sidebar-positionend]):hover ~ #appcontent #statuspanel{
  inset-inline: auto 0px !important;
}
#sidebar-box:not([positionend],[sidebar-positionend]):hover ~ #appcontent #statuspanel-label{
  margin-inline: 0px !important;
  border-left-style: solid !important;
}
@media -moz-pref("userchrome.autohide-sidebar.static-layout.enabled"){
  #sidebar-box{
    min-width: var(--uc-sidebar-width) !important;
    contain: size;
    box-shadow: var(--content-area-shadow);
  }
  #sidebar{
    min-width: var(--uc-sidebar-hover-width) !important;
  }
  .sidebar-browser-stack{
    overflow: hidden;
    width: 100%;
    transition: width var(--uc-autohide-transition-duration) var(--uc-autohide-transition-type) var(--uc-autohide-sidebar-delay);
    direction: ltr;
    &:hover{
      transition-delay: 0ms;
      width: var(--uc-sidebar-hover-width);
    }
    &:-moz-locale-dir(rtl){
      transition-property: transform,width !important;
    }
  }
  #sidebar-box[sidebar-positionend]:hover :is(#sidebar-header,#sidebar):-moz-locale-dir(ltr){
    transform: translateX(0);
    transition-delay: 0ms !important;
  }
  #sidebar-box:not([sidebar-positionend]):hover .sidebar-browser-stack:-moz-locale-dir(rtl){
    transform: translateX(calc(-1 * var(--uc-sidebar-hover-width) + var(--uc-sidebar-width)));
  }
  #sidebar-box[sidebar-positionend]:hover > .sidebar-browser-stack:-moz-locale-dir(rtl){
    transform: translateX(calc(var(--uc-sidebar-hover-width) - var(--uc-sidebar-width)));
    transition-delay: 0ms !important;
  }
}

/**
 * Dynamic Horizontal Tabs Toolbar (with animations)
 * sidebar.verticalTabs: false (with native horizontal tabs)
 */
#main-window #TabsToolbar > .toolbar-items {
  overflow: hidden;
  transition: height 0.3s 0.3s !important;
}
/* Default state: Set initial height to enable animation */
#main-window #TabsToolbar > .toolbar-items { height: 3em !important; }
#main-window[uidensity="touch"] #TabsToolbar > .toolbar-items { height: 3.35em !important; }
#main-window[uidensity="compact"] #TabsToolbar > .toolbar-items { height: 2.7em !important; }
/* Hidden state: Hide native tabs strip */
#main-window[titlepreface*="XXX"] #TabsToolbar > .toolbar-items { height: 0 !important; }
/* Hidden state: Fix z-index of active pinned tabs */
#main-window[titlepreface*="XXX"] #tabbrowser-tabs { z-index: 0 !important; }
/* Hidden state: Hide window buttons in tabs-toolbar */
#main-window[titlepreface*="XXX"] #TabsToolbar .titlebar-spacer,
#main-window[titlepreface*="XXX"] #TabsToolbar .titlebar-buttonbox-container {
  display: none !important;
}
/* [Optional] Uncomment block below to show window buttons in nav-bar (maybe, I didn't test it on non-linux-i3wm env) */
/* #main-window[titlepreface*="XXX"] #nav-bar > .titlebar-buttonbox-container,
#main-window[titlepreface*="XXX"] #nav-bar > .titlebar-buttonbox-container > .titlebar-buttonbox {
  display: flex !important;
} */
/* [Optional] Uncomment one of the line below if you need space near window buttons */
/* #main-window[titlepreface*="XXX"] #nav-bar > .titlebar-spacer[type="pre-tabs"] { display: flex !important; } */
/* #main-window[titlepreface*="XXX"] #nav-bar > .titlebar-spacer[type="post-tabs"] { display: flex !important; } */

/* Rounded corners specifically for Sidebery */
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] {
  border-radius: 6px !important;
  margin: 2px 0px !important; /* Reduce margin and only apply top/bottom */
  overflow: visible !important;
}

/* Add a hover trigger area */
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 10px; /* Invisible hover area extending from the edge */
  height: 100%;
  z-index: 999;
  pointer-events: auto;
}

/* Target Sidebery's specific elements */
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar-header,
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar,
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] .sidebar-browser-stack {
  border-radius: 6px !important;
  overflow: hidden !important;
}

/* Alternative: Try targeting just the browser stack for Sidebery */
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] > .sidebar-browser-stack {
  border-radius: 6px !important;
  overflow: hidden !important;
  background: inherit !important;
}