userChrome.css

/* To enable userChrome.css: Open `about:config` set `toolkit.legacyUserProfileCustomizations.stylesheets` to true */

/* Hide nav bar, source code form https://www.reddit.com/r/FirefoxCSS/comments/rcogwz/comment/hnzf5rg */
/* Updated code from https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/autohide_main_toolbar.css */

:root {
  --uc-navbar-transform: -40px;
  --uc-autohide-toolbar-delay: 300ms;
  --uc-autohide-toolbar-duration: 100ms;
}

#navigator-toolbox > div {
  display: contents;
}

#nav-bar:not([customizing]) {
  opacity: 0;
  transition:
    transform var(--uc-autohide-toolbar-duration) ease
      var(--uc-autohide-toolbar-delay),
    opacity var(--uc-autohide-toolbar-duration) ease
      var(--uc-autohide-toolbar-delay) !important;
  position: relative;
  z-index: 2;
}
#titlebar {
  position: relative;
  z-index: 3;
}

#navigator-toolbox,
#sidebar-box,
#sidebar-main,
#sidebar-splitter,
#tabbrowser-tabbox {
  z-index: auto !important;
}
/* Show when toolbox is focused, like when urlbar has received focus */
#navigator-toolbox:focus-within > .browser-toolbar {
  transform: translateY(0);
  opacity: 1;
  transition-duration: var(--uc-autohide-toolbar-duration),
    var(--uc-autohide-toolbar-duration) !important;
  transition-delay: 0s !important;
}
/* Show when toolbox is hovered */
#titlebar:hover ~ .browser-toolbar,
.browser-titlebar:hover ~ :is(#nav-bar, #PersonalToolbar),
#nav-bar:hover,
#nav-bar:hover + #PersonalToolbar {
  transform: translateY(0);
  opacity: 1;
  transition-duration: var(--uc-autohide-toolbar-duration),
    var(--uc-autohide-toolbar-duration) !important;
  transition-delay: 0s !important;
}
:root[sessionrestored] #urlbar[popover] {
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--uc-autohide-toolbar-duration) ease
      var(--uc-autohide-toolbar-delay),
    opacity var(--uc-autohide-toolbar-duration) ease
      var(--uc-autohide-toolbar-delay);
  transform: translateY(var(--uc-navbar-transform));
}
#nav-bar:is(:hover, :focus-within) #urlbar[popover],
#urlbar-container > #urlbar[popover]:is([focused], [open]) {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0ms;
  transform: translateY(0);
}
#urlbar-container > #urlbar[popover]:is([focused], [open]) {
  transition-duration: 100ms; /* Faster when focused */
}

/* Move up the content view */
:root[sessionrestored]:not([inFullscreen], [chromehidden~='toolbar'])
  > body
  > #browser {
  margin-top: var(--uc-navbar-transform);
}

/* Add number on tab, source code from https://gist.github.com/arthurattwell/19d868330a3c9f668a3f3a69230ac28c */
tabs {
  counter-reset: tab-counter;
}

tab:nth-child(1) .tab-label::before,
tab:nth-child(2) .tab-label::before,
tab:nth-child(3) .tab-label::before,
tab:nth-child(4) .tab-label::before,
tab:nth-child(5) .tab-label::before,
tab:nth-child(6) .tab-label::before,
tab:nth-child(7) .tab-label::before,
tab:nth-child(8) .tab-label::before {
  background-color: white;
  border-radius: 0.25em;
  border: 1px solid white;
  box-sizing: border-box;
  color: black;
  content: counter(tab-counter) '';
  counter-increment: tab-counter;
  display: block;
  float: left;
  font-size: 0.8em;
  font-weight: bold;
  height: 1.5em;
  line-height: 1;
  margin: 0 0.5em 0 0;
  padding: 0.1em 0.25em 0.25em 0.25em;
  position: relative;
  text-align: center;
  top: 0.35em;
  vertical-align: middle;
  width: 1.4em;
}