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


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


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

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

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

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

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

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


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


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

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


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

.tab[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[data-level="0"][data-child-ids][id$="1"]:after { background: #c62828; }
.tab[data-level="0"][data-child-ids][id$="2"]:after { background: #ef6c00; }
.tab[data-level="0"][data-child-ids][id$="3"]:after { background: #f9a825; }
.tab[data-level="0"][data-child-ids][id$="4"]:after { background: #2e7d32; }
.tab[data-level="0"][data-child-ids][id$="5"]:after { background: #0097a7; }
.tab[data-level="0"][data-child-ids][id$="6"]:after { background: #1565c0; }
.tab[data-level="0"][data-child-ids][id$="7"]:after { background: #673ab7; }
.tab[data-level="0"][data-child-ids][id$="8"]:after { background: #ec407a; }
.tab[data-level="0"][data-child-ids][id$="9"]:after { background: #8d6e63; }
.tab[data-level="0"][data-child-ids][id$="0"]:after { background: #78909c; }

Very nice. However, my tab groups don't collapse properly after using this css:

The group "collapses" but the colorized background for the group remains and does not collapse

Is there a fix for this?

@wrinkledeth nice catch! Looks like I just never collapse tabs huh 🙈
It should be fixed in the recent revision

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