For years, I’ve used a CSS trick to move my window controls (Minimize, Fullscreen, Close) from the Menu Bar into the lower toolbar, right beside my Overflow menu. (I’m on Windows 10, so these are the controls you see in the upper right window)

But suddenly, that doesn’t work. My window controls are back up in the Menu Bar. That’s unfortunate, because I usually hide my Menu Bar.

Can anyone review my code and tell me what needs to change? Thank you!

/* Move Window Control buttons to Nav Bar */

:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
  --uc-window-control-width: 138px; /* Space reserved for window controls (Win10) */
  /* Extra space reserved on both sides of the nav-bar to be able to drag the window */
  --uc-window-drag-space-post: 30px; /* right side*/
}

:root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) {
  --uc-window-drag-space-pre: 0px; /* Remove pre space */
}

@media  (-moz-platform: windows-win7),
        (-moz-platform: windows-win8),
        (-moz-os-version: windows-win7),
        (-moz-os-version: windows-win8){
  :root:is([tabsintitlebar], [sizemode="fullscreen"]) {
    --uc-window-control-width: 105px;
  }
}

@media (-moz-gtk-csd-available) {
  :root:is([tabsintitlebar],[sizemode="fullscreen"]) {
    --uc-window-control-width: 84px;
  }
}

.titlebar-buttonbox, #window-controls{ color: var(--toolbar-color) }
:root[sizemode="fullscreen"] .titlebar-buttonbox-container{ display: none }
:root[sizemode="fullscreen"] #navigator-toolbox { position: relative; }

:root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child,
:root[sizemode="fullscreen"] #window-controls{
  position: absolute;
  display: flex;
  top: 0;
  right:0;
  height: 40px;
}

:root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child,
:root[uidensity="compact"][sizemode="fullscreen"] #window-controls{ height: 32px }

#nav-bar{
  border-inline: var(--uc-window-drag-space-pre,0px) solid var(--toolbar-bgcolor);
  border-inline-style: solid !important;
  border-right-width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-post,0px));
}

:root[tabsintitlebar]{ --uc-toolbar-height: 40px; }
:root[tabsintitlebar][uidensity="compact"]{ --uc-toolbar-height: 32px }

#TabsToolbar{ visibility: collapse !important }

:root[sizemode="fullscreen"] #TabsToolbar > :is(#window-controls,.titlebar-buttonbox-container){
  visibility: visible !important;
  z-index: 2;
}

:root:not([inFullscreen]) #nav-bar{
  margin-top: calc(0px - var(--uc-toolbar-height,0px));
}

:root[tabsintitlebar] #toolbar-menubar[autohide="true"]{
  min-height: unset !important;
  height: var(--uc-toolbar-height,0px) !important;
  position: relative;
}

#toolbar-menubar[autohide="false"]{
  margin-bottom: var(--uc-toolbar-height,0px)
}

:root[tabsintitlebar] #toolbar-menubar[autohide="true"] #main-menubar{
  -moz-box-flex: 1;
  -moz-box-align: stretch;
  background-color: var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor);
  background-clip: padding-box;
  border-right: 30px solid transparent;
  border-image: linear-gradient(to left, transparent, var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor) 30px) 20 / 30px
}

#toolbar-menubar:not([inactive]){ z-index: 2 }
#toolbar-menubar[autohide="true"][inactive] > #menubar-items {
  opacity: 0;
  pointer-events: none;
  margin-left: var(--uc-window-drag-space-pre,0px)
}