Image Library needs some love

[laryn]

While looking at https://github.com/backdrop-contrib/gin/issues/95 I see that the image library browser needs some love. See screenshots in that issue, and also noting that dark mode also has some core CSS poking through.

EDIT: Changes made on this issue include:

• Overriding the image library to use the "medium" format instead of "thumbnail"
• Displaying a square/cropped version of the image, which changes to a small view of the full image on hover
• Adjusting styles for images and selections
• Greying out non-selected images when a selection is made (yay :has()!)

[laryn]

I made a first pass at some improvements here, not yet including the pager (which has it's own issue linked above):

[stpaultim]

I am going to reopen this issue, because I think this is related. After updating GIN on my test site, I'm seeing this CSS poking through with a border that shouldn't be there.

@laryn

I don't remember seeing this before.

[olafgrabienski]

@stpaultim Do you mean the blue outline? This is only visible when the field has focus. I see this also with Gin 1.x-3.0.0-alpha8.

[laryn]

That does look like the :focus outline, which is important for accessibility so keyboard navigators know where they are on the page.

[stpaultim]

I'll do some additional testing. I didn't notice this before and suddenly it was very obvious.

[laryn]

I made a minor adjustment here, and closing for now -- reopen if I've missed something.