Skip to content

/ treestyletab

Code snippets for custom style rules

Jump to bottom
YUKI "Piro" Hiroshi edited this page Feb 3, 2020 · 126 revisions

(generated by Table of Contents Generator for GitHub Wiki)

For version 2.0 and later

TST's options page has a text field "Extra style rules for sidebar contents" to put custom CSS codes under the "Advanced" section.

Disable all animation

The "Disable animation effect" option just controls animation of opening/closing/collapsing/expanding tabs. You need to custom css to deactivate other all animations as:

@keyframes throbber {}
@keyframes tab-burst-animation {}
@keyframes tab-burst-animation-light {}
@keyframes blink {}

Change tab border

Make the dividing line less (or more) prominent.

/* Less visible tab dividers. 
   A black border with a very low alpha slightly darkens any color. */
tab-item {
  border: solid 1px #00000012; 
}

Leave as little space before the tab name as possible

/* As little space before the tab name as possible.
   The fold/unfold icon is not affected. */
tab-item:not(.pinned) {
  padding-left: 0px !important; /* !important is required when there are enough tabs to cause a scrollbar */
}

Change styling of pending (unloaded) tabs #1363 

/* Change styling of pending (unloaded) tabs */
tab-item.discarded {
  opacity: 0.75;
}

tab-item.discarded .label-content {
  color: red;
}

Only favicon:

/* Change styling of the favicon of pending (unloaded) tabs */
tab-item.discarded tab-favicon {
  opacity: 0.5 !important;
}

Show title of unread tabs in italic #1363 

tab-item.unread .label-content {
  font-style: italic;
}

Change tab height #236, #2389 

tab-item {
  --tab-size: 25px !important;
  height: var(--tab-size);
}

Highlight active tab

This makes the active tab very noticeable increasing its height and modifying the color and font

tab-item.active {
  height: 39px !important;
  background-color: #193B99;
}
tab-item.active .label-content {
  font-weight: bold;
  font-size: 14px;
}
tab-item.active tab-twisty,
tab-item.active .label-content,
tab-item.active tab-counter {
  color: #fff;
}

Color tabs from specific domain

This snippet changes the color for all tabs from a given domain (https://github.com in the example)

tab-item[data-current-uri^="https://github.com"] {
  background-color: hsl(300, 30%, 75%);
}

Hovered tab

This makes the hovered tab noticeable by modifying the color and font

tab-item:hover {
  background: #193B99 !important;
  opacity: 1;
}

Container colored background for tab #1879

This colors a tab based on its container's color.

.contextual-identity-marker {
  position: absolute !important;
  pointer-events: none;Full Auto-show/hide Theme
  z-index: 0;
  
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  
  width: unset !important;
  height: unset !important;  
    
  opacity: 0.5;
}

Container colored underline for tab #2346 

.contextual-identity-marker {
  top: auto !important;
  left: 0.5em !important;
  right: 0.5em !important;
  bottom: 0 !important;
  width: auto !important;
  max-width: none !important;
  height: calc(var(--favicon-size) / 10) !important;
}

Tab numbering and counting

All of the options in this section need the raw count of tabs available. This is done using CSS counters:

#tabbar {
  counter-reset: vtabs atabs tabs;
  /* vtabs tracks visible tabs, atabs tracks active tabs, tabs tracks all tabs */
}
tab-item:not(.collapsed):not(.discarded) {
  counter-increment: vtabs atabs tabs;
}
tab-item:not(.collapsed) {
  counter-increment: vtabs tabs;
}
tab-item:not(.discarded) {
  counter-increment: atabs tabs;
}
tab-item {
  counter-increment: tabs;
}

Numbering of tabs #1601, #2220

Note: this requires the counting CSS block listed here.

This displays the number of each visible tab along side each tab.

tab-item .extra-items-container {
  z-index: unset !important;
}
tab-item .extra-items-container::after {
  background: Highlight;
  color: HighlightText;
  content: counter(vtabs);
  font-size: x-small;
  right: 0.2em;
  padding: 0.2em;
  pointer-events: none;
  position: absolute;
  bottom: 0.2em;

  z-index: 1000;
}

Tab numbering on hovered tabs

Note: this requires the counting CSS block listed here and the label CSS block listed here.

To show tab numbering only on hovered tabs, use this CSS:

tab-item .extra-items-container::after {
  opacity: 0;
  transition: 0.2s;
}
tab-item:hover .extra-items-container::after {
  opacity: 1;
}

Tab counts in new tab button #1661

Both of the options in this section use the following block of CSS to position some text in the New Tab button. The text that is displayed is specified in each option below.

.newtab-button::after {
  content: var(--tab-count-text);
  pointer-events: none;
    
  position: absolute;
  left: 0.5em;

  /* TST 2.4.0 - Fix for Issue #1664 */
  background: transparent !important;
  mask: none !important;
}

Total tab count

Note: this requires the counting CSS block listed here and the label CSS block listed here.

To show only the total tab count, use this CSS:

.newtab-button {
  --tab-count-text: counter(tabs) " tabs";
}

Combined active and total tab count

Note: this requires the counting CSS block listed here and the label CSS block listed here.

To show both the active tab and total count, use this CSS:

.newtab-button {
  --tab-count-text: counter(atabs) "/" counter(tabs) " tabs";
}

Hide active and total tab count

Hide but still take up space:

tab-item tab-counter {
  opacity: 0;
}

Hide and don't take up any space:

tab-item tab-counter {
  display: none;
}

Hide twisty and collapse/expand tree by clicking on tab's icon #1743 

tab-item tab-twisty {
  margin-right: -1em;
  opacity: 0 !important;
  position: relative;
  z-index: 10000;
}

For TST 3.2.6 or older:

tab-item tab-twisty {
  margin-right: -1.5em;
  opacity: 0;
  position: relative;
  z-index: 10000;
}

Pre-Photon "no favicon" tab icon #1822 

/* TST 2.4.17 - Fix for #1822 - Fix for Photon themed new tab favicon */
#tabbar tab-item:not(.loading) tab-favicon .favicon-image[src^="moz-extension://"][src$="/resources/icons/globe-16.svg"] {
  display: none;
}
#tabbar tab-item:not(.loading) tab-favicon .favicon-image[src^="moz-extension://"][src$="/resources/icons/globe-16.svg"] ~ .favicon-default::before {
  display: inline-block !important;

  background: url("chrome://branding/content/icon32.png") no-repeat center / 100% !important;
  mask: none !important;
}
#tabbar tab-item:not(.loading)[data-current-uri="about:privatebrowsing"] tab-favicon .favicon-image[src^="moz-extension://"][src$="/resources/icons/globe-16.svg"] ~ .favicon-default::before {
  background: url("chrome://browser/skin/privatebrowsing/favicon.svg") no-repeat center / 100% !important;
}



/* TST 2.4.17 - Fix for #1822 - Fix for Photon themed default favicon */
tab-item:not(.group-tab):not([data-current-uri^="chrome:"]):not([data-current-uri^="about:addons"]):not([data-current-uri^="about:preferences"]) 
tab-favicon .favicon-default::before {
  background: url("/sidebar/styles/icons/moon.svg") no-repeat center / 100% !important;
  mask: none !important;
}

Hide the favicon on new tabs #1890 

/* Hide the favicon on new tabs. */
tab-item:not(.loading):-moz-any([data-current-uri="about:newtab"], [data-current-uri="about:home"], [data-current-uri="about:blank"]) tab-favicon {
  visibility: hidden;
}

New tab button

Put "new tab" button at the top of the tab bar #1376 

.newtab-button-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
}
#tabbar {
  top: 20px !important;
  bottom: 0 !important;
}
tab-item.pinned {
  margin-top: 20px;
}

Always show the "new tab" button at the bottom edge of the tab bar #1376 

#tabbar:not(.overflow) .after-tabs {
  display: none;
}
#tabbar:not(.overflow) ~ .after-tabs {
  display: block;
}

Always show the "new tab" button at next to the last tab #1376 

#tabbar.overflow .after-tabs {
  display: block;
}
#tabbar.overflow ~ .after-tabs {
  display: none;
}

Hide the "new tab" button at the bottom edge of the tab bar #1591 

.newtab-button-box {
  display: none;
}
#tabbar {
  bottom: 0 !important; /* Eliminate dead space on bottom */
}

Closebox

Put closebox left side, even if I choose "Left side" style

:root.left tab-item tab-twisty {
  order: 10000;
}
:root.left tab-item tab-closebox {
  order: -1;
}

Put closebox right side, even if I choose "Right side" style #1387 

:root.right tab-item tab-twisty {
  order: -1;
}
:root.right tab-item tab-closebox {
  order: 10000;
}

Hide tab close button always #1524 

tab-item tab-closebox {
  display: none;
}

Change close button style #1564 

tab-closebox::after {
  /*
    There are some possible characters for this purpose:
    https://en.wikipedia.org/wiki/X_mark
    - X: upper case X
      * Too narrow
    - ×: U+00D7 MULTIPLICATION SIGN (z notation Cartesian product)
      * Too small on macOSX
    - ╳: U+2573 BOX DRAWINGS LIGHT DIAGONAL CROSS
      * Too large on Ubuntu
    - ☓ : U+2613 SALTIRE (St Andrew's Cross)
      * Narrow a little on Windows and macOS
    - ✕: U+2715 MULTIPLICATION X
      * Too small on macOSX
    - ✖: U+2716 HEAVY MULTIPLICATION X
      * Too small on macOSX
    - ❌ : U+274C CROSS MARK
      * Colored on macOS
    - ❎ : U+274E NEGATIVE SQUARED CROSS MARK
      * Colored on macOS
      * Box around the mark is unnecessary
    - ⨉ : U+2A09 N-ARY TIMES OPERATOR
    - ⨯: U+2A2F VECTOR OR CROSS PRODUCT
      * Too small on macOSX
    - 🗙: U+1F5D9 CANCELLATION X
      * Unavailable on macOSX
    - 🗴 : U+1F5F4 BALLOT SCRIPT X
      * Unavailable on macOSX
    - 🞩: U+1F7A9 LIGHT SALTIRE
      * Unavailable on macOSX
    So ⨉ (U+2A09) looks good for me on Windows, macOS, and Linux (tested on Ubuntu).
  */
  content: "⨉";

  background: none;
  line-height: 1;
  mask: none;
  text-align: center;
  width: 1.25em;
}

Only show tab close button on hover #1448 

tab-item:not(:hover) tab-closebox {
  display: none;
}

Colored background for closebox on hover

before version 2.4.0

tab-closebox {
  border-radius: 10px; /* vary between 0 and 10 to make the background rounder */
  height: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
}
tab-closebox::before {
  height: 1.1em;
  font-size: 1.2em; /* personal preference, feel free to omit or change */
}
/* I find these work well on my monitor (slightly darker than the normal tab color) but YMMV */
tab-closebox:hover {
  background: #c8c8c8;
}
.active tab-closebox:hover {
  background: #96afc8;
}

version 2.4.0+

A background was added by default and the X was switched to an SVG.

tab-item tab-closebox::before {
  border-radius: 10px; /* vary between 0 and 10 to make the background rounder */
}
/* I find these work well on my monitor (slightly darker than the normal tab color) but YMMV */
tab-item tab-closebox:hover::before {
  background: #c8c8c8;
  opacity: 1; /* defaults to 0.1 */
}
tab-item.active tab-closebox:hover::before {
  background: #96afc8;
}

Scrollbar

Show scrollbar in the tab bar rightside #1362 

:root.left #tabbar {
  direction: ltr;
  overflow-x: hidden;
}

Show scrollbar with regular width

TST 3.0.15 or later

#tabbar { scrollbar-width: auto; }

Hide scrollbar #1507

TST 3.0.15 or later

#tabbar { scrollbar-width: none; }

Before TST 3.0.15

There was a setting in the Preferences of Tree Style Tab to hide or narrow the scrollbar.

To use it on macOS, you must set "Show scroll bars: Always" in System Preferences / General, or use this command in Terminal to set it only for Firefox: defaults write org.mozilla.firefox AppleShowScrollBars -string Always To remove the setting from Firefox, use: defaults delete org.mozilla.firefox AppleShowScrollBars

Auto hide scrollbar #1923

TST 3.2.5 and later

/* hide scrollbar until hovering over tabs */
#tabbar.overflow { scrollbar-width: none; } 
#tabbar.overflow:hover { scrollbar-width: thin; }

TST 3.0.5 and later

/* please update sizes for your environment. */
:root {
  --scrollbar-size: 16px;
}
:root.narrow-scrollbar {
  --scrollbar-size: 8px;
}

:root.left-scrollbar #tabbar.overflow {
  margin-left: calc(0px - var(--scrollbar-size));
  transition: margin-left ease 0.25s 0.4s;
}
:root.right-scrollbar #tabbar.overflow {
  margin-right: calc(0px - var(--scrollbar-size));
  transition: margin-right ease 0.25s 0.4s;
}

:root.left-scrollbar #tabbar.overflow:hover {
  margin-left: 0;
}
:root.right-scrollbar #tabbar.overflow:hover {
  margin-right: 0;
}

TST 3.0.4 and older

:root.left-scrollbar #tabbar.overflow {
  margin-left: calc(0px - var(--scrollbar-size));
  transition: margin-left ease 0.25s 0.4s;
}
:root.right-scrollbar #tabbar.overflow {
  margin-right: calc(0px - var(--scrollbar-size));
  transition: margin-right ease 0.25s 0.4s;
}

:root.left-scrollbar #tabbar.overflow:hover {
  margin-left: 0;
}
:root.right-scrollbar #tabbar.overflow:hover {
  margin-right: 0;
}

:root.left-scrollbar.narrow-scrollbar #tabbar.overflow:hover {
  margin-left: calc(var(--narrow-scrollbar-size) - var(--scrollbar-size));
}
:root.right-scrollbar.narrow-scrollbar #tabbar.overflow:hover {
  margin-right: calc(var(--narrow-scrollbar-size) - var(--scrollbar-size));
}

For userChrome.css

For Japanese people: userChrome.cssの説明の日本語訳

Note: According to: https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tutorial/Modifying_the_Default_Skin

This documentation has not been updated for Firefox Quantum. Support for the userChrome.css file and any of its elements described below are not guaranteed in future versions of Firefox. Using it may lead to hard-to-diagnose bugs or crashes. Use at your own risk!

Firefox's regular (horizontal) tab bar and sidebar's header are out of TST 2.x's control, because TST is now just a sidebar panel and there is no WebExtensions API to control them. However there are some workarounds based on custom stylesheet. Please note that there is no guarantee in future versions of Firefox.

(And please remember that @piroor, the original author of TST, does not use any of the customization described in this section, to avoid such risk.)

On Firefox 69 and later

You need to set toolkit.legacyUserProfileCustomizations.stylesheets to true with about:config, otherwise userChrome.css (and userContent.css) in your profile is simply ignored by Firefox.

Also note: In Firefox 72, if your userChrome.css file starts with @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");, you must remove that line otherwise the tab fix will not work. Removing the namespace is safe.

Hide horizontal tabs at the top of the window #1349, #1672, #2147 

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

You can view your tabs again without changing userChrome.css by enabling the "Drag Space" option in the Customize settings.

If you don't have title bar on mac OS you will also need to choose Customize from hamburger menu and insert Flexible Space in the top left corner so that close, minimize, etc. dot controls do not overlap other Firefox controls.

slightly better/worse option for hiding tabs, depending on what you want.

If you place buttons in the tab bar, before you execute this code, the bar and buttons remain, but the tabs vanish.

/* Hide horizontal tabs at the top of the window */
#tabbrowser-tabs {
  visibility: collapse !important;
}

Show title of current tab at the top of the window instead

In about:config, set browser.tabs.drawInTitlebar to false.

or: hamburger menu -> Customize, check "Title Bar" at the bottom.

Hide the "Tree Style Tab" header at the top of the sidebar

For only Tree Style Tab sidebar #1397 

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
  display: none;
}

For all sidebars #1373 

#sidebar-header {
  display: none;
}

Reduce minimum width of the sidebar #1373 

#sidebar {
  min-width: 100px !important;
}

Move sidebar to right side of browser

You don't need any custom style rules. Click the header's dropdown menu and choose "Move Sidebar to Right".

Don't display tab title pop-up tooltips when hovering over tab

(Note: this will also hide link title tooltips in web pages on older versions of Firefox, and/or if e10s multiprocess is disabled.)

#aHTMLTooltip {
  display: none !important
}

Auto-show/hide sidebar by mouseover (hover)

/*Collapse in default state and add transition*/
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
  overflow: hidden;
  min-width: 40px;
  max-width: 40px;
  transition: all 0.2s ease;
  border-right: 1px solid #0c0c0d;
  z-index: 2;
}

/*Expand to 260px on hover*/
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover,
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar {
  min-width: 260px !important;
  max-width: 260px !important;
  z-index: 1;
}

Full Auto-show/hide Theme

/* Hide main tabs toolbar */
#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
    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"]: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;
}

And the associated tab theme to put into TST Addon preferences "Extra style rules for sidebar contents":

/* 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; scrollbar-width: auto; }

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

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

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

tab-item:hover .closebox {
    visibility: initial;
}

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

/* ################################################ */
/* ##### COLOR THEME ############################## */
/* ################################################ */

:root {
    background-color: #383838;
}
#tabbar {
    border-right: 1px solid #1d1d1d;
    box-shadow: none !important;
}
tab-item {
    box-shadow: none !important;
}
tab-item:hover {
   filter: opacity(80%) drop-shadow(0px 0px 0px #3498DB);
}

/* Adjust style for tab that has sound playing. */
tab-item.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-item.muted {
    opacity: 0.5;
}

/* Better alignment of Favicons when collapsed */
tab-item[data-level][data-level="0"] {
  margin-left: 2% !important;
}
tab-item[data-level][data-level="1"] {
  margin-left: 4% !important;
}
tab-item[data-level][data-level="2"] {
  margin-left: 6% !important;
}
tab-item[data-level][data-level="3"] {
  margin-left: 8% !important;
}
tab-item[data-level][data-level="4"] {
  margin-left: 10% !important;
}
tab-item[data-level][data-level="5"] {
  margin-left: 12% !important;
}
tab-item[data-level][data-level="6"] {
  margin-left: 14% !important;
}
tab-item[data-level][data-level="6"] {
  margin-left: 16% !important;
}

Taken from reddit and tweaked

Auto-hide sidebar when fullscreen #1548 

#main-window[inFullscreen] #sidebar-box,
#main-window[inFullscreen] #sidebar-splitter {
  display: none !important;
  width: 0px !important;
}

Auto-hide sidebar in windows with only one tab (requires another extension) #1768

It is possible to only apply some code when a certain title preface is set by a WebExtension. The title preface can be set to a windows' tab count with an extension like Tab Count in Window Title and when that extension is installed the following code will hide the sidebar for windows with one tab:

#main-window[titlepreface^="[1] "] #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
  visibility: collapse !important;
}

For userContent.css

Change background color of dummy (group) tabs #1494 

@-moz-document regexp("moz-extension://.+/resources/group-tab.html.*") {
  :root {
    background: red !important;
  }
}
You can’t perform that action at this time.