Better CSS for hiding the original tab bar when Sideberry is open

[ShahriarKh]

#main-window #tabbrowser-tabs {
   transition: opacity .3s .3s !important;
 }
 
 #main-window[titlepreface*="XXX"] #tabbrowser-tabs {
   opacity: 0;
 }

I'm not sure if it's a good place to share this, but I'm just suggesting a more smooth tab bar hiding compared to this.

[kevinhaas]

Try this out, homie.

/* Defaults for window controls on RIGHT side of the window */
/* Modify these values to match your preferences */
:root[tabsintitlebar]{
  --uc-window-control-width: 150px; /* Space reserved for window controls */
  --uc-window-drag-space-width: 1px; /* Extra space reserved on both sides of the nav-bar to be able to drag the window */
}
:root[sizemode="fullscreen"] .titlebar-buttonbox-container{ display: none !important }
:root[sizemode="fullscreen"] #window-controls{
  position: fixed;
  display: flex;
  top: 0;
  right:0;
  height: 40px;
}
:root[uidensity="compact"][sizemode="fullscreen"] #window-controls{ height: 32px }
#nav-bar{
  border-inline: var(--uc-window-drag-space-width,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-width,0px));
}

/* Use this pref to check Mac OS where window controls are on left */
/* This pref defaults to true on Mac and doesn't actually do anything on other platforms. So if your system has window controls on LEFT side you can set the pref to true */
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){
  :root{ --uc-window-control-width: 72px; }
  :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar{
    border-inline-width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-width,0px)) var(--uc-window-drag-space-width,0px)
  }
}

/* Hides tabs toolbar */
/* For OSX use hide_tabs_toolbar_osx.css instead */
:root{ --uc-toolbar-height: 32px; }

:root:not([uidensity="compact"]){--uc-toolbar-height: 38px}

#TabsToolbar{ visibility: collapse !important }
:root[sizemode="fullscreen"] #TabsToolbar > #window-controls{ visibility: visible !important; z-index: 2 }

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

#toolbar-menubar{
  min-height:unset !important;
  height:var(--uc-toolbar-height) !important;
  position: relative;
}

#main-menubar{
  -moz-box-flex: 1;
  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[inactive] > #menubar-items {
  opacity: 0;
  pointer-events: none;
  margin-left: var(--uc-window-drag-space-width,0px)
}

/* Sidebar autohide with linear transition */
#main-window[sizemode="fullscreen"] #sidebar-box {
  --uc-sidebar-width: 1px;
}

#sidebar-box {
  --uc-sidebar-width: 0px;
  --uc-sidebar-hover-width: 250px;
  position: relative;
  min-width: var(--uc-sidebar-width) !important;
  width: var(--uc-sidebar-width) !important;
  max-width: var(--uc-sidebar-width) !important;
  z-index:1;
}
 
#sidebar {
  transition: min-width 200ms linear !important;
  min-width: var(--uc-sidebar-width) !important;
  will-change: min-width;
}

#sidebar-box:hover > #sidebar {
  min-width: var(--uc-sidebar-hover-width) !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;
}
 
#sidebar-splitter {
  display: none
}
 
#sidebar-header {
/*   height: 0; Hides sidebar header */ 
  overflow: hidden;
  color: var(--chrome-color, inherit) !important
}

/* Add sidebar divider and give it background */
#sidebar,
#sidebar-header {
  background-color: var(--toolbar-bgcolor) !important;
  border-right: 1px solid #000;
}

[Kelendral-gh]

Since I will always have some kind of sidebar with vertical tabs installed except in private mode I do this:

#main-window #TabsToolbar {
  visibility: collapse;
}
#main-window[privatebrowsingmode=temporary]  #TabsToolbar,
#main-window[privatebrowsingmode=permanent]  #TabsToolbar {
  visibility: visible !important;
}