Autohiding Vertical Tabs - Firefox 132+

ffcss-autohiding-vtsb-draft.css

/*
This section of code is part of ongoing development within the FF Ultima (Firefox CSS) Theme.
Below is a universal implementation, that any may use for reference/modification.
https://github.com/soulhotel/FF-ULTIMA
*/


/* Global variables for quick modifications -----------------------------------------------*/

:root, body, * {
    --uc-navbar-height: 40px;            /* use the height of your navigation bar */
    --uc-bookbar-height: 22px;           /* use the height of your bookmarks bar */
    --uc-vertical-collapsed-width:55px;  /* vertical tabs collapsed width - default */
    --uc-vertical-expanded-width:250px;  /* vertical tabs expanded width - default */
    --chrome-content-separator-color: transparent;
    --uc-tab-margins-left: 3.5px 0 5px 0px; /*placehold*/
    --uc-tab-margins-right: 3.5px 0px 5px 0px; /*placehold*/
}


/* Autohide vertical tabs -----------------------------------------------------------------*/

@media (-moz-bool-pref: "sidebar.verticalTabs") {

    /*fixed positioning to overlay content instead of pushing it to the side*/
    #sidebar-main {       
        position:fixed !important;
        top:36px !important;
        left:0px !important;
        height:calc(100vh - 40px) !important;
        z-index:997 !important;
    }
    
    @media (-moz-bool-pref: "sidebar.revamp") {
        #main-window #browser {
            /*make space for the collapsed vertical tabs, by moving content to the side*/
            margin-left:50px !important;
        }
        #main-window[inDOMFullscreen="true"] #browser {
            /*inDOMFullscreen applies to fullscreen states like a fullscreen-video - browser spacing should be reset to 0*/
            margin-left:0px !important;
        }   
        #main-window[inFullscreen="true"] #sidebar-main {
            /*inFullscreen the vertical tabs should take up the entire side (in height) to make up for the autohidden navigation bar*/
            top:0 !important;
            height:100vh !important;   
        }  
    }
    /*using some specific and non-specific selectors in the right way, we can detect if the bookmarks bar is opened or not*/
    #main-window:not([inFullscreen="true"]) #navigator-toolbox:has([collapsed="false"]) + #browser #sidebar-main {
        /*if it is open, then the vertical tabs will need to be adjusted appropriately to a new height and position (top)*/
        top:calc(var(--uc-navbar-height) + var(--uc-bookbar-height) + 4px) !important;
        height:calc(100vh - var(--uc-navbar-height) - var(--uc-bookbar-height)) !important;
    }
    
    
    /*Autohiding animation using the custom variables established at the start*/
    #sidebar-main:has([expanded]) {
        transition: width 80ms linear 70ms !important;
        will-change: width !important;
        width:var(--uc-vertical-expanded-width) !important;
    }    
    #sidebar-main:has([expanded]):not(:hover) {
        width: var(--uc-vertical-collapsed-width) !important;
        z-index: 0;
    }
    /* add margin between the vertical tabs and second sidebar*/
    /*
    #sidebar-main:has([expanded]):not(:hover) + #sidebar-box {
        margin-left:5px !important;
    }
    #sidebar-main:has([expanded]):hover + #sidebar-box {
        margin-left:0px !important;
    }
    */
    /*adjustments for elements within the autohidden state*/
    #sidebar-main:has([expanded=""]):not(:hover) .tabbrowser-tab{width: 56px !important; min-width: 0px !important} /*all tabs*/
    #sidebar-main:has([expanded=""]):not(:hover) .tabbrowser-tab[pinned=""]{width: 43px !important; min-width: 0px !important} /*pinned tabs*/
    #sidebar-main:has([expanded=""]):not(:hover) .tab-label-container, #sidebar-main:not(:hover) .tab-close-button{ display: none !important; }
    #sidebar-main:has([expanded=""]):not(:hover) #vertical-tabs-newtab-button{min-width: 0px !important; appearance: none !important;}

    /*styling toolbar buttons within*/
    .tools-and-extensions:not(:hover){ opacity:0.5 !important;}
    .button-background {&.labelled { gap: 15px !important;}}
    #tabbrowser-arrowscrollbox[orient="vertical"] > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button, #vertical-tabs-newtab-button {
        & > .toolbarbutton-text {
            padding-inline-start: var(--tab-icon-end-margin);
            margin-left:12px !important;
        }
    }	

} /*END*/


/* Some quick styling ---------------------------------------------------------------------*/

#sidebar-main:has([expanded]) .tab-label-container {
  margin-left: 5px !important; /*more space between inidividial tab icon and text*/
}
#sidebar-main *, #sidebar-main .wrapper {
    border-inline-end: 0px solid black !important;
}
#sidebar-main:not([positionend="true"]) {
	margin: var(--uc-tab-margins-left) !important;
}      
#sidebar-main[positionend="true"] {
	margin: var(--uc-tab-margins-right) !important;
}

/*new tab button*/
#vertical-tabs-newtab-button {
    border-radius:10px !important;
}
/*pinned tabs*/
#vertical-tabs .tabbrowser-tab[pinned] .tab-background {
    box-shadow: 0.1rem 0.4rem 0.4rem -0.1rem rgba(25,25,25,0.6);
}

Preview on FF Ultima (most up to date sidebar - Firefox 133) and Unmodded Firefox (Firefox 132)

2024-11-03.22-49-46.mp4

Note in the video, the text being cut off for the toolbar buttons at the bottom of the vertical tabs. Simple margin-left can be added to the button text, but this issue is resolved once Default Release reaches 133 on November 29th, it'll look like the Browser that has the FF Ultima theme on it.