userChrome.css

#sidebar-main {visibility: collapse !important;}

/* make theming work */
#navigator-toolbox {
  --toolbar-bgcolor: transparent;
}

/* make everything transparent when window is inactive */
:root #PersonalToolbar:-moz-window-inactive,
:root #nav-bar:-moz-window-inactive,
:root #toolbar-menubar:-moz-window-inactive,
:root #titlebar:-moz-window-inactive,
:root #urlbar:-moz-window-inactive{
  opacity:0.25 !important;
}

/* fix private browsing indicator icon in private browsing mode. */
.private-browsing-indicator-with-label > label {
  visibility: hidden !important;
}

.private-browsing-indicator-with-label {
  visibility: visible !important;
  z-index: 1 !important;
/*   margin-left: 0px !important; */
  margin-top: -4px !important;
  margin-right: -92px !important;
  transform: scale(0.9) !important;
/*   background: orange !important; */
}

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/window_control_placeholder_support.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Creates placeholders for window controls */
/* This is a supporting file used by other stylesheets */

/* This stylesheet is pretty much unnecessary if window titlebar is enabled */

/* This file should preferably be imported before other stylesheets */

/* Defaults for window controls on RIGHT side of the window */
/* Modify these values to match your preferences */
: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-pre: 30px; /* left side*/
  --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){
  :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;
  }
}
@media (-moz-platform: macos){
  :root:is([tabsintitlebar],[sizemode="fullscreen"]) {
    --uc-window-control-width: 72px;
  }
}

.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 transparent;
  border-inline-style: solid !important;
/*   border-right-width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-post,0px)); */
  border-right-width: calc( var(--uc-window-control-width,0px)/3 + var(--uc-window-drag-space-post,0px));
  margin-right: var(--uc-window-control-width) !important;
  background-clip: border-box !important;
  z-index:100 !important;
/*   background: orange !important; */
}

/* Rules for window controls on left layout */
@media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"),
       (-moz-gtk-csd-reversed-placement),
       (-moz-platform: macos){
  :root[tabsintitlebar="true"] #nav-bar{
    border-inline-width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-post,0px)) var(--uc-window-drag-space-pre,0px)
  }
  :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child,
  :root[sizemode="fullscreen"] #window-controls{ right: unset }
}
@media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"){
  .titlebar-buttonbox-container{
    order: -1 !important;
  }
  .titlebar-buttonbox{
    flex-direction: row-reverse;
  }
}

/* This pref can be used to force window controls on left even if that is not normal behavior on your OS */
@supports -moz-bool-pref("userchrome.force-window-controls-on-left.enabled"){
  :root[tabsintitlebar="true"] #nav-bar{
    border-inline-width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-post,0px)) var(--uc-window-drag-space-pre,0px)
  }
  :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child,
  :root[sizemode="fullscreen"] #window-controls{ right: unset; }
  .titlebar-buttonbox-container{
    order: -1 !important;
  }
  .titlebar-buttonbox{
    flex-direction: row-reverse;
  }
}

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/toolbars_below_content.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Moves tabs toolbar, bookmarks toolbar and main toolbar to the bottom of the window, and makes tabs be the bottom-most toolbar */

/* By default, menubar will stay on top with two options to select it's behavior - see below */

@-moz-document url(chrome://browser/content/browser.xhtml){
  
/*   #titlebar { -moz-appearance: none !important; } */

  #navigator-toolbox > div{ display: contents }
  .global-notificationbox,
  #mainPopupSet,
  #browser,
  #customization-container,
  #tab-notification-deck{
    order: -1 !important;
  }

  /* Remove the next row if you want tabs to be the top-most row */
  #titlebar{
    order: -2 !important;
  } 

  #toolbar-menubar{
    position: fixed;
    display: flex;
    width: 100vw;
    top: 0px;
    -moz-window-dragging: drag;
    order: 1 !important;
  }
  /* Remove bottom border that won't do anything useful when at bottom of the window */
  #navigator-toolbox{ border-bottom: none !important; }

  #toolbar-menubar > spacer{ flex-grow: 1 }

  #urlbar[breakout][breakout-extend]{
    display: flex !important;
    flex-direction: column-reverse !important;
    bottom: 0px !important; /* Change to 3-5 px if using compact_urlbar_megabar.css depending on toolbar density */
    top: auto !important;
  }

  .urlbarView-body-inner{ border-top-style: none !important; }

  /* Yeah, removes window controls. Likely not wanted on bottom row  */
/*   #TabsToolbar > .titlebar-buttonbox-container{ display: none } */
  #toolbar-menubar > .titlebar-buttonbox-container{ order: -5 }

  /* Fix panels sizing */
  .panel-viewstack{ max-height: unset !important; }

  /* Fullscreen mode support */
  #navigator-toolbox[inFullscreen]{ margin-top: 0 !important }
  #navigator-toolbox[inFullscreen][style*="margin-top"]{ visibility: collapse }
  #fullscr-toggler{ bottom: 0; top: unset !important; }
  
  /* These three rules exist for compatibility with autohide_toolbox.css */
  #navigator-toolbox{ bottom: 0px; transform-origin: bottom }
  #main-window > body > box{ margin-top: 0 !important; }
  #toolbar-menubar{ z-index: 1; background-color: var(--lwt-accent-color,black); }
  
  :root[BookmarksToolbarOverlapsBrowser] #navigator-toolbox{
    margin-block: calc(-1 * var(--bookmarks-toolbar-height)) 0 !important;
  }
  :root[BookmarksToolbarOverlapsBrowser] .newTabBrowserPanel{
    padding-block: 0 var(--bookmarks-toolbar-height) !important;
  }
  
  /**************
  Menubar options - By default, menubar is overlayed on top of web-content
  ***************/

 /* Uncomment the following if you want static menubar on top of the window (make menubar enabled)
  * Use when menubar is enabled to always show it */
  
  /*
  #browser,#customization-container{ padding-top: var(--uc-menubar-spacer,28px) }
  */
  
  /* OR, uncomment the following if you want menubar to appear below content, above tabs toolbar */

  /* add padding to left side of menu bar itmes to align with bookmarks and nav bar */
  #toolbar-menubar #menubar-items { padding-left: 10px !important; padding-top:10px !important; padding-bottom:10px !important; }
  #toolbar-menubar{ background: transparent !important; position: static; display: flex; margin-top: 0px !important; }
 

  /* set to "column-reverse" (without quotes) if you want tabs above menubar with the above option */
  #titlebar{ flex-direction: column-reverse }
}

/* ================= START MODIFICATIONS HERE ================= */

.titlebar-buttonbox{
  z-index: 10000 !important;
}

/* hide everything BUT the window controls on tab bar */
#TabsToolbar tab,
#TabsToolbar-customization-target,
#firefox-view-button,
.tabs-alltabs-button {
    visibility: hidden !important;
    background:transparent !important;
}
/* ----------------------------------------------------------- */

#TabsToolbar .titlebar-buttonbox-container {
/*   background: purple !important; */
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

/* prep for window controls + move nav-bar into now empty tab bar */
#nav-bar {
  margin-top: -44px !important;
/*   margin-left: 84px !important; */
/*  margin-bottom:-44px !important;*/
/*   margin-right: 144px !important; */
/*   background: purple !important; */
}

#PersonalToolbar {
  background: transparent !important;
  order: -1;
}
/* ----------------------------------------------------------- */

/* fix issue with bottom of window getting cut off when going into new tab */
:root[BookmarksToolbarOverlapsBrowser] .newTabBrowserPanel {
/*	margin-top:-28px !important;*/
/*   background: orange !important; */
	
}

:root[BookmarksToolbarOverlapsBrowser] #sidebar-box {
	margin-top:-28px !important; 
/*   background:orange !important; */
}

/* ----------------------------------------------------------- */

/* align window controls on tab bar and menu bar */

/* ============================================================ */

/* ======= =sidebar hover hack =======*/
/* hide sidebar header so vertical tabs look native */
#sidebar-header{ display: none }
/* ======================================================================= */

#sidebar-box{
  --uc-sidebar-width: 35px;
  --uc-sidebar-hover-width: 210px;
  --uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */
  --uc-autohide-transition-duration: 115ms;
  --uc-autohide-transition-type: linear;
  position: relative;
  min-width: var(--uc-sidebar-width) !important;
  width: var(--uc-sidebar-width) !important;
  max-width: var(--uc-sidebar-width) !important;
  z-index: 3 !important;
}

#sidebar-box[positionend]{ direction: rtl }
#sidebar-box[positionend] > *{ direction: ltr }

#sidebar-box[positionend]:-moz-locale-dir(rtl){ direction: ltr }
#sidebar-box[positionend]:-moz-locale-dir(rtl) > *{ direction: rtl }

#main-window[sizemode="fullscreen"] #sidebar-box{ --uc-sidebar-width: 1px; }

#sidebar-splitter{ display: none }

#sidebar-header{
  overflow: hidden;
  color: var(--chrome-color, inherit) !important;
  padding-inline: 0 !important;
}

#sidebar-header::before,
#sidebar-header::after{
  content: "";
  display: flex;
  padding-left: 8px;
}

#sidebar-header,
#sidebar{
  transition: min-width var(--uc-autohide-transition-duration) var(--uc-autohide-transition-type) var(--uc-autohide-sidebar-delay) !important;
  min-width: var(--uc-sidebar-width) !important;
  will-change: min-width;
}
#sidebar-box:hover > #sidebar-header,
#sidebar-box:hover > #sidebar{
  min-width: var(--uc-sidebar-hover-width) !important;
  transition-delay: 0ms !important;
}

.sidebar-panel{
  background-color: transparent !important;
  color: var(--newtab-text-primary-color) !important;
}

.sidebar-panel #search-box{
  -moz-appearance: none !important;
  background-color: rgba(249,249,250,0.1) !important; 
  color: inherit !important;
}

/* Add sidebar divider and give it background */

#sidebar,
#sidebar-header{
  background-color: inherit !important;
/*   border-inline: 1px solid rgb(80,80,80); */
  border-inline-width: 0px 1px;
}

#sidebar-box:not([positionend]) > :-moz-locale-dir(rtl),
#sidebar-box[positionend] > *{
  border-inline-width: 1px 0px;
}

/* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */

#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel{
  inset-inline: auto 0px !important;
}
#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel-label{
  margin-inline: 0px !important;
  border-left-style: solid !important; 
}

/* ======= =sidebar hover hack =======*/