Firefox Tree Style Tab CSS - Collapsible

treestyletab.css

/* Hide border on tab bar, force its state to 'scroll', adjust margin-left for width of scrollbar.
#tabbar {
    border: 0;
    overflow-y: scroll !important;
    margin-left: -18px !important;
}
*/

/* Hide .twisty and adjust margins so favicons have 7px on left. */
.tab .twisty {
    visibility: hidden;
    margin-left: -12px;
}

/* Push tab labels slightly to the right so they're completely hidden in collapsed state */
.tab .label {
    margin-left: 7px;
}

/* Hide close buttons on tabs. */
.tab .closebox {
    visibility: collapse;
}

/* Hide sound playing/muted button. */
.sound-button::before {
    display: none !important;
}

/* Hide 'new tab' button. */
.newtab-button {
    display: none;
}

/* ################################################ */
/* ##### COLOR THEME ############################## */
/* ################################################ */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0% {
        width: 0px;
        height: 0px;
        opacity: 1;
    }

    100% {
        width: 350px;
        height: 350px;
        opacity: 0;
        top: calc(50% - 175px);
        left: calc(50% - 175px);
    }
}

:root {
    background-color: #323234 !important;
}

#tabbar {
    border-right: 1px solid #323234;
    box-shadow: none !important;
}

.tab {
    background-color: transparent;
    border-color: #292929;
    color: rgba(207, 207, 207, 0.75);
    box-shadow: none !important;
}

.tab:hover {
    background-color: #404040 !important;
    color: rgba(207, 207, 207, 1) !important;
}

.tab.discarded {
    background-color: #1d1d1d;
    color: #383838 !important;
}

.tab.discarded:hover {
    background-color: #292929 !important;
}

.tab.active {
    background-color: #45A1FF;
}

.tab.active:hover {
    background-color: #45A1FF !important;
}


/* Adjust style for tab that has sound playing. */
.tab.sound-playing .favicon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    background: #FFFFFF;
    animation: pulse 2s ease-out 0s infinite;
    z-index: -1;
    opacity: 0;
}

/* Adjust style for tab that is muted. */
.tab.muted {
    opacity: 0.5;
}

userChrome.css

/* Hide main tabs toolbar */
#TabsToolbar {
    visibility: collapse;
}

/* Sidebar min and max width removal */
#sidebar {
    max-width: none !important;
    min-width: 0px !important;
}

/* Hide splitter, when using Tree Style Tab. */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]+#sidebar-splitter {
    display: none !important;
}

/* Hide sidebar header, when using Tree Style Tab. */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
    visibility: collapse;
}

/* Shrink sidebar until hovered, when using Tree Style Tab. */
:root {
    --thin-tab-width: 55px;
    --wide-tab-width: 320px;
}

#sidebar-box:not([sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]) {
    min-width: var(--wide-tab-width) !important;
    max-width: none !important;
}

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
    position: relative !important;
    transition: all 300ms !important;
    min-width: var(--thin-tab-width) !important;
    max-width: var(--thin-tab-width) !important;
    opacity: 0.5 !important;
    transition: all 250ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
}

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover {
    transition: all 300ms !important;
    min-width: var(--wide-tab-width) !important;
    max-width: var(--wide-tab-width) !important;

    /* Negative right-margin to keep page from being pushed to the side. */
    margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;
    z-index: 1;
    opacity: 1 !important;
    transition: all 250ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
}

Make treestyle tabs collapsible

Inspired by My compact TreeStyleTab CSS and sidebar hover userChrome.css

Configuration steps are also from the above post

Configuration

• Get Tree Style Tab
• Once you have it, go to the Tree Style Tab settings.
  • ( Tools -> Add-ons -> Click 'Options' on the Tree Style Tab entry )
• Scroll down, leave the theme set to 'plain'
• Scroll all the way down to 'Advanced' and paste the 'TreeStyleTab custom CSS' code from 'treestyletab.css' in the 'Extra rules for sidebar contents' box. (You're safe to get rid of whatever's there by default.)
• Open a new tab, go to about:profiles
• Under 'Profile: default', there will be a box that says 'Root Directory'
• On the far right of that, there should be an 'Open Folder' button. Click it.
• Once the folder is open, create a new folder called chrome
• Open the chrome folder you just created
• Create userChrome.css in that folder
• Open userChrome.css and paste the 'userChrome.css' code from my main comment into that file.
• Save userChrome.css
• Restart Firefox

Results

Collapsed

You can also only show the favicon of the tabs by reducing the width of the sidebar if collapsed:

/* Shrink sidebar until hovered, when using Tree Style Tab. */
:root {
    --thin-tab-width: 30px;
    --wide-tab-width: 320px;
}

You also need to set the tab indention in the tree style tab settings from -1 to 0 (so no tab indention will happen anymore and all icons of the tabs will be shown).

Show tab bar

You can show the full tab bar by hover over the collapsed tree style tab bar

In order to make custom css work in newest versions of Firefox you need to

1. Load about:config in the Firefox address bar
2. Confirm that you will be careful
3. Search for toolkit.legacyUserProfileCustomizations.stylesheets
4. Set the value to True

How to show close tab button and add new tab button? Got it