feat: onboarding polish, splash screen, controller nav, dev script
Some checks failed
Build Archipelago ISO / build-iso (push) Has been cancelled
Build Archipelago ISO (dev) / build-iso (push) Failing after 45m15s

Onboarding flow:
- Intro: improved layout and transitions
- DID: better card styling and responsiveness
- Path: added visual enhancements
- Backup/Identity/Verify: streamlined markup
- SplashScreen component added

UI:
- Controller navigation improvements (useControllerNav)
- Style.css refinements

Backend:
- Runtime package fix

Dev:
- dev-start.sh improvements

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-03-28 13:41:52 +00:00
parent 82eeb915a3
commit 7f03e39f58
12 changed files with 92 additions and 67 deletions

View File

@@ -46,11 +46,12 @@
backdrop-filter: blur(12px);
}
/* Controller / keyboard navigation - soft glow only (no box outline) */
/* Controller / keyboard navigation - orange border (Archipelago brand) */
*:focus-visible {
outline: none;
box-shadow: 0 0 16px rgba(120, 180, 255, 0.2), 0 0 32px rgba(100, 160, 255, 0.1);
transition: box-shadow 0.2s ease;
border-color: rgba(251, 146, 60, 0.8) !important;
box-shadow: 0 0 0 2px rgba(251, 146, 60, 0.7), 0 0 16px rgba(251, 146, 60, 0.25);
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
/* Mobile touch targets — ensure tappable elements meet 44px minimum */
@@ -98,12 +99,12 @@ input[type="radio"]:active + * {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Containers get subtle grow + inner glow when focused (gamepad selection) */
/* Containers get subtle grow + orange glow when focused (gamepad selection) */
[data-controller-container]:focus-visible {
transform: scale(1.02);
box-shadow:
0 0 24px rgba(120, 180, 255, 0.15),
0 0 48px rgba(100, 160, 255, 0.08),
0 0 0 2px rgba(251, 146, 60, 0.7),
0 0 24px rgba(251, 146, 60, 0.2),
inset 0 0 24px rgba(255, 255, 255, 0.03);
}
@@ -978,8 +979,8 @@ input[type="radio"]:active + * {
.sidebar-nav-item:focus-visible {
transform: scale(1.02) !important;
box-shadow:
0 0 24px rgba(120, 180, 255, 0.15),
0 0 48px rgba(100, 160, 255, 0.08),
0 0 0 2px rgba(251, 146, 60, 0.7),
0 0 24px rgba(251, 146, 60, 0.2),
inset 0 0 24px rgba(255, 255, 255, 0.03) !important;
}
}
@@ -1302,7 +1303,7 @@ html:has(body.video-background-active)::before {
background: rgba(255, 255, 255, 0.1);
}
.cloud-file-item:focus-visible {
box-shadow: 0 0 16px rgba(120, 180, 255, 0.2), 0 0 32px rgba(100, 160, 255, 0.1);
box-shadow: 0 0 0 2px rgba(251, 146, 60, 0.7), 0 0 16px rgba(251, 146, 60, 0.25);
}
.cloud-file-item-thumb {
@@ -1480,7 +1481,7 @@ html:has(body.video-background-active)::before {
transform: translateY(0);
}
.cloud-grid-card:focus-visible {
box-shadow: 0 0 16px rgba(120, 180, 255, 0.2), 0 0 32px rgba(100, 160, 255, 0.1);
box-shadow: 0 0 0 2px rgba(251, 146, 60, 0.7), 0 0 16px rgba(251, 146, 60, 0.25);
}
.cloud-grid-card-cover {