UCP CSS changes

This is a list of changes that will/may need to be made to wikis when transitioning to UCP Phase 1. Document any changes that will need to be made here.
== Different/renamed classes ==
The class/id names of the following have been changed or removed:
* .thumbimage has been changed to .thumb, meaning any modifications to thumb will need the class changed.
* .article-table remains and has new styling entirely from Fandom. Coloration will need overwriting in CSS so wikis can make use of this class.
* #WikiaArticle has been changed to #content.
* There are a few other changes in the tree of elements that wrap the content, so selectors have to be re-checked. For example, the class .mw-content-text was removed, but the id #mw-content-text still exists on the same element, along with a class about the content language direction.
* The dedicated element #WikiaPageBackground does not exist anymore. It is possible to apply background properties to elements in the main HTML tree (in particular, #WikiaPage or .WikiaPageContentWrapper), but since all page content elements are their descendants, it limits some options such as applying transparency.
== Differences ==
=== Infoboxes ===
These are mostly the same, though the image tabs, at .pi-image-collection-tabs now has a top and bottom margin, that may need removing depending on the wiki.
=== Edit buttons ===
The edit buttons have entirely different look with both edit and edit source buttons. These are contained in the .mw-editsection in order to edit it. Any modifications to the previous classes such as .sprite.edit-pencil will not be present, and new modifications will be needed.
=== Edit windows ===
Because the entire edit window is now in a new modal, any CSS affecting #editarea will need to be removed and rethought entirely, as it can cause the page to break.
=== Dark theme ===
.oasis-dark-theme does not work on UCP (phase 1). As an alternative, it is recommended to make CSS variables for dark/light theme equivalents, and then just comment/uncomment when switching between them.
== See also ==
* UCP JavaScript changes
Category:Guides