ssbg04/Portfolioo
1
0 Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: improve light mode scrollbar visibility and hide custom cursor on text inputs

Browse Source
This commit is contained in:
ssbg04 committed 2026-10-18 12:39:17 +08:00
1 parent f9863e156a
commit 242864bd66
2 files changed
+44 -11
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/DotMatrixCursor.tsx
+17 -2
View File
@@ -111,11 +111,18 @@ export default function DotMatrixCursor() {
queued = false; queued = false;
}; };
const TEXT_INPUT_SELECTOR = 'input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, [contenteditable="true"]';
const onPointerMove = (e: PointerEvent) => { const onPointerMove = (e: PointerEvent) => {
if (e.pointerType !== 'mouse') return; if (e.pointerType !== 'mouse') return;
x = e.clientX; x = e.clientX;
y = e.clientY; y = e.clientY;
el.style.opacity = '1'; const target = e.target as HTMLElement | null;
if (target?.closest?.(TEXT_INPUT_SELECTOR)) {
el.style.opacity = '0';
} else {
el.style.opacity = '1';
}
if (!queued) { if (!queued) {
queued = true; queued = true;
requestAnimationFrame(paint); requestAnimationFrame(paint);
@@ -124,7 +131,15 @@ export default function DotMatrixCursor() {
const onMouseOver = (e: MouseEvent) => { const onMouseOver = (e: MouseEvent) => {
const target = e.target as HTMLElement | null; const target = e.target as HTMLElement | null;
el.classList.toggle('is-hover', Boolean(target?.closest?.(CFG.hoverSelector))); const isTextInput = Boolean(target?.closest?.(TEXT_INPUT_SELECTOR));
// If hovering on an input or textarea, hide custom dot cursor so native I-beam caret is cleanly visible
if (isTextInput) {
el.style.opacity = '0';
} else {
el.style.opacity = '1';
el.classList.toggle('is-hover', Boolean(target?.closest?.(CFG.hoverSelector)));
}
}; };
const onMouseDown = () => el.classList.add('is-down'); const onMouseDown = () => el.classList.add('is-down');
src/styles/global.css
+27 -9
View File
@@ -154,12 +154,18 @@
} }
} }
html { html {
scrollbar-gutter: stable; scrollbar-gutter: stable;
overflow-y: scroll; overflow-y: scroll;
scroll-behavior: smooth; scroll-behavior: smooth;
background-color: var(--bg-color); background-color: var(--bg-color);
} scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}
html.dark {
scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
/* Smooth, hardware-accelerated View Transitions (Astro navigation & theme cross-fade) */ /* Smooth, hardware-accelerated View Transitions (Astro navigation & theme cross-fade) */
::view-transition-old(root), ::view-transition-old(root),
@@ -479,10 +485,22 @@ html[data-tier='low'] .nav-enter { animation: none; opacity: 1; transform: none;
will-change: auto !important; will-change: auto !important;
} }
::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.2); border-radius: 4px; } ::-webkit-scrollbar-thumb {
::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 0.4); } background: rgba(0, 0, 0, 0.22);
border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.38);
}
.dark ::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.22);
}
.dark ::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.40);
}
.no-scrollbar { scrollbar-width: none; } .no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar::-webkit-scrollbar { display: none; }