TreeStyleTab complete styling replacement css

treestyletab_style.css

:root {
  /* set in colors.css */
  --highlight: var(--color4);
  --background-alt: var(--color3);
  --foreground-alt: var(--color6);
  
  /* set in userChrome.css */
  --top-offset: var(--sidebar-top-offset);
  
  /* local */
  --tab-font-size: 13px;
  --dark-gold: #997B41;
  --darkest-gold: #3A2605;
  --cream-default-color: #FAF8F5;
  --cream-default-color-border: #F5F3F0;
  --gold-highlight: #EAC880;
  --gold-highlight-border: #E3C27C;
}

/* --- Tab counting counter --- */
/* vtabs:visible, atabs:active, tabs:all */

#tabbar {
  counter-reset: vtabs atabs tabs;
}

.tab:not(.collapsed):not(.discarded) {
  counter-increment: vtabs atabs tabs;
}

.tab:not(.collapsed) {
  counter-increment: vtabs tabs;
}

.tab:not(.discarded) {
  counter-increment: atabs tabs;
}

.tab {
  counter-increment: tabs;
}

/* --- Styles --- */

#tabbar {
  background-color: var(--background);
}

.tabs {
  background-color: var(--background) !important;
}

/* -- tab -- */

.tab {
  padding: 1px 0.5em 0px 0.35em;
  font-family: var(--font_chrome_standard);
  font-size: var(--tab-font-size);
  line-height: 1.2 !important;
  font-weight: 400;
  background-color: var(--background);
  margin-top: 1px;
  border-style: solid;
  border-width: 1px;
  border-color: var(--background);
  box-shadow: -1px 3px 4px -3px var(--dark-gold) !important;
  height: 30px;
}

.tab .twisty,
.tab .label,
.tab .counter {
  color: var(--foreground);
}

.tab .favicon {
  vertical-align: baseline !important;
  line-height: 1.2;
  margin-top: 1px;
  margin-right: 5px;
}

.tab .counter {
  font-weight: 300;
}

.tab .closebox {
  display: none;
}

.tab:not(.collapsed).audible button.sound-button {

}
.tab.audible button.sound-button::after {
  background-color: var(--darkest-gold) !important;
  right: unset !important;
}
.tab.audible button.sound-button:hover::after {
  right: unset !important;

}
.tab.faviconized .sound-button::before, .sound-button::after {
  right: unset !important;
  fill: red !important;
  background-color: red !important;
}
.tab.audible button.sound-button:hover::after {
  background-color: orange !important;
}
.tab:not(.collapsed) .sound-button:hover {
  fill: red !important;
}
.tab:not(.collapsed) .sound-button:active {
  fill: red !important;
}
.tab:not(.collapsed) .sound-button:focus {
  fill: red !important;
}

/* container marker */
:root.left .tab:not(.faviconized) .contextual-identity-marker {
  right: unset;
  width: .4em;
}

/* - unread tab - */

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

/* - hovered tab - */

.tab:hover .twisty,
.tab:hover .label,
.tab:hover .counter {
  color: var(--highlight) !important;
}

.tab:hover .closebox {
  display: block;
}
.tab:hover .closebox::after, .sound-button::after {
  background-color: var(--highlight) !important;
  margin-top: 1px;
}

/* - pinned tab - */

.tab.pinned {
  margin-bottom: 12px;
  filter: invert(7%) brightness(110%) sepia(5%);
}

.tab.pinned .favicon {
  margin-left: 1px;
  margin-right: 5px;
}

.tab.pinned .label {
  font-weight: 600;
}

.tab.pinned .twisty {
  display: none;
}

.tab:not(.pinned) {
  /* As little space before the tab name as possible.
  The fold/unfold icon is not affected. */
  padding-left: 0;
}


/* - selected tab - */

.tab.active {
  background-color: var(--gold-highlight);
  filter: drop-shadow(.1em .01em .01em var(--gold-highlight-border)) !important;
  border-color: var(--gold-highlight-border);
  font-size: var(--tab-font-size);
  z-index: 9;
}

.tab.active .twisty,
.tab.active .label,
.tab.active .counter {
  color: var(--darkest-gold);
}

.tab.active .label {
  margin-top: 0px;
}


/* --- new tab button --- */

.newtab-button {
  border-width: 1px 0 0 0;
  border: 1px 0 0 0;
  border-color: var(--background) !important;
  box-shadow: inset 0px 5px 5px -7px var(--dark-gold) !important;
  background-color: var(--background) !important;
  color: var(--foreground);
  height: 2em;
  --tab-count-text: counter(atabs) " (" counter(tabs) ")";
}

/* -- tab counts -- */

.newtab-button::after {
  content: var(--tab-count-text);
  pointer-events: none;
  position: absolute;
  right: 0.4em;
  top: 0.5em;
  font-family: var(--font_chrome_basic);
  font-size: 16px;
  font-weight: 500;
  /* TST 2.4.0 - Fix for Issue #1664 */
  mask: none !important;
}

/* -- plus sign -- */

.newtab-button::before {
  background-color: var(--background) !important;
  height: 2em;
  line-height: 1.2;
}

.newtab-button:hover::before {
  background-color: var(--highlight) !important;
}

/* - tab-action dropdown - */

.after-tabs .newtab-button-box .newtab-action-selector-anchor {
  display: none;
}
.after-tabs .newtab-button-box .newtab-action-selector-anchor:hover {
  display: none;
}

/* - new tab container dropdown - */

.after-tabs .newtab-button-box .contextual-identities-selector-anchor {
  color: var(--foreground) !important;
  border: none;
}
.after-tabs .newtab-button-box .contextual-identities-selector-anchor:hover {
  color: var(--highlight) !important;
}

/* -- move to left side -- */
:root:not(.contextual-identity-selectable) .after-tabs .newtab-action-selector-anchor, .after-tabs .contextual-identities-selector-anchor {
  right: unset;
  left: 0.25em;
}

TreeStyleTab_style_notes.md

Prerequisite Settings for TreeStyleTab

• Complete styling replacement (Theme: No Decoration)

Colors

Currently referencing css output from Pywal

• Colors css can be imported in userContent.css.
• Currently using a gold accent for selected tab and shadows regardless of colorscheme, looks good on light and dark colorschemes

Fonts

custom font variable file (font currently used is Go)