Firefox - Tree Style Tab Customization

tree_extension_storage.js

{"requestingPermissions":null,"cachedExternalAddons":[],"notifiedFeaturesVersion":3,"style":"plain-dark","scrollbarMode":3,"userStyleRules":"/* Show title of unread tabs with red and italic font */\n/*\n.tab.unread .label {\n  color: red !important;\n  font-style: italic !important;\n}\n*/\n\n/* Add private browsing indicator per tab */\n/*\n.tab.private-browsing .label:before {\n  content: \"🕶\";\n}\n*/\n/* Show title of unread tabs with red and italic font */\n\n/*.tab.unread .label { \ncolor: red !important;  font-style: italic !important;}*/\n\n/* Add private browsing indicator per tab */\n/*.tab.private-browsing .label:before {content: \\\"🕶\\\";}*/\n\n/* Hide border on tab bar, force its state to 'scroll', adjust margin-left for width of scrollbar. */ \n\n#tabbar { border: 0; overflow-y: scroll !important; margin-left: -18px !important; }\n\n/* Hide .twisty and adjust margins so favicons have 7px on left. */\n\n.tab .twisty { visibility: hidden; /*   margin-left: -2px; */}\n\n/* Push tab labels slightly to the right so they're completely hidden in collapsed state */\n.tab .label {margin-left: 7px;}\n\n/* Hide close buttons on tabs. */\n.tab .closebox {visibility: collapse;}\n\n.tab:hover .closebox { visibility: initial;}\n\n/* Hide sound playing/muted button. */\n.sound-button::before {display: none !important;}\n\n/* ################################################ */\n/* ##### COLOR THEME ############################## */\n/* ################################################ */\n\n:root {background-color: #383838;}\n\n#tabbar {border-right: 1px solid #1d1d1d; box-shadow: none !important; }\n.tab {box-shadow: none !important;}\n\n.tab:hover { filter: opacity(80%) drop-shadow(0px 0px 0px #3498DB);}\n\n/* Adjust style for tab that has sound playing. */\n\n.tab.sound-playing .favicon::after { content: ''; position: absolute; top: 50%; left: 50%; \nborder-radius: 50%;\nbackground: #FFFFFF;\nanimation: pulse 2s ease-out 0s infinite; \nz-index: -1; \nopacity: 0;\n}\n/* Adjust style for tab that is muted. */\n.tab.muted {    \nopacity: 0.5;\n}\n","lastConfirmedToCloseTabs":1523943362740}

userChrome.css

/* Hide main tabs toolbar */
#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar {
  opacity: 0;
  pointer-events: none;
}
#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
    visibility: collapse !important;
}

/* 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: 30px;
    --wide-tab-width: 200px;
}
#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 100ms !important;*/
    min-width: var(--thin-tab-width) !important;
    max-width: var(--thin-tab-width) !important;
}

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
    position: relative !important;
    /*transition: all 100ms !important;*/
    min-width: var(--thin-tab-width) !important;
    max-width: var(--thin-tab-width) !important;
    z-index:1;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover {
    /*transition: all 200ms !important; */
    min-width: var(--wide-tab-width) !important;
    max-width: var(--wide-tab-width) !important;
    margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;
    z-index: 1;
}


#main-window[inFullscreen="true"] #TabsToolbar {
    display: none !important
}