Firefox userChrome.css for use with Tree Style Tab on Mac OS

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/ */

/* 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; }

good job, work well with left tree button

To find the profile folder enter about:support into your address bar.

Thanks for this, it's great :)
Do you know how to center vertical align the window controls? They're a bit too far to the top left.