"Staff Color" post notice CSS improvements

I noticed on mobile staff color on a post didn’t had margins. Also made some small improvements on desktop version.

I am happy to do a PR but I’m not really sure where to find desktop/mobile CSS.

Made the following changes:

desktop

.moderator .regular>.cooked {
    margin-left: 8px;
}

mobile

.moderator .regular>.cooked {
    padding-top: 1em;
    padding-left: 1em;
}

old vs new

On desktop, just aligned start of the block with the username as it seemed more pleasing to the eye. (rounded corners are local, I removed that from the code above but will add them in the template I wrote asap)

And on mobile, fixed paddings to make text centered


3 Likes

Can this be reproduced on meta? Can a mod add ‘staff color’ to this post?

EDIT: Can confirm the issue appears to be on meta too here & here to force mobile version (refresh after clicking to load mobile)

This is my first PR to core, please check if it’s according to standards. But this PR should make this smoother:

3 Likes

I agree that the alignment of the box isn’t ideal, but I’d really like to preserve the text alignment and post width if possible… the indent shifts that left alignment, and also makes the post content more narrow than other posts

3 Likes

I agree with your opinion.

How about example below. Changed the colors to make the details more clear for testing purposes.

1 Like

That looks nice to me. @awesomerobot ?

2 Likes

yep, that alleviates my concerns — thanks @MarcP!

1 Like