How to Enlarge Button/Icon Background Shadow

[FineWine]

I wish to enlarge the background shadow by 2px or 4px of my Bookmarks on my PersonalToolbar and personal-bookmarks Bookmarks Toolbar, which are all on the same level, when on Hover and Active. I am talking about the actual size of the shadow box.

I have tried various methods but none work. I believe I am talking about toolbarbutton-active-background and toolbarbutton-hover-background.

I have tried various Selectors, ID's and elements:

toolbarbutton-badge
box-shadow
box-sizing: border-box;

To name a few and, well, I am having no luck.

[FineWine]

I am talking about a light grey box that appears behind the bookmark on hover. In the below screen shot it is behind the geekzone bookmark. I wish to increase its size just by a few pixels all round.

[morat]

I would think increasing the padding would increase the background shadow.

Code: Select all

#PersonalToolbar .bookmark-item {
  padding: 8px !important;
}

CSS Box Model
http://www.w3schools.com/css/css_boxmodel.asp

[FineWine]

Thank you #morat.

5px did the trick.

[FineWine]

Spoke too soon.

That mucks up the line spacing in #PlacesChevronPopup bookmarks overflow menu because it increases the hover highlight width. In otherwords distance between bookmarks items in the list has now exponentially widened. I thought this might fix it but I don't think it has:

Code: Select all

#PersonalToolbar .bookmark-item:not(#PlacesChevronPopup .bookmark-item) {
  padding: 5px 3px 2px 3px !important;
}

It was suggested in http://www.reddit.com/r/FirefoxCSS/ that the following might work, it does not:

Code: Select all

#PersonalToolbar .bookmark-item:not(.subviewbutton) {
  padding: 5px 3px 2px 3px !important;
}

[FineWine]

Ok I have got it now:

Code: Select all

#PlacesToolbarItems > .bookmark-item {
  padding: 5px 3px 2px 3px !important;
}