Update UI styles and enhance controller navigation functionality

- 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

View File

@@ -51,19 +51,19 @@
>
<div class="font-mono text-white px-4 sm:px-5 max-w-[95vw] sm:max-w-[90vw] md:max-w-[1200px] text-base sm:text-lg md:text-[24px] leading-relaxed break-words">
<div v-if="showLine1" class="flex items-start mb-4 sm:mb-6 opacity-0" :class="{ 'opacity-100': showLine1 }">
<span class="text-[#00ffff] mr-3 sm:mr-6 flex-shrink-0">></span>
<span class="text-[#fbbf24] mr-3 sm:mr-6 flex-shrink-0">></span>
<span class="text-white break-words">{{ displayLine1 }}</span><span v-if="isTypingLine1" class="intro-typing-caret" aria-hidden="true"></span>
</div>
<div v-if="showLine2" class="flex items-start mb-4 sm:mb-6 opacity-0" :class="{ 'opacity-100': showLine2 }">
<span class="text-[#00ffff] mr-3 sm:mr-6 flex-shrink-0">></span>
<span class="text-[#fbbf24] mr-3 sm:mr-6 flex-shrink-0">></span>
<span class="text-white break-words">{{ displayLine2 }}</span><span v-if="isTypingLine2" class="intro-typing-caret" aria-hidden="true"></span>
</div>
<div v-if="showLine3" class="flex items-start mb-4 sm:mb-6 opacity-0" :class="{ 'opacity-100': showLine3 }">
<span class="text-[#00ffff] mr-3 sm:mr-6 flex-shrink-0">></span>
<span class="text-[#fbbf24] mr-3 sm:mr-6 flex-shrink-0">></span>
<span class="text-white break-words">{{ displayLine3 }}</span><span v-if="isTypingLine3" class="intro-typing-caret" aria-hidden="true"></span>
</div>
<div v-if="showLine4" class="flex items-start mb-8 sm:mb-12 opacity-0" :class="{ 'opacity-100': showLine4 }">
<span class="text-[#00ffff] mr-3 sm:mr-6 flex-shrink-0">></span>
<span class="text-[#fbbf24] mr-3 sm:mr-6 flex-shrink-0">></span>
<span class="text-white break-words">{{ displayLine4 }}</span><span v-if="isTypingLine4" class="intro-typing-caret" aria-hidden="true"></span>
</div>
</div>
@@ -521,13 +521,13 @@ onBeforeUnmount(() => {
min-width: 0;
}
/* Intro typing cursor - block style, cyan blink (matches original typing-text caret) */
/* Intro typing cursor - block style, yellow blink (Archipelago style) */
.intro-typing-caret {
display: inline-block;
width: 4px;
min-width: 4px;
height: 1.2em;
background: #00ffff;
background: #fbbf24;
margin-left: 2px;
vertical-align: text-bottom;
animation: intro-caret-blink 0.5s step-end infinite;