Sidebery 5.0.0 was released today [Working Thread: New Style Inside for Testing]

[xfzv]

Sidebery 5.0.0 was released today. Several things are broken when Sidebery is collapsed:

• The top icons aren't rendered well:

• And so are the bottom ones:

• Favicons aren't centered vertically (compare with the new tab ("+") button):

• Some tabs icons are invisible if disabling "Show new tab buttons" in Sidebery settings

• Ctrl+E to open/close sidebar panel no longer works (tested on a blank profile without FirefoxSidebar, works)

[drannex42]

Yes, this was a failure on my part. I modified the existing theme instead of creating one from scratch, this causes issues when they release an update like this.

I will look into SideBerry v5 and try to recreate the theme from scratch this time. I am currently using the Floorp browser (Firefox, modified, adds a lot more features similar to Vivaldi) and I am seeing the same problem with the new version.

I am unsure about Ctrl+E as nothing I added/modified would hamper that (nor have I ever used it, cool tip!)

[xfzv]

Thanks for the heads-up!

I found this repo: Redundakitties/colorful-minimalist (unmaintained since 2023-09-07 unfortunately) which seems very similar. According to the maintainer, the auto-hiding sidebar feature was still working with Sidebery 5.0.0rc4.

Maybe that would help if you're starting from scratch.

[drannex42]

The new Sideberry is damn impressive.

I don't have to recreate everything, this is so much better.

Just add this to your custom css in Sideberry > Style Editor > Custom CSS

Updated Style for v5 (Versioning is in title)

/* Dynamic Sidebery (v12023.09.25) by Drannex42 (https://github.com/drannex42/FirefoxSidebar) */

#root.root {--tabs-margin: 10px;}
#root.root {--general-margin: 6px;}
#root.root {--tabs-inner-gap: 4px;} /* Modify this to center the icons better */
#root.root {--nav-height-padding: 5px} /* Modify this to reduce or increase the navbars bottom/top margin */

/* Custom Variables for Dynamic Sidebery */
#root.root {--tabs-text-padding-left: 4px;} /* Modify this to change the spacing between the icon and title */
#root.root {--tabs-margin-bottom: 0px;} /* Modify this to change the spacing between tabs Default: -2px */ 

/* Minimized Sidebar */
@media screen and (max-width: 60px) {
  #root {
    --tabs-indent: unset !important;
  }

  .container { 
      max-width: 60px;
  } 

   .Tab .title {
	display: none;
   }
}

/* Navbar */

#root .NavigationBar {
	padding: var(--nav-height-padding) var(--general-margin);
}

/* Tab Display Settings */

.Tab {
  margin-bottom: var(--tabs-margin-bottom) !important;
}

.Tab .title {
	padding-left: var(--tabs-text-padding-left);
}

.Tab .ctx {
	left: 0px; /* This sets the container indicator border-color to the left, instead of the right */ 
}

/* Audio Button Settings */

.Tab[data-audible="true"] .audio, .Tab[data-muted="true"] .audio, .Tab[data-paused="true"] .audio {
	background: var(--tabs-normal-bg);
	left: 11px;
	height: unset;
	bottom: 7px;
	top: unset;
}

.Tab[data-audible="true"] .t-box .title, .Tab[data-muted="true"] .t-box .title, .Tab[data-paused="true"] .t-box .title {
	--audio-btn-offset: 0px !important;
}


/* End Dynamic Sidebery */

/* Tip: Copy & place your modifications to the dynamic tab variables below for easier upgrading 
 * Example: #root.root {--tabs-margin-bottom: -2px;} 
*/

[drannex42]

Nothing else, just that, and it'll even open a thousand more options for you to style to your liking.

[xfzv]

The new Sideberry is damn impressive.

I don't have to recreate everything, this is so much better.

Just add this to your custom css in Sideberry > Style Editor > Custom CSS

#root.root {--general-margin: 4.5px;}

@media screen and (max-width: 60px) {
  #root {
    --tabs-indent: unset !important;
  }

  .container { 
      max-width: 60px;
  } 

}

This doesn't seem to do anything at all on my end.

[drannex42]

Interesting, remove all existing css from the block and add the newly updated version I added above (v12023.09.19-1)

Will look something like this in settings:

[xfzv]

Indeed, the updated version seems to fix the icons vertical alignment as well as the invisible tabs icons without the new tab button:

Are you also getting a tiny portion of the first tab letter too?

The top/bottom icons are still somewhat broken.

---

Edit: the shortcut to toggle Sidebery also works now.

[drannex42]

Have you tried modifying the margin variables? If you set it likely 8px or 8.5px you will likely have it centered and not see the letters.

[xfzv]

Thanks, tweaking this value did the trick:

#root.root {--tabs-text-padding-left: 3px;} /* Modify this to change the padding on the title of the tab */

[drannex42]

I've updated the styling above. Now the title will not be shown on the minimized sidebar, and I've changed from using a custom inner padding class to the one Sidebery has already defined. You should be able to use that to center your icons better.

Changes (v12023.09.20):

• Title will no longer be shown in minimized state.
• Changed custom inner padding to built-in Sidebery styling option.
• Container indicators are now on the left, instead of the right.
• Audio indicator is now placed in the lower right in minimized and expanded state instead of inline with the tab title.
• Added some additional notes.

Changes (v12023.09.20-1):

• Added a notice to place your custom modifications below the dynamic sideberry code to make sure you can more easily upgrade (not that I expect there will be a lot of that soon).
• Added a new variable: --tabs-margin-bottom
  • This allows you to change how compact the tabs are beyond what Sideberry allows. I set mine to -2px for a more compact look, I have set the default to 0px.

[xfzv]

v12023.09.20 works as described regarding the tabs titles/icons alignment and audio indicator. 👍

#root.root {--tabs-inner-gap: 8.5px;}

seems to be the sweet spot as far as I'm concerned to get correct horizontal icon alignment.

[drannex42]

Changes (v12023.09.25)

• I've added a --nav-height-padding variable, that way when you change the general margin, but you can keep the navbar height slimmer than the tabs.

[xfzv]

Increasing

#root.root {--general-margin: 6px;}

value as suggested here allows to center the down arrow horizontally when collapsed, but it also makes the spacing between tabs/bookmarks entries way too big.

Any way to avoid this?

---

Edit: nevermind, I figured it out.

#root.root {--bookmarks-bookmark-height: ..px;}
#root.root {--bookmarks-folder-height: ..px;}
#root.root {--tabs-margin-bottom: -..px;}

[drannex42]

Closing this as I just released the latest version with the official release of Sidebery 5.

https://github.com/drannex42/FirefoxSidebar/releases/tag/v2024.05.15