The padding around a thumbnail image that produces the whitespace between it and the border was declared using ems. Ems are only a relative unit when the font-size is adjusted. As the thumbnails themselves scale in size, the padding looks too large for small thumbnails and too small for large thumbnails. I've changed the padding to a percentage base so that the matte between the image and the border adjusts with the size of the thumbnail.

I also grouped the styles using CSSDOC @group comments for better organization.

CommentFileSizeAuthor
#2 913764_thumbnail_padding_change_2.patch0 bytesjessebeach
#1 913764_thumbnail_padding_change.patch1.06 KBjessebeach

Comments

jessebeach’s picture

jessebeach commented
StatusFileSize
new 913764_thumbnail_padding_change.patch1.06 KB

Outdated, please ignore.

jessebeach’s picture

jessebeach commented
StatusFileSize
new 913764_thumbnail_padding_change_2.patch0 bytes

I removed padding from the image and left it with just width and height properties. The padding moves to the wrapper around the image and type icon (just video has an icon at the moment) to be consistent with how thumbnails are padded in non-overlay contexts.

james.elliott’s picture

james.elliott commented
Status: Needs review » Needs work

Patch is empty

james.elliott’s picture

james.elliott commented
Status: Needs work » Closed (fixed)

This was committed as part of #915356: Various small CSS tweaks