userChrome.css

/* 
  Title: Drannex42's Personal userChrome.css for Firefox
  Description: This is my personal userChrome for Firefox, I specifically clean up the interface, change the folder icon to Vivaldi's (much better) and reduce padding in some areas, and add some in others. This overall creates a much more streamlined interface.
  Features: Streamlines interface, folder icon replacement, works best with my custom Tree Style Tabs interface (check it out! treestyletabs.css in the /firefox/ directory), removes tab bar.
  Version: 12021.06.14 :: Added Sideberry support.
*/

#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
  opacity: 0;
  pointer-events: none;
}
#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
    visibility: collapse !important;
}

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

/*Collapse in default state and add transition*/
#sidebar-box #sidebar:hover { 
    /*! overflow: visible !important; */
    min-width: 80px;
    max-width: 80px;
    z-index: 2;
    --sidebar-background-color: #272933 !important;
}

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

#sidebar-header {
  border: none !important;
}

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

#sidebar-switcher-target {
    border: none !important;
    margin-left: 4.5px !important;
}

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


:root {
  --sidebar-width: 60px;
  --toolbar-height: -50px;
  --menubar-height: -70px;
  --toolmenubar-height: -80px;
  --sidebar-padding: calc(var(--sidebar-width) + 5px);
  --toolbar-start-end-padding: 5px !important;
  --toolbar-start-end-padding: 5px !important;
}


#main-window #PersonalToolbar {
  margin-left: var(--sidebar-width);
  padding: 2px 5px !important;
  padding-top: 0px !important;
  margin-top: -3px !important;
}


/* lock sidebar to height by doing the inverse margin of the toolbar element */
#sidebar-box {
  z-index: 1000 !important;
  position: relative!important;
  margin-top: var(--menubar-height) !important;
  background: #272933 !important;
  transition: none !important;
}

#main-window[title^="Firefox Developer Edition"] #sidebar-box {
  margin-top: var(--toolmenubar-height) !important;
}

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

.browser-toolbar {
  margin-left: var(--sidebar-width);
}

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

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

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

toolbarseparator {
    display: none;
}

#sidebar { border-right: 0px solid #ccc; overflow: hidden;width: 50px !important;min-width: 50px !important;width: 100% !important;}


/* OTHER CUSTOM OPTIONS */

/* Hide the title bar */
#titlebar{ visibility: collapse; }

/* hide normal horizontal tab bar */
#TabsToolbar { visibility: collapse; }


:root:not([uidensity="compact"]) #back-button > .toolbarbutton-icon {
  border: none !important;
  background: none !important;
}