Sidebery Expand-On-Hover

/* Sidebery Expand-On-Hover
 * designed to both mimic and replace the native Firefox sidebar when vertical tabs and and expand-on-hover are enabled
 * A few minor size tweaks as well because in my opinion the default icons are a bit too small in both native Firefox and Sidebery. Adjust to taste
 * NOTE: Not very dynamic, edit CSS to make it look how you want. Especially --sidebar-expanded-width, as the bar used to drag the sidebar size has been removed
 * (also I know my formatting isn't the most space-efficient. I like my brackets and indents ok? leave me alone) */

/* ________________________________________________________________ */

/* Add the following to your userChrome.css */

#main-window
{
    --sidebar-collapsed-width: 40px; /* personal preference, to match urlbar size. To match Firefox's native sidebar exactly, use 51.2333px */
    --sidebar-expanded-width: 380px;
}

#sidebar-panel-header
{
    display: none !important;
}

#sidebar-main
{
    display: none !important;
}

#sidebar-splitter
{
    display: none !important;
}

#sidebar-launcher-splitter
{
    display: none !important;
}

#sidebar-box
{
    width: var(--sidebar-collapsed-width) !important;
    min-width: unset !important;
    max-width: var(--sidebar-expanded-width) !important;
    height: 100% !important;
    padding-bottom: 0 !important;
    z-index: 4 !important;
    transition: width 0.33s cubic-bezier(0.07, 0.95, 0, 1) !important; /* Delete this line if you are using the adaptive tab bar colour fix below! */
}

#sidebar-box:hover
{
    --tabs-lvl-opacity: 0.09 !important;
    --tabs-indent: 16px !important;
    width: var(--sidebar-expanded-width) !important;
}

#sidebar-box:hover ~ #tabbrowser-tabbox
{
    margin-left: calc( (var(--sidebar-expanded-width) - var(--sidebar-collapsed-width)) * -1) !important;
}

#tabbrowser-tabbox
{
    z-index: inherit !important;
    transition: margin-left 0.33s cubic-bezier(0.07, 0.95, 0, 1) !important;
}

/* If you are using the excellent Adaptive Tab Bar Colour extension along with Sidebery, and have employed this fix: https://github.com/easonwong-de/Adaptive-Tab-Bar-Colour?tab=readme-ov-file#customising-colour-transitions
 * then you need to edit that fix to resemble below:

#navigator-toolbox, #TabsToolbar, #nav-bar, #PersonalToolbar, #sidebar-box, .tab-background, .urlbar-background, findbar
{
    transition:
        background-color 0.5s cubic-bezier(0, 0, 0, 1),
        border-color 0.5s cubic-bezier(0, 0, 0, 1),
        width 0.33s cubic-bezier(0.07, 0.95, 0, 1) !important;
}
 * then delete line 45 <<<<<<<<<<<<<<<<<<<<<<

 * Other niceties for integration with Adaptive Tab Bar Colour:

.browserContainer
{
    box-shadow: none !important;
}

*
{
    border: none !important;
    scrollbar-color: transparent;
}
*/

/* ________________________________________________________________ */

/* Add the following to the Styles editor in your Sidebery settings */

.Tab
{
    margin-left: 4px; /* Best for the --sidebar-collapsed-width being 40px. If you changed it to a different value, update the margins to your preference */
    transition: all 0.33s cubic-bezier(0.07, 0.95, 0, 1);
}

.Tab .fav-icon
{
    left: -2px;
}

/* If you are using the 40px --sidebar-collapsed-width that I have by default here, I recommend the below. The speaker icon on a tab that's currently playing audio will be cut off otherwise

.Tab .audio
{
    top: 16px !important;
    left: 16px !important;
    width: 20px !important;
    height: 20px !important;
    background-color: var(--frame-bg); * you could also keep this transparent but in my opinion it flows better when it clips the logo behind it, especailly with Adaptive Tab Bar Colour and against white logos
    clip-path: circle();
    overflow: visible;
}

 * If you keep the above background-color instead of keeping it transparent, the below will give the audio icon a nice little border that is offset in the direction of the main icon (on the current tab only)

.Tab[data-active="true"] .audio::before
{
        content: "";
        width: 100%;
        height: 100%;
        Display: block;
        background: transparent;
        border-radius: 999px;
        border: 1px solid;
        border-color: rgba(255,255,255.133); * matches Sidebery's default border around the active tab. Change if you have the Tabs - Activated Shadow Syle setting in Siebery set to "on"
}
*/

div.bottom-bar-space
{
    transition: height 0.33s cubic-bezier(0.07, 0.95, 0, 1);
}

#root:not(:hover)
{
    --tabs-indent: 0px;
    --tabs-lvl-opacity: 0;

    .Tab .body
    {
        width: 32px;
    }

    .Tab .title
    {
        display: none;
    }

    div.new-tab-btn
    {
        display: none;
    }

    div.tool-btn
    {
        display: none;
    }

    div.bottom-bar-space
    {
        height: 1px !important;
    }
}

/* Another Adaptive Tab Bar Colour recommendation */

.Sidebar, .bottom-space
{
    transition: background-color 0.5s cubic-bezier(0, 0, 0, 1) !important;
}

/* Other tweaks that I personally made but aren't necessary to make things work. All in the Styles editor in your Sidebery settings

 * Larger icons. Best with a larger --general-margin. I used 8px

.Tab .fav
{
    position:relative;
    width:16px;
    height:32px;
    flex-shrink:0;
    opacity:1;
    z-index:10;
    transform:translateZ(0);
}

.Tab .fav-icon
{
    position:absolute;
    top:4px;
    left:-6px;
    width:24px;
    height:24px;
    fill:var(--tabs-normal-fg);
    transition:opacity var(--d-fast);
}

 * Since I made the icons so big, some more square-ish website logos hit the corners of the bounds of the tab, so I clipped them like so:

.Tab .fav
{
    clip-path: circle() !important;
}

.Tab img.fav-icon
{
    clip-path: circle() !important;
}

 * This does crop the content off of some logos, so just don't add the above if you don't want that feature. Or make the icons smaller than I did


 * A very slight adjustment that makes the indent markings for the tabs tree line up more nicely with the tab that they are indenting (in my opinion):

 .Tab .body::after {
  content: "";
  position: absolute;
  display: none;
  top: calc( var(--tabs-margin) * -1);
  left: calc(var(--tabs-indent) / -2);
  width: 1px;
  height: calc(var(--tabs-height) + var(--tabs-margin));
  opacity: var(--tabs-lvl-opacity);
  background-color: var(--tabs-normal-fg);
}

*/