Mmm, that's really interesting. I'm going to test your code and see if I can figure out how to solve my problem... Thank you for your help!

Umm, yeah the library window and sidebar don't really play super well here. One thing that would sort of work for them though is to simply add the filter to the whole library tree, not only the icons - like this here

The problem with this though is that it only sort of works if you remove all the tree indentation, because if we do so, then we can create an svg filter that applies the filter effect only at certain slice of the elements width. So it's really only a solution if you don't need the tree visualization.

That's a great idea, and the result looks pretty nice! But how do you come up with all this? ;)

That said, I think I'm going to give up on it anyway, because I just realized that it's not possible to apply filters to the pseudo-elements containing the favicons in the library or the sidebar. From my perspective, this idea is only interesting if we can achieve a consistent display of the favicons; if it only works halfway, it’s not really worth it...

In any case, thanks so much for the previous idea! I’ll keep that in the back of my mind!

I can't think of a way to exclude internal bookmark items, but what you could do is to keep using the filter that you have, but set the internal icon to black:

.bookmark-item:not([container]){
  fill: black !important;
}

After a lot of trial and error, I added the following code to my userChrome.css file:

/* Add a border around favicons */
.tab-icon-image:not([src^="chrome://"]), /* Tabs */
.bookmark-item:not([container="true"]) > .toolbarbutton-icon, /* Bookmarks bar */
.bookmark-item:not([container="true"]) > .menu-icon /* Folders and subfolders */
{
    filter: drop-shadow(1px 0 0 rgba(255, 255, 255, 0.7)) drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.7)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.7)) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.7));
}

The problem is that this code also applies to the default icon, which is used as a fallback when bookmarks don't have a favicon. After spending several hours searching on mozSearch, I still can't find the right selectors to exclude these default icons... and I'm starting to wonder if it's even possible. Could someone confirm this for me? Is it possible to specifically target bookmarks that have a favicon other than the default one?

Thank you very much in advance for any help you can provide!

That extra spacer/drag space for Vertical tabs mode only appeared in Firefox's UI a couple of updates ago.

Likewise the extra flexible spaces either side of the 'List all tabs' button... easy to miss if not creating a new profile.

How in the world have I not ever noticed that space. Well in all my profiles it was next to another "normal" flexible space so it didn't appear visibly so I guess there's that. But indeed there it is.

Hi! Oh, I didn't expect it to be possible, but this work flawlessly! Thanks a lot!! :D Edited the tag from "not possible" to "solved"!

As for the blue circled space, it is removed with this simple line of code:

#vertical-spacer {
  display: none !important;
}

This is a nice collection by the way.

I don't really know what that blue circled space is about - if you can't remove it then I don't think it's a flexible space. Perhaps it's margin created by whatever that "Firefox icon" button next to it is?

But maybe this style fits the bill to create separate "block" for vertical tabs area?

No problem! I wish I could've helped. :)

It seems they once had a similar design idea in mind but it didn't make to final design apparently, at least for your second question.

This update is actually nice and is in the right direction in my opinion but it's still not as convenient as Sidebery.

Thanks for the follow-up! I realised after making the post that the spacer is just a simple display: none to apply after getting the tag with the toolbox, so that I managed to do.

As for the rest, it's unfortunate, but I'll tag the post as "not possible". Thanks for letting me know and for trying :D

Hi again!

1. As far as I see, separating tabs from sidebar is not possible currently. However you can use an extension like sidebery and modify Firefox's sidebar from CSS. Sidebery itself is quite customizable.

2. Same as 1.

3. That space doesn't exist for me and I cannot replicate it on two of my devices. It could be related to Windows' own window decoration. I'm on Linux, so no idea.

Sorry, couldn't help with your requests.

I too have a heavily modified CSS and love to use vertical tabs for a while. However, I haven't updated yet and will revisit this post tomorrow, hopefully.

No idea about the new UI so won't be able to comment now. My current setup is, replacing sidebar entirely with Sidebery and disabling the sidebar via CSS. I just hope I don't have to change this, or at least adapt my setup into this. Sidebery is pretty customizable.

Also I'm pretty sure that space can be removed via CSS.

Good night, for now. :)

MrOtherGuy has promptly fixed this breakage. Many thanks :)

For more details see Commit ddba754... and associated GitHub repo Issue #661 - "floating_findbar_on_top.css" no longer working - the findbar is at the bottom again and barely visible'.

Thank you very much for the reply and pointer to your own updated scrollbars style 'scrollable_menupopups.css'... which I had somehow managed to miss for at least the last 3 years... all whilst recommending your excellent repo's contents to others on numerous occasions!

More information on the recent changes to scrollbar styling in GitHub repo Issue #654 'scrollable_menupopups.css in V154 V155'.

Likely a facet of human nature not to look for alternative solutions to a problem that has already been solved.

I believe this is basically the same issue as this one for why scrollable menupopups style stopped working in fx 155. I managed to get my style working again, but with a limitation that the popup list can't be scrolled with keyboard anymore.

The same path should work in Firefox, just with mozilla/firefox/ instead of librewolf/librewolf/.

Or are you surprised by it being stored under ~/.config/? That's a quite recent change: https://lemmy.ml/post/39240208

Are you on Windows? On Windows, filename capitalization in general does not matter.
But OP seems to be on Linux. I just tried it on Linux with the filename as "userchrome.css" and it was not loaded.

I would've been very surprised, if it did work on Linux, macOS etc., because to my knowledge, as a software engineer, there is no way to implement that without a second filesystem access, which would've delayed startup.
Nowadays, you even have to set a about:config flag, specifically because they don't even want the first filesystem access to try to load the file...

Using a capital 'C' in 'userChrome.css' and userContent.css file names is a longstanding convention... but not a requirement.

Edit: CSS userChrome modifications work normally in Firefox on Windows OS' with a small 'c' in the 'userchrome.css' file name... unable to test if this also applies for macOS and Linux installations.

Not using LW, but in FF there's an about.config. item called 'toolkit.legacyUserProfileCustomizations.stylesheets' that has to manually turned to 'true' to work.

I don't like the FF setup (userChrome levels buried deep in the .mozilla folder), must be nice to have it handier like that.

I will check this out when i get a chance! Thanks!

Hmm, not a lot to go off of then.

Can you just go through these steps to see if anything isn't set up correctly?
https://www.userchrome.org/how-create-userchrome-css.html

You can also check via the Browser Toolbox, whether the file gets loaded.
In the "Style Editor" tab, you can filter the list on the left and if "userChrome.css" isn't listed there, then it didn't get loaded.

If it is listed in the Style Editor, then something about your rules is broken. You might be missing !important in places.
Or your CSS rules might not target the right classes/ids/variables anymore. For example, I had a breakage about a month ago, because they renamed the CSS variable --toolbarbutton-inner-padding to --toolbarbutton-padding-inner.

It is. The above is a typo. I suffer from a condition called Hamhands.

The file has to be called userChrome.css, with a capital C.