ddidderr/lanspread
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

docs: update launcher design for profile and server actions

Browse Source 
Document the profile settings added to the launcher design and the new
Start Server detail action. The settings contract now includes a persisted
username and language choice, and the game detail overlay shows Start Server
only for installed games that can host a dedicated server.

The reference mock now includes the matching Profile controls, a server icon,
server-capable sample catalog entries, and the updated detail/settings
artboards so implementation can follow the selected design direction.

Test Plan:
- git diff --cached --check

Refs: design/README.md
This commit is contained in:
ddidderr
2026-05-21 09:23:05 +02:00
parent 12a0d7abe9
commit 91c709960a
5 changed files with 186 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
design/design_reference/styles.css
+48
View File
@@ -630,6 +630,22 @@
}
.act-download:hover { background: rgba(255,255,255,0.12); border-color: var(--bd-3); }
/* Start Server — secondary "primary" action sitting next to Play.
Uses the accent as a tinted fill + border so it reads as host-action
without competing with the green Play button. */
.act-server {
color: var(--t-1);
background: color-mix(in srgb, var(--accent) 14%, rgba(255,255,255,0.04));
border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.act-server:hover {
background: color-mix(in srgb, var(--accent) 22%, rgba(255,255,255,0.04));
border-color: color-mix(in srgb, var(--accent) 75%, transparent);
filter: none;
}
.act-server svg { color: var(--accent); }
/* ─── Download progress (in place of action button when state === 'downloading') ─── */
.dl {
position: relative;
@@ -1135,3 +1151,35 @@
color: white;
box-shadow: 0 2px 8px -2px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.18);
}
/* ─── Settings: text input ─── */
.settings-text {
display: inline-flex;
align-items: center;
background: var(--bg-3);
border: 1px solid var(--bd-1);
border-radius: 8px;
padding: 0 12px;
height: 36px;
width: 220px;
transition: border-color .15s, box-shadow .15s, background .15s;
}
.settings-text:focus-within {
background: var(--bg-2);
border-color: var(--accent, #3b82f6);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent, #3b82f6) 22%, transparent);
}
.settings-text input {
flex: 1; min-width: 0;
background: transparent;
border: 0; outline: 0;
color: var(--t-1);
font: inherit;
font-size: 13.5px;
font-weight: 600;
letter-spacing: 0.1px;
}
.settings-text input::placeholder {
color: var(--t-3);
font-weight: 500;
}