mobile-config-firefox/chrome/tabs_below_content.css

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


/* IMPORTANT */
/*
Get window_control_placeholder_support.css
Window controls will be all wrong without it.
Additionally on Linux, you may need to get:
linux_gtk_window_control_patch.css
*/

/* Dummy variable to support versions 94-96, can be removed when 96 lands */
:root{ --lwt-frame: var(--lwt-accent-color) }

.titlebar-buttonbox-container{
  position: fixed;
  display: block;
  top:0;
  right:0;
  height: 40px;
  z-index: 3;
  visibility: visible !important;
}

:root[inFullscreen] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container{ display: none !important; }

:root[uidensity="compact"] .titlebar-buttonbox-container{ height: 32px }
.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }

/* Re-adjust window cotrols if menubar is permanently enabled  */
:root[tabsintitlebar="true"]:not([inFullscreen]) #toolbar-menubar[autohide="false"]{ transform: translateX(0px); }
:root[tabsintitlebar="true"]:not([inFullscreen]) #toolbar-menubar[autohide="false"] .titlebar-buttonbox-container{ height: 100%; }
:root[tabsintitlebar="true"]:not([inFullscreen]) #toolbar-menubar[autohide="false"] .titlebar-button{ padding: 2px 17px !important; }

@media (-moz-os-version: windows-win7),(-moz-os-version: windows-win10){
  #titlebar{ -moz-appearance: none !important; }
  /* Counteract -moz-appearance when maximized */
  :root[tabsintitlebar][sizemode="maximized"] #navigator-toolbox{ padding-top: 8px !important; }
  :root[sizemode="maximized"] #toolbar-menubar:not([autohide="false"]) .titlebar-buttonbox-container{ top: 8px }
}
/* Move tabs below content */
:root:not([inDOMFullscreen]) #browser-bottombox{ margin-bottom: calc(var(--tab-min-height) + 2 * var(--tab-block-margin,0px)) }
:root[inFullscreen]:not([inDOMFullscreen]) #browser-bottombox{ margin-bottom: 1px; }

#TabsToolbar{
  position: fixed;
  display: block;
  bottom: 0;
  width: 100vw;
  height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin,0px));
  --tabs-navbar-shadow-size: 0px;
}
#TabsToolbar:hover{ z-index: 1 }

#TabsToolbar{ background-color: var(--lwt-frame); }
#TabsToolbar-customization-target{ width: 100vw; }

.tab-background{ border-top-style: none !important; }

/* Hide stuff that doesn't make sense with tabs below content */
#TabsToolbar > .titlebar-buttonbox-container,
#window-controls, /* Fullscreen window controls */
#TabsToolbar .titlebar-spacer{
  display: none !important;
}
#navigator-toolbox[inFullscreen]:hover #toolbar-menubar > .titlebar-buttonbox-container{ display: flex !important; }