mulcahey, 7 months ago Here’s the one I used: <span style="color:#323232;">/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0 </span><span style="color:#323232;">See the above repository for updates as well as full license text. */ </span><span style="color:#323232;"> </span><span style="color:#323232;">/* Show sidebar only when the cursor is over it */ </span><span style="color:#323232;">/* The border controlling sidebar width will be removed so you'll need to modify these values to change width */ </span><span style="color:#323232;"> </span><span style="color:#323232;">#sidebar-box { </span><span style="color:#323232;"> --uc-sidebar-width: 60px; </span><span style="color:#323232;"> --uc-sidebar-hover-width: 210px; </span><span style="color:#323232;"> --uc-autohide-sidebar-delay: 100ms; /* Wait 0.6s before hiding sidebar */ </span><span style="color:#323232;"> position: relative; </span><span style="color:#323232;"> min-width: var(--uc-sidebar-width) !important; </span><span style="color:#323232;"> width: var(--uc-sidebar-width) !important; </span><span style="color:#323232;"> max-width: var(--uc-sidebar-width) !important; </span><span style="color:#323232;"> z-index: 1; </span><span style="color:#323232;"> background-color: #110a0d !important; </span><span style="color:#323232;">} </span><span style="color:#323232;"> </span><span style="color:#323232;">#sidebar-box[positionend] { </span><span style="color:#323232;"> direction: rtl; </span><span style="color:#323232;">} </span><span style="color:#323232;">#sidebar-box[positionend] > * { </span><span style="color:#323232;"> direction: ltr; </span><span style="color:#323232;">} </span><span style="color:#323232;"> </span><span style="color:#323232;">#sidebar-box[positionend]:-moz-locale-dir(rtl) { </span><span style="color:#323232;"> direction: ltr; </span><span style="color:#323232;">} </span><span style="color:#323232;">#sidebar-box[positionend]:-moz-locale-dir(rtl) > * { </span><span style="color:#323232;"> direction: rtl; </span><span style="color:#323232;">} </span><span style="color:#323232;"> </span><span style="color:#323232;">#main-window[sizemode="fullscreen"] #sidebar-box { </span><span style="color:#323232;"> --uc-sidebar-width: 1px; </span><span style="color:#323232;">} </span><span style="color:#323232;"> </span><span style="color:#323232;">#sidebar-splitter { </span><span style="color:#323232;"> display: none; </span><span style="color:#323232;">} </span><span style="color:#323232;"> </span><span style="color:#323232;">#sidebar-header { </span><span style="color:#323232;"> overflow: hidden; </span><span style="color:#323232;"> /* color: var(--chrome-color, inherit) !important; */ </span><span style="color:#323232;"> padding-inline: 0 !important; </span><span style="color:#323232;">} </span><span style="color:#323232;"> </span><span style="color:#323232;">#sidebar-header::before, </span><span style="color:#323232;">#sidebar-header::after { </span><span style="color:#323232;"> content: ""; </span><span style="color:#323232;"> display: flex; </span><span style="color:#323232;"> padding-left: 8px; </span><span style="color:#323232;">} </span><span style="color:#323232;"> </span><span style="color:#323232;">#sidebar-header, </span><span style="color:#323232;">#sidebar { </span><span style="color:#323232;"> transition: min-width 115ms linear var(--uc-autohide-sidebar-delay) !important; </span><span style="color:#323232;"> min-width: var(--uc-sidebar-width) !important; </span><span style="color:#323232;"> will-change: min-width; </span><span style="color:#323232;">} </span><span style="color:#323232;">#sidebar-box:hover > #sidebar-header, </span><span style="color:#323232;">#sidebar-box:hover > #sidebar { </span><span style="color:#323232;"> min-width: var(--uc-sidebar-hover-width) !important; </span><span style="color:#323232;"> transition-delay: 0ms !important; </span><span style="color:#323232;">} </span><span style="color:#323232;"> </span><span style="color:#323232;">.sidebar-panel { </span><span style="color:#323232;"> /* background-color: transparent !important; */ </span><span style="color:#323232;"> /* color: var(--newtab-text-primary-color) !important; */ </span><span style="color:#323232;">} </span><span style="color:#323232;"> </span><span style="color:#323232;">.sidebar-panel #search-box { </span><span style="color:#323232;"> -moz-appearance: none !important; </span><span style="color:#323232;"> /* background-color: rgba(249, 249, 250, 0.1) !important; */ </span><span style="color:#323232;"> color: inherit !important; </span><span style="color:#323232;">} </span><span style="color:#323232;"> </span><span style="color:#323232;">/* Add sidebar divider and give it background */ </span><span style="color:#323232;"> </span><span style="color:#323232;">#sidebar, </span><span style="color:#323232;">#sidebar-header { </span><span style="color:#323232;"> background-color: inherit !important; </span><span style="color:#323232;"> border-inline: 1px solid rgb(80, 80, 80); </span><span style="color:#323232;"> border-inline-width: 0px 1px; </span><span style="color:#323232;">} </span><span style="color:#323232;"> </span><span style="color:#323232;">#sidebar-box:not([positionend]) > :-moz-locale-dir(rtl), </span><span style="color:#323232;">#sidebar-box[positionend] > * { </span><span style="color:#323232;"> border-inline-width: 1px 0px; </span><span style="color:#323232;">} </span><span style="color:#323232;"> </span><span style="color:#323232;">/* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */ </span><span style="color:#323232;"> </span><span style="color:#323232;">#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel { </span><span style="color:#323232;"> inset-inline: auto 0px !important; </span><span style="color:#323232;">} </span><span style="color:#323232;">#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel-label { </span><span style="color:#323232;"> margin-inline: 0px !important; </span><span style="color:#323232;"> border-left-style: solid !important; </span><span style="color:#323232;">}`___` </span>
Here’s the one I used:
<span style="color:#323232;">/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0 </span><span style="color:#323232;">See the above repository for updates as well as full license text. */ </span><span style="color:#323232;"> </span><span style="color:#323232;">/* Show sidebar only when the cursor is over it */ </span><span style="color:#323232;">/* The border controlling sidebar width will be removed so you'll need to modify these values to change width */ </span><span style="color:#323232;"> </span><span style="color:#323232;">#sidebar-box { </span><span style="color:#323232;"> --uc-sidebar-width: 60px; </span><span style="color:#323232;"> --uc-sidebar-hover-width: 210px; </span><span style="color:#323232;"> --uc-autohide-sidebar-delay: 100ms; /* Wait 0.6s before hiding sidebar */ </span><span style="color:#323232;"> position: relative; </span><span style="color:#323232;"> min-width: var(--uc-sidebar-width) !important; </span><span style="color:#323232;"> width: var(--uc-sidebar-width) !important; </span><span style="color:#323232;"> max-width: var(--uc-sidebar-width) !important; </span><span style="color:#323232;"> z-index: 1; </span><span style="color:#323232;"> background-color: #110a0d !important; </span><span style="color:#323232;">} </span><span style="color:#323232;"> </span><span style="color:#323232;">#sidebar-box[positionend] { </span><span style="color:#323232;"> direction: rtl; </span><span style="color:#323232;">} </span><span style="color:#323232;">#sidebar-box[positionend] > * { </span><span style="color:#323232;"> direction: ltr; </span><span style="color:#323232;">} </span><span style="color:#323232;"> </span><span style="color:#323232;">#sidebar-box[positionend]:-moz-locale-dir(rtl) { </span><span style="color:#323232;"> direction: ltr; </span><span style="color:#323232;">} </span><span style="color:#323232;">#sidebar-box[positionend]:-moz-locale-dir(rtl) > * { </span><span style="color:#323232;"> direction: rtl; </span><span style="color:#323232;">} </span><span style="color:#323232;"> </span><span style="color:#323232;">#main-window[sizemode="fullscreen"] #sidebar-box { </span><span style="color:#323232;"> --uc-sidebar-width: 1px; </span><span style="color:#323232;">} </span><span style="color:#323232;"> </span><span style="color:#323232;">#sidebar-splitter { </span><span style="color:#323232;"> display: none; </span><span style="color:#323232;">} </span><span style="color:#323232;"> </span><span style="color:#323232;">#sidebar-header { </span><span style="color:#323232;"> overflow: hidden; </span><span style="color:#323232;"> /* color: var(--chrome-color, inherit) !important; */ </span><span style="color:#323232;"> padding-inline: 0 !important; </span><span style="color:#323232;">} </span><span style="color:#323232;"> </span><span style="color:#323232;">#sidebar-header::before, </span><span style="color:#323232;">#sidebar-header::after { </span><span style="color:#323232;"> content: ""; </span><span style="color:#323232;"> display: flex; </span><span style="color:#323232;"> padding-left: 8px; </span><span style="color:#323232;">} </span><span style="color:#323232;"> </span><span style="color:#323232;">#sidebar-header, </span><span style="color:#323232;">#sidebar { </span><span style="color:#323232;"> transition: min-width 115ms linear var(--uc-autohide-sidebar-delay) !important; </span><span style="color:#323232;"> min-width: var(--uc-sidebar-width) !important; </span><span style="color:#323232;"> will-change: min-width; </span><span style="color:#323232;">} </span><span style="color:#323232;">#sidebar-box:hover > #sidebar-header, </span><span style="color:#323232;">#sidebar-box:hover > #sidebar { </span><span style="color:#323232;"> min-width: var(--uc-sidebar-hover-width) !important; </span><span style="color:#323232;"> transition-delay: 0ms !important; </span><span style="color:#323232;">} </span><span style="color:#323232;"> </span><span style="color:#323232;">.sidebar-panel { </span><span style="color:#323232;"> /* background-color: transparent !important; */ </span><span style="color:#323232;"> /* color: var(--newtab-text-primary-color) !important; */ </span><span style="color:#323232;">} </span><span style="color:#323232;"> </span><span style="color:#323232;">.sidebar-panel #search-box { </span><span style="color:#323232;"> -moz-appearance: none !important; </span><span style="color:#323232;"> /* background-color: rgba(249, 249, 250, 0.1) !important; */ </span><span style="color:#323232;"> color: inherit !important; </span><span style="color:#323232;">} </span><span style="color:#323232;"> </span><span style="color:#323232;">/* Add sidebar divider and give it background */ </span><span style="color:#323232;"> </span><span style="color:#323232;">#sidebar, </span><span style="color:#323232;">#sidebar-header { </span><span style="color:#323232;"> background-color: inherit !important; </span><span style="color:#323232;"> border-inline: 1px solid rgb(80, 80, 80); </span><span style="color:#323232;"> border-inline-width: 0px 1px; </span><span style="color:#323232;">} </span><span style="color:#323232;"> </span><span style="color:#323232;">#sidebar-box:not([positionend]) > :-moz-locale-dir(rtl), </span><span style="color:#323232;">#sidebar-box[positionend] > * { </span><span style="color:#323232;"> border-inline-width: 1px 0px; </span><span style="color:#323232;">} </span><span style="color:#323232;"> </span><span style="color:#323232;">/* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */ </span><span style="color:#323232;"> </span><span style="color:#323232;">#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel { </span><span style="color:#323232;"> inset-inline: auto 0px !important; </span><span style="color:#323232;">} </span><span style="color:#323232;">#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel-label { </span><span style="color:#323232;"> margin-inline: 0px !important; </span><span style="color:#323232;"> border-left-style: solid !important; </span><span style="color:#323232;">}`___` </span>