Twenty Seventeen: Pictures of a gallery, viewed live in the Customizer have a dark border

[transl8or]

I created a page and post with a gallery.
When viewing that post in the Customizer, (with default settings = light color scheme,) the images show a dark border.

Also the link to the media file, like i have set in the gallery, does really link to the media file, even though the mouse cursor looks like a stop sign now in the Customizer and indicates the images should actually not be clickable. (Clicking on a gallery photo in the Customizer makes it difficult to get back to the live preview then.)

[afercia]

@transl8or good catch, thanks! Looks like the relevant CSS rule in colors-dark.css misses the .colors-dark selector:

.entry-content a img,
.widget a img {
	-webkit-box-shadow: 0 0 0 8px #222;
	box-shadow: 0 0 0 8px #222;
}

[afercia]

The attached patch looks good to me. Needs a permanent committer approval :)

[transl8or]

@afercia Thanks for the patch.
But I'm not sure if it's completly fixed. Have you tried switching the color scheme to dark?
I get white frames around the photos now (just the other way round, like it was before) :)

[ocean90]

38969.diff​ doesn't work for me, see the above screenshot by @transl8or.

Related issue: Because of the box-shadow override for .entry-content a the .gallery-item a rule with box-shadow: none doesn't work anymore, see 38969-dark-gallery.png​.

[afercia]

@ocean90 @transl8or have you tried to empty your browser's cache? The patch works for me. Browser's cache can be aggressive in the Customizer, especially when using Chrome.

Re: the related issues, I've noticed them as well. Pretty evident when hovering the linked images, and a white dot is always visible in the bottom right corner:

Also, I'm not 100% sure the CSS applied to link and images is correct, shouldn't be crafted in a way images are always 100% wide to take all the link space? Currently, depending on the thumbnail size and number of columns in the gallery, there's some empty space on the right. Also, not sure what happens when the default thumbnail size (150) is smaller than the width of the link set by the CSS.

[afercia]

This is what happens with a thumbnail size set to 110x110, notice the link is ~158 pixels wide in my case, this is set by the gallery CSS, while the thumbnail is resized in the browser to 110x110:

[laurelfulford]

The hover style issue should be fixed in 38969.1.diff​. There were some gallery-specific styles to remove the drop-shadow that needed to be repeated, to override the link styles again.

[laurelfulford]

38969.2.diff​ adds a fix for the gallery link width issue - it replaces a width: 100% on the gallery links with a max-width: 100%. The width was originally added in #38872 to fix a display issue in IE11; max-width works as a fix to that issue, too (phew!).

[davidakennedy]

I tested the latest patch from @laurelfulford – 38969.2.diff​ and it fixes the two main issues in this ticket. This should be good to go.

Also the link to the media file, like i have set in the gallery, does really link to the media file, even though the mouse cursor looks like a stop sign now in the Customizer and indicates the images should actually not be clickable. (Clicking on a gallery photo in the Customizer makes it difficult to get back to the live preview then.)

@transl8or I see that as well, but I don't think that's a theme issue.

[davidakennedy]

In 39418:

Twenty Seventeen: Fix style issues with gallery image links

• Ensures dark color scheme has proper box shadow and hover/focus styles.
• Make sure links are correct width.

Props afercia, laurelfulford.

Fixes #38969.

[helen]

In 39422:

Twenty Seventeen: Fix style issues with gallery image links

• Ensures dark color scheme has proper box shadow and hover/focus styles.
• Make sure links are correct width.

Props afercia, laurelfulford.

Fixes #38969 for the 4.7 branch.