Autohiding does not work

[rofrol]

This worked for me:

  :root {
    --sidebar-hover-width: 36px;
    --sidebar-visible-width: 300px;
    --sidebar-debounce-delay: 150ms;
  }

  #sidebar-box[sidebarcommand="_ccc8cbaa-3c36-46d1-b0ae-d5e122755901_-sidebar-action"]:not(
      [hidden]
    ) {
    display: block;
    position: fixed;
    transition: min-width 0.2s ease;
    border-right: 1px solid #cdc7c2;
    z-index: 1;
    display: grid !important;
    min-width: var(--sidebar-hover-width) !important;
    max-width: var(--sidebar-hover-width) !important;
    overflow: visible !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
  }
  #sidebar-box[sidebarcommand="_ccc8cbaa-3c36-46d1-b0ae-d5e122755901_-sidebar-action"]
    #sidebar {
    height: 100% !important;
    z-index: 200 !important;
    position: absolute !important;
    transition: width 150ms var(--sidebar-debounce-delay) ease !important;
    min-width: 0 !important;
  }
  #sidebar-box[sidebarcommand="_ccc8cbaa-3c36-46d1-b0ae-d5e122755901_-sidebar-action"]
    #sidebar:hover {
    width: var(--sidebar-visible-width) !important;
  }
  #main-window:not([inFullscreen])
    #sidebar-box[sidebarcommand="_ccc8cbaa-3c36-46d1-b0ae-d5e122755901_-sidebar-action"]:not(
      [hidden]
    )
    ~ #appcontent {
    margin-left: var(--sidebar-hover-width);
  }
  #sidebar-box[sidebarcommand="_ccc8cbaa-3c36-46d1-b0ae-d5e122755901_-sidebar-action"]
    #sidebar-header {
    display: none !important;
  }

My config can found at https://github.com/rofrol/dotfiles/blob/master/.mozilla/firefox/shared/chrome/userChrome.css

userChrome.css

```css @-moz-document url(chrome://browser/content/browser.xhtml) { /* https://twitter.com/myfonj/status/1387584962354982912 */ /* https://www.reddit.com/r/firefox/comments/j9agb3/disable_the_fullscreen_animation_in_firefox_80/ga9xbet/?utm_source=reddit&utm_medium=web2x&context=3 */

#navigator-toolbox[fullscreenShouldAnimate] {
/* transetion: none !important; */
}

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

/* Creates placeholders for window controls /
/ This is a supporting file used by other stylesheets */

/* This stylesheet is pretty much unnecessary if window titlebar is enabled */

/* This file should preferably be imported before other stylesheets */

/* Defaults for window controls on RIGHT side of the window /
/ Modify these values to match your preferences /
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
--uc-window-control-width: 138px; / Space reserved for window controls (Win10) /
/ Extra space reserved on both sides of the nav-bar to be able to drag the window /
--uc-window-drag-space-pre: 30px; / left side*/
--uc-window-drag-space-post: 30px; /* right side*/
}

:root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) {
--uc-window-drag-space-pre: 0px; /* Remove pre space */
}

@media (-moz-platform: windows-win7), (-moz-platform: windows-win8) {
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
--uc-window-control-width: 105px;
}
}

@media (-moz-gtk-csd-available) {
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
--uc-window-control-width: 84px;
}
}
@media (-moz-platform: macos) {
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
--uc-window-control-width: 72px;
}
}

.titlebar-buttonbox,
#window-controls {
color: var(--toolbar-color);
}
:root[sizemode="fullscreen"] .titlebar-buttonbox-container {
display: none;
}
:root[sizemode="fullscreen"] #navigator-toolbox {
position: relative;
}

:root[sizemode="fullscreen"]
#TabsToolbar
> .titlebar-buttonbox-container:last-child,
:root[sizemode="fullscreen"] #window-controls {
position: absolute;
display: flex;
top: 0;
right: 0;
height: 40px;
}

:root[sizemode="fullscreen"]
#TabsToolbar
> .titlebar-buttonbox-container:last-child,
:root[uidensity="compact"][sizemode="fullscreen"] #window-controls {
height: 32px;
}

#nav-bar {
border-inline: var(--uc-window-drag-space-pre, 0px) solid transparent;
border-inline-style: solid !important;
border-right-width: calc(
var(--uc-window-control-width, 0px) +
var(--uc-window-drag-space-post, 0px)
);
background-clip: border-box !important;
}

/* Rules for window controls on left layout */
@media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"),
(-moz-gtk-csd-reversed-placement),
(-moz-platform: macos) {
:root[tabsintitlebar="true"] #nav-bar {
border-inline-width: calc(
var(--uc-window-control-width, 0px) +
var(--uc-window-drag-space-post, 0px)
)
var(--uc-window-drag-space-pre, 0px);
}
:root[sizemode="fullscreen"]
#TabsToolbar
> .titlebar-buttonbox-container:last-child,
:root[sizemode="fullscreen"] #window-controls {
right: unset;
}
}
@media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled") {
.titlebar-buttonbox-container {
order: -1 !important;
}
.titlebar-buttonbox {
flex-direction: row-reverse;
}
}

/* This pref can be used to force window controls on left even if that is not normal behavior on your OS */
@supports -moz-bool-pref("userchrome.force-window-controls-on-left.enabled") {
:root[tabsintitlebar="true"] #nav-bar {
border-inline-width: calc(
var(--uc-window-control-width, 0px) +
var(--uc-window-drag-space-post, 0px)
)
var(--uc-window-drag-space-pre, 0px);
}
:root[sizemode="fullscreen"]
#TabsToolbar
> .titlebar-buttonbox-container:last-child,
:root[sizemode="fullscreen"] #window-controls {
right: unset;
}
.titlebar-buttonbox-container {
order: -1 !important;
}
.titlebar-buttonbox {
flex-direction: row-reverse;
}
}

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

/* Hides tabs toolbar - OSX only */

/* IMPORTANT /
/
Get window_control_placeholder_support.css
Window controls will be all wrong without it
*/

:root {
--uc-toolbar-height: 32px;
}
:root:not([uidensity="compact"]) {
--uc-toolbar-height: 34px;
}

#TabsToolbar > * {
visibility: collapse !important;
}
:root[sizemode="fullscreen"] #TabsToolbar > #window-controls {
visibility: visible !important;
z-index: 2;
}
#TabsToolbar > .titlebar-buttonbox-container {
visibility: visible !important;
height: var(--uc-toolbar-height) !important;
}

#nav-bar {
margin-top: calc(0px - var(--uc-toolbar-height));
}
:root[inFullscreen] #navigator-toolbox {
margin-top: 11px;
}

/* https://framagit.org/ariasuni/tabcenter-reborn/-/wikis/home */
#sidebar-box[sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"]
#sidebar-header {
visibility: collapse;
}

/* floating-auto-shrinking-sidebar for https://addons.mozilla.org/en-US/firefox/addon/sidetabs
Based on code from:

• https://framagit.org/ariasuni/tabcenter-reborn/-/wikis/home#floating-auto-shrinking-sidebar-103-video-preview
• moz-extension://5e39e673-144d-469e-8779-2b6327e534b3/src/entries/settings/index.html. To get this generator go to about:addons > Sidetabs > Button with "..." > Preferences. Some code https://github.com/jeb5/Sidetabs/blob/80d7ac01b6da19010b740e5dbe3800adc17afa99/src/entries/settings/GenerateUserChrome.ts.

Code just from Sidetabs generator didn't expand on hover. I have combined it with tabcenter-reborn code.
It only changes for #sidebar-box for Sidetabs thanks to sidebarcommand="_ccc8cbaa-3c36-46d1-b0ae-d5e122755901_-sidebar-action".
I get this string with https://firefox-source-docs.mozilla.org/devtools-user/browser_toolbox/index.html.

*/
:root {
--sidebar-hover-width: 36px;
--sidebar-visible-width: 300px;
--sidebar-debounce-delay: 150ms;
}

#sidebar-box[sidebarcommand="ccc8cbaa-3c36-46d1-b0ae-d5e122755901-sidebar-action"]:not(
[hidden]
) {
display: block;
position: fixed;
transition: min-width 0.2s ease;
border-right: 1px solid #cdc7c2;
z-index: 1;
display: grid !important;
min-width: var(--sidebar-hover-width) !important;
max-width: var(--sidebar-hover-width) !important;
overflow: visible !important;
height: 100% !important;
min-height: 100% !important;
max-height: 100% !important;
}
#sidebar-box[sidebarcommand="ccc8cbaa-3c36-46d1-b0ae-d5e122755901-sidebar-action"]
#sidebar {
height: 100% !important;
z-index: 200 !important;
position: absolute !important;
transition: width 150ms var(--sidebar-debounce-delay) ease !important;
min-width: 0 !important;
}
#sidebar-box[sidebarcommand="ccc8cbaa-3c36-46d1-b0ae-d5e122755901-sidebar-action"]
#sidebar:hover {
width: var(--sidebar-visible-width) !important;
}
#main-window:not([inFullscreen])
#sidebar-box[sidebarcommand="ccc8cbaa-3c36-46d1-b0ae-d5e122755901-sidebar-action"]:not(
[hidden]
)
~ #appcontent {
margin-left: var(--sidebar-hover-width);
}
#sidebar-box[sidebarcommand="ccc8cbaa-3c36-46d1-b0ae-d5e122755901-sidebar-action"]
#sidebar-header {
display: none !important;
}
}

</details>