Some nav tab and media upload CSS broken in colors.css/wp-admin.css merge

[TobiasBg]

#18380 broke some CSS (bottom border, background color) in the nav tabs (from the old themes.php) and in the tabs in the old media uploader, see screenshots.

The attached patch fixes this.

[TobiasBg]

Nav tabs are missing bottom border

[TobiasBg]

Media upload tabs miss background color and border

[TobiasBg]

Re-add background-color and border-bottom

[TobiasBg]

Reason for the media uploader issue is that colors.css#L717 was only merged for #plugin-information-header but not for #media-upload-header, to wp-admin.css#L10979.

For the nav tabs, it's a mixture of changed border-(bottom-)color and border-(bottom-)width properties during the merge.

[helen]

I'm not having the issue with the nav tabs bottom border elsewhere - the border-bottom you removed is for an individual tab, not the entire wrapper. Where are you seeing this?

[helen]

Also, I would go with just border-bottom as per before with div#media-upload-header - uploaded an amended patch for you to go from if we need to do more for the nav tab issue you described.

[TobiasBg]

Yes, the removed bottom border is for the individual tabs. This becomes necessary once the tabs wrap to two lines (due to their number). In that case, there's no .nav-tab-active tab (which explicitely has a bottom border) that then basically pushes all the other ones up one pixel.
I'm using HTML like the following in a plugin (coming from the themes.php HTML for this from previous releases). You can try it with this <h2> title on any admin screen (i.e. replace the first <h2> in the div.wrap in the Chrome Dev Tools, then reduce the browser width to make the tabs wrap):

<h2 class="nav-tab-wrapper">
<a class="nav-tab nav-tab-active" href="http://...">Foobar</a><a class="nav-tab" href="http://...">Foobar</a><a class="nav-tab" href="http://...">Foobar</a><a class="nav-tab" href="http://...">Foobar</a><a class="nav-tab" href="http://...">Foobar</a>
<a class="nav-tab" href="http://...">Foobar</a><a class="nav-tab" href="http://...">Foobar</a><a class="nav-tab" href="http://...">Foobar</a><a class="nav-tab" href="http://...">Foobar</a><a class="nav-tab" href="http://...">Foobar</a>
</h2>

For the Thickbox tabs:
You are right,border-bottom is correct here. I had accidentally remove -bottom as well and didn't notice that it adds the border around the entire #media-upload-header as the colors are pretty similar.

[TobiasBg]

Corrected patch

[helen]

Wrapped tabs, before patch

[helen]

Wrapped tabs, after patch

[helen]

I'm not convinced that it looks any better to leave the border there. I uploaded some screenshots - I don't know how you're getting the image you attached. Horizontal tabs have responsive issues, yes, but I don't think the merge broke anything there.

[TobiasBg]

It will look worse if the text in the tabs has different lengths, as the tabs then overlap in a different way.
Also, this is a regression, as the tabs look like in your "after patch" screenshot in WP 3.8, so we should restore that look.

[helen]

Replying to TobiasBg:

Also, this is a regression, as the tabs look like in your "after patch" screenshot in WP 3.8, so we should restore that look.

Not seeing that - attached a screenshot from 3.8.1. There are two changes from your patch - there's the bottom border to the wrapper, yes, but then the other tabs above look like buttons, so that seems wrong.

[TobiasBg]

Background of top nav tab shines through into active tab

[TobiasBg]

Patch for old media upload thickbox and nav-tab-active background

[TobiasBg]

I think I know what I did here... My 3.8 test install was not on 3.8 anymore, for some reason... So, you are right. This does not happen on 3.8 and is therefore not a regression. The colors/wp-admin.css merge did not break anything here. I guess the tabs without the bottom border just looked weird to me. So, that part of the ticket is invalid. Sorry for the confusion.

However, while investigating this, I noticed another minor glitch (also not a regression, so no top priority), which is easy to fix: When the .nav-tab-active is in the bottom row of stacked tabs, the background of the non-active tabs spills into the active tab, as it's transparent. Its background color should simply become the same color as the bottom border.
See the attached screenshot.

Finally, we have the background in the old media upload thickbox (which you can confirm, if I understand correctly).

So, the new 27116.3.patch​ fixes that and the (newly discovered) .nav-tab-active glitch.

[TobiasBg]

Fix remaining background color spill

[TobiasBg]

nacin fixed the media uploader thickbox issue in [27181] for #26669 in the meantime.

The updated 27116.4.patch​ takes care of the background spill seen in nav-tab-active-background-shine-through.png​.

[helen]

Replying to TobiasBg:

The updated 27116.4.patch​ takes care of the background spill seen in nav-tab-active-background-shine-through.png​.

I'll manually apply the patch after #26669 is done - I'm most of the way through it so can't apply patches to wp-admin.css right now :)

[TobiasBg]

Refreshed patch after wp-admin.css split

[helen]

In 27749:

Ensure active tabs have a background color to avoid any awkward bleed-through in case of overlap. props TobiasBg. fixes #27116.