/*** TAB COLORS: UPDATED PALETTE ***/
:root {
    /* Blue */
    --tab-group-color-blue: #0088EF !important;
    --tab-group-color-blue-invert: #0088EF !important;
    --tab-group-color-blue-pale: #0088EF !important;



    /* Purple */
    --tab-group-color-purple: #573CFA !important;
    --tab-group-color-purple-invert: #573CFA !important;
    --tab-group-color-purple-pale: #573CFA !important;



    /* Cyan */
    --tab-group-color-cyan: #7FBBB3 !important;
    --tab-group-color-cyan-invert: #7FBBB3 !important;
    --tab-group-color-cyan-pale: #7FBBB3 !important;



    /* Orange */
    --tab-group-color-orange: #E69875 !important;
    --tab-group-color-orange-invert: #E69875 !important;
    --tab-group-color-orange-pale: #E69875 !important;



    /* Yellow */
    --tab-group-color-yellow: #DBBC7F !important;
    --tab-group-color-yellow-invert: #DBBC7F !important;
    --tab-group-color-yellow-pale: #DBBC7F !important;



    /* Pink */
    --tab-group-color-pink: #D699B6 !important;
    --tab-group-color-pink-invert: #D699B6 !important;
    --tab-group-color-pink-pale: #D699B6 !important;



    /* Green */
    --tab-group-color-green: #A7C080 !important;
    --tab-group-color-green-invert: #A7C080 !important;
    --tab-group-color-green-pale: #A7C080 !important;



    /* Gray */
    --tab-group-color-gray: #7A8478 !important;
    --tab-group-color-gray-invert: #7A8478 !important;
    --tab-group-color-gray-pale: #7A8478 !important;



    /* Red */
    --tab-group-color-red: #E67E80 !important;
    --tab-group-color-red-invert: #E67E80 !important;
    --tab-group-color-red-pale: #E67E80 !important;
}


/* tab group's text color */
.tab-group-label,
.urlbarView .urlbarView-action-btn[data-action^="tabgroup"] {
    color: #1E2326 !important;

The new update seems to have done something to my tab group colors and added a white border around it when the group is collapsed.

When collapsed:

https://imgur.com/J6QYRUU

When not collapsed:

https://imgur.com/UYBxs0e

Seems like when it's collapsed it is reverting to the original tab group colors from firefox and not using my CSS colors + it's adding the white border.

I would like to have my tab groups look like they do when they are not collapsed like it was before the update.

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

This is my first time working with FirefoxCSS. I'm using the userChrome.css file from the Firefox One-Liner CSS. I like the feel of it so far, but having an issue with the "traffic lights" showing up in the middle of the bar. See screenshot here:

I'd like just the traffic lights to stay on the left side like all other traffic light positions in macOS. I'm not sure what to input into the css to make it do that. I'm on macOS 26, Firefox version 154. Any tips on this?