Add quit confirmation to main menu

Implement a quit confirmation dialog that appears when the QUIT button is selected on the main menu. The dialog displays 'EXIT GAME?' with YES/NO options. YES sends a coAction quit request to the plugin, which hides the overlay, disconnects any active server session, and sets RE::Main::quitGame to exit the game. NO returns to the main menu. Includes full keyboard (arrow keys, Enter, Escape), gamepad (dpad, A/B buttons), and mouse support. Default selection is NO.
2026-07-07 22:33:33 +12:00
parent 549c117818
commit 2a3e614a47
7 changed files with 379 additions and 7 deletions
@@ -441,3 +441,89 @@ body {
    ),
    rgba(4, 8, 6, 0.32);
 }
+
+/* Quit confirmation modal */
+
+.quit-confirm {
+  position: absolute;
+  inset: 0;
+  z-index: 12;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: calc(24px * var(--co-ui-scale));
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition:
+    opacity 220ms ease-out,
+    visibility 0ms linear 220ms;
+}
+
+.quit-confirm.is-open {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transition:
+    opacity 220ms ease-out,
+    visibility 0ms linear 0ms;
+}
+
+.quit-confirm[hidden] {
+  display: none;
+}
+
+.quit-confirm__dialog {
+  width: min(calc(420px * var(--co-ui-scale)), calc(100vw - 80px * var(--co-ui-scale)));
+  padding:
+    calc(32px * var(--co-ui-scale))
+    calc(36px * var(--co-ui-scale))
+    calc(28px * var(--co-ui-scale));
+  background: rgba(6, 12, 8, 0.9);
+  border: 1px solid rgba(201, 168, 74, 0.35);
+  box-shadow:
+    inset 0 0 28px rgba(0, 0, 0, 0.35),
+    0 8px 32px rgba(0, 0, 0, 0.45);
+}
+
+.quit-confirm__title {
+  margin-bottom: calc(24px * var(--co-ui-scale));
+  font-size: calc(28px * var(--co-ui-scale));
+  font-weight: 700;
+  letter-spacing: 0.22em;
+  text-align: center;
+  color: var(--co-amber);
+}
+
+.quit-confirm__options {
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-menu-gap);
+}
+
+.quit-confirm__option .menu-item__bar {
+  left: 0;
+  width: 100%;
+}
+
+.main-screen.is-quit-confirm-mode .scene-overlay {
+  background:
+    linear-gradient(
+      90deg,
+      rgba(6, 10, 8, 0.92) 0%,
+      rgba(6, 10, 8, 0.72) 35%,
+      rgba(6, 10, 8, 0.55) 60%,
+      rgba(6, 10, 8, 0.65) 100%
+    ),
+    rgba(4, 8, 6, 0.42);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .quit-confirm {
+    transition: opacity 120ms ease-out, visibility 0ms linear 120ms;
+  }
+
+  .quit-confirm.is-open {
+    transition: opacity 120ms ease-out, visibility 0ms linear 0ms;
+  }
+}