treestyletab_matte_black_red.css

/**
 * TST v3.8.19
 *
 * Components: https://github.com/piroor/treestyletab/tree/trunk/webextensions/sidebar/components
 * Base CSS: https://github.com/piroor/treestyletab/blob/trunk/webextensions/sidebar/styles/base.css
*/

/* Note: select "No Decoration" under themes to apply these */

/* Root variables */
:root {
  /* Some of these are declared by TST and correspondingly overridden here */
  --tab-size: 32px;
  --tab-highlighter: red; /* Highlighter on the left of active tab */
  --tab-highlighter-size: 2px;
  --tab-bar-bg-color: #424242;
  --tab-active-bg-color: #242424;
  --tab-hover-bg-color: #444444;
  --tab-new-bg-color-inverted: #dadada;
  --tab-text-unread-color: #ff4444;
  --tab-text-default-color: white;
}

@media (prefers-color-scheme: light) {
  :root { --tab-button-light-mode-inversion: 1; }
}
  
@media (prefers-color-scheme: dark) {
  :root { --tab-button-light-mode-inversion: 0; }
}

/* Tab sidebar */
#tabbar {
  scrollbar-width: none; /* Hide scrollbar */
  background: var(--tab-bar-bg-color);
}

/* Tab design */
tab-item tab-item-substance {
  /* Overall tab box */
  background: black !important;
  opacity: 1;
  border: solid 1px #222222;
  border-bottom: none;
  height: var(--tab-size);
  padding-right: 7% !important;
}
tab-item tab-item-substance tab-label {
  /* Tab text */
  color: var(--tab-text-default-color);
  margin-bottom: 4px;
}
tab-item.active tab-item-substance {
  /* Active tab */
  background: var(--tab-active-bg-color) !important;
}
tab-item tab-item-substance:hover {
  /* Tab hover */
  background: var(--tab-hover-bg-color) !important;
}
tab-item.unread tab-item-substance tab-label {
  /* Unread tabs */
  color: var(--tab-text-unread-color) !important;
  font-style: italic;
}
tab-item tab-item-substance tab-twisty {
  /* Expand / collapse button */
  filter: invert(var(--tab-button-light-mode-inversion));
  margin-left: 1px;
}
tab-item tab-item-substance tab-favicon {
  /* Tab icon */
  margin-left: 1px;
  margin-right: 4px;
}
tab-item tab-item-substance tab-counter {
  /* Tab sub-tree counter */
  color: var(--tab-text-default-color);
  margin-bottom: 1%;
  margin-right: -3%;
}
tab-item tab-item-substance tab-closebox {
  /* Tab close button */
  filter: invert(var(--tab-button-light-mode-inversion));
  margin-left: 3%;
  margin-right: -3%;
}
tab-item:not(:hover) tab-item-substance tab-closebox {
  /* Only show close box on hover */
  display: none;
}
tab-item tab-item-substance tab-sound-button {
  /* Sound button */
  filter: invert(var(--tab-button-light-mode-inversion));
  margin-left: 4%;
  margin-right: -3%;
}

/* New tab section */
.newtab-button  {
  /* New tab button */
  background: var(--tab-new-bg-color-inverted);
  border: none;
  border-top: 1px solid white;
  filter: invert(1);
  --svg-small-icon-size: 12px; /* override PLUS icon size for new tab */
}
.newtab-action-selector-anchor {
  /* New tab dropdown */
  border: none;
  margin-top: -2px;
  filter: invert(var(--tab-button-light-mode-inversion));
}