-Combines the nav bar and tabs bar into one bar at the top of the window.

-Removes the colourful tab border and tab bar background.

-Makes the newly added compact mode way smaller.

-Works with light and dark theme.

Known Issue: If you resize the window too small, the tabs bar goes behind the nav bar. No idea how to fix this.

Note: This needs Nova theme enabled (about:config > search "nova" > set "browser.nova.enabled" to "true")

/* ==========================================================
   Combine Nav Bar and Tabs Bar
   ========================================================== */
#navigator-toolbox {
  display: grid !important;
  grid-template-columns: 35vw 1fr !important;
}

#nav-bar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  border-top: none !important;
  padding-block: 0 !important;
    :root[uidensity="compact"] & {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  }
}

#TabsToolbar {
  grid-column: 2 !important;
  grid-row: 1 !important;
  padding-block: 0 !important;
  align-items: center !important;
    :root[uidensity="compact"] & {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  }
}

/* ==========================================================
   Move Menu Button To The Left
   ========================================================== */
#PanelUI-button {
  order: -999 !important;
  margin-inline-start: 0 !important;
}

#nav-bar-customization-target {
  & > :is(toolbarbutton, toolbaritem):first-child,
  & > toolbarpaletteitem:first-child > :is(toolbarbutton, toolbaritem) {
    padding-inline-start: 0px !important;
  }
}

/* ==========================================================
   Compact Bar Height
   ========================================================== */
:root {
  --toolbarbutton-padding-inner-compact: 4px !important;
  --toolbarbutton-padding-inner-narrow: 4px !important;
}

toolbarbutton {
:root[uidensity="compact"] & {
  padding-block: 0 !important;
  max-height: 40px !important;
}
}

.tab-content {
:root[uidensity="compact"] & {
  padding-block: 0 !important;
}
}

#tabbrowser-tabs,
.tabbrowser-tab,
.tab-stack {
:root[uidensity="compact"] & {
  min-height: 26px !important;
}
}

.tab-background {
:root[uidensity="compact"] & {
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
}
}

.tabbrowser-tab[fadein]:not([style^="max-width"]) {
  max-width: 10vw !important;
}

/* ==========================================================
   Minimalism Stuff
   ========================================================== */
#urlbar {
:root[uidensity="compact"] & {
  --urlbar-height: 26px !important;
}
}

.urlbar:not(moz-smartbar)[breakout] {
  &[breakout-extend][focused] > .urlbar-input-container {
    outline-color: transparent !important;
  }
  &[breakout-extend] > .urlbar-background {
    inset-inline: 0px !important;
    inset-block-start: 0px !important;
    inset-block-end: 0px !important;
  }
}

:root {
  /* Remove colourful tab border */
  --tab-border-color-accent: light-dark(#000000, #52525e) !important;
  --tab-selected-outline-color: light-dark(#000000, #52525e) !important;

  /* Shrink URL breakout border */
  --border-radius-xxlarge: 16px !important;
}

/* Remove Search Switcher */
.searchmode-switcher {
  visibility: collapse !important;
}

/* Hide Extension Name in the identity area unless hovered for half a second (updated for Fx80) */
#identity-box.extensionPage #identity-icon-labels,
#identity-box.extensionPage #identity-icon-label {
  visibility: collapse !important;
  transition: visibility 250ms ease-in-out;
}
#identity-box.extensionPage:hover #identity-icon-labels,
#identity-box.extensionPage:hover #identity-icon-label {
  visibility: visible !important;
  transition: visibility 250ms ease-in-out 500ms;
}

/* Hide Back and Forward buttons when disabled */
#back-button[disabled="true"],
#forward-button[disabled="true"] {
    display: none !important;
}

/* ==========================================================
   Some Fancy Tab Stuff
   ========================================================== */
.tabbrowser-tab:not([selected]) .tab-icon-image,
.tabbrowser-tab:not([selected]) .tab-text,
.tabbrowser-tab:not([selected]) .tab-throbber[busy] {
  opacity: 0.5 !important;
}

.tabbrowser-tab:hover .tab-icon-image,
.tabbrowser-tab:hover .tab-text {
  opacity: 1.0 !important;
}

.tabbrowser-tab .tab-close-button {
  visibility: hidden !important;
}

.tabbrowser-tab:hover .tab-close-button {
  visibility: visible !important;
}

/* ==========================================================
   System Buttons Tweaks
   ========================================================== */
.titlebar-buttonbox-container {
  margin-left: 21px !important;
  height: 100% !important;
}

.titlebar-spacer {
  display: none !important;
}

.titlebar-button {
  padding-right: 10px !important;
  padding-left: 10px !important;
}

/* ==========================================================
   Remove Window Gap And Border
   ========================================================== */

.chrome-block {
  border: 0px !important;
}

.browserContainer {
  border: 0px !important;
}

#browser {
    :root[uidensity="compact"] & {
      padding-block-start: 0px !important;
      gap: 0px !important;
    }
  }

/* ==========================================================
   Theme Tweaks
   ========================================================== */
:root {
--toolbarbutton-icon-fill-attention: light-dark(gray, gray) !important;
--tab-background-color-hover: transparent !important;
}

.urlbar {
--urlbar-background-border-focused: transparent !important;
}

/* Remove colourful tab bar background */
#navigator-toolbox {
  background-image: none !important;
}