lfg2025/archy
1
0
Fork 0
Code Issues 25 Pull Requests 4 Actions Packages Projects Releases 74 Wiki Activity

Update UI styles and enhance controller navigation functionality

Browse Source 
- Replaced cyan color with yellow in various UI components for a cohesive visual theme.
- Improved focus styles for controller navigation, adding subtle grow and glow effects to sidebar items and containers.
- Enhanced controller navigation logic to support direct focus on app containers in the Marketplace and My Apps sections.
- Introduced wheel scrolling support for better navigation experience within scrollable areas.
- Removed unused audio tone function from useLoginSounds.ts to streamline code.
This commit is contained in:
Dorian
2026-02-17 20:40:26 +00:00
parent c72b97e940
commit 5a04875dcc
12 changed files with 109 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
neode-ui/src/style.css
+23 -9
View File
@@ -17,20 +17,22 @@
font-style: normal;
}
/* Controller / keyboard navigation - soft glow, hover-style (not yellow button) */
/* Controller / keyboard navigation - soft glow only (no box outline) */
*:focus-visible {
outline: none;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.25),
0 0 16px rgba(120, 180, 255, 0.2),
0 0 32px rgba(100, 160, 255, 0.1);
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;
}
/* Containers get a subtle inner glow when focused */
/* Containers: base scale for smooth grow animation */
[data-controller-container] {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Containers get subtle grow + inner glow when focused (gamepad selection) */
[data-controller-container]:focus-visible {
transform: scale(1.02);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.3),
0 0 24px rgba(120, 180, 255, 0.15),
0 0 48px rgba(100, 160, 255, 0.08),
inset 0 0 24px rgba(255, 255, 255, 0.03);
@@ -393,6 +395,18 @@
mask-composite: exclude;
pointer-events: none;
}
/* Sidebar nav items: grow + glow on gamepad focus (same as containers) */
.sidebar-nav-item {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.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),
inset 0 0 24px rgba(255, 255, 255, 0.03) !important;
}
}
/* Background image */
@@ -478,7 +492,7 @@ body {
overflow: hidden;
white-space: nowrap;
max-width: 0;
border-right: 4px solid #00ffff;
border-right: 4px solid #fbbf24;
animation:
typing 2s steps(30, end) forwards,
caretBlink 0.5s step-end 3 2.6s;
@@ -496,7 +510,7 @@ body {
@keyframes caretBlink {
0%, 100% {
border-right-color: #00ffff;
border-right-color: #fbbf24;
}
50% {
border-right-color: transparent;