Styling bookmarks bar separators - macOS
-
Hi all,
I've found some code to tighten the bookmark bar icons:
.bookmark-bar button { padding: 0 1px !important; }
But, it removed the padding around separators as well -- so now they are 1px against the icons on their left. This looks messy, especially with favicons that are square or use the full 16x16 space.
I haven't found the css element for the separators, to set their padding independently. Tried the DevTools panel, but can't get the selector to work to inspect the UI. (I'm on macOS.)
Is it possible to style the separators independently from the favicons?
Thanks for any assistance!
B
-
@bmuse
What separators? I do not see any separators between bookmark buttons. I use that code that you posted, and I see icon, space, text, space, next icon, and so on. -
Separators are added manually -- right-click on a bookmark and in the context menu is "New Separator," which adds the separator line.
The code I posted (found it either here or Reddit) reduces the padding between bookmark buttons. I'm hoping to give the separators a different padding from the favicons/folders.
-
@bmuse The separators are spans with a separate class:
They are also positioned absolute (for some reason) and use border-left so you'll need to use margin, not padding. The buttons use flex with a gap of 6px, you'll need to set that as well to cram everything as close as possible.
.bookmark-bar button .separator { margin: 0 10px; position: relative; } .bookmark-bar button { padding: 0; gap: 0; }