forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: correct package name copy tooltip hiding (#838)
authored by
Alex Savelyev
and committed by
GitHub
ffb7914f
49e18458
+28
-1
+28
-1
app/pages/package/[...package].vue
+28
-1
app/pages/package/[...package].vue
···
445
445
<button
446
446
type="button"
447
447
@click="copyPkgName()"
448
-
class="copy-button absolute z-20 left-0 top-full inline-flex items-center gap-1 px-2 py-1 rounded border text-xs font-mono whitespace-nowrap text-fg-muted bg-bg border-border opacity-0 -translate-y-1 pointer-events-none transition-all duration-150 group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto focus-visible:opacity-100 focus-visible:translate-y-0 focus-visible:pointer-events-auto hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/40"
448
+
class="copy-button absolute z-20 left-0 top-full inline-flex items-center gap-1 px-2 py-1 rounded border text-xs font-mono whitespace-nowrap text-fg-muted bg-bg border-border opacity-0 -translate-y-1 pointer-events-none group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto focus-visible:opacity-100 focus-visible:translate-y-0 focus-visible:pointer-events-auto hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/40"
449
449
:aria-label="$t('package.copy_name')"
450
450
>
451
451
<span class="i-carbon:copy w-3.5 h-3.5" aria-hidden="true" />
···
1189
1189
.package-page > * {
1190
1190
max-width: 100%;
1191
1191
min-width: 0;
1192
+
}
1193
+
1194
+
.copy-button {
1195
+
clip: rect(0 0 0 0);
1196
+
clip-path: inset(50%);
1197
+
height: 1px;
1198
+
overflow: hidden;
1199
+
width: 1px;
1200
+
transition:
1201
+
opacity 0.25s 0.1s,
1202
+
translate 0.15s 0.1s,
1203
+
clip 0.01s 0.34s allow-discrete,
1204
+
clip-path 0.01s 0.34s allow-discrete,
1205
+
height 0.01s 0.34s allow-discrete,
1206
+
width 0.01s 0.34s allow-discrete;
1207
+
}
1208
+
1209
+
.group:hover .copy-button,
1210
+
.copy-button:focus-visible {
1211
+
clip: auto;
1212
+
clip-path: none;
1213
+
height: auto;
1214
+
overflow: visible;
1215
+
width: auto;
1216
+
transition:
1217
+
opacity 0.15s,
1218
+
translate 0.15s;
1192
1219
}
1193
1220
1194
1221
@media (hover: none) {