FirefoxSidebar/extensions/sidebar.css

/*
  Extension (Core): Sidebar
  Description: This is the core implementation of the sidebar used in drannex42's FirefoxSidebar.
  Repository URL: https://github.com/drannex42/FirefoxSidebar
  Version: v12022.11.22 (YYYYY.MM.DD) 
*/

#main-window #TabsToolbar {
  visibility: collapse;
}



#sidebar-box > #browser,
#webextpanels-window {
  background: transparent !important;

}

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]
  #sidebar-header {
  /*! display: none; */
}

/*Collapse in default state and add transition*/
#sidebar-box {
  /*! overflow: visible !important; */
  border-right: none !important; /* border-right: 1px solid var(--sidebar-border-color) !important; */
  z-index: 2;
  border-right: none !important;
  width: 100% !important;
  background: var(--custom-sidebar-bg, --sidebar-background);
  
  /* lock sidebar to height by doing the inverse margin of the toolbar element */
  z-index: 1000 !important;
  position: relative !important;
  margin-top: var(--menubar-height) !important;
  border-right: none;
  transition: 0.25s !important;

  /* lock sidebar to specified width */
  min-width: var(--sidebar-width) !important;
  max-width: var(--sidebar-width) !important;
  overflow: hidden !important;
  transition-property: width;
  transition-duration: 0.25s;
  transition-delay: 0.25s;
  transition-timing-function: ease-in;
}

#sidebar-box::after {
  background: var(--sidebar-border-color) !important;
  margin-left: 207px;
  z-index: 9999999;
  position: absolute;
  content: " ";
  width: 1px;
  height: 100%;
  top: 0;
  right: 0px;
}

#sidebar-box:hover:after {
  top: 42px;
}

/*All other sidebar-boxes should be larger on hover*/
#sidebar-box:hover, #sidebar-box #sidebar:hover {
  min-width: 350px !important;
  max-width: 350px !important;
  z-index: 999;
  margin-right: -300px !important;
  a
}

/*Tree Style Tabs && Sideberry specific sidebar width and size*/

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover,
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover,
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar:hover {
  min-width: 260px !important;
  max-width: 260px !important;
  margin-right: -210px !important;
}

#sidebar-header {
  border: none !important;
  border-right: 1px solid var(--sidebar-border-color);
  background: var(--custom-sidebar-header-bg, transparent) !important;
}

#sidebar-close,
#sidebar-title,
#sidebar-switcher-arrow {
  display: none;
  border: none;
}

#sidebar-switcher-target {
  border: none !important;
  margin-left: 4.5px !important;
  padding-top: 4px !important;
  padding-bottom: 6px !important;
}

#sidebar-switcher-target:focus-visible:not(:hover, [open]),
#sidebar-close:focus-visible:not(:hover, [open]) {
  outline: none !important;
}



.sidebar-splitter {
  opacity: 0 !important;
  width: 0px !important;
  border: none !important;
  --avatar-image-url: none !important;
}

#sidebarMenu-popup .subviewbutton {
  min-width: 0px;
  padding: 0;
  margin: 0 !important;
}

toolbarseparator {
  display: none;
}

#nav-bar-customization-target {
  z-index: 99999;
  position: relative;
}

.browser-toolbar {
  padding-left: var(--sidebar-width) !important;
  position: relative !important;
}

#PersonalToolbar {
  padding: 2px 5px !important;
  padding-top: 0px !important;
  margin-top: 0px !important;
  padding-left: calc(var(--sidebar-width) + 6px) !important;
}