Firefox Tree Style Tab Customization

tree-style-tab.css

/* tab height */
:root {
  --tab-height: 22px !important;
  background-color: #000000;
}

.tab {
  height: var(--tab-height) !important;
  background: #4d4e51; 
  color:  #bbc2cf;
}

.tab.active {
  height: var(--tab-height) !important;
  background: #98be65;
  color: #1B2229;
}

.tab:hover {
  background: #193B99 !important;
  color:  #bbc2cf;
  opacity: 1;
}

/* scroll bar on right */
:root.left #tabbar {
  direction: ltr;
}

/* Tab fonts*/
* {
    font-family: "Hack";
    font-size: 12px;
}

/* Show title of unread tabs with red and italic font */
.tab.unread .label {
  color: #51afef !important;
  font-style: italic !important;
}

/* Add private browsing indicator per tab */
.tab.private-browsing .label:before {
  content: "🕶 ";
}

.closebox::after {
  content: "❌";

  color: #1B2229;
  line-height: 1.3;
  mask: none;
  text-align: center;
  width: 1.25em;
}

#tabbar   { background-color: #282c34; }

.tab.pinned                                     
{ margin-top: 1px; margin-bottom: 1px; background-color: #282c34;}