diff --git a/src/components/DotMatrixCursor.tsx b/src/components/DotMatrixCursor.tsx index 33e3394..8f24529 100644 --- a/src/components/DotMatrixCursor.tsx +++ b/src/components/DotMatrixCursor.tsx @@ -111,11 +111,18 @@ export default function DotMatrixCursor() { 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) => { if (e.pointerType !== 'mouse') return; x = e.clientX; 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) { queued = true; requestAnimationFrame(paint); @@ -124,7 +131,15 @@ export default function DotMatrixCursor() { const onMouseOver = (e: MouseEvent) => { 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'); diff --git a/src/styles/global.css b/src/styles/global.css index 7cc2921..cace811 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -154,12 +154,18 @@ } } - html { - scrollbar-gutter: stable; - overflow-y: scroll; - scroll-behavior: smooth; - background-color: var(--bg-color); - } +html { + scrollbar-gutter: stable; + overflow-y: scroll; + scroll-behavior: smooth; + 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) */ ::view-transition-old(root), @@ -479,10 +485,22 @@ html[data-tier='low'] .nav-enter { animation: none; opacity: 1; transform: none; will-change: auto !important; } -::-webkit-scrollbar { width: 4px; height: 4px; } +::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } -::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.2); border-radius: 4px; } -::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 0.4); } +::-webkit-scrollbar-thumb { + 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::-webkit-scrollbar { display: none; }