feat: onboarding polish, splash screen, controller nav, dev script
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:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user