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);
}

as of firefox v133 this config seems to be broken. doenst change size when hovered

as of firefox v133 this config seems to be broken. doenst change size when hovered

seems to be caused by this line in userChrome.css

/* 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;

which is a shame because it was supposed the solve the main problem I decided to use this CSS for

found the fix

just change the z-index value on line 49 from 1 to 3 to make this work in v133

-   z-index: 1;
+   z-index: 3;

https://gist.github.com/olmstadfm/d6b4d37219e957d9cdcdb3ec88952c15?permalink_comment_id=5305568#gistcomment-5305568