forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
feat: use default cursor for non-link items (#1216)
authored by
Jialong Lu
and committed by
GitHub
adc8d075
5d279f78
+22
-34
-5
app/assets/main.css
-5
app/assets/main.css
+1
-5
app/components/ColumnPicker.vue
+1
-5
app/components/ColumnPicker.vue
···
102
102
v-for="column in toggleableColumns"
103
103
:key="column.id"
104
104
class="flex gap-2 items-center px-3 py-2 transition-colors duration-200"
105
-
:class="
106
-
column.disabled
107
-
? 'opacity-50 cursor-not-allowed'
108
-
: 'hover:bg-bg-muted cursor-pointer'
109
-
"
105
+
:class="column.disabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-bg-muted'"
110
106
>
111
107
<input
112
108
type="checkbox"
+1
-1
app/components/DependencyPathPopup.vue
+1
-1
app/components/DependencyPathPopup.vue
···
68
68
<!-- Path badge button -->
69
69
<button
70
70
type="button"
71
-
class="path-badge font-mono text-3xs px-1.5 py-0.5 rounded bg-amber-500/10 border border-amber-500/30 text-amber-700 dark:text-amber-400 cursor-pointer transition-all duration-200 ease-out whitespace-nowrap flex items-center gap-1 hover:bg-amber-500/20 hover:border-amber-500/50"
71
+
class="path-badge font-mono text-3xs px-1.5 py-0.5 rounded bg-amber-500/10 border border-amber-500/30 text-amber-700 dark:text-amber-400 transition-all duration-200 ease-out whitespace-nowrap flex items-center gap-1 hover:bg-amber-500/20 hover:border-amber-500/50"
72
72
:aria-expanded="isOpen"
73
73
@click.stop="togglePopup"
74
74
>
+1
-1
app/components/Header/AuthModal.client.vue
+1
-1
app/components/Header/AuthModal.client.vue
···
105
105
106
106
<details class="text-sm">
107
107
<summary
108
-
class="text-fg-subtle cursor-pointer hover:text-fg-muted transition-colors duration-200 focus-visible:(outline-2 outline-accent/70)"
108
+
class="text-fg-subtle hover:text-fg-muted transition-colors duration-200 focus-visible:(outline-2 outline-accent/70)"
109
109
>
110
110
{{ $t('auth.modal.what_is_atmosphere') }}
111
111
</summary>
+1
-3
app/components/Header/ConnectorModal.vue
+1
-3
app/components/Header/ConnectorModal.vue
···
173
173
</div>
174
174
175
175
<details class="text-sm">
176
-
<summary
177
-
class="text-fg-subtle cursor-pointer hover:text-fg-muted transition-colors duration-200"
178
-
>
176
+
<summary class="text-fg-subtle hover:text-fg-muted transition-colors duration-200">
179
177
{{ $t('connector.modal.advanced') }}
180
178
</summary>
181
179
<div class="mt-3">
+1
-1
app/components/Org/OperationsQueue.vue
+1
-1
app/components/Org/OperationsQueue.vue
···
292
292
<!-- Completed operations log (collapsed by default) -->
293
293
<details v-if="hasCompletedOperations" class="mt-4 border-t border-border pt-4">
294
294
<summary
295
-
class="flex items-center gap-2 font-mono text-xs text-fg-muted cursor-pointer hover:text-fg transition-colors duration-200 select-none"
295
+
class="flex items-center gap-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 select-none"
296
296
>
297
297
<span
298
298
class="i-carbon:chevron-right rtl-flip w-3 h-3 transition-transform duration-200 [[open]>&]:rotate-90"
+1
-1
app/components/Package/ClaimPackageModal.vue
+1
-1
app/components/Package/ClaimPackageModal.vue
···
344
344
<!-- Expandable package.json preview -->
345
345
<details class="border border-border rounded-md overflow-hidden">
346
346
<summary
347
-
class="px-3 py-2 text-sm text-fg-muted bg-bg-subtle cursor-pointer hover:text-fg transition-colors select-none"
347
+
class="px-3 py-2 text-sm text-fg-muted bg-bg-subtle hover:text-fg transition-colors select-none"
348
348
>
349
349
{{ $t('claim.modal.preview_json') }}
350
350
</summary>
+1
-1
app/components/Package/ListControls.vue
+1
-1
app/components/Package/ListControls.vue
···
78
78
<select
79
79
id="package-sort"
80
80
v-model="sortValue"
81
-
class="appearance-none bg-bg-subtle border border-border rounded-lg ps-3 pe-8 py-2 font-mono text-sm text-fg cursor-pointer transition-colors duration-200 focus:(border-border-hover outline-none) hover:border-border-hover"
81
+
class="appearance-none bg-bg-subtle border border-border rounded-lg ps-3 pe-8 py-2 font-mono text-sm text-fg transition-colors duration-200 focus:(border-border-hover outline-none) hover:border-border-hover"
82
82
>
83
83
<option v-for="option in sortOptions" :key="option.value" :value="option.value">
84
84
{{ option.label }}
+1
-1
app/components/Package/ListToolbar.vue
+1
-1
app/components/Package/ListToolbar.vue
···
162
162
<select
163
163
id="sort-select"
164
164
:value="currentSort.key"
165
-
class="appearance-none bg-bg-subtle border border-border rounded-md ps-3 pe-8 py-1.5 font-mono text-sm text-fg cursor-pointer transition-colors duration-200 hover:border-border-hover"
165
+
class="appearance-none bg-bg-subtle border border-border rounded-md ps-3 pe-8 py-1.5 font-mono text-sm text-fg transition-colors duration-200 hover:border-border-hover"
166
166
@change="handleSortKeyChange"
167
167
>
168
168
<option
+1
-1
app/components/Package/ManagerSelect.vue
+1
-1
app/components/Package/ManagerSelect.vue
···
150
150
:key="pm.id"
151
151
role="option"
152
152
:aria-selected="selectedPM === pm.id"
153
-
class="flex items-center gap-2 px-3 py-1.5 font-mono text-xs cursor-pointer transition-colors duration-150"
153
+
class="flex items-center gap-2 px-3 py-1.5 font-mono text-xs transition-colors duration-150"
154
154
:class="[
155
155
selectedPM === pm.id ? 'text-fg' : 'text-fg-subtle',
156
156
highlightedIndex === index ? 'bg-bg-elevated' : 'hover:bg-bg-elevated',
+3
-4
app/components/Package/Table.vue
+3
-4
app/components/Package/Table.vue
···
119
119
scope="col"
120
120
class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none"
121
121
:class="{
122
-
'cursor-pointer hover:text-fg transition-colors duration-200': isSortable('name'),
122
+
'hover:text-fg transition-colors duration-200': isSortable('name'),
123
123
}"
124
124
:aria-sort="
125
125
isColumnSorted('name')
···
169
169
scope="col"
170
170
class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none"
171
171
:class="{
172
-
'cursor-pointer hover:text-fg transition-colors duration-200':
173
-
isSortable('downloads'),
172
+
'hover:text-fg transition-colors duration-200': isSortable('downloads'),
174
173
}"
175
174
:aria-sort="
176
175
isColumnSorted('downloads')
···
204
203
scope="col"
205
204
class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none"
206
205
:class="{
207
-
'cursor-pointer hover:text-fg transition-colors duration-200': isSortable('updated'),
206
+
'hover:text-fg transition-colors duration-200': isSortable('updated'),
208
207
}"
209
208
:aria-sort="
210
209
isColumnSorted('updated')
+1
-1
app/components/PaginationControls.vue
+1
-1
app/components/PaginationControls.vue
···
153
153
<select
154
154
id="page-size"
155
155
:value="pageSize"
156
-
class="appearance-none bg-bg-subtle border border-border rounded-md ps-3 pe-8 py-1 font-mono text-sm text-fg cursor-pointer transition-colors duration-200 hover:border-border-hover"
156
+
class="appearance-none bg-bg-subtle border border-border rounded-md ps-3 pe-8 py-1 font-mono text-sm text-fg transition-colors duration-200 hover:border-border-hover"
157
157
@change="handlePageSizeChange"
158
158
>
159
159
<option v-for="size in PAGE_SIZE_OPTIONS" :key="size" :value="size">
+2
-2
app/components/Settings/AccentColorPicker.vue
+2
-2
app/components/Settings/AccentColorPicker.vue
···
30
30
<label
31
31
v-for="color in accentColors"
32
32
:key="color.id"
33
-
class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 cursor-pointer has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle)"
33
+
class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle)"
34
34
:style="{ backgroundColor: `var(--swatch-${color.id})` }"
35
35
>
36
36
<input
···
44
44
/>
45
45
</label>
46
46
<label
47
-
class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 cursor-pointer has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) flex items-center justify-center bg-fg"
47
+
class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) flex items-center justify-center bg-fg"
48
48
>
49
49
<input
50
50
type="radio"
+1
-1
app/components/Settings/BgThemePicker.vue
+1
-1
app/components/Settings/BgThemePicker.vue
···
22
22
<label
23
23
v-for="theme in backgroundThemes"
24
24
:key="theme.id"
25
-
class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 cursor-pointer has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle)"
25
+
class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle)"
26
26
:style="{ backgroundColor: theme.value }"
27
27
>
28
28
<input
+1
-1
app/components/Settings/Toggle.client.vue
+1
-1
app/components/Settings/Toggle.client.vue
···
23
23
{{ label }}
24
24
</span>
25
25
<span
26
-
class="inline-flex items-center h-6 w-11 shrink-0 rounded-full border p-0.25 transition-colors duration-200 shadow-sm ease-in-out motion-reduce:transition-none cursor-pointer group-focus-visible:(outline-accent/70 outline-offset-2 outline-solid)"
26
+
class="inline-flex items-center h-6 w-11 shrink-0 rounded-full border p-0.25 transition-colors duration-200 shadow-sm ease-in-out motion-reduce:transition-none group-focus-visible:(outline-accent/70 outline-offset-2 outline-solid)"
27
27
:class="
28
28
checked
29
29
? 'bg-accent border-accent group-hover:bg-accent/80'
+1
-1
app/components/Tag/RadioButton.vue
+1
-1
app/components/Tag/RadioButton.vue
···
36
36
class="peer sr-only"
37
37
/>
38
38
<label
39
-
class="bg-bg-muted text-fg-muted border-border hover:(text-fg border-border-hover) inline-flex items-center px-2 py-0.5 text-xs font-mono border rounded transition-colors duration-200 peer-focus-visible:(outline-2 outline-accent/70 outline-offset-2) border-none cursor-pointer peer-checked:(bg-fg text-bg border-fg hover:(text-text-bg/50)) peer-disabled:(opacity-50 pointer-events-none)"
39
+
class="bg-bg-muted text-fg-muted border-border hover:(text-fg border-border-hover) inline-flex items-center px-2 py-0.5 text-xs font-mono border rounded transition-colors duration-200 peer-focus-visible:(outline-2 outline-accent/70 outline-offset-2) border-none peer-checked:(bg-fg text-bg border-fg hover:(text-text-bg/50)) peer-disabled:(opacity-50 pointer-events-none)"
40
40
:htmlFor="internalId"
41
41
>
42
42
<slot />
+1
-1
app/components/UserCombobox.vue
+1
-1
app/components/UserCombobox.vue
···
185
185
:key="username"
186
186
role="option"
187
187
:aria-selected="highlightedIndex === index"
188
-
class="px-2 py-1 font-mono text-sm cursor-pointer transition-colors duration-100"
188
+
class="px-2 py-1 font-mono text-sm transition-colors duration-100"
189
189
:class="
190
190
highlightedIndex === index
191
191
? 'bg-bg-muted text-fg'
+1
-1
app/components/VersionSelector.vue
+1
-1
app/components/VersionSelector.vue
···
520
520
flatItems[focusedIndex]?.groupId === group.id &&
521
521
flatItems[focusedIndex]?.type === 'group'
522
522
"
523
-
class="flex items-center gap-2 px-3 py-2 text-sm font-mono hover:bg-bg-muted transition-[color,background-color] focus-visible:outline-none cursor-pointer"
523
+
class="flex items-center gap-2 px-3 py-2 text-sm font-mono hover:bg-bg-muted transition-[color,background-color] focus-visible:outline-none"
524
524
:class="[
525
525
group.primaryVersion.isCurrent ? 'text-fg bg-bg-muted' : 'text-fg-muted',
526
526
flatItems[focusedIndex]?.groupId === group.id &&
+2
-2
app/pages/settings.vue
+2
-2
app/pages/settings.vue
···
80
80
<select
81
81
id="theme-select"
82
82
:value="colorMode.preference"
83
-
class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg cursor-pointer duration-200 transition-colors hover:border-fg-subtle"
83
+
class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg duration-200 transition-colors hover:border-fg-subtle"
84
84
@change="
85
85
colorMode.preference = ($event.target as HTMLSelectElement).value as
86
86
| 'light'
···
163
163
<select
164
164
id="language-select"
165
165
:value="locale"
166
-
class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg focus-visible:outline-accent/70 cursor-pointer duration-200 transition-colors hover:border-fg-subtle"
166
+
class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg focus-visible:outline-accent/70 duration-200 transition-colors hover:border-fg-subtle"
167
167
@change="setLocale(($event.target as HTMLSelectElement).value as typeof locale)"
168
168
>
169
169
<option v-for="loc in locales" :key="loc.code" :value="loc.code" :lang="loc.code">