Custom userChrome.css for use with Firefox + TST or Sidebery on macOS

userChrome.css

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* Adapted from https://www.reddit.com/r/FirefoxCSS/comments/ao3ydl/configuring_firefox_for_tree_style_tab_usage/ */
/* https://superuser.com/questions/1424478/can-i-hide-native-tabs-at-the-top-of-firefox */
/* https://github.com/Timvde/UserChrome-Tweaks/tree/master */

/* Go to about:config and change the value of toolkit.legacyUserProfileCustomizations.stylesheets to true. */
/* macOS: Place in `/Users/<username>/Library/Application Support/Firefox/Profiles/<random_characters>.default */
/* Alternative, /Users/<username>/Library/Application Support/Firefox/Profiles/<random_characters>.default-esr */

/* hide native tabs and sidebar header */
#TabsToolbar-customization-target {
  visibility: collapse;
}

#navigator-toolbox[inFullscreen="true"] #titlebar {
  visibility: collapse;
}

#sidebar-header {
  visibility: collapse;
}

/* realign elements */
#nav-bar {
  margin-top: calc(-1 * var(--tab-min-height));

  box-shadow: none !important;
}

#nav-bar[inFullscreen="true"] {
  margin-top: unset;
  margin-right: unset;
}

.titlebar-buttonbox-container {
  min-height: var(--tab-min-height);
}

/* recolor elements and enable window dragging */
#navigator-toolbox {
  background-color: var(--toolbar-bgcolor);
  background-image: var(--toolbar-bgimage);
  background-clip: padding-box;
  color: var(--toolbar-color);
  
  -moz-window-dragging: drag;
}


#TabsToolbar > .toolbar-items,
#TabsToolbar > .titlebar-spacer{ visibility: hidden }
#nav-bar{ margin-top: -32px; padding: 0px 15px 0px 75px !important; }