administrator/Worldshaper
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Match launcher hero to release panel

Browse source
This commit is contained in:
Andraxion 2026-06-26 22:01:43 -04:00
parent 8176c414a8
commit 6c6b1295a3
2 changed files with 76 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/WorldshaperLauncher.tsx
View file

@ -100,10 +100,19 @@ function WorldshaperLauncher() {
style={{ "--launcher-background-image": `url(${launcherBackground})` } as CSSProperties}
>
<div className="launcher-stack">
<section className="launcher-card">
<section className="launcher-hero-window" aria-labelledby="launcher-studio-title">
<div className="launcher-changelog-titlebar">
<div className="launcher-changelog-title">Worldshaper Studio</div>
<div className="launcher-changelog-hint">Floating editor launch</div>
</div>
<div className="launcher-hero-body">
<div className="launcher-hero-card">
<div className="changelog-splash-hero launcher-hero-banner">
<p className="launcher-eyebrow">New RPG</p>
<h1 className="launcher-title">Worldshaper Studio</h1>
<h1 className="launcher-title" id="launcher-studio-title">Worldshaper Studio</h1>
<p className="launcher-status">{status}</p>
</div>
<div className="launcher-hero-support">
{launchState === "blocked" ? (
<p className="launcher-hint">
Allow the popup, then use the studio button again to launch the floating editor window.
@ -128,6 +137,9 @@ function WorldshaperLauncher() {
Open Repo
</button>
</div>
</div>
</div>
</div>
</section>
<section className="launcher-changelog-window" aria-labelledby="launcher-whats-new-title">
<div className="launcher-changelog-titlebar">

64
src/index.css
View file

@ -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;
}