userChrome.css for Firefox that reduces tab height and adds dynamic opacity

userChrome.css

/* userChrome.css */

/*
 * modifications:
 *  - reduces the height of the tab bar
 *  - sets tab bar opacity to 0
 *  - on hover or url bar focus, set opacity to 1
 */

/* variables */
:root {
  --tab-min-height: 25px !important;
  --tab-hidden-height: 5px;
  --tab-hidden-background: black;
}

/* just make sure the tab bar is on top (not needed maybe) */
#navigator-toolbox {
  position: relative;
  z-index: 2;
}

#navigator-toolbox:focus-within {
  z-index: 9001 !important;
}

/* tab bar */
#tabbrowser-tabs {
  overflow: hidden; /* hide tabs when collapsed */
  background-color: var(--tab-hidden-background) !important;
  transition: all 0.3s ease; /* smooth transition for height and opacity */
  height: var(--tab-hidden-height);
  opacity: 0;
}

#tabbrowser-tabs,
#tabbrowser-tabs > #tabbrowser-arrowscrollbox,
.tabbrowser-tabs .tabbrowser-tab {
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
}

/* tab content */
.tab-icon-image,
.tab-label-container {
  margin-top: -5px !important;
  vertical-align: middle !important;
}

/* hover and focus effects */
#tabbrowser-tabs:hover,
#urlbar:focus-within ~ #tabbrowser-tabs,
#navigator-toolbox:focus-within #tabbrowser-tabs {
  height: var(--tab-min-height) !important;
  opacity: 1 !important;
}

/* toolbar */
toolbar#tabstoolbar {
  height: var(--tab-hidden-height) !important;
  transition: all 0.3s ease; /* smooth transition for height */
}

toolbar#tabstoolbar:hover,
#urlbar:focus-within ~ toolbar#tabstoolbar {
  height: 20px !important;
}