#2537 Give flags a ring-shadow, to make the white parts visible

[mpsijm]

Fixes #2537.

The issue description suggested to add a border, but since this is seen as part of the width/height of the image, this messes up the ratio of the flag (same goes for padding btw, so I changed that to margin). So, I added a shadow instead. Note that the flags are now slightly smaller than they used to be because I used round rem values for width and height – I hope that's fine, and else we can still increase them :slightly_smiling_face: Same goes for the hardness of the shadow – 0.3 looks fine to me, but perhaps others have different opinions :smile:

Before	After

[vmcj]

It does fix the issue, but it looks strange that its the only item popping out (but probably nothing we can do about that..)

[mpsijm]

We could make the shadow smaller to lessen the effect, but there's a fine balance there, because if the shadow is too small, it still doesn't fix the issue. We could also use a non-fading box-shadow (like the "ring" in Tailwind), will try that tomorrow :slightly_smiling_face:

[mpsijm]

I changed the fading shadow into a solid 1px "ring"-shadow with hardness 0.2 (again, this can be changed). What do you think? :smile: Also note that this ring is now in the margin, so we may want to slightly increase this margin.

In the screenshot of Demoweb below, I manually changed the styling rules and replaced one of the UK flags with the Polish flag from the browser's Dev Console.

[nickygerritsen]

This looks great