Better userChrome CSS for hiding tab strip

[pgaskin]

I would put this in the wiki, but I don't have permission to edit it. I last updated these for FF v134.

I've written some custom styles from scratch for use with sidebery.

The main advantage of these styles is that they only apply while sidebery is visible, and don't require any other special configuration.

Hide the header and make the splitter not as obnoxious:

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] {
  #sidebar-header {
    display: none !important;
  }
  + #sidebar-splitter {
    width: 1px !important;
  }
}

Hide the tab strip:

#main-window:has(#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([hidden])) #TabsToolbar {
  display: none !important;
}

As a little extra, the following styles make the native horizontal tab bar more compact and usable:

/* slim tabs */
:root {
  --tab-min-height: 24px !important;
}
#TabsToolbar {
  height: var(--tab-min-height) !important;
}
.titlebar-spacer[type="pre-tabs"] {
  display: none !important;
}

/* remove tab margins */
.tab-background[selected="true"] {
  background: var(--toolbar-bgcolor) !important;
}
.tab-background {
  border-radius: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.tab-content {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.tab-stack {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.tabbrowser-tab {
  padding-inline: 0 !important;
}

/* add a thin tab divider line */
.tab-content {
  border-right: .5px solid rgba(255,255,255,.05);
}

/* container tab context line fixes and visibility improvements */
.tabbrowser-tab .tab-context-line {
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
  height: 3px !important;
  opacity: 0.2;
}
.tabbrowser-tab[selected] .tab-context-line {
  opacity: 0.4;
}

/* hide tab close button for unhighlighted tabs unless hovering */
.tabbrowser-tab:not([visuallyselected="true"]):not(:hover) .tab-close-button {
  display: none !important;
}

/* click through sound icon for pinned tabs */
.tab-icon-overlay[pinned="true"][soundplaying="true"] {
  pointer-events: none !important;
}

[maanemann]

Thanks for this input! My own styling always hid the tab bar, very nice to have it shown when sidebery isn't