side panel style for using with Tree Tabs

userChrome.css

#!/usr/bin/env bash {} /*
cd ~/.mozilla/firefox || cd ~/Library/Application\ Support/Firefox*
source <(grep Default= profiles.ini)

mkdir $Default/chrome
tee $Default/chrome/userChrome.css <<EOF

/*#region Firefox */

#browser,
#navigator-toolbox {
  /* uniform bg for toolbar, bookmarks (--toolbar-bgcolor) and titlebar (accent color) */
  --toolbar-bgcolor: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
}

#navigator-toolbox {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) !important;
  /* render traffic lights next to nav (instead of on top), assuming that title is turned off */
  grid-template: "traffic-lights nav" ". bookmark";
}

#nav-bar {
  grid-area: nav;
}

#titlebar {
  grid-area: traffic-lights;
}

.titlebar-spacer {
  display: none;
}

#TabsToolbar-customization-target {
  /* remove tabs */
  display: none;
}

#PersonalToolbar {
  grid-area: bookmark;
}

.urlbar-input-box {
  font-size: 16px;
}
/*
EOF