TreeStyleTabs – Colored and Spaced Tab Groups

tst-colored-tab-groups.css

/* ---
    Config: moz-extension://61148767-1029-7e4d-810c-8847305901bd/options/options.html
      Docs: https://github.com/piroor/treestyletab/wiki/How-to-inspect-tree-of-tabs
  Revision: 2026.04.06.2
--- */


#tabbar {
  background: linear-gradient(to bottom, #342735 0%, #4B5670 50%);
}


/* ---
 Tab Styling
--- */
tab-item tab-item-substance {
  background: rgba(0,0,0, .5);
  border-color: rgba(255,255,255,.3);
}

/* Active tabs */
tab-item.active {
  background: rgba(0,0,0,.1)
}

tab-item.active[data-level="0"]:not([data-child-ids]) {
  background: rgba(255,255,255,.2);
}

tab-item.active tab-item-substance {
  background: transparent;
}

/* Hovered tabs */
tab-item tab-item-substance {
  transition: 100ms ease background;
}

tab-item:hover tab-item-substance {
  background: rgba(255,255,255,.2);
  transition: unset;
}


/* ---
 Fix upper and bottom borders between tabs
--- */
tab-item:not(.collapsed) {
  margin-top: -1px;
  margin-bottom: 0;
}


/* ---
 Add spacing around tab groups
--- */
tab-item:not([data-level="0"]) + tab-item[data-level="0"],
tab-item.subtree-collapsed + tab-item[data-level="0"],
tab-item[data-level="0"][data-child-ids] {
  margin: 12px 0 0;
}

/* Not if very first tab */
tab-item:first-child {
  margin-top: 0 !important;
}


/* ---
 Add tab group indent coloring
--- */
tab-item[data-level="0"]:before {
  content: "";
  width: 100vw;
  height: 60vh;
  background: #342735;
  position: absolute;
  top: -12px;
  left: 0;
  z-index: -1;
}

tab-item[data-level="0"]:after {
  content: "";
  width: 100vw;
  height: 60vh;
  background: linear-gradient(to bottom, #342735 0%, #4B5670 50%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

/* Needed to clean bg if last tab is not level 0 */
.after-tabs > .vbox:after {
  content: "";
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to bottom, #342735 0%, #4B5670 50%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

/* Color based on parent last id digit */
tab-item[data-level="0"][data-child-ids][id$="1"]:after { background: #c62828; }
tab-item[data-level="0"][data-child-ids][id$="2"]:after { background: #ef6c00; }
tab-item[data-level="0"][data-child-ids][id$="3"]:after { background: #f9a825; }
tab-item[data-level="0"][data-child-ids][id$="4"]:after { background: #2e7d32; }
tab-item[data-level="0"][data-child-ids][id$="5"]:after { background: #0097a7; }
tab-item[data-level="0"][data-child-ids][id$="6"]:after { background: #1565c0; }
tab-item[data-level="0"][data-child-ids][id$="7"]:after { background: #673ab7; }
tab-item[data-level="0"][data-child-ids][id$="8"]:after { background: #ec407a; }
tab-item[data-level="0"][data-child-ids][id$="9"]:after { background: #8d6e63; }
tab-item[data-level="0"][data-child-ids][id$="0"]:after { background: #78909c; }

Haha, thanks so much man. This is a beautiful setup for TST, well done :)

New revision fixes the stylesheet after the recent change in version 4.3.0 (2026.3.26) (details).

From what I can see, .tab no longer matches only tab-item but also tab-item-substance (was this a thing before?).
The fix is to update the selectors to target tab-item specifically.

Reminder to self, how to inspect the sidebar:
https://github.com/piroor/treestyletab/wiki/How-to-inspect-tree-of-tabs#how-to-inspect-the-sidebar