[READ-ONLY] a fast, modern browser for the npm registry
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix: named transitions, motion reduce + hide `/` on search page

+5 -4
+5 -4
app/pages/search.vue
··· 350 350 <div class="relative group" :class="{ 'is-focused': isSearchFocused }"> 351 351 <!-- Subtle glow effect --> 352 352 <div 353 - class="absolute -inset-px rounded-lg bg-gradient-to-r from-fg/0 via-fg/5 to-fg/0 opacity-0 transition-opacity duration-500 blur-sm group-[.is-focused]:opacity-100" 353 + class="absolute -inset-px rounded-lg bg-gradient-to-r from-fg/0 via-fg/5 to-fg/0 opacity-0 transition-opacity duration-500 blur-sm group-[.is-focused]:opacity-100 motion-reduce:transition-none" 354 354 /> 355 355 356 356 <div class="search-box relative flex items-center"> 357 357 <span 358 358 class="absolute left-4 text-fg-subtle font-mono text-base pointer-events-none transition-colors duration-200 group-focus-within:text-fg-muted" 359 + aria-hidden="true" 359 360 > 360 361 / 361 362 </span> ··· 370 371 autocomplete="off" 371 372 autocorrect="off" 372 373 spellcheck="false" 373 - class="w-full max-w-full bg-bg-subtle border border-border rounded-lg pl-8 pr-10 py-3 font-mono text-base text-fg placeholder:text-fg-subtle transition-colors duration-300 focus:(border-border-hover outline-none) appearance-none" 374 + class="w-full max-w-full bg-bg-subtle border border-border rounded-lg pl-8 pr-10 py-3 font-mono text-base text-fg placeholder:text-fg-subtle transition-colors duration-300 focus:border-border-hover focus-visible:outline-none appearance-none" 374 375 @focus="isSearchFocused = true" 375 376 @blur="isSearchFocused = false" 376 377 @keydown="handleResultsKeydown" ··· 414 415 </div> 415 416 <button 416 417 type="button" 417 - class="shrink-0 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50" 418 + class="shrink-0 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50" 418 419 @click="claimModalOpen = true" 419 420 > 420 421 Claim "{{ query }}" ··· 443 444 <p class="text-sm text-fg-muted mb-3">Want to claim this package name?</p> 444 445 <button 445 446 type="button" 446 - class="px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50" 447 + class="px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50" 447 448 @click="claimModalOpen = true" 448 449 > 449 450 Claim "{{ query }}"