Embed server browser as main menu modal

Refactors the browser UI into a reusable `CO_Browser.create()` module and adds embedded modal styling so MULTIPLAYER opens inside the main menu instead of swapping to a separate view. Updates main-menu JS/CSS to host, animate, and route input for the browser panel while keeping nav and prompts in sync. On the C++ side, PrismaUI now drives browser show/hide and event dispatch through the main menu view, and `ServerBrowserBridge::SetView()` was added so bridge events target the active host view.
2026-07-07 17:35:15 +12:00
parent 2961eb6512
commit 9447bc308f
12 changed files with 1514 additions and 982 deletions
@@ -0,0 +1,67 @@
+/* Commonwealth Online — embedded server browser modal (host provides .browser-view) */
+
+.browser-view {
+  position: absolute;
+  top: 50%;
+  left: calc(50% + 48px * var(--co-ui-scale));
+  transform: translate(-50%, calc(-50% + 10px * var(--co-ui-scale)));
+  z-index: 11;
+  width: min(calc(1080px * var(--co-ui-scale)), calc(100vw - 80px * var(--co-ui-scale)));
+  height: min(calc(720px * var(--co-ui-scale)), calc(100vh - 120px * var(--co-ui-scale)));
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition:
+    opacity 220ms ease-out,
+    transform 220ms ease-out,
+    visibility 0ms linear 220ms;
+}
+
+.browser-view.is-open {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transform: translate(-50%, -50%);
+  transition:
+    opacity 220ms ease-out,
+    transform 220ms ease-out,
+    visibility 0ms linear 0ms;
+}
+
+.browser-view[hidden] {
+  display: none;
+}
+
+.browser-view .co-root {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  pointer-events: auto;
+}
+
+.browser-view .co-root.co-browser--embedded {
+  background: transparent;
+}
+
+.browser-view .co-panel {
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: auto;
+  height: auto;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .browser-view {
+    transform: translate(-50%, -50%);
+    transition: opacity 120ms ease-out, visibility 0ms linear 120ms;
+  }
+
+  .browser-view.is-open {
+    transition: opacity 120ms ease-out, visibility 0ms linear 0ms;
+  }
+}