Skip to content

Instantly share code, notes, and snippets.

@eizedev
Created June 11, 2021 10:20
Show Gist options
  • Save eizedev/f0a65275859b16e2649656d2e283dc81 to your computer and use it in GitHub Desktop.
Save eizedev/f0a65275859b16e2649656d2e283dc81 to your computer and use it in GitHub Desktop.
Firefox Tree Style Tab CSS - Collapsible
/* 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;
}
/* 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);
}
@eizedev
Copy link
Author

eizedev commented Jun 11, 2021

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).

image

Show tab bar

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

image

@mbledkowski
Copy link

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

@nikhilCad
Copy link

nikhilCad commented Sep 6, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment