FF94: How to reduce vertical spacing in hamburger menu?

[DSperber]

Little by little, I manage to find proper CSS to overcome each GUI step backwards forced upon us for some reason by the FF team. What was wrong with the way it was??

Anyway, I've recently been annoyed by the huge amount of white space between lines in the dropdown hamburger menu:



Does somebody have a CSS snippet to shrink the vertical spacing between items, to "tighten" it up?

Also, not that it's as important but if you have another CSS snippet to change (a) the background color and font color for inactive items, and (b) background color and font color for the "active" item as move the mouse up and down and hover the mouse over hamburger menu items, that would be great as well.

Note that I already have CSS to do both of these things on both Menu Bar dropdowns as well as Bookmarks Toolbar dropdowns. So for consistency it would be nice if I could get the hamburger menu dropdown to be just as "tight" and with a light-gray background and black font for inactive items, and pale blue background with glowing blue font for "hovered-over" or selected items, like this:



TIA

[limp]

Code: Select all

/* Hamburger menu background and text color */

   #appMenu-multiView panelview
     { background-color: #ddd !important;
       color: #000 !important; }

/* Vertical distance between hamburger menu items */

   .subviewbutton, .subviewbutton-nav
     { padding-top: 2.5px !important;
       padding-bottom: 2.5px !important; }

/* Hamburger menu mouseover behavior */

   .subviewbutton:hover,
   .subviewbutton-nav:hover
     { background-color: #add8e6 !important;
       color: #00a2ed !important;
       font-weight: bold !important; }

[costark]

If limp's doesn't work MY MENU items are Closer via jscher2000 ....
https://www.userchrome.org/firefox-89-s ... enuspacing

Note: Found an old note that the about:config entry that (at the time) got Rid of the Top Sites Thumbnails WHITE BORDER -- ALSO Fixed SPACING in MENU. See IF you have FALSE for -- browser.newtabpage.activity-stream.newNewtabExperience.enabled -- Try Below IF Yes....

Per above URL .....
Ref the first padding block: 4px I have 2px but am not sure things change now as prior with FF 94 DNA.
Play with #s and see if it matters.

/*** Tighten up drop-down/context/popup menu spacing (8 Sep 2021) ***/

menupopup:not(.in-menulist) > menuitem,
menupopup:not(.in-menulist) > menu {
padding-block: 4px !important; /* reduce to 3px, 2px, 1px or 0px as needed */
min-height: unset !important; /* v92.0 - for padding below 4px */
}
:root {
--arrowpanel-menuitem-padding: 4px 8px !important;
}

[DSperber]

@limp,

MANY MANY THANKS! Your suggestion produced essentially perfect results, given that you didn't know precisely my personal values for the several colors in my other menu/dropdown/item code as demonstrated in my screenshots.

So, I've made tiny tweaks to the values you provided, tightened up the vertical spacing just a tad, and now the hamburger menu behaves and looks like my other menus. Can't thank you enough.



Here is my CSS code, just slightly altered from what you originally provided.

Code: Select all

/* Hamburger menu light-gray background and black text color */
#appMenu-multiView panelview
  { background-color: #eaeaea !important;
    color: #000 !important; }

/* Vertical distance between hamburger menu items */
.subviewbutton, .subviewbutton-nav
      { padding-top: 2.0px !important;
        padding-bottom: 2.0px !important; }

/* Hamburger menu mouseover behavior pale blue background glowing blue normal text */
.subviewbutton:hover,
  .subviewbutton-nav:hover
    { background-color: #e8eefd !important;
      color: #3d3dff !important;
      font-weight: normal !important; }

[karenanne]

Let me ask as a complete ignoramus, I see that code from limp, but I have no idea where it goes, etc, Thanks.

Too much white space seems to be a widespread disease.

[morat]

How to Create a userChrome.css File
http://www.userchrome.org/how-create-us ... e-css.html

Remember to set the toolkit.legacyUserProfileCustomizations.stylesheets preference to true, then restart.

Troubleshooting userChrome.css: http://forums.mozillazine.org/viewtopic ... #p14887480

[costark]

Let me ask as a complete ignoramus, I see that code from limp, but I have no idea where it goes, etc, Thanks.

Too much white space seems to be a widespread disease.

Karen, IF you decide to pursue making a CSS File, POST #15 in Thread Below is ANOTHER Beginner's GUIDE you should read TOO.
Note #3 in it for a required entry.

http://forums.mozillazine.org/viewtopic ... &t=3035420

CSS is / Was a good tool But Now has some disappearing values with each FF Ver Upgrade. I still have Old Style Yellow Bookmark Folders, Color Active / Inactive Tabs, Address Border color, and Color for Fwd-Back, Home, Refresh icons.
https://i.imgur.com/hwPqUPM.jpg

No faith the Top Sites Thumbnails will Lose the Big White Borders, previously Fixed via -- about: config --. Pursue as time & interest dictate.

[DSperber]

No faith the Top Sites Thumbnails will Lose the Big White Borders, previously Fixed via -- about: config --. Pursue as time & interest dictate.

Although the solution below is still a compromise from how it used to look, I think it's definitely still better than the default behavior since deprecating the old about:config tweak effect. At least there is now no large unused white border space. The thumbnails now occupy 100%.

This was discussed at length in this other thread about the same subject. Thanks to contributor @Jscher200, and the author of the eventual "winner" who was @dickvl. Sample screenshot of results in that thread.

This snippet goes in the userContent.css file, not in userChrome.css.

Code: Select all

/* about:home - about:newtab */
@-moz-document
  url-prefix(about:newtab),
  url-prefix(about:home) {
   .top-site-outer .tile .icon-wrapper {
     height: 100% !important;
     width: 100% !important;
   }
   .top-site-outer .default-icon,
   .top-site-outer .search-topsite {
     background-size: 100% !important;
     height: 100% !important;
     width: 100% !important;
  }
}

[costark]

--- This snippet goes in the userContent.css file, not in userChrome.css ---.

@DSperber .... YOU are a Saint! I never "absorbed" the Tiny Little Detail of-- userContent.css-- Vs Chrome, BUT All is Well again with No-Border Thumbnails!!
Many Thanks & All the Best to you!

[ltsnow]

This is interesting. I use both the nightly and release builds and the css code I already had in the nightly build took care of the hamburger spacing but the same code does not work in the release build. So I added the vertical spacing code posted here to the release build and it worked fine. There is obviously something in the nightly build that is different.

[dickvl]

In current Nightly builds all support for non Proton CSS code has been removed and only new code works, but @media (-moz-proton){} queries are no longer supported and you need to use only the CSS code without the enclosing @media queries.

I noticed this because my code for the Tab borders/separators stopped working in Nightly recently.