Size of notifications/alerts badge

[Gorbles]

Sorry, I don't know if this has been answered already, in a bit of a rush. But based on reading the styling guide thread, it looks like user-end CSS tweaks (without using something third-party like Stylish) are out-of-bounds, it's all palette-based stuff.

If that's true, is there anything that can be done with the readability of the notifications / alerts badge? I have a rather mainstream 1080p resolution and it is nigh-unreadable at a glance (this is a 5):

 

[The_J]

We can do CSS alterations. The main issue with the number at the bell icon is that I've not been able to figure out which element the number is. Everything what I've tried so far resulted in the whole bell being enlarged, which has some not-so-nice effects on the whole navigation bar.
If you have some skills in this area, and could identify which element it must be, then this would be greatly appreciated.

 

[Gorbles]

We can do CSS alterations. The main issue with the number at the bell icon is that I've not been able to figure out which element the number is. Everything what I've tried so far resulted in the whole bell being enlarged, which has some not-so-nice effects on the whole navigation bar.
If you have some skills in this area, and could identify which element it must be, then this would be greatly appreciated.

The pseudo-selector is:

.p-navgroup-link.badgeContainer:after

You should be able to tweak everything from there (including a negative margin-top to move it further up independently of the alert icon). It'll likely also affect the notifications on the conversations inbox as well (which would be ideal, I just don't have any so I haven't noticed it).

 

[The_J]

So thanks to @Gorbles I could not finally make this tweak.
Please let me know if you find the current change sufficient or not.

 

[Gorbles]

It's a bit top-heavy. I was investigating it myself (XenForo decided to read my notifications for me while I was messing around with selectors, so I lost them). What we need is vertical-align, and the pseudo-element should be inline-block, but in Chrome it appears to be being computed as a block (which means vertical-align will have no effect).

 

[The_J]

I figured, therefore I changed the line hight a bit. For me looks fine, but I don't know how it looks in other screen resolutions.

 

[Gorbles]

I figured, therefore I changed the line hight a bit. For me looks fine, but I don't know how it looks in other screen resolutions.

Got it, I think. Can ignore the vertical-align and whatever else, not sure why it's not being respected, but hey.

• Reduce line-height to 9px (this pulls the text up).
• Set the height to 1em (the pixels will calculated, but 1em should scale nicely).

 

[The_J]

With only:
line-height: 9px;
height: 1em;

I get

Which doesn't look too much different from before, I'm afraid.

If I also set the font-height to 15px (as right now), then the font will (obviously) reach out of the 9px line height.

 

[racha]

The J, have you tried changing the font size, too? In extra.less I've got:

.p-navgroup-link.badgeContainer:after
{
    font-size: 120%;
    line-height: 15px;
    height: 1em;
}

And I get:

Edit: failed to specify which template my edit was in.

 

[The_J]

font-size: 120%; line-height: 15px; height: 1em;

That's for me the result of that .

 

[Gorbles]

So this is what it looks like for me, specifically with those modifications, on Chrome. I'm going to have a little look at other browsers.

 

[The_J]

Yeah, that itself looks fine, but isn't exactly much bigger (if) than the default.

 

[Gorbles]

And this is it on Firefox (had to hack the pseudo-selector in because I don't actually have one right now - turns out that's easier on Firefox than in Chrome. Neat).

EDIT

Yeah, it's not a lot bigger, but it's at least readable now.

We can crank it up though. font-size: 16px works with line-height: 11px (keeping height at 1em), with my testing. I've attached how that looks (on Firefox) as well.

 

[The_J]

With:
font-size: 16px;
line-height: 11px;
height: 1em;

so... that's weird, no?
Maybe I really do have a small resolution here.

 

[Gorbles]

If its any consolation, it looks a lot better for me now (forgot to grab a screenshot)

What browser / OS combination are you using?

 

[The_J]

I'm on Kubuntu with the latest Firefox, screen resolution 1280x1024. I'm okay to leave it as is, if everyone else is happy.

After my Master thesis I vouched to never again do web-frontend, and this is the very reason...

 

[racha]

Not sure if you've changed anything since your last screenshot, The J, but I'm seeing pretty much the same thing here as in my screenshot (Windows 10 / Firefox latest / 1920x1080). IMHO it looks fine.

 

[The_J]

Ah, sorry, had forgotten to propagate it over the styles. Now I have the latest suggestion from Gorbles included everywhere.

 

[Lexicus]

This was also a problem for me but seems to be better now, at least on my desktop.

 

[Birdjaguar]

I'm on a 4k screen and will check as soon as I get an alert. hint hint