Collapsing Sidebery

chrome/tweaks/collapse-sidebery.css

@@ -0,0 +1,75 @@
+@media (-moz-bool-pref: "uc.tweak.collapse-sidebery") {
+  :root:not([customizing]):has(#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([hidden])) {
+    --uc-sidebar-width: 256px;
+    --uc-sidebar-collapsed-width: 48px;
+
+    & #sidebar-box {
+      position: relative;
+      min-width: var(--uc-sidebar-collapsed-width) !important;
+      width: var(--uc-sidebar-collapsed-width) !important;
+      max-width: var(--uc-sidebar-width) !important;
+      z-index: calc(var(--browser-area-z-index-tabbox, 0) + 1) !important;
+    }
+
+    & #sidebar-box[positionend] {
+      direction: rtl;
+    }
+    & #sidebar-box[positionend] > * {
+      direction: ltr;
+    }
+
+    & #sidebar-box[positionend]:-moz-locale-dir(rtl) {
+      direction: ltr;
+    }
+    & #sidebar-box[positionend]:-moz-locale-dir(rtl) > * {
+      direction: rtl;
+    }
+
+    & #sidebar-box[positionend] {
+      & #sidebar {
+        border-left: 1px solid var(--sidebar-border-color);
+      }
+    }
+    & #sidebar-box:not([positionend]) {
+      & #sidebar {
+        border-right: 1px solid var(--sidebar-border-color);
+      }
+    }
+
+    & #sidebar-header {
+      display: none;
+    }
+
+    & #sidebar {
+      background-color: inherit;
+      overflow: hidden;
+      padding-inline: 4px;
+      width: var(--uc-sidebar-width) !important;
+    }
+
+    & #sidebar-splitter {
+      display: none;
+    }
+
+
+    --uc-sidebar-collapse-duration: 0ms;
+    --uc-sidebar-collapse-delay: 0ms;
+    --uc-sidebar-expand-duration: 100ms;
+    --uc-sidebar-expand-delay: 400ms;
+
+    & #sidebar {
+      width: var(--uc-sidebar-collapsed-width) !important;
+      transition-property: width;
+      transition-duration: var(--uc-sidebar-collapse-duration);
+      transition-delay: var(--uc-sidebar-collapse-delay);
+    }
+
+    & #sidebar-box:hover {
+      & #sidebar {
+        width: var(--uc-sidebar-width) !important;
+        transition-duration: var(--uc-sidebar-expand-duration);
+        transition-delay: var(--uc-sidebar-expand-delay);
+      }
+    }
+  }
+}

chrome/tweaks/hide-tabs-bar.css

@@ -189,38 +189,40 @@
     }
   }
 
-  #sidebar-header {
-    border-bottom: 0 !important;
-    padding: 10px 4px 0 !important;
-    overflow: hidden;
-    position: relative;
-
-    #sidebar-switcher-target,
-    #sidebar-close {
-      width: auto !important;
-      height: 28px !important;
-      padding: 0 8px !important;
-      border: none !important;
-      margin-inline: 0 !important;
-    }
+  @media not (-moz-bool-pref: "uc.tweak.collapse-sidebery") {
+    #sidebar-header {
+      border-bottom: 0 !important;
+      padding: 10px 4px 0 !important;
+      overflow: hidden;
+      position: relative;
+
+      #sidebar-switcher-target,
+      #sidebar-close {
+        width: auto !important;
+        height: 28px !important;
+        padding: 0 8px !important;
+        border: none !important;
+        margin-inline: 0 !important;
+      }
 
-    #sidebar-spacer {
-      min-width: 8px !important;
+      #sidebar-spacer {
+        min-width: 8px !important;
+      }
     }
-  }
 
-  /* Sidebar positioned on the left. */
-  &:not([positionend]) {
-    border-inline-end: 1px solid var(--sidebar-border-color);
-    /* Use less padding on the side with the border. */
-    padding-inline: 4px 3px;
-  }
+    /* Sidebar positioned on the left. */
+    &:not([positionend]) {
+      border-inline-end: 1px solid var(--sidebar-border-color);
+      /* Use less padding on the side with the border. */
+      padding-inline: 4px 3px;
+    }
 
-  /* Sidebar positioned on the right. */
-  &[positionend] {
-    border-inline-start: 1px solid var(--sidebar-border-color);
-    /* Use less padding on the side with the border. */
-    padding-inline: 3px 4px;
+    /* Sidebar positioned on the right. */
+    &[positionend] {
+      border-inline-start: 1px solid var(--sidebar-border-color);
+      /* Use less padding on the side with the border. */
+      padding-inline: 3px 4px;
+    }
   }
 
   /* Rounded corners tweak optimisations. */

chrome/tweaks/sidebery.css

@@ -331,4 +331,60 @@
   #icon_plus path {
     d: path("M7 1a.5.5 0 01 1 0v6h6a.5.5 0 01 0 1H8v6a.5.5 0 01-1 0V8H1a.5.5 0 01 0-1h6z") !important;
   }
+
+  @media (-moz-bool-pref: "uc.tweak.collapse-sidebery") and (max-width: 50px) {
+    #root {
+      --tabs-indent: unset !important;
+      --tabs-lvl-opacity: 0 !important;
+    }
+
+    .CtxMenu[data-active="true"] {
+      display: none;
+    }
+
+    .NavigationBar[data-layout="inline"] {
+      & .static-btns {
+        display: none !important;
+      }
+      & .nav-item[data-active="true"] {
+        background-color: unset !important;
+        box-shadow: unset !important;
+        margin: auto;
+        opacity: unset !important;
+        position: relative !important;
+        transform: unset !important;
+      }
+    }
+
+    .SearchBar[data-showed="true"] {
+      & .search-icon > svg {
+        margin: unset !important;
+      }
+      & .placeholder, & .input, & .clear-btn {
+        display: none !important;
+      }
+    }
+
+    .ScrollBox > .scroll-container {
+      scrollbar-width: none !important;
+    }
+
+    .Tab .fav {
+      margin: auto !important;
+    }
+
+    .Tab .audio {
+      top: unset !important;
+      left: unset !important;
+      bottom: 0;
+      right: 0;
+      width: 14px !important;
+      height: 14px !important;
+    }
+
+    .Tab .t-box,
+    .Tab .close {
+      display: none;
+    }
+  }
 }

chrome/userChrome.css

@@ -13,6 +13,7 @@
 /* Edge-Frfox tweaks */
 @import url("global/tweaks.css");
 @import url("tweaks/hide-tabs-bar.css");
+@import url("tweaks/collapse-sidebery.css");
 
 /* Import custom stylesheet instead of modifying Edge-Frfox theme files. */
 @import url("custom.css");

sidebery.json

@@ -16,5 +16,5 @@
     "theme": "proton",
     "colorScheme": "ff"
   },
-  "ver": "5.1.1"
-}
+  "ver": "5.2.0"
+}