forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix(ui): scrollbar stabilize width to prevent layout jumps and fix color (#1038)
authored by
Idris Gadi
and committed by
GitHub
fabe1c29
bd6265b6
+16
-12
+6
-2
app/assets/main.css
+6
-2
app/assets/main.css
···
155
155
-moz-osx-font-smoothing: grayscale;
156
156
text-rendering: optimizeLegibility;
157
157
scroll-padding-top: 5rem; /* Offset for fixed header - otherwise anchor headers are cutted */
158
+
scrollbar-gutter: stable;
158
159
}
159
160
160
161
/*
···
229
230
}
230
231
231
232
/* Scrollbar styling */
233
+
* {
234
+
scrollbar-color: var(--border) var(--bg);
235
+
}
236
+
232
237
::-webkit-scrollbar {
233
238
width: 8px;
234
239
height: 8px;
···
244
249
}
245
250
246
251
::-webkit-scrollbar-thumb:hover {
247
-
background: #404040;
252
+
background: var(--border-hover);
248
253
}
249
254
250
255
/* Scrollbar styling for Firefox */
251
256
@supports not selector(::-webkit-scrollbar) {
252
257
* {
253
258
scrollbar-width: thin;
254
-
scrollbar-color: var(--border) var(--bg);
255
259
}
256
260
}
257
261
+10
-10
app/pages/package/[...package].vue
+10
-10
app/pages/package/[...package].vue
···
1344
1344
@media (min-width: 1024px) {
1345
1345
.sidebar-scroll {
1346
1346
scrollbar-gutter: stable;
1347
-
scrollbar-width: none;
1347
+
scrollbar-width: 8px;
1348
+
scrollbar-color: transparent transparent;
1348
1349
}
1349
1350
1350
1351
.sidebar-scroll::-webkit-scrollbar {
1351
-
width: 0;
1352
-
height: 0;
1352
+
width: 8px;
1353
+
height: 8px;
1353
1354
}
1354
1355
1355
-
.sidebar-scroll:hover,
1356
-
.sidebar-scroll:focus-within {
1357
-
scrollbar-width: auto;
1356
+
.sidebar-scroll::-webkit-scrollbar-track,
1357
+
.sidebar-scroll::-webkit-scrollbar-thumb {
1358
+
background: transparent;
1358
1359
}
1359
1360
1360
-
.sidebar-scroll:hover::-webkit-scrollbar,
1361
-
.sidebar-scroll:focus-within::-webkit-scrollbar {
1362
-
width: 8px;
1363
-
height: 8px;
1361
+
.sidebar-scroll:hover,
1362
+
.sidebar-scroll:focus-within {
1363
+
scrollbar-color: var(--border) transparent;
1364
1364
}
1365
1365
1366
1366
.sidebar-scroll:hover::-webkit-scrollbar-thumb,