Firefox 57, how do I change font size of text on extensions

I am looking for a way reduce the size of text displayed on the icons of extensions. As an example of what I want to do, the following image shows the icon for Adguard in Firefox on the left and in Chrome on the right.



I want to change the font size so that it is closer the size in Chrome, if it is possible to do so. I do not want to change the font size for web pages, only for extensions.

 

I haven't done it in case I can't get it back how it is now but if you right click above the address bar > Customise, you can drag it down. Does that enlarge the toolbar icons?

 

@Krusty I don't want to change the icon size, just the text.

 

Yeah, I know. Was just a thought. I'd be interested to know too.

... Watching.

 

That would require modifying the extension itself. Even if that's done, will the extension still work? I'm thinking about the requirement that extensions are to be "signed".

 

@vasa1 But the font size is the same for all extensions used, rather than being individual.

 

I get your point. Thanks for clarifying!

 

I'm pretty sure the only way to do that is to edit the CSS; I haven't. The following links aren't specific to changing the extension text size:

https://www.ghacks.net/2017/11/13/customize-firefox-57-with-css/

https://www.userchrome.org/

ETA relevant thread:

https://www.wilderssecurity.com/threads/how-can-i-make-firefox-57-toolbars-fonts-bold.397927/

 

Okay, I went into developer tools and got this code:

Code:

.toolbarbutton-badge {
  background-color: #d90000;
  font-size: 18px !important;
  padding: 0 2px 1px;
  color: #ff00ff !important;
  border-radius: 2px;
  box-shadow: 0 1px 0 hsla(0, 100%, 100%, .2) inset,
              0 -1px 0 hsla(0, 0%, 0%, .1) inset,
              0 1px 0 hsla(206, 50%, 10%, .2);
  margin: -6px 0 0 !important;
  margin-inline-end: -8px !important;
  min-width: 14px;
  max-width: 28px;
  line-height: 10px;
  text-align: center;
  -moz-stack-sizing: ignore;
}

The line with "font-size" seems to be determinative. Since my existing font on the "badge" was tiny, I made it larger. This code goes into my Firefox profile in the "chrome" subfolder in a file called "userChrome.css". Everything is case-sensitive. In case the chrome subfolder doesn't exist, you'll have to create it.

In the image I'm attaching, the uBlock origin icon is behind the number 10! The other icon is that of Stylus showing that one style is active on the page.

 

@vasa1

 

Thanks. This is what have at the moment:

Code:

.toolbarbutton-badge {
  font-weight: normal !important;
  font-size: 7.3px !important;
  padding: -10px 022px 0px 022px !important;
  margin: 11px 0 0 !important;
  margin-inline-end: -8px !important;
  line-height: 10px;
}

I now have the font size how I want it. When I want to do and haven't been able to figure out how to do so, is to make the border around the text smaller.

 

I think you could reduce the padding from 22px for both left and right. I haven't tried anything but integers but since 7.3px works for you, that's great! I think you can play around fearlessly so long as you keep a record of what's being done

 

I spent a lot of time messing around this morning and could not figure out how to reduce the borders. Changing the padding does nothing.

 

Please try this:

Code:

.toolbarbutton-badge {
  background-color: #5CFF5C;
  font-size: 10px !important;
  padding: none !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  min-width: 1px !important;
  max-width: 28px;
  line-height: 10px;
  text-align: center;
  -moz-stack-sizing: ignore;
}

But the numbers are not centered vertically.

 

Thanks for that I now have it looking very similar to Chrome, with the following:

Code:

.toolbarbutton-badge {
  font-weight: normal !important;
  font-size: 7.3px !important;
  padding: none !important;
  margin: 11px 0 0 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  min-width: 1px !important;
  max-width: 28px;
  line-height: 10px;
  text-align: center;
  -moz-stack-sizing: ignore;
}

 

For my own interest, I fiddled a bit more:

Code:

.toolbarbutton-badge {
  background-color: #5CFF5C;
  font-size: 10px !important;
  padding: 2px 2px 0 2px !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  min-width: 1px !important;
  max-width: 28px;
  line-height: 10px;
  text-align: center;
/*  -moz-stack-sizing: ignore;*/
}

and here is a somewhat blurry image because it's a blow-up.

 

I have made some more changes, and I'm really happy with the way it looks now.

Code:

.toolbarbutton-badge {
  font-weight: normal !important;
  font-size: 8px !important;
  padding: 0px 3px 0 3px !important;
  margin: 11px 4 0 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  min-width: 1px !important;
  max-width: 28px;
  line-height: 10px;
  text-align: center;
  -moz-stack-sizing: ignore;
}