diff --git a/src/WorldshaperLauncher.tsx b/src/WorldshaperLauncher.tsx index 1ff37f8..c0f446b 100644 --- a/src/WorldshaperLauncher.tsx +++ b/src/WorldshaperLauncher.tsx @@ -100,33 +100,45 @@ function WorldshaperLauncher() { style={{ "--launcher-background-image": `url(${launcherBackground})` } as CSSProperties} >
-
-

New RPG

-

Worldshaper Studio

-

{status}

- {launchState === "blocked" ? ( -

- Allow the popup, then use the studio button again to launch the floating editor window. -

- ) : null} - {launchState === "opened" ? ( -

- The studio is open in its own slim window. This page stays behind as your release board and relaunch point. -

- ) : null} - {launchState === "ready" ? ( -

- The editor is designed to live in its own floating window, so the launcher keeps the first step clean. -

- ) : null} - {error ?

{error}

: null} -
- - +
+
+
Worldshaper Studio
+
Floating editor launch
+
+
+
+
+

New RPG

+

Worldshaper Studio

+

{status}

+
+
+ {launchState === "blocked" ? ( +

+ Allow the popup, then use the studio button again to launch the floating editor window. +

+ ) : null} + {launchState === "opened" ? ( +

+ The studio is open in its own slim window. This page stays behind as your release board and relaunch point. +

+ ) : null} + {launchState === "ready" ? ( +

+ The editor is designed to live in its own floating window, so the launcher keeps the first step clean. +

+ ) : null} + {error ?

{error}

: null} +
+ + +
+
+
diff --git a/src/index.css b/src/index.css index 68663b0..cc24731 100644 --- a/src/index.css +++ b/src/index.css @@ -69,19 +69,43 @@ body { gap: 18px; } -.launcher-card { +.launcher-hero-window, +.launcher-changelog-window { + border: 1px solid #4f79af; + border-radius: 12px; + background: color-mix(in srgb, #0a1020 88%, transparent); + color: #d8e8ff; + box-shadow: 0 16px 34px rgba(3, 8, 18, 0.46); + overflow: hidden; + display: grid; + grid-template-rows: 34px minmax(0, 1fr); + backdrop-filter: blur(10px); +} + +.launcher-hero-window { justify-self: center; width: min(620px, 100%); - padding: 28px 30px; - border: 1px solid rgba(120, 170, 230, 0.2); - border-radius: 20px; - background: - radial-gradient(circle at top left, rgba(92, 200, 255, 0.13), transparent 38%), - linear-gradient(180deg, rgba(18, 24, 35, 0.86) 0%, rgba(12, 17, 26, 0.94) 100%); - backdrop-filter: blur(12px); - box-shadow: - 0 28px 80px rgba(0, 0, 0, 0.46), - inset 0 1px 0 rgba(255, 255, 255, 0.04); +} + +.launcher-hero-body { + padding: 12px; +} + +.launcher-hero-card { + display: grid; + gap: 12px; +} + +.launcher-hero-banner { + min-height: 0; +} + +.launcher-hero-support { + padding: 12px 14px; + border: 1px solid #365782; + border-radius: 12px; + background: rgba(17, 32, 63, 0.84); + box-shadow: inset 0 0 0 1px rgba(10, 16, 32, 0.14); } .launcher-eyebrow { @@ -123,20 +147,11 @@ body { display: flex; flex-wrap: wrap; gap: 10px; - margin-top: 18px; + margin-top: 16px; } .launcher-changelog-window { width: min(760px, 100%); - border: 1px solid #4f79af; - border-radius: 12px; - background: color-mix(in srgb, #0a1020 88%, transparent); - color: #d8e8ff; - box-shadow: 0 16px 34px rgba(3, 8, 18, 0.46); - overflow: hidden; - display: grid; - grid-template-rows: 34px minmax(0, 1fr); - backdrop-filter: blur(10px); } .launcher-changelog-titlebar { @@ -1391,16 +1406,11 @@ button.danger:not(:disabled):hover { } .launcher-stack, - .launcher-card, + .launcher-hero-window, .launcher-changelog-window { width: 100%; } - .launcher-card { - padding: 22px 20px; - border-radius: 16px; - } - .launcher-actions { flex-direction: column; }