Sideberry collapsible styles

sideberry styles.css

#root.root {--tabs-activated-shadow: box-shadow: 0 0 1px rgba(128, 128, 142, 0.9);;}
#root {
    --tabs-font: 1rem -apple-system;
    --tabs-count-font: .625rem -apple-system;
    --bookmarks-bookmark-font: .875rem -apple-system;
    --bookmarks-folder-font: 9pt -apple-system;
    --nav-btn-width: 30px;
    --nav-btn-height: 30px;
    --tabs-inner-gap: 8px;
}

#root.root {
    --tabs-border-radius: 8px;
}

/* Adjust styles according to sidebar width */
@media screen and (max-width: 48px) {
    #root {
        --tabs-indent: unset;
    }

    /* Hide all navbar items (panels) and buttons (settings, hidden panels etc) */
    #root:not(:hover) .static-btns,
    #root:not(:hover) .main-items>.nav-item:not([data-active="true"]) {
        opacity: 0;
        transform: scale(0, 0);
        transition: all 0.25s;
    }

    /* Display only the active tab panel */
    #root:not(:hover) .main-items>.nav-item[data-active="true"] {
        opacity: 1.0;
        transform: scale(1, 1);
        transition: all var(--d-fast);
    }

    .Tab[data-audible]:not([data-muted]) svg.-loud,
    .Tab[data-muted] svg.-mute {
        transform: translateY(4px) translateX(-13px);
    }


    .Tab .exp,
    .Tab[data-parent][data-folded] .fav {
        // pointer-events: none;
    }
}

/*
* Add margins and rounding around tabs
*/

#root {
    --tabs-height: 40px;
}

/* Background layer */
.Tab .lvl-wrapper:after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 6px);
    border-radius: 4px;
    z-index: -1;
}

@media (prefers-color-scheme:light) {
    #root {
        --tabs-activated-bg: white !important;
        --tabs-bg-active: var(--tabs-activated-bg) !important;
        --tabs-selected-fg: var(--tabs-activated-fg) !important;
        --tabs-selected-bg: var(--tabs-activated-bg) !important;
        --bg: #f9f9fb !important;
        --chrome-content-separator-color: rgb(204, 204, 204);
    }

    .Tab[data-selected] .lvl-wrapper:after,
    .Tab[data-active] .lvl-wrapper:after {
        box-shadow: 0 0 1px rgba(128, 128, 142, 0.9), 0 0 4px rgba(128, 128, 142, 0.5);
    }
}

@media (prefers-color-scheme:dark) {
    #root {
        --tabs-activated-bg: #42414d !important;
        --tabs-bg-active: var(--tabs-activated-bg) !important;
        --tabs-selected-fg: var(--tabs-activated-fg) !important;
        --tabs-selected-bg: var(--tabs-activated-bg) !important;
        --bg: #2b2a33 !important;
        --chrome-content-separator-color: #0c0c0d;
        --tabs-bg-hover: rgb(51, 51, 62) !important;
    }

    .Tab[data-selected] .lvl-wrapper:after,
    .Tab[data-active] .lvl-wrapper:after {
        box-shadow: 0 0 1px rgba(128, 128, 142, 0.9);
    }

    .Tab .placeholder>svg {
        fill: var(--nav-btn-fg);
    }
}

/* Reset default styles */
.Tab:hover,
.Tab:active,
.Tab[data-active],
.Tab[data-active]:active,
.Tab[data-selected],
.Tab[data-selected]:hover,
.Tab[data-selected]:active {
    background: transparent;
}

/* Reapply styles */

.Tab:hover .lvl-wrapper:after {
    background-color: var(--tabs-bg-hover);
}

.NavigationBar .nav-item[data-active="true"],
.Tab:active .lvl-wrapper:after,
.Tab[data-active]:active .lvl-wrapper:after {
    background-color: var(--tabs-bg-active);
}

.Tab[data-active] .lvl-wrapper:after {
    background-color: var(--tabs-activated-bg);
}


.Tab[data-selected] .lvl-wrapper:after {
    background-color: var(--tabs-selected-bg);
}

/* Resize and reposition favicons */
.TabsPanel .container {
    box-shadow: none;
}

.Sidebar::before {
    --border-margin: 16px;
    content: '';
    width: calc(100% - var(--border-margin));
    margin: 0 calc(var(--border-margin) / 2);
    border-top: 1px solid var(--chrome-content-separator-color);
}

.Tab .audio {
    z-index: 21 !important;
    transform: translateX(5px);
}

.Tab .close {
    margin: 0 5px;
}

.Tab .t-box {
    width: calc(100% - 50px);
}

.Tab .fav-icon {
    height: 20px;
    width: 20px;
}

.Tab .fav {
    height: 20px;
}

.PinnedTabsBar {
    margin-left: 4px;
}

.PinnedTabsBar::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -4px;
    width: 85%;
    left: 0;
    height: 1px;
    margin: auto;
    opacity: 0.5;
    background-color: var(--chrome-content-separator-color);
}

.AnimatedTabList {
    margin-top: 8px;
}

#root[data-nav-layout="horizontal"] .NavigationBar,
#root[data-nav-layout="hidden"] .NavigationBar {
    box-shadow: none;
}

.NavigationBar .nav-item {
    top: 5px;
    left: 5px;
    width: calc(var(--nav-btn-width) - 6px);
    height: calc(var(--nav-btn-height) - 6px);
    border-radius: 4px;
    margin-right: 5px;
    margin-bottom: 10px;
    transition: all var(--d-fast);
}

.NavigationBar .nav-item[data-active="true"] {
    box-shadow: 0 0 1px rgba(128, 128, 142, 0.9);
}

userChrome.css

/* Sidebery */
#main-window[titlepreface*="[S] "] #TabsToolbar {
  visibility: collapse;
}

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar-header {
  visibility: collapse;
}

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

/* Show sidebar only when the cursor is over it */
/* The border controlling sidebar width will be removed so you'll need to modify these values to change width */

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] {
  --uc-sidebar-width: 48px;
  --uc-sidebar-hover-width: 232px;
  --uc-autohide-sidebar-delay: 50ms;
  /* Wait 0.6s before hiding sidebar */
  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;
  margin-top: -1px;
}

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"][positionend] {
  direction: rtl;
}

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"][positionend]>* {
  direction: ltr;
}

#sidebar-box[positionend]:-moz-locale-dir(rtl) {
  direction: ltr;
}

#sidebar-box[positionend]:-moz-locale-dir(rtl)>* {
  direction: rtl;
}

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]>#sidebar {
  transition: min-width 115ms ease-in-out !important;
  min-width: var(--uc-sidebar-width) !important;
  will-change: min-width;
}

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover>#sidebar {
  min-width: var(--uc-sidebar-hover-width) !important;
  transition: min-width 100ms ease-in-out var(--uc-autohide-sidebar-delay), box-shadow 500ms ease-in-out !important;
  box-shadow: 0 0 4px rgba(10, 10, 10, .5);
  clip-path: inset(0px -15px 0px -15px);
}

/* Add sidebar divider and give it background */

#sidebar,
#sidebar-header {
  background-color: var(--toolbar-bgcolor) !important;
  border-inline: 1px solid var(--chrome-content-separator-color);
  border-inline-width: 0px 1px;
}

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([positionend])> :-moz-locale-dir(rtl),
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"][positionend]>* {
  border-inline-width: 1px 0px;
}

/* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([positionend]):hover~#appcontent #statuspanel {
  inset-inline: auto 0px !important;
}

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([positionend]):hover~#appcontent #statuspanel-label {
  margin-inline: 0px !important;
  border-left-style: solid !important;
}

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

#PersonalToolbar {
  --uc-bm-height: 20px;
  /* Might need to adjust if the toolbar has other buttons */
  --uc-bm-padding: 7px;
  /* Vertical padding to be applied to bookmarks */
  --uc-autohide-toolbar-delay: 60ms;
  /* The toolbar is hidden after 0.6s */

  /* 0deg = "show" ; 90deg = "hide" ; Set the following to control when bookmarks are shown */
  --uc-autohide-toolbar-focus-rotation: 0deg;
  /* urlbar is focused */
  --uc-autohide-toolbar-hover-rotation: 0deg;
  /* cursor is over the toolbar area */
}

:root[uidensity="compact"] #PersonalToolbar {
  --uc-bm-padding: 1px;
}

:root[uidensity="touch"] #PersonalToolbar {
  --uc-bm-padding: 7px
}

#PersonalToolbar:not([customizing]) {
  position: relative;
  margin-bottom: calc(0px - var(--uc-bm-height) - 2 * var(--uc-bm-padding));
  transform: rotateX(90deg);
  transform-origin: top;
  transition: transform 135ms ease-in-out var(--uc-autohide-toolbar-delay) !important;
  z-index: 1;
  /* The following properties should allow the themes with trasparent toolbars to work */
  background-color: transparent !important;
  background-repeat: no-repeat, no-repeat, var(--lwt-background-tiling);
  --uc-bg-y: calc(-2 * (var(--tab-block-margin) + var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) - var(--tab-min-height) - 16px - var(--bookmark-block-padding));
  background-position: top left, top left, var(--lwt-background-alignment, top left);
  background-position-y: top, top, var(--uc-bg-y), var(--uc-bg-y), var(--uc-bg-y);
  background-image: var(--toolbar-bgimage), ease-in-out-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, var(--lwt-additional-images)) !important;
}

#PlacesToolbarItems>.bookmark-item,
#OtherBookmarks,
#PersonalToolbar>#import-button {
  padding-block: var(--uc-bm-padding) !important;
}

#nav-bar:focus-within+#PersonalToolbar {
  transition-delay: 100ms !important;
  transform: rotateX(var(--uc-autohide-toolbar-focus-rotation, 0));
}

#navigator-toolbox:hover>#PersonalToolbar {
  transition-delay: 100ms !important;
  transform: rotateX(var(--uc-autohide-toolbar-hover-rotation, 0));
}

#navigator-toolbox:hover>#nav-bar:focus-within+#PersonalToolbar {
  transform: rotateX(0);
}

/* Uncomment to enable compatibility for multi-row_bookmarks.css */
/* This would break buttons placed in the toolbar but that is likely not happening if you are using multi-row setup */
/*
  #PersonalToolbar:not([customizing]){
  position: fixed;
  display: block;
  margin-bottom: 0px !important;
  }
  */