treestyletab.css

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

/********************************************************************/

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

/*********************************************************************/

/* 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 right above.

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

tab-item .extra-items-container.behind {
  z-index: unset !important;
}
tab-item .extra-items-container.behind::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 right above.

To show tab numbering only on hovered tabs, use this CSS: */
/*
tab-item .extra-items-container.behind::after {
  opacity: 0;
  transition: 0.2s;
}
tab-item:hover .extra-items-container.behind::after {
  opacity: 1;
}


/*********************************************************************/


.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;
}

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

/*

.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;
}







/*****/

:root {
  --colorA: #404040;
  --colorB: #5b5d5d;
  --colorC: #b4b4b4;
  --colorD: #5caaaa;
  --colorE: #313131;
  --colorF: #281f1a;
  --colorG: green;
  --tab-height: 22px;
  --font-size: 12px;
  background-color: var(--colorF);
}

:root.simulate-svg-context-fill .tab.active .closebox::after {
  background: black;
}

:root.simulate-svg-context-fill .tab:hover .closebox::after {
  background: black;
}

:root.simulate-svg-context-fill .tab.active .sound-button::after {
  background: black;
}

:root.simulate-svg-context-fill .tab:hover .sound-button::after {
  background: black;
}

.tab {
  background-color: var(--colorE);
  height: var(--tab-height);
  border-top: none;
  border-right: none;
  border-left: none;
  border-bottom: 1px solid var(--colorF);
}

.label {
  font-size: var(--font-size);
}

.tab .label {
  color: #c1c1c1;
}

.tab.active .label {
  color: #afafaf;
}

.tab .counter {
  color: var(--colorD);
}

.tab.active .twisty
{
  color: var(--colorG);
}

.tab.active {
  color: black;
  background-color: var(--colorA);
}

.tab.active:hover {
  background-color: var(--colorA);
}

.tab:hover .label {
  color: black;
}

.tab:hover, .tab:not(.active):hover {
  color: black;
  background-color: var(--colorB);
}

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

.tab.discarded {
  color: var(--colorC);
  background-color: #111111;
  border-top: none;
  border-bottom: 1px solid black;
}

.tab.private-browsing .label:before {
  content: "🕶";
}
/****/
.tab {
  height: 27px;
}

.label {
  font-size: 13px;
}