Firefox hide everything and keep only the content of the webpage visible. Toggle the visibility of the bars on-demand. Requires `Sidebery` extension

userChrome.css

/*
* Taken from multiple sources
* https://www.reddit.com/r/FirefoxCSS/comments/pcuir9/sidebery_hideshow_sidebar_when_hovering_very/
* https://mrotherguy.github.io/firefox-csshacks/
* browser.newtabpage.activity-stream.improvesearch.handoffToAwesomebar = False 
* The above one is to search the url right in the search box in the new tab page without handing the control over to the url bar
*/
.tabbrowser-tab {
  visibility: collapse;
}
.titlebar-button {
  height: 27px !important;
}
#nav-bar {
  margin-top: -42px;
  margin-right: 140px;
  box-shadow: none !important;
}

[uidensity="compact"]:root .titlebar-button {
  height: 32px !important;
}
[uidensity="compact"]:root #nav-bar {
  margin-top: -32px;
}

#titlebar-spacer {
  background-color: var(--chrome-secondary-background-color);
}
#titlebar-buttonbox-container {
  background-color: var(--chrome-secondary-background-color);
}
.titlebar-color {
  background-color: var(--toolbar-bgcolor);
}

#main-window[inFullscreen="true"] #sidebar-box,
#main-window[inFullscreen="true"] #sidebar-box + splitter {
    visibility: collapse;
}

#sidebar-box #sidebar-header {
  display: none !important;
}

#sidebar-box {
  overflow: hidden;
  height: calc(100% - 30px);
  position: fixed;
  max-width: 0.01px;
  display: block;
  transition: 90ms;
}

#sidebar-box:hover {
  max-width: 100%;
  z-index: 3;
}

#sidebar {
  width: calc(30px * 10) !important;
  max-width: 50vw !important;
  height: 100%;
}

#appcontent {
  margin-left: 0.01px;
}

/*
 * Do not remove the @namespace line -- it's required for correct functioning
 */

/*
 * Hide tab bar, navigation bar and scrollbars
 * !important may be added to force override, but not necessary
 * #content is not necessary to hide scroll bars
 */
#TabsToolbar {visibility: collapse;}
/*#navigator-toolbox {visibility: collapse;}*/
/*
#navigator-toolbox {
	overflow: hidden;
	max-height: 0.001px;
	position: fixed;
	width: 100%;
	transition: 100ms;
}

#navigator-toolbox:hover {
	max-height: 100%;
	z-index: 3;
}

browser {margin-right: -14px; margin-bottom: -14px;}*/

/* Hiding navigator-toolbox unless the cursor is on the top of the toolbar */
/* Press ^L or <F7> to toggle this */
:root:not([customizing]) #navigator-toolbox{
  position: relative;
  z-index: 1;
}

#navigator-toolbox:not(:hover) > #titlebar{
  -moz-window-dragging: no-drag !important;
  pointer-events: none
}

:root:not([customizing]) #navigator-toolbox:hover,
:root:not([customizing]) #titlebar{
  margin-bottom: calc(0px - 2 * var(--tab-block-margin) - var(--tab-min-height));
}
#TabsToolbar:not([customizing]){ visibility: hidden; transition: visibility 0ms linear 200ms }

#navigator-toolbox,
#titlebar{ transition: margin-bottom 48ms ease-out 200ms }

#navigator-toolbox:hover{ transition-delay: 0s }
#navigator-toolbox:hover > #titlebar{
  margin-bottom: 0px;
  transition-delay: 0s;
}

#navigator-toolbox:hover #TabsToolbar{
  visibility: visible;
  transition-delay: 18ms
}
/* These rules make sure that height of tabs toolbar doesn't exceed tab-min-height */
#tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container{
  max-height: var(--tab-min-height);
}
.tab-label{ line-height: 20px !important; }
:root[uidensity="compact"] .tab-label{ line-height: 18px !important; }