Refactor top-level HUD to use a flexbox layout allowing the separate UI elements to be aware of each other

[Fyorl]

Originally in GitLab by @Fyorl

To address cases where the separate UI elements on the HUD need to be able to react to changes in other elements, we have opted to move the entire HUD into a top-level flexbox layout.

The layout consists of three columns: section.ui-left contains the logo, the scene controls, and the player list; section.ui-middle contains the scene navigation menu, the AV UI elements, and the hotbar; and section.ui-right contains the sidebar. To facilitate this, the body has also been given a display of flex. Some screenshots are attached which illustrate this.

Modules which hide or manipulate existing HUD elements may need to adjust the way in which they are doing so in order to avoid unintentionally affecting unrelated elements now. Additionally, modules which hook into renderSceneControls and inject their own HTML there will find that the structure has changed slightly. The left-most list of controls has been given the ol.main-controls class, and the remaining ol.sub-controls exist as sibling elements to ol.main-controls now rather than being nested under it. Modules that were using the getSceneControlButtons hook to do this instead should be unaffected.

Modules that add their own top-level UI elements using fixed positioning should be largely unaffected, though it should now be easier to integrate into the main HUD and have the other HUD elements move around your own without large, intrusive re-writes to the HUD layer.