ddidderr
640214ec38
Replace the previous monolithic 900-line `App.tsx` launcher UI with the
Steam-inspired dark redesign specified in `design/README.md` (handoff
committed in the previous commit). The new UI is split across small,
single-responsibility React modules instead of one file.
What changes from the user's perspective
----------------------------------------
- Dark, gradient-tinted background with sticky 64px top bar (glass blur
+ saturate). Single-row chrome (handoff variant A).
- Pill-style filter toggle (`All Games` / `Local` / `Installed`) with an
animated thumb that slides between options.
- Search field with magnifying-glass icon and a `/` keyboard shortcut to
focus it from anywhere outside an input.
- Sort menu (Name A–Z / Size / Status) as a dropdown.
- Game directory button shows the current path with leading-ellipsis
truncation; clicking it opens the native folder picker.
- Kebab menu hosts Settings, Refresh library, and Unpack logs (existing
companion window). The standalone Unpack-Logs button is removed from
the chrome.
- Game grid uses CSS `auto-fill` minmax with three density presets
(compact / normal / large) and three cover aspects (box / square /
banner), persisted via the Settings dialog.
- Game cards render with the real thumbnail when the backend has one
(via `get_game_thumbnail`) and fall back to a procedurally-generated
gradient + accent-blob placeholder with a Bebas Neue title burned in.
Each card carries a color-coded state chip (Installed = green,
Downloaded = amber, busy = pulsing accent), a peers chip when at
least one peer holds the game, the title, size · genre meta line, a
status line (errors in red), and a single color-coded primary action
button: Play (green gradient), Update / Install (accent), Download
(neutral), animated "busy" spinner during in-flight operations, or a
disabled "Unavailable" state when no peer has the game.
- Clicking anywhere on a card except the action button opens a detail
modal: 16:7 hero (uses the thumbnail), state chip, tag pills derived
from genre/publisher/release_year, large title, 4-cell meta grid
(size, players from `max_players`, version from `local_version` or
`eti_game_version` formatted YYYY.MM.DD, status), description, and an
action row with the primary action plus an Uninstall ghost-danger
button when the game is installed. Esc, scrim click, and the close
button all dismiss the modal.
- Settings dialog (opened from the kebab menu) lets the user change the
accent color (six swatches), background style (flat / gradient /
animated), grid density, and cover aspect. Changes apply live and
persist immediately to the Tauri store under `launcher-settings.json`
(key `ui-settings`); the existing `game-directory` key in the same
file is unchanged.
- Empty state when no directory is chosen offers a centered prompt with
a single CTA. Empty state when filters/search match nothing shows a
distinct "Nothing matches" message.
Why this approach
-----------------
The handoff selected variant A (single-row chrome) explicitly, so only
that variant is implemented; variant B underlined tabs and the
storage-meter widget are intentionally omitted (no free-space data
available from the backend yet).
Real cover art from `get_game_thumbnail` is preferred over the
placeholder generator. When a thumbnail is present, the Bebas Neue
title overlay is suppressed because shipped cover art already has its
own title. When the thumbnail is absent, the placeholder gradient (with
per-id stable hue/blob/angle) plus the burned-in title takes over —
this is the same procedural look as the design reference.
Architecture / file layout
--------------------------
The previous single-file design is decomposed top-down:
```
src/
main.tsx entry; loads tokens + launcher CSS
App.tsx thin router (main vs. unpack-logs view)
styles/
tokens.css CSS custom props + body reset
launcher.css port of the design reference styles.css
(single-row chrome only)
windows/
MainWindow.tsx composition root: top bar + grid + modals
lib/
types.ts Game, InstallStatus, GameAvailability,
ActiveOperationKind, GameFilter / GameSort,
DerivedState
gameState.ts derive() + isUnavailable + needsUpdate +
primaryActionFor + actionLabel +
mergeGameUpdate (event reconciliation) +
countByFilter + applyFilterAndSort
format.ts formatBytes, formatEtiVersion (YYYYMMDD),
truncatePath, formatPlayers
cover.ts coverColorsFor(id) — stable palette pick +
gradient angle + blob position from id
hash; titleFontSize
store.ts file + key constants for plugin-store
hooks/
useSettings.ts UISettings + accent/bg/density/aspect/
sort/filter, persisted via plugin-store
useGameDirectory.ts loads + persists the chosen directory and
pushes it to update_game_directory
useGames.ts owns the games list; listens to every
backend event (games-list-updated,
game-download-begin/finished/failed/
peers-gone, game-no-peers, game-install-
begin/finished/failed, game-uninstall-
begin/finished/failed, peer-count-updated);
exposes markChecking with a 5s fallback to
clear "Checking peers…" when nothing comes
back from the backend
useGameActions.ts play / install / update / uninstall
wrappers around the corresponding invoke
commands
useThumbnails.ts lazy per-id cache for get_game_thumbnail
components/
Icon.tsx inline SVG icon set (currentColor)
Brand.tsx brand mark + name + peer-count chip
Modal.tsx generic scrim + panel + Esc handler
StateChip.tsx corner pill with state-coded dot
ActionButton.tsx color-coded primary action; disabled when
unavailable; spinner when busy
SegmentedRadio.tsx generic 3-way segmented control
ColorSwatchPicker.tsx 6-swatch picker with check overlay
topbar/
TopBar.tsx chrome composition
SegmentedFilters.tsx All / Local / Installed with sliding thumb
SearchField.tsx input + `/` shortcut
SortMenu.tsx dropdown sort selector
DirectoryButton.tsx folder picker trigger
KebabMenu.tsx generic dropdown menu
grid/
ResultsBar.tsx "Showing N of M games"
GameGrid.tsx CSS-grid wrapper
GameCard.tsx full card composition
GameCover.tsx thumbnail OR placeholder cover art
modals/
GameDetailModal.tsx hero + meta grid + actions
SettingsDialog.tsx appearance + library preferences
empty/
NoDirectoryState.tsx onboarding CTA
EmptyResultsState.tsx "scanning" / "nothing matches"
```
`UnpackLogsWindow.tsx` and its CSS are untouched — the unpack-logs
companion window is rendered as before via the existing `?view=unpack-
logs` route in `App.tsx`.
The previous `App.css` is removed entirely (its styles are superseded
by `styles/launcher.css`).
Bebas Neue is loaded via Google Fonts in `index.html` (preconnect +
swap), used for the brand mark and the placeholder cover-art titles.
Tradeoffs and intentional omissions
-----------------------------------
- Storage meter: omitted. The handoff specifies installed/local/free
bytes, but no Tauri command currently provides free-space data.
- Variant B (two-row chrome with underline tabs): omitted; the handoff
picked variant A.
- "View files" action in the detail modal: omitted. The backend doesn't
expose per-game install paths and `shell.open` of the user-chosen
root directory would be misleading.
- "Delete from disk" ghost-danger action for `local` games: omitted.
No backend command currently distinguishes "delete downloaded
archive" from `uninstall_game`. Only installed games get an Uninstall
button.
- "Recently Played" sort: omitted (no play-time tracking yet). The sort
menu offers Name / Size / Status instead.
- Keyboard arrow grid navigation: not yet implemented (out of scope per
the handoff).
- Per-game progress bar during downloads/installs: not implemented; the
action button shows a spinner + "Downloading…" / "Installing…" label
instead, matching the existing event-driven status text.
Persistence
-----------
UI preferences (accent, bg, density, aspect, sort, filter) live in
`launcher-settings.json` under a new `ui-settings` key. The existing
`game-directory` key in the same file is preserved untouched, so users
keep their previously selected directory.
Test plan
---------
Frontend build verified locally:
cd crates/lanspread-tauri-deno-ts && deno task build
→ `tsc && vite build` completes with no diagnostics; bundle ~228 kB.
Manual verification (recommended once the app boots end-to-end):
- [ ] Launch with no directory set: only the "Pick a game directory"
empty state is visible; clicking the button opens the native
folder picker.
- [ ] Pick a directory: top bar appears, grid populates as games arrive.
- [ ] Click the All / Local / Installed pills: the thumb slides; the
count chips reflect the right subset.
- [ ] Press `/`: focus moves to the search input; type a substring and
confirm the grid filters live.
- [ ] Open the Sort menu, switch between sorts; the grid reorders.
- [ ] Open the Settings dialog from the kebab: change accent → the
thumb, brand mark, search-focus ring, and Install button all
switch color live. Change density → grid card size changes.
Change cover aspect → cards re-shape (2/3, 1/1, 16/9). Close and
reopen: choices are remembered.
- [ ] Click anywhere on a card except the action button → detail modal
opens with the right metadata; Esc / scrim click / close button
all dismiss it.
- [ ] Click the action button on an `installed` card → game launches.
- [ ] Click the action button on a `local` card → install starts;
button shows the spinner + "Installing…".
- [ ] Click on a `none` card with peer_count > 0 → download starts; the
lifecycle events update the button label correctly.
- [ ] Card for a game with peer_count == 0 and not downloaded → button
reads "Unavailable" and is disabled.
- [ ] Trigger a `game-download-failed` from the backend: the error
status line appears under the card title in red.
- [ ] Open Unpack Logs from the kebab: the companion window opens
exactly as before.
Trailer
-------
Refs: design/README.md (canonical handoff), design/design_reference/
1250 lines
24 KiB
CSS
1250 lines
24 KiB
CSS
/* Launcher root */
|
|
.launcher {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--bg-0);
|
|
color: var(--t-1);
|
|
overflow: hidden;
|
|
position: relative;
|
|
isolation: isolate;
|
|
}
|
|
|
|
.bg-flat {
|
|
background: var(--bg-0);
|
|
}
|
|
.bg-gradient {
|
|
background:
|
|
radial-gradient(
|
|
ellipse 80% 50% at 50% -10%,
|
|
color-mix(in srgb, var(--accent) 22%, transparent) 0%,
|
|
transparent 60%
|
|
),
|
|
linear-gradient(180deg, #0c1218 0%, var(--bg-0) 100%);
|
|
}
|
|
.bg-animated {
|
|
background:
|
|
radial-gradient(
|
|
ellipse 60% 40% at 20% 0%,
|
|
color-mix(in srgb, var(--accent) 24%, transparent) 0%,
|
|
transparent 55%
|
|
),
|
|
radial-gradient(
|
|
ellipse 55% 40% at 85% 8%,
|
|
color-mix(in srgb, var(--accent) 16%, transparent) 0%,
|
|
transparent 55%
|
|
),
|
|
linear-gradient(180deg, #0c1218 0%, var(--bg-0) 100%);
|
|
background-size: 100% 100%;
|
|
animation: bgshift 18s ease-in-out infinite alternate;
|
|
}
|
|
@keyframes bgshift {
|
|
0% {
|
|
background-position: 0% 0%, 0% 0%, 0% 0%;
|
|
}
|
|
100% {
|
|
background-position: 10% 4%, -6% 2%, 0% 0%;
|
|
}
|
|
}
|
|
|
|
/* Top bar */
|
|
.topbar {
|
|
position: relative;
|
|
z-index: 10;
|
|
background: rgba(10, 14, 19, 0.65);
|
|
-webkit-backdrop-filter: blur(20px) saturate(140%);
|
|
backdrop-filter: blur(20px) saturate(140%);
|
|
border-bottom: 1px solid var(--bd-1);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 18px;
|
|
padding: 14px 24px;
|
|
flex-wrap: nowrap;
|
|
min-height: 64px;
|
|
}
|
|
|
|
/* Brand */
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-shrink: 0;
|
|
}
|
|
.brand-mark {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 7px;
|
|
display: grid;
|
|
place-items: center;
|
|
background: var(--accent);
|
|
font-family: var(--font-display);
|
|
font-size: 20px;
|
|
letter-spacing: 0.02em;
|
|
color: white;
|
|
box-shadow:
|
|
0 6px 20px -6px color-mix(in srgb, var(--accent) 60%, black),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.22);
|
|
}
|
|
.brand-name {
|
|
font-weight: 700;
|
|
font-size: 15px;
|
|
letter-spacing: -0.005em;
|
|
color: var(--t-1);
|
|
}
|
|
|
|
/* Peer count chip in brand area */
|
|
.brand-peers {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
height: 24px;
|
|
padding: 0 10px;
|
|
margin-left: 6px;
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border: 1px solid var(--bd-1);
|
|
font-size: 11.5px;
|
|
font-weight: 600;
|
|
color: var(--t-2);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.brand-peers-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 999px;
|
|
background: var(--ok);
|
|
box-shadow: 0 0 6px var(--ok);
|
|
}
|
|
|
|
/* Segmented filters */
|
|
.seg {
|
|
position: relative;
|
|
display: inline-flex;
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--bd-1);
|
|
border-radius: 999px;
|
|
padding: 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
.seg-thumb {
|
|
position: absolute;
|
|
top: 4px;
|
|
bottom: 4px;
|
|
border-radius: 999px;
|
|
background: var(--accent);
|
|
transition:
|
|
left 0.22s cubic-bezier(0.4, 1.2, 0.5, 1),
|
|
width 0.22s cubic-bezier(0.4, 1.2, 0.5, 1);
|
|
box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--accent) 60%, black);
|
|
}
|
|
.seg-btn {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 16px;
|
|
background: transparent;
|
|
color: var(--t-2);
|
|
border: 0;
|
|
border-radius: 999px;
|
|
font: inherit;
|
|
font-weight: 600;
|
|
font-size: 12.5px;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
transition: color 0.15s;
|
|
}
|
|
.seg-btn:hover {
|
|
color: var(--t-1);
|
|
}
|
|
.seg-btn.is-active {
|
|
color: white;
|
|
}
|
|
.seg-count {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
padding: 1px 6px;
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
color: inherit;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.seg-btn.is-active .seg-count {
|
|
background: rgba(0, 0, 0, 0.25);
|
|
color: white;
|
|
}
|
|
|
|
/* Search */
|
|
.search {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 0 12px;
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--bd-1);
|
|
border-radius: 8px;
|
|
height: 36px;
|
|
min-width: 320px;
|
|
flex: 0 1 380px;
|
|
color: var(--t-3);
|
|
transition:
|
|
border-color 0.15s,
|
|
background 0.15s,
|
|
box-shadow 0.15s,
|
|
color 0.15s;
|
|
}
|
|
.search:focus-within {
|
|
border-color: color-mix(in srgb, var(--accent) 60%, var(--bd-2));
|
|
background: var(--bg-1);
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
|
|
color: var(--t-1);
|
|
}
|
|
.search input {
|
|
flex: 1;
|
|
min-width: 0;
|
|
background: transparent;
|
|
border: 0;
|
|
outline: 0;
|
|
color: var(--t-1);
|
|
font: inherit;
|
|
font-size: 13px;
|
|
}
|
|
.search input::placeholder {
|
|
color: var(--t-3);
|
|
}
|
|
.search-kbd {
|
|
display: inline-grid;
|
|
place-items: center;
|
|
min-width: 18px;
|
|
height: 18px;
|
|
padding: 0 5px;
|
|
border-radius: 4px;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border: 1px solid var(--bd-1);
|
|
font-size: 11px;
|
|
color: var(--t-3);
|
|
font-family: var(--font-mono);
|
|
}
|
|
.search:focus-within .search-kbd {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
/* Sort menu */
|
|
.sort {
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
}
|
|
.sort-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
height: 36px;
|
|
padding: 0 12px;
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--bd-1);
|
|
border-radius: 8px;
|
|
color: var(--t-2);
|
|
font: inherit;
|
|
font-size: 12.5px;
|
|
cursor: pointer;
|
|
transition:
|
|
border-color 0.15s,
|
|
color 0.15s;
|
|
}
|
|
.sort-btn:hover {
|
|
color: var(--t-1);
|
|
border-color: var(--bd-2);
|
|
}
|
|
.sort-btn strong {
|
|
color: var(--t-1);
|
|
font-weight: 600;
|
|
}
|
|
.sort-menu {
|
|
position: absolute;
|
|
top: calc(100% + 6px);
|
|
right: 0;
|
|
z-index: 50;
|
|
min-width: 200px;
|
|
padding: 4px;
|
|
background: var(--bg-3);
|
|
border: 1px solid var(--bd-2);
|
|
border-radius: 10px;
|
|
box-shadow:
|
|
0 16px 40px -8px rgba(0, 0, 0, 0.5),
|
|
0 0 0 1px rgba(255, 255, 255, 0.04);
|
|
}
|
|
.sort-menu button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
width: 100%;
|
|
padding: 8px 10px;
|
|
background: transparent;
|
|
border: 0;
|
|
border-radius: 6px;
|
|
color: var(--t-1);
|
|
font: inherit;
|
|
font-size: 12.5px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
.sort-menu button:hover {
|
|
background: rgba(255, 255, 255, 0.06);
|
|
}
|
|
.sort-check {
|
|
width: 14px;
|
|
display: inline-grid;
|
|
place-items: center;
|
|
color: var(--accent);
|
|
}
|
|
|
|
/* Directory button */
|
|
.dirbtn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
height: 36px;
|
|
padding: 0 12px;
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--bd-1);
|
|
border-radius: 8px;
|
|
color: var(--t-2);
|
|
font: inherit;
|
|
font-size: 12.5px;
|
|
cursor: pointer;
|
|
max-width: 360px;
|
|
transition:
|
|
border-color 0.15s,
|
|
color 0.15s;
|
|
flex-shrink: 1;
|
|
min-width: 0;
|
|
}
|
|
.dirbtn:hover {
|
|
border-color: var(--bd-2);
|
|
color: var(--t-1);
|
|
}
|
|
.dirbtn-label {
|
|
color: var(--t-1);
|
|
font-weight: 600;
|
|
flex-shrink: 0;
|
|
}
|
|
.dirbtn-path {
|
|
color: var(--t-3);
|
|
font-family: var(--font-mono);
|
|
font-size: 11.5px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Kebab menu */
|
|
.kebab {
|
|
position: relative;
|
|
}
|
|
.kebab-btn {
|
|
width: 36px;
|
|
height: 36px;
|
|
display: grid;
|
|
place-items: center;
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--bd-1);
|
|
border-radius: 8px;
|
|
color: var(--t-2);
|
|
cursor: pointer;
|
|
transition:
|
|
color 0.15s,
|
|
border-color 0.15s;
|
|
}
|
|
.kebab-btn:hover {
|
|
color: var(--t-1);
|
|
border-color: var(--bd-2);
|
|
}
|
|
.kebab-menu {
|
|
position: absolute;
|
|
top: calc(100% + 6px);
|
|
right: 0;
|
|
z-index: 50;
|
|
min-width: 180px;
|
|
padding: 4px;
|
|
background: var(--bg-3);
|
|
border: 1px solid var(--bd-2);
|
|
border-radius: 10px;
|
|
box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.5);
|
|
}
|
|
.kebab-menu button {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 8px 10px;
|
|
background: transparent;
|
|
border: 0;
|
|
border-radius: 6px;
|
|
color: var(--t-1);
|
|
font: inherit;
|
|
font-size: 12.5px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
.kebab-menu button:hover {
|
|
background: rgba(255, 255, 255, 0.06);
|
|
}
|
|
.kebab-sep {
|
|
height: 1px;
|
|
background: var(--bd-1);
|
|
margin: 4px 0;
|
|
}
|
|
|
|
/* Grid wrapper / results bar */
|
|
.grid-wrap {
|
|
flex: 1;
|
|
overflow: auto;
|
|
padding: 18px 24px 32px;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--bd-3) transparent;
|
|
}
|
|
.grid-wrap::-webkit-scrollbar {
|
|
width: 10px;
|
|
}
|
|
.grid-wrap::-webkit-scrollbar-thumb {
|
|
background: var(--bd-3);
|
|
border-radius: 5px;
|
|
border: 2px solid transparent;
|
|
background-clip: content-box;
|
|
}
|
|
|
|
.results-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 4px 4px 16px;
|
|
gap: 16px;
|
|
}
|
|
.results-count {
|
|
color: var(--t-2);
|
|
font-size: 12.5px;
|
|
}
|
|
.results-count strong {
|
|
color: var(--t-1);
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Grid */
|
|
.grid {
|
|
display: grid;
|
|
gap: var(--card-gap, 16px);
|
|
grid-template-columns: repeat(auto-fill, minmax(var(--card-min, 188px), 1fr));
|
|
}
|
|
.density-compact {
|
|
--card-min: 148px;
|
|
--card-gap: 12px;
|
|
}
|
|
.density-normal {
|
|
--card-min: 188px;
|
|
--card-gap: 16px;
|
|
}
|
|
.density-large {
|
|
--card-min: 244px;
|
|
--card-gap: 20px;
|
|
}
|
|
|
|
/* Card */
|
|
.card {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
|
|
border: 1px solid var(--bd-1);
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
transition:
|
|
transform 0.18s cubic-bezier(0.4, 1.2, 0.5, 1),
|
|
border-color 0.18s,
|
|
box-shadow 0.18s;
|
|
outline: 0;
|
|
text-align: left;
|
|
padding: 0;
|
|
font: inherit;
|
|
color: inherit;
|
|
}
|
|
.card:hover,
|
|
.card:focus-visible {
|
|
transform: translateY(-2px);
|
|
border-color: color-mix(in srgb, var(--accent) 45%, var(--bd-2));
|
|
box-shadow:
|
|
0 14px 30px -16px color-mix(in srgb, var(--accent) 50%, black),
|
|
0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
|
|
}
|
|
.card:focus-visible {
|
|
box-shadow:
|
|
0 14px 30px -16px color-mix(in srgb, var(--accent) 50%, black),
|
|
0 0 0 2px var(--accent);
|
|
}
|
|
|
|
/* Cover */
|
|
.card-cover-wrap {
|
|
position: relative;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
background: var(--bg-3);
|
|
}
|
|
.card-cover-wrap[data-aspect="box"] {
|
|
aspect-ratio: 2 / 3;
|
|
}
|
|
.card-cover-wrap[data-aspect="square"] {
|
|
aspect-ratio: 1 / 1;
|
|
}
|
|
.card-cover-wrap[data-aspect="banner"] {
|
|
aspect-ratio: 16 / 9;
|
|
}
|
|
|
|
.cover {
|
|
position: absolute;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
transition: transform 0.35s cubic-bezier(0.4, 1.2, 0.5, 1);
|
|
}
|
|
.card:hover .cover {
|
|
transform: scale(1.03);
|
|
}
|
|
.cover-image {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
.cover-base,
|
|
.cover-blob,
|
|
.cover-grain,
|
|
.cover-vignette,
|
|
.cover-mark {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
}
|
|
.cover-grain {
|
|
background-image:
|
|
repeating-linear-gradient(
|
|
0deg,
|
|
rgba(255, 255, 255, 0.018) 0 1px,
|
|
transparent 1px 3px
|
|
),
|
|
repeating-linear-gradient(
|
|
90deg,
|
|
rgba(0, 0, 0, 0.04) 0 1px,
|
|
transparent 1px 3px
|
|
);
|
|
mix-blend-mode: overlay;
|
|
opacity: 0.7;
|
|
}
|
|
.cover-vignette {
|
|
background: linear-gradient(
|
|
180deg,
|
|
transparent 30%,
|
|
rgba(0, 0, 0, 0.62) 100%
|
|
);
|
|
}
|
|
.cover-mark {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.cover-titlewrap {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 2;
|
|
padding: 14px;
|
|
}
|
|
.cover-title {
|
|
font-family: var(--font-display);
|
|
font-weight: 400;
|
|
letter-spacing: 0.018em;
|
|
line-height: 1.02;
|
|
text-transform: uppercase;
|
|
color: white;
|
|
overflow-wrap: normal;
|
|
word-break: normal;
|
|
}
|
|
|
|
/* State chip */
|
|
.state-chip {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
z-index: 3;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 9px;
|
|
border-radius: 999px;
|
|
background: rgba(8, 12, 16, 0.78);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
backdrop-filter: blur(8px);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
font-size: 10.5px;
|
|
font-weight: 600;
|
|
color: var(--t-1);
|
|
letter-spacing: 0.01em;
|
|
}
|
|
.state-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 999px;
|
|
}
|
|
.state-chip[data-state="installed"] .state-dot {
|
|
background: var(--ok);
|
|
box-shadow: 0 0 8px var(--ok);
|
|
}
|
|
.state-chip[data-state="local"] .state-dot {
|
|
background: var(--warn);
|
|
box-shadow: 0 0 8px var(--warn);
|
|
}
|
|
.state-chip[data-state="busy"] .state-dot {
|
|
background: var(--accent);
|
|
box-shadow: 0 0 8px var(--accent);
|
|
animation: state-busy 1.2s ease-in-out infinite;
|
|
}
|
|
@keyframes state-busy {
|
|
0%,
|
|
100% {
|
|
opacity: 0.4;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Multiplayer / peers badge */
|
|
.card-mp {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
z-index: 3;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 4px 8px;
|
|
border-radius: 999px;
|
|
background: rgba(8, 12, 16, 0.65);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
backdrop-filter: blur(8px);
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
font-size: 10.5px;
|
|
font-weight: 600;
|
|
color: var(--t-1);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* Card body */
|
|
.card-body {
|
|
padding: 11px 12px 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
.card-title {
|
|
font-weight: 600;
|
|
font-size: 13.5px;
|
|
color: var(--t-1);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
letter-spacing: -0.005em;
|
|
}
|
|
.card-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 11.5px;
|
|
color: var(--t-3);
|
|
font-variant-numeric: tabular-nums;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
.card-meta .card-dot {
|
|
opacity: 0.5;
|
|
}
|
|
.card-status {
|
|
min-height: 14px;
|
|
font-size: 11px;
|
|
color: var(--t-3);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.card-status.is-error {
|
|
color: #f87171;
|
|
}
|
|
|
|
.density-compact .card-body {
|
|
padding: 9px 10px 10px;
|
|
gap: 6px;
|
|
}
|
|
.density-compact .card-title {
|
|
font-size: 12.5px;
|
|
}
|
|
.density-compact .card-meta {
|
|
font-size: 11px;
|
|
}
|
|
.density-large .card-body {
|
|
padding: 14px;
|
|
gap: 10px;
|
|
}
|
|
.density-large .card-title {
|
|
font-size: 15px;
|
|
}
|
|
|
|
/* Action buttons */
|
|
.act-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
height: 32px;
|
|
padding: 0 14px;
|
|
border-radius: 7px;
|
|
border: 0;
|
|
font: inherit;
|
|
font-weight: 600;
|
|
font-size: 12.5px;
|
|
letter-spacing: 0.005em;
|
|
cursor: pointer;
|
|
transition:
|
|
transform 0.12s,
|
|
filter 0.12s,
|
|
background 0.15s;
|
|
white-space: nowrap;
|
|
}
|
|
.act-btn:hover:not(:disabled) {
|
|
filter: brightness(1.12);
|
|
}
|
|
.act-btn:active:not(:disabled) {
|
|
transform: scale(0.98);
|
|
}
|
|
.act-btn:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.7;
|
|
}
|
|
.act-full {
|
|
width: 100%;
|
|
}
|
|
.act-lg {
|
|
height: 44px;
|
|
padding: 0 22px;
|
|
font-size: 14px;
|
|
gap: 8px;
|
|
border-radius: 8px;
|
|
}
|
|
.act-lg svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.act-play {
|
|
color: white;
|
|
background: linear-gradient(180deg, #2bd07f 0%, #1aa460 100%);
|
|
box-shadow:
|
|
0 6px 16px -8px #1aa460,
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.25);
|
|
}
|
|
.act-install,
|
|
.act-update {
|
|
color: white;
|
|
background: var(--accent);
|
|
box-shadow:
|
|
0 6px 16px -8px color-mix(in srgb, var(--accent) 80%, black),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.22);
|
|
}
|
|
.act-download {
|
|
color: var(--t-1);
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border: 1px solid var(--bd-2);
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
|
}
|
|
.act-download:hover:not(:disabled) {
|
|
background: rgba(255, 255, 255, 0.12);
|
|
border-color: var(--bd-3);
|
|
}
|
|
.act-busy {
|
|
color: var(--t-1);
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border: 1px solid var(--bd-1);
|
|
}
|
|
.act-busy::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 999px;
|
|
border: 1.6px solid color-mix(in srgb, var(--accent) 60%, transparent);
|
|
border-top-color: var(--accent);
|
|
animation: spin 0.9s linear infinite;
|
|
}
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
.act-disabled {
|
|
color: var(--t-3);
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid var(--bd-1);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Ghost / secondary buttons */
|
|
.ghost-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
height: 44px;
|
|
padding: 0 18px;
|
|
background: rgba(255, 255, 255, 0.04);
|
|
border: 1px solid var(--bd-2);
|
|
border-radius: 8px;
|
|
color: var(--t-1);
|
|
font: inherit;
|
|
font-size: 13.5px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition:
|
|
background 0.15s,
|
|
border-color 0.15s,
|
|
color 0.15s;
|
|
}
|
|
.ghost-btn:hover {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border-color: var(--bd-3);
|
|
}
|
|
.ghost-danger {
|
|
color: #f87171;
|
|
}
|
|
.ghost-danger:hover {
|
|
background: rgba(239, 68, 68, 0.1);
|
|
border-color: rgba(239, 68, 68, 0.4);
|
|
color: #fca5a5;
|
|
}
|
|
|
|
/* Modal */
|
|
.modal-scrim {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 100;
|
|
background: rgba(4, 7, 11, 0.7);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
backdrop-filter: blur(8px);
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 32px;
|
|
animation: fadein 0.18s ease;
|
|
}
|
|
@keyframes fadein {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.modal {
|
|
width: min(880px, 100%);
|
|
max-height: 100%;
|
|
background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
|
|
border: 1px solid var(--bd-2);
|
|
border-radius: 14px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
box-shadow:
|
|
0 30px 80px -10px rgba(0, 0, 0, 0.7),
|
|
0 0 0 1px rgba(255, 255, 255, 0.04);
|
|
display: flex;
|
|
flex-direction: column;
|
|
animation: modalin 0.25s cubic-bezier(0.3, 1.3, 0.4, 1);
|
|
}
|
|
@keyframes modalin {
|
|
from {
|
|
transform: scale(0.96) translateY(8px);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: scale(1) translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.modal-close {
|
|
position: absolute;
|
|
top: 14px;
|
|
right: 14px;
|
|
z-index: 5;
|
|
width: 32px;
|
|
height: 32px;
|
|
display: grid;
|
|
place-items: center;
|
|
background: rgba(8, 12, 16, 0.7);
|
|
border: 1px solid var(--bd-2);
|
|
border-radius: 8px;
|
|
color: var(--t-1);
|
|
cursor: pointer;
|
|
-webkit-backdrop-filter: blur(8px);
|
|
backdrop-filter: blur(8px);
|
|
transition:
|
|
background 0.15s,
|
|
border-color 0.15s;
|
|
}
|
|
.modal-close:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-color: var(--bd-3);
|
|
}
|
|
.modal-hero {
|
|
position: relative;
|
|
aspect-ratio: 16 / 7;
|
|
overflow: hidden;
|
|
background: var(--bg-3);
|
|
}
|
|
.modal-hero .cover {
|
|
transform: none !important;
|
|
}
|
|
.modal-hero-fade {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(180deg, transparent 40%, var(--bg-2) 100%);
|
|
pointer-events: none;
|
|
}
|
|
.modal-hero-text {
|
|
position: absolute;
|
|
left: 28px;
|
|
right: 28px;
|
|
bottom: 22px;
|
|
z-index: 2;
|
|
}
|
|
.modal-hero-text .modal-title {
|
|
font-family: var(--font-ui);
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.015em;
|
|
color: white;
|
|
margin: 6px 0 0;
|
|
text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
|
|
}
|
|
.modal-tags {
|
|
display: flex;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.modal-tag {
|
|
display: inline-block;
|
|
padding: 3px 8px;
|
|
background: rgba(8, 12, 16, 0.6);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
backdrop-filter: blur(8px);
|
|
border: 1px solid var(--bd-2);
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
color: var(--t-1);
|
|
}
|
|
.modal-state {
|
|
position: absolute;
|
|
top: 18px;
|
|
left: 24px;
|
|
z-index: 3;
|
|
}
|
|
.modal-state .state-chip {
|
|
position: static;
|
|
font-size: 11.5px;
|
|
padding: 5px 11px;
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 22px 28px 26px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
overflow: auto;
|
|
}
|
|
.modal-meta {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 12px;
|
|
}
|
|
.meta-cell {
|
|
padding: 10px 12px;
|
|
background: rgba(255, 255, 255, 0.025);
|
|
border: 1px solid var(--bd-1);
|
|
border-radius: 8px;
|
|
}
|
|
.meta-label {
|
|
font-size: 10.5px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--t-3);
|
|
}
|
|
.meta-value {
|
|
margin-top: 4px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--t-1);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.meta-mono {
|
|
font-family: var(--font-mono);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.modal-desc {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
line-height: 1.55;
|
|
color: var(--t-2);
|
|
text-wrap: pretty;
|
|
max-width: 64ch;
|
|
white-space: pre-wrap;
|
|
}
|
|
.modal-status {
|
|
margin: 0;
|
|
font-size: 13px;
|
|
color: var(--t-2);
|
|
padding: 10px 12px;
|
|
background: rgba(255, 255, 255, 0.025);
|
|
border: 1px solid var(--bd-1);
|
|
border-radius: 8px;
|
|
}
|
|
.modal-status.is-error {
|
|
color: #f87171;
|
|
border-color: rgba(239, 68, 68, 0.4);
|
|
background: rgba(239, 68, 68, 0.08);
|
|
}
|
|
.modal-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding-top: 4px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.modal-actions-spacer {
|
|
flex: 1;
|
|
}
|
|
|
|
/* Settings dialog */
|
|
.settings-modal {
|
|
width: min(640px, 100%);
|
|
background: var(--bg-2);
|
|
}
|
|
.settings-head {
|
|
position: relative;
|
|
padding: 22px 28px 18px;
|
|
border-bottom: 1px solid var(--bd-1);
|
|
}
|
|
.settings-head h2 {
|
|
margin: 0;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.01em;
|
|
color: var(--t-1);
|
|
}
|
|
.settings-close {
|
|
position: absolute;
|
|
top: 18px;
|
|
right: 18px;
|
|
}
|
|
.settings-body {
|
|
padding: 22px 28px 26px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 26px;
|
|
max-height: 70vh;
|
|
overflow: auto;
|
|
}
|
|
.settings-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
}
|
|
.settings-section-title {
|
|
font-size: 10.5px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--t-3);
|
|
}
|
|
.settings-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 24px;
|
|
}
|
|
.settings-row-info {
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
.settings-row-label {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--t-1);
|
|
}
|
|
.settings-row-hint {
|
|
margin-top: 3px;
|
|
font-size: 12px;
|
|
color: var(--t-3);
|
|
}
|
|
.settings-row-control {
|
|
flex-shrink: 0;
|
|
}
|
|
.settings-foot {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
padding: 14px 22px 18px;
|
|
border-top: 1px solid var(--bd-1);
|
|
gap: 10px;
|
|
}
|
|
.settings-done {
|
|
height: 36px;
|
|
padding: 0 22px;
|
|
font-size: 13.5px;
|
|
background: var(--accent);
|
|
color: white;
|
|
border: 0;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: filter 0.12s;
|
|
}
|
|
.settings-done:hover {
|
|
filter: brightness(1.1);
|
|
}
|
|
|
|
/* Settings: color swatches */
|
|
.swatch-row {
|
|
display: inline-flex;
|
|
gap: 8px;
|
|
}
|
|
.swatch {
|
|
position: relative;
|
|
width: 32px;
|
|
height: 32px;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: 0;
|
|
border-radius: 9px;
|
|
cursor: pointer;
|
|
}
|
|
.swatch-dot {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 8px;
|
|
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
|
|
transition:
|
|
transform 0.15s,
|
|
box-shadow 0.15s;
|
|
}
|
|
.swatch:hover .swatch-dot {
|
|
transform: scale(1.06);
|
|
}
|
|
.swatch.is-active .swatch-dot {
|
|
box-shadow:
|
|
0 0 0 2px var(--bg-2),
|
|
0 0 0 4px currentColor;
|
|
}
|
|
.swatch-check {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
color: white;
|
|
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Settings: segmented radio */
|
|
.srad {
|
|
display: inline-flex;
|
|
background: var(--bg-3);
|
|
border: 1px solid var(--bd-1);
|
|
border-radius: 8px;
|
|
padding: 3px;
|
|
}
|
|
.srad-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
height: 30px;
|
|
padding: 0 14px;
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
border-radius: 6px;
|
|
color: var(--t-2);
|
|
font: inherit;
|
|
font-weight: 600;
|
|
font-size: 12.5px;
|
|
cursor: pointer;
|
|
transition:
|
|
color 0.15s,
|
|
background 0.15s;
|
|
white-space: nowrap;
|
|
}
|
|
.srad-btn:hover {
|
|
color: var(--t-1);
|
|
}
|
|
.srad-btn.is-active {
|
|
color: white;
|
|
background: var(--accent);
|
|
border-color: var(--accent);
|
|
box-shadow:
|
|
0 2px 8px -2px rgba(0, 0, 0, 0.4),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.18);
|
|
}
|
|
|
|
/* Empty / placeholder states */
|
|
.empty-state {
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 80px 24px;
|
|
text-align: center;
|
|
color: var(--t-2);
|
|
}
|
|
.empty-state-icon {
|
|
width: 56px;
|
|
height: 56px;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: 14px;
|
|
margin-bottom: 18px;
|
|
background: rgba(255, 255, 255, 0.04);
|
|
border: 1px solid var(--bd-1);
|
|
color: var(--t-2);
|
|
}
|
|
.empty-state-title {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: var(--t-1);
|
|
margin: 0 0 6px;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.empty-state-hint {
|
|
font-size: 13px;
|
|
color: var(--t-3);
|
|
margin: 0 0 20px;
|
|
max-width: 44ch;
|
|
}
|
|
.empty-state .ghost-btn {
|
|
background: var(--accent);
|
|
color: white;
|
|
border-color: transparent;
|
|
}
|
|
.empty-state .ghost-btn:hover {
|
|
filter: brightness(1.1);
|
|
background: var(--accent);
|
|
border-color: transparent;
|
|
}
|