forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: named transitions, motion reduce + hide `/` on search page
+5
-4
+5
-4
app/pages/search.vue
+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 }}"