In the side berry setting file, the background for audio svg should be something other than #fff when in dark mode, since otherwise the 'music' icon color and background color become the same.

eg, it can be changed to black:

.audio svg {
background: #111111ff;
}

Thanks a lot for making this! I just installed it with Sidebery, following the instructions here

After one restart, everything looked perfect, but after another restart of Firefox, I ended up with this:

https://imgur.com/a/JYpu3LX

The black button that allows to switch to other uses of the sidebar is hidden - but I have/want the titlebar disabled (and it worked fine at first), somehow it slipped up there...
I should mention that I'm using KDE PLasma under Garuda Linux, and have the desktop set to use a global menu bar, i.e. the panel at the top becomes the current application's menu bar like in MacOS

Any idea how to fix?

Sidebery version is 5.0.0., Firefox 122.0

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)

Thank you for this project. After trying lots of alternatives, I think i found the best :)

I small request is that it would be awesome to have an option for always extend mode just like microsoft edge. In the current version, it just expands on hover.

This is how it is looking for me, the cross/closing button is hidden.

How to use the extension , my custom.css file is empty , do i have to copy paste the code from extension directory from the repo and paste them into custom.css ?

Hey. I just started using the Firefox css with the Sidebery variant but it doesn't seem to support dark mode and looks very strange and is really hard to read when im using dark mode. Will there be any dark mode support?

When I hover over sidebery I see white background for a second. I've set the appearance as dark. what might be the case?

It looks like the sidebar does not detect the mouse properly, which does not trigger the opening of tabs properly. There is also some 'flickering' when my mouse is on top of a tab, like it keeps detecting and un-detecting the mouse.

sidebar.css may need some modifications to fix this.

example:

I suppose maybe sideberry wasn't able to catch up when the hover occurs?

See this video:
https://0x0.st/HQKM.mkv

I'm using LibreWolf Firefox 114.0.1-2

It would be nice to have an option to have hide the titlebar and have the window controll buttons on the same line as the urlbar, extensions, and menu button.

On Mac, the sidebar Needs some padding, however I'm not sure how that'll effect other OSs.

#sidebar-header {
  padding-top: 30px !important;
}

I've noticed that when reordering tabs, the blue line which indicates where the tab will go is off-centre when using the custom CSS, making it tough to make new tab trees.

I did a bit of experimentation, and found that this is due to the margin: 4px 10px; line in the custom Sidebery JSON file, under .Tab, .PinnedTab {...}.

I changed the 4px to 0px, and then enabled the setting 'Tabs Height' in the Sidebury Styles Editor, increasing the height to 40px, which results in the tab spacing looking nearly identical to the regular behavior, but the blue line now lines up with the tabs. I think it might be not perfectly centered, but it works well enough for me.

I would love to have a right sidebar! By far the cleanest setup with Sideberry that I have tried 🚀

I'm trying to change the width so I can use vertical containers layout.

Here's a video:

I'm currenly using Sidebery v5 with your custom styles.

Hi,

I really like what you did with Tree Style Tab ! An issue I have with your configuration is that when I collapsed a tree the space beneath it where the children tabs are doesn't collapsed, It is an empty space now. Can you tell me how I can disable this please ? In this case, I would like to have the default behavior of Tree Style Tab meaning collapsing the tree without an empty space under the parent tab.

Thank you.

OS:Windows 10

When not using the title bar this is what it appears to be like:
https://imgur.com/a/Rp0nxXt
Additionaly the url bar disappear as does the url/history box when selected.

Using the current version of this extension, and the newest version of Firefox. With FirefoxSidebar set to left (default), when hovering mouse over sidebar and it overlaps beginning of left side of browser, the browser then overlaps the sidebar. In other words, I can't use the sidebar refresh, back, forward, home, etc. buttons as the browser then overlaps the sidebar. The sidebar margins (?) may need to be expanded right so that the sidebar buttons can be clicked on. I can't seem to set margins for this in the css that works.

Firefox Info

Firefox Nightly 105.0a1, with default Firefox Sidebar extensions.

Issues

Collapsed sidebar tab icon is a rectangle instead of a square

Tab container indicator is actually 2px

Sideberry only displays it as 1px

Before	After

Relevant patch:

.container {
  margin: 0 auto auto 11px !important;
}

Pinned margin left is not specified

Also fix container indicator.

Before	After

Relevant patch:

.PinnedTabsBar .tab-wrapper {
  margin: 0-1px 0 11px !important;
}

Pinned tab width depends on tab title

Close icon is pushed further away.

Sideberry icon doesn't show up, whether CSD is enabled or not

See #22

Hello,

Just found out about your project and it seems really nice. I followed the instructions and manage to setup in my Firefox, but the new tab button (that is shown in the video) is missing.

Do I need to append a custom CSS to render this button?

Best regards,
Gabriel Moreira

Not sure what's causing this but I didn't have these issues before. I believe it started occurring since Firefox 110.

1. When trying to group some tabs, the Sidebery sidebar collapses as if my mouse cursor was no longer hovering it. That makes it almost impossible to manage tabs because of the reduced visibility. The horizontal line animation when moving a tab get stuck:

2. Sometimes, just clicking a tab or a panel (including bookmarks) immediately collapses Sidebery panel and doesn't perform the expected action (switching to clicked tab/panel). Toggling Sidebery panel with Ctrl+E temporarily fixes this issue (but not 1.):

• OS: Arch Linux / Gentoo (occurs on both)
• Firefox version: 110.0
• Sidebery version: 4.10.2

I'm using stock settings and I'm only loading these two additionals css files:

• fix_hidden_bookmarks.css
• hide_sidebar_switcher.css

Firefox Info

Firefox Nightly 105.0a1, with default Firefox Sidebar extensions.

After removing CSD extension, there is still space in top left bar

Hi there! First of all, I absolutely love your modification ❤️ , I've been searching for something like this for so long!

However, I have a little problem with it: notice how there's a little gap between the sidebar and the top bar

To be clear: I used bookmarks bar on new-tab only, but it wrecked the whole thing, because the panel was moving down every time I opened a new tab, so I disabled it and applied the fix mentioned in the readme (-40px). If you need any additional info, feel free to ping back :)

Thank you, overall it's working like a charm, I appreciate that you've gone through the effort to polish it that much!

P.S somehow, the dark theme didn't apply automatically, not sure what have gone wrong here, but I think that's because I'm using Librewolf

In the most recent version, 2021.12.14, when applying the Sidebery settings, the functionality to expand/collapse tree tabs breaks, with the fold arrows refusing to appear.

I have tracked the issue down to the z-index: 9 entry in the custom CSS segment of the sidebery-data.json file. Removing this line fixes the issue, and I see no other effects on the styling, though I'm not much of a CSS expert, myself.

I am using the below css in the sideberry settings to improve the scrollbar size and position. It can be useful to add this in the sideberry data file.

.scroll-container{ direction: rtl }
.scroll-container > .scrollable{ direction: ltr }
.scroll-container { scrollbar-width: thin }

Hey, love your work.

I usually don't use the title bar, so it will be nice if I can get it back when I'm using this customization [like the way flyingfox had implemented this] how does one go about doing this?

I followed the steps from the README and ran a killall firefox just to be safe but it seems like this isn't working as expected because in the screenshot below you can see that I still have the tabs on the top and my sidebar doesn't collapse. I am running the most up to date version of Firefox and just clone the repo this morning. I also double checked that the settings were changed in about:config.

Hello,

first of all thank you very much for your work. I love this repo. Exactly what I wanted: sidebars like edge, but much better.
Works great, but I have some minor issues. (Win10, FF 98.0.1).

https://imgur.com/a/rSDoAwt

When I switch to a light firefox theme, the background of the sidebar turns transparent, but only when showing bookmarks or history (no problem when sideberry is selected). No problem with a dark FF theme.

I noticed that the "close window" button seems to be hidden on the far right side, but you can still reach it. I dont' know, if this is intended. Really no big issue, but I can't figure out, how to change this.

There is some weird empty spacing in the toolbar on the far right side, so I can't move the icons to the right side.
Doesn't bother me much, but I would like to know how to change it.

The only changes I made in userchrome.css is enabling @import url("./extensions/fix_hidden_bookmarks.css")

Thanks again

Hello, i have some issue: tab text is still visible and i think the sidebar take to much space

Hey, I am having trouble with the dark mode appearance, I can change the settings to dark mode but the sidebar remains in light mode for some reason, haven't modified the config at all.

Using the latest version of this repo: d99c437
and sideberry v 5.0.0

PFA the screenshot: as you can see the 2nd pinned tab (primevideo) is flowing to the right (as a row)

This should read important instead of !imortant https://github.com/drannex42/linux-utils/blob/4dbe57a29b00576d731694995d7eb203c9926320/firefox/userChrome.css#L176

The sidebar from a3a5927#diff-4cbb4b9e9856fc97f6d8196971717a50131f57bd9d5ab461d0987ff609b641c5 breaks multiple things
The most noticeable is

1. The tabs bar is back
2. The Sidebar is ALWAYS visible
   
3. Not sure what the name is, but this is broken:
   
   

This part makes the sidebar always active

Hey I created this issue on your Vivaldi mod drannex42/vivaldi-mods#5. Can you please provide a version with only visual changes, thanks.

In the example video in README, the navigation displays the tab panel icon when folded. However, here a arrow overrides it and the transition is weired.

I am using Sidebery 5.0.1 with the newest fixes in #41.

Apparently I forgot that 'berry' has more than one 'R' in the filename, I don't want to write a release for that. So, this issue is a reminder to future me (Hi Friend) that on the next major release to fix that spelling.

I am using the exact same config for both LibreWolf and Waterfox, including Sideberry styles:
Librewolf

Waterfox

EDIT: Now it's broken in Librewolf as well. And I am also facing #39 issue.

As in the screenshot , the "close button is not visible".

`/*
  Title: Drannex42's FirefoxSidebar / Vertical Tabs
  Description: Vertical tab design for Firefox with dynamic indentation::
    Sideberry and TreeStyleTabs (Legacy) themes available!
  Repository URL: https://github.com/drannex42/FirefoxSidebar
  Version: 12022.04.17
*/

/*
  Preferences / Settings ::
  Use this file to set your preferences this will save them in one place for easier future updating
  =========================================================================
*/

@import url("./prefs.css");

/* ========================================================================= */

/* Sidebar (Core) :: This file is for the sidebar implementation */
  @import url("./extensions/sidebar.css");

/*
  Extensions :: 
  To enable/disable specific extensions just comment/uncomment the line below. 
  =========================================================================
*/

  /* CSD / Window Controls */
    @import url("./extensions/window_controls.css");

  /* Bookmark Arrows :: add a little arrow next to folders in bookmarks toolbar */
    @import url("./extensions/bookmark_arrow.css");

  /* Superbox Removal :: heavily customize superbox (flat look, colors, smaller entries,...) */
    @import url("./extensions/superbox_removal.css");

  /* Avatar Size :: change the avatar size for the Firefox Account to what makes sense */
    @import url("./extensions/avatar_size.css");

  /* fix sidebar switcher if bookmarks toolbar is hidden */
    @import url("./extensions/fix_hidden_bookmarks.css");

  /* hide sidebar switcher */
    @import url("./extensions/hide_sidebar_switcher.css");

/* END EXTENSIONS ========================================================== */

/*
  Themes ::
  To enable/disable specific theme just comment/uncomment the line below.
  Please enable only one theme at a time!
  =========================================================================
*/

  /* GTK Adwaita */
    /* @import url("./themes/gtk_adwaita.css"); */

  /* GTK Breeze */
    /* @import url("./themes/gtk_breeze.css"); */

/* END THEMES ========================================================== */

/*
  Custom tweaks ::
  If you have any custom CSS for Firefox, place them in this file.
  =========================================================================
*/

  /* @import url("./custom.css"); */

/* ========================================================================= */
`

Currently i am using https://github.com/ranmaru22/firefox-vertical-tabs userChrome.css file contents which i pasted in your custom.css file.

i will post this screenshot below as i will have to restart this browser.

I have performed all the steps as mentioned in the README.md and yet the appearance is nothing like yours in terms of spacing etc. They look too crammed. I am not good at CSS. Could you please say why it appears like this and the remedy? I mean, which style block and the property must I change? I directly cloned yours into Chrome and imported Sidebery settings

Another problem is that I don't get the options you get when you clicked on the Sidebery icon.

I am not sure how to change the tab text font size in sidebery. I am only able to change the font size of 'count of descendant fonts' using the left styles menu. Changing the font size under appearance setting also does not change the tab font size.