Customizer and Theme Installer spinners should have different z-index

[afercia]

My bad, I think this has to do with some previous changes I've made on these spinners. Looks like after [36518] the "loading" spinner in the Customizer is hidden, at least in some browsers.

While the spinners used in the Customizer and in the Theme installer are basically the same and so the CSS rule for them was grouped in just one rule in [36518], I think the only CSS property that has to be different is z-index. As far as I see, the Theme installer needs a value of -1 but this will hide the spinner in the Customizer so it has to be 0 here.

The fix would be trivial but I'd greatly appreciate some testing to confirm the issue, in different browsers.

[afercia]

Opacity (on the iframe) and transform (on the spinner) can create ​new stacking contexts so I'd be inclined to simplify. Don't see a good reason for all the z-index used here.

[celloexpressions]

Yeah, the z-index situation here is pretty messy, so it's hard to tell what should be necessary vs. excessive.

[afercia]

In the proposed patch, a minimal approach that removes z-index where not necessary. The spinner is now a CSS pseudo element natively stacked above the full overlay and below the iframe. No need for z-index. As far as I've tested, should work in all browser except the Theme installer in IE because IE doesn't allow iframe transparency when the iframe src attribute is set to an external domain.

Places where to check the patch:

• the "customize container" which opens for example when clicking "Customize" on the currently active theme in "Themes" (actually there are 2 spinners here, the first one initially displayed in the center of the page and then a second one in the right frame preview)
• the standard Customizer right frame preview, for example clicking "Customize" on the toolbar from the front end
• the Theme installer (Themes > Add New > Details & Preview on any theme and then browse themes

[celloexpressions]

This patch needs testing and careful CSS review to move forward.