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!)

from firefoxsidebar.

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;} 
*/

from firefoxsidebar.

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.

from firefoxsidebar.

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:

from firefoxsidebar.

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.

from firefoxsidebar.

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.

from firefoxsidebar.

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

from firefoxsidebar.

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.

from firefoxsidebar.

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

from firefoxsidebar.

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.

from firefoxsidebar.

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.

from firefoxsidebar.

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.

from firefoxsidebar.

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 */

from firefoxsidebar.

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;}

from firefoxsidebar.