Massive Upgrade Status CSS cleanup to be compatible with more admin themes

Worked on this a bit today. Here is an attached patch that removes a lot of the custom styles and instead uses the standard classes from Claro. The Gin theme also supports those standard classes. The result looks good in Claro I think as-is, even though it looses some custom styling, I think its fine for the greater good. It also looks fine in Gin as-is. I also attempted to gut Gin of all the upgrade status styling (it has it at various places!), and its not markedly different, so most of those styles could be removed. What's definitely lost then is the select all checkbox border. The custom icons from Gin are lost either way due to the new more standard class names on table rows. Either way, a LOT of Gin CSS could be dropped following this Upgrade Status patch. I am wondering how to coordinate that?

This looks awesome @Gabor, nice work 👏

Somehow this happened on 3.x, should have been done on 4.x. Sweat smile :D

Gábor Hojtsy → changed the visibility of the branch 3307587-remove-custom-background to hidden.

This version renames the wrapper classes to still sensible names, that are different from the prior ones. So no change in Gin (or other admin themes) is required to adop this, but its using the standard classes that Claro also understands. Cut down the custom styling to the very minimal, so it can be as widely compatible as possible. Also found a bunch of outdated items, including a counter template file that is unused.

Attached the screenshots in Claro, Gin light and Gin dark. The only thing remaining for Gin is the tableselect header row class missing to add the respective border like the items rows. That does not seem to be possible to add via the render array (the Gin templates don't support table header classing either). So not sure how to fix that one, but it would be great to be able to without requiring a Gin release.

Added this to support Gin's table styling better. So this does not require any Upgrade Status specific styling now in Gin (and does not conflict or let the existing Upgrade Status styles bleed in).

/* Based on --gin-border-m and --gin-border-color-table-header */
.upgrade-status-of-environment .gin-layer-wrapper thead tr,
.upgrade-status-next-step .gin-layer-wrapper thead tr {
  border-left: .5rem solid rgba(0, 0, 0, .2);
}
html.gin--dark-mode .upgrade-status-of-environment .gin-layer-wrapper thead tr,
html.gin--dark-mode .upgrade-status-next-step .gin-layer-wrapper thead tr {
  border-left: .5rem solid rgba(255, 255, 255, .12);
}

Here is a full comparison of before/after in Claro and Gin dark and light.

Claro also looks a LOT more native with the non-Claro looking styling removed. The only thing that Claro "looses" is the custom background colors for some of the next step tables (and next step links), but those were very hard to support across multiple admin themes, as they may or may not fit into the other theme. So this uses the 3 standard colors now.

Gin really shines due to the wide use of native elements and controls instead of a lot of custom styles we had. The dark more (full page and dialog) is especially improved. Gin "looses" the custom icons in the dialog but it gains the standard table cell coloring and hover behaviour that is used elsewhere in Gin.

So I think all in all this is a big win for Claro and Gin :)

Gábor Hojtsy → credited mglaman → .

Also crediting @mglaman for help with the table styling.

And committed! Thanks all! <3

Automatically closed - issue fixed for 2 weeks with no activity.