Sidebery - So I can't have this yet?

[korason7117]

sidebery-firefox.webm

this is my css file

CSS Configuration

/* 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. 
   By default the internal layout of sidebar changes when hovered, but this can
   be changed by setting pref "userchrome.autohide-sidebar.static-layout.enabled" to true
 */

/* Note: If you want only *some* sidebar to be auto-hidden, then you can use [sidebarcommand] attribute selector.
   For example, to only affect Sidebery's sidebar replace all instances of #sidebar-box with
   #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"].
   To find the sidebarcommand value for any other sidebar, open that sidebar and use Browser Toolbox to inspect it.
   See: https://firefox-source-docs.mozilla.org/devtools-user/browser_toolbox/index.html
*/
:where(#main-window) #browser {
  --uc-sidebar-width: 0.1px;
  --uc-sidebar-hover-width: 450px;
}

#main-window[sizemode="fullscreen"] #browser {
  --uc-sidebar-width: 1px;
}

#sidebar-box {
  --uc-autohide-sidebar-delay: 100ms;
  --uc-autohide-transition-duration: 115ms;
  --uc-autohide-transition-type: linear;
  --browser-area-z-index-sidebar: 3;

  position: relative;
  min-width: var(--uc-sidebar-width) !important;
  width: var(--uc-sidebar-width) !important;
  max-width: var(--uc-sidebar-width) !important;
  z-index: var(--browser-area-z-index-sidebar, 3);
  background-color: transparent !important;   /* ← Helps avoid background bleed */
  border: none !important;                    /* ← Kill any inherited borders */
  box-shadow: none !important;
  outline: none !important;

  /* This directionality flipper is played so that sidebar "grows" into the right direction */
  direction: ltr;
  &:is([positionend],[sidebar-positionend]):not(:-moz-locale-dir(rtl)) {
    direction: rtl;
  }
}

.sidebar-browser-stack {
  background: transparent !important;         /* ← Match change above */
  border: none !important;
}

#sidebar-splitter,
#sidebar-box > splitter,
browser > splitter {
  display: none !important;
  border: none !important;
  width: 0 !important;
  min-width: 0 !important;
  background: transparent !important;
}

#sidebar-header {
  overflow: hidden;
  color: var(--chrome-color, inherit) !important;
  padding-inline: 0 !important;
  border: none !important;                    /* ← Explicit */
}

#sidebar-header::before,
#sidebar-header::after {
  content: "";
  display: flex;
  padding-left: 8px;
}

#sidebar-header,
#sidebar {
  transition: min-width var(--uc-autohide-transition-duration) var(--uc-autohide-transition-type) var(--uc-autohide-sidebar-delay) !important;
  min-width: var(--uc-sidebar-width) !important;
  will-change: min-width;
  direction: ltr;
  border: none !important;                    /* ← Core fix area */
  box-shadow: none !important;
  background: transparent !important;
  &:-moz-locale-dir(rtl) {
    direction: rtl;
  }
}

#sidebar-box:hover > #sidebar-header,
#sidebar-box:hover > #sidebar,
#sidebar-box:hover > .sidebar-browser-stack > #sidebar {
  min-width: var(--uc-sidebar-hover-width) !important;
  transition-delay: 0ms !important;
}

/* Force-kill the right border (most common culprit for left sidebar) */
#sidebar-box:not([positionend],[sidebar-positionend]) #sidebar,
#sidebar-box:not([positionend],[sidebar-positionend]) #sidebar-header {
  border-right: none !important;
  margin-right: -1px !important;              /* ← Tricks subpixel / separator rendering in many cases */
  padding-right: 1px !important;              /* Optional – can help shift content slightly */
}

/* Reverse for right sidebar if you ever use it */
#sidebar-box:is([positionend],[sidebar-positionend]) #sidebar,
#sidebar-box:is([positionend],[sidebar-positionend]) #sidebar-header {
  border-left: none !important;
  margin-left: -1px !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;
}

/* Remove your previous border rule entirely – it was contributing */
#sidebar,
#sidebar-header {
  /* Comment out or remove this block – no need for these borders anymore */
  /* background-color: inherit !important; */
  /* border-inline: 1px solid rgb(80,80,80); */
  /* border-inline-width: 0px 1px; */
}

/* Keep the RTL flip logic but without borders */
#sidebar-box:not([positionend],[sidebar-positionend]) > :-moz-locale-dir(rtl),
#sidebar-box:is([positionend],[sidebar-positionend]) > * {
  /* border-inline-width: 1px 0px; */       /* ← commented out */
}

/* Revamp pref – usually removes borders anyway */
@media -moz-pref("sidebar.revamp") {
  #sidebar, #sidebar-header {
    border-style: none !important;
  }
  #sidebar-box {
    padding: 0 !important;
  }
}

/* Statuspanel adjustments (unchanged) */
#sidebar-box:not([positionend],[sidebar-positionend]):hover ~ #appcontent #statuspanel {
  inset-inline: auto 0px !important;
}
#sidebar-box:not([positionend],[sidebar-positionend]):hover ~ #appcontent #statuspanel-label {
  margin-inline: 0px !important;
  border-left-style: solid !important;
}

/* Static layout block (unchanged, but borders already killed above) */
@media -moz-pref("userchrome.autohide-sidebar.static-layout.enabled") {
  #sidebar-box {
    min-width: var(--uc-sidebar-width) !important;
    contain: size;
    box-shadow: var(--content-area-shadow);
  }
  #sidebar {
    min-width: var(--uc-sidebar-hover-width) !important;
  }
  .sidebar-browser-stack {
    overflow: hidden;
    width: 100%;
    transition: width var(--uc-autohide-transition-duration) var(--uc-autohide-transition-type) var(--uc-autohide-sidebar-delay);
    direction: ltr;
    &:hover {
      transition-delay: 0ms;
      width: var(--uc-sidebar-hover-width);
    }
    &:-moz-locale-dir(rtl) {
      transition-property: transform,width !important;
    }
  }
  /* ... rest unchanged ... */
}

[sporocyst]

Don't know what you are trying to say

[korason7117]

what you see is auto-hiding of sidebery in firefox.
tried placing my css into Zen, switching Zen's default sidebar to the right and setting zen.view.compact.show-sidebar-and-toolbar-on-hover to False and didn't get same result as in firefox

[sporocyst]

Oh, all you need is to modify your CSS code, not just copy and paste

[korason7117]

what needs to be modified? im no coder.