Tree Style Tabs CSS styling

treestyletabs.css

/*
# This Source Code Form is subject to the terms of the Mozilla Public
# License, v. 2.0. If a copy of the MPL was not distributed with this
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/

:root {
    --grey-10: #f9f9fa;
    --grey-40: #b1b1b3;
    --grey-90: #0c0c0d;

    --toolbar-non-lwt-bgcolor: var(--grey-10);
    --toolbar-non-lwt-textcolor: var(--grey-90);
    --toolbar-non-lwt-inverted-textcolor: white;
    --toolbar-non-lwt-border-color: var(--grey-40);
    
    --tab-like-surface: var(--browser-bg-base, var(--toolbar-non-lwt-bgcolor));
    --tab-surface-regular: var(--browser-bg-for-header-image, var(--tab-like-surface));
    --tab-text-regular: var(--browser-fg, var(--toolbar-non-lwt-textcolor));
    --tab-text-inverted: var(--browser-bg-lighter, var(--toolbar-non-lwt-inverted-textcolor));
    --tab-active-text: var(--browser-fg-active, var(--toolbar-non-lwt-textcolor));
    --tab-active-text-inverted: var(--browser-bg-more-lighter, var(--toolbar-non-lwt-inverted-textcolor));
    --tab-border: var(--browser-border, var(--browser-bg-more-darker, var(--toolbar-non-lwt-border-color)));
    --tab-dropmarker: var(--browser-fg, var(--toolbar-non-lwt-textcolor));
  }

:root.right,
  :root.right #background {
    background-position: right;
  }
  
  tab-item,
  .after-tabs button {
    background: transparent;
    color: var(--tab-text);
    text-shadow: var(--browser-textshadow-for-header-image, none);
  }
  
  tab-item.active,
  tab-item.bundled-active,
  tab-item:hover {
    background: var(--tab-surface);
  }
  
  tab-item * {
    color: var(--tab-text);
  }
  
  tab-item:not(.active):not(.bundled-active):hover,
  .after-tabs button:hover {
    --tab-surface: var(--tab-surface-hover);
  }
  
  tab-item.active,
  tab-item.bundled-active {
    --throbber-color: var(--throbber-color-active);
    --tab-text: var(--tab-active-text);
    --tab-text-inverted: var(--tab-active-text-inverted);
  }
  tab-item.active {
    --tab-surface: var(--tab-surface-active);
  }
  tab-item.active:hover,
  tab-item.bundled-active {
    --tab-surface: var(--tab-surface-active-hover);
  }
  tab-item.bundled-active:hover {
    --tab-surface: var(--tab-surface-hover);
  }
  
  tab-item:not(.active):not(.bundled-active):not(.highlighted) {
    --throbber-color: var(--browser-loading-indicator, ThreeDDarkShadow);
  }
  
  tab-item .burster {
    --throbber-color: var(--tab-loading-fill);
  }
  
  
  @media (prefers-color-scheme: dark) {
    :root:not([color-scheme="system-color"]) {
      --toolbar-non-lwt-bgcolor: #252526;
      --toolbar-non-lwt-textcolor: #efefef;
      --toolbar-non-lwt-inverted-textcolor: black;
      --toolbar-non-lwt-border-color: #4a4a4d;
  
      --tab-highlighted-highlight: white;
      --tab-dropmarker: var(--toolbar-non-lwt-textcolor);
  
      --tab-surface-hover: var(--browser-bg-hover-for-header-image, var(--browser-bg-less-lighter, #29363f /* #252526 + #041119 (switched R and B from #191104), (parseInt('252526', 16) + parseInt('041119', 16)).toString(16) */));
      --tab-surface-active: var(--browser-bg-active-for-header-image, var(--browser-bg-lighter, #314c5e /* #252526 + #0c2738 (switched R and B from #38270c), (parseInt('252526', 16) + parseInt('0c2738', 16)).toString(16) */));
      --tab-surface-active-hover: var(--browser-bg-active-for-header-image, var(--browser-bg-more-lighter, #293b4e /* #252526 + #041628 (switched R and B from #281600 + #00004), (parseInt('252526', 16) + parseInt('041628', 16)).toString(16) */));
    }
  
    :root:not([color-scheme="system-color"])
      tab-item:not(.active):not(.bundled-active):not(.highlighted) {
      --throbber-color: var(--browser-loading-indicator, #afafaf);
    }
  
    /* Firefox applies dark colors to scrollbars in its in-content UI, when a
       Dark theme is applied by the platform. On the other hand, dark colors
       aren't applied to scrollbars in the sidebar also by default. Thus we need
       to imitate dark scrollbar manually. See also:
       https://github.com/piroor/treestyletab/issues/2373 */
    #tabbar {
      scrollbar-color: var(--in-content-button-background-active-mixed) var(--in-content-box-background);
    }
  }

tab-item,
.after-tabs button {
  padding: 0.4em 0.25em;
}

.after-tabs button {
  padding: 0em;
}

:root.left tab-item:not(.pinned),
:root.left .after-tabs button {
  padding-right: 0.35em;
}

:root.right tab-item:not(.pinned),
:root.right .after-tabs button {
  padding-left: 0.35em;
}

/* macOS workaround */
:root.platform-mac #tabbar:dir(rtl).overflow tab-item:not(.pinned) {
  padding-left: var(--scrollbar-placeholder-size); /* it will be enough larger than the default padding */
}
:root.platform-mac #tabbar:dir(ltr).overflow tab-item:not(.pinned) {
  padding-right: var(--scrollbar-placeholder-size); /* it will be enough larger than the default padding */
}


tab-item tab-label {
  margin-left: 0.25em;
  padding: 0 0 0.25em 0;
}

tab-item tab-favicon {
  margin-bottom: 0.25em;
  margin-top: 0.25em;
}

tab-item {
  --tab-closebox-offset: calc((var(--tab-size) - 1em) / 2);
  --tab-closebox-negative-offset: calc((1em - var(--tab-size)) / 2);
}

/* expand closebox to fill full height of tab */
tab-item tab-closebox {
  margin-bottom: var(--tab-closebox-negative-offset);
  margin-top: var(--tab-closebox-negative-offset);
  padding: var(--tab-closebox-offset) 0.25em;
}

tab-item tab-closebox::before {
  border-radius: 10%;
  content: "";
  display: inline-block;
  height: calc(var(--svg-small-icon-size) + 0.2em);
  margin-left: -0.1em;
  margin-top: -0.1em;
  width: calc(var(--svg-small-icon-size) + 0.2em);
  position: absolute;
}

tab-item tab-closebox:hover::before {
  background: var(--tab-text);
  box-shadow: 0 0 0.1em rgba(255, 255, 255, 0.3);
  opacity: 0.1;
}

tab-item.active tab-closebox:hover::before {
  background: var(--tab-text);
}

tab-item tab-closebox::after {
  position: relative;
}


/* multiselection of tabs */

:root {
  --multiselected-color: Highlight;
}

.mutiple-highlighted > tab-item.highlighted::after {
  background: var(--multiselected-color);
  bottom: 0;
  content: " ";
  display: block;
  left: 0;
  opacity: var(--multiselected-color-opacity);
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
}


.after-tabs button {
  border: 0 none;
}

.mutiple-highlighted tab-item:not(.highlighted) {
  opacity: 0.5;
}

.highlighter::before {
  display: none !important;
}


#tabbar {
	background-color:#181818;

}
.tab:hover {
	background-color: #404040 !important;
	color: rgba(207,207,207,1) !important;
}
.tab.active {

	background: linear-gradient(to left, rgba(143,168,118,1.0), rgba(143,168,118,0.0) 80% );
}

.contextual-identity-marker {
  top: auto !important;
  left: 0em !important;
  right: 0em !important;
  bottom: 0 !important;
  width: auto !important;
  max-width: none !important;
  height: calc(var(--favicon-size) / 4) !important;
  mask-image: radial-gradient(rgba(0,0,0,1.0), rgba(0,0,0,0.0)70% );
}