FirefoxSidebar/firefox/treestyletabs.css

/* 
	Title: Edge-Like (Better) Tree Style Tabs
	Description: This is a recreation (and better) version of my pseudo-popular Vivaldi vertical tab integration, for tree style tabs in firefox. This is probably the best Tree Style Tabs interface out there.
	Author: @Drannex42 (https://github.com/drannex42/linux-utils - https://macleodsawyer.com)
	Notes: This works best with my custom userChrome.css file in the /firefox/ folder - Lots of very cool features built in.
  	Version: 12021.06.09 :: Fixed the new tab button after the latest TST bugged the layout.
	
*/

/* Hide .twisty and adjust margins so favicons have 7px on left. */
.tab .twisty {
	visibility: hidden;
	margin-left: -8px;
  display: none;
}

/* Push tab labels slightly to the right so they're completely hidden in collapsed state */
.tab .label {
	font-size: 13px;
  	padding-left: 7.5px;
}

.tab:not(:hover) > .closebox {
  display: none;
}

tab-item:hover {
  background:    var(--in-content-box-background-hover) !important;
  opacity: 1;
}

.closebox:hover {
  font-weight: 900;
}

.tab, .tabs, body, #background {
   /* #F5F6F7; */
  background: transparent;
}


.favicon {
  --favicon-size: 17px !important;
  margin: 0;
  padding: 0 !important;
  --svg-small-icon-size: var(--favicon-size);
  /*! text-align: center; */
  margin-left: .5px;
  display: inline;
  vertical-align: middle;
}
tab-item {
  border: 1px solid transparent !important;
  height: auto !important;
  position: relative !important;
  font-size: 13px;
  background: none !important;
  box-shadow: none !important;
  border-radius: 5px;
  padding: 5px !important;
  margin: 7.5px 10px !Important;
  transition: 0 !Important;
  text-align: left !important;
  transition: width 0.1s !Important;
}

#tabbar-container{
  /*! width: 50px; */
  /*! margin: 2px; */
  transition: none;
}


tab-item:not(.faviconized) .contextual-identity-marker {
  --contextual-identity-marker-margin: min(calc((var(--tab-current-size) - var(--favicon-size)) / 2), calc(var(--tab-current-size) * 0));
  left: -11px !important;
  --contextual-identity-marker-width: 3.5px;
  z-index: 9999;
}

#all-tabs {
}

:root.left #tabbar {
  box-shadow: none !important;
  border: none !important;
  margin-top: -5px !important;
}


#tabbar tab-item {
  text-align: center;
  /*! width: 100%; */
  overflow: hidden !Important;
}
tab-item:not(:hover) {
}
tab-item .label, tab-item .highlighter, tab-item .contextual-identity-marker, tab-item .extra-items-container, tab-item .counter {
  /*! display: none; */
  /*! margin: 0px !Important; */
}
tab-item.active {
  background-color: var(--in-content-box-background) !important;
  box-shadow: 0px 5px 10px var(--in-content-box-background-active) !important;
}

tab-item:not(.pinned).collapsed.collapsed-completely {
    visibility: collapse;
    display: none !important;
}

:root .tab .highlighter::before {
    display: none;
}

.after-tabs button {
  border: none;
  box-shadow: none;
  padding: 5px;
  margin: 11px;
  text-align: left;
  background: none;
}

.after-tabs button:hover {
    background: var(--in-content-box-background-hover) !important;
    opacity: 1;
    border-radius: 5px;
}

  #tabbar [data-level] {
}

#tabbar [data-level="1"] {
    margin-left: 20px !important;
}

#tabbar [data-level="2"] {
    margin-left: 30px !important;
}

#tabbar [data-level="3"] {
    margin-left: 40px !important;
}

#tabbar [data-level="4"] {
    margin-left: 50px !important;
}

#tabbar [data-level="5"] {
    margin-left: 60px !important;
}

#tabbar [data-level="6"] {
    margin-left: 70px !important;
}

#tabbar [data-level="7"] {
    margin-left: 80px !important;
}

#tabbar [data-level="8"] {
    margin-left: 90px !important;
}

#tabbar::before {
  content: " ";
  height: 24px;
  width: 100%;
  background:   url('data:image/png;base64,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
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: 16px;
  margin-bottom: 3px;
  text-align: right;
  margin-right: -12.5px !important;
  opacity: 0.65;
  width: 100%;
  display: none;
}



.newtab-button {
  /*! text-align: left; */
  /*! margin: 8px !important; */
}

.newtab-button::after {
  content: "New Tab";
  font-size: 13px;
  padding-left: 12px;
  margin-top: -2px;
  position: absolute;
  opacity: 0.85;
  display: none;
}

.after-tabs {
  border-top: 1px solid var(--in-content-border-color);
  margin-top: 6px;
}

#tabbar-container .newtab-button::after {
  display: inline-block;
}


#tabbar-container {
  background: var(--theme-colors-toolbar);
}

.newtab-button::before {
    padding-left: 1.5px;
}


tab-item.pinned {
  --pinned-position-top: 0px !important;
  --pinned-position-bottom: none !Important;
  top: auto !Important;
  bottom: auto !Important;
  margin: none !Important;
  left: initial !important;
  right: initial !Important;
}


@media screen and (max-width: 51px) {
  tab-item {
    max-width: 30px !important;
  }
  

  #tabbar [data-level] {
      margin-left: auto !important;
  }
  
  #tabbar {
    max-width: 100%;
  }
  
 .tab > .closebox {
  display: none;
}
  
  #tabbar-container .newtab-button::after {
  display: none;
}
  
}