Something went wrong. Try again.
opencode v2 mirror
Something went wrong. Try again.
2.1 kB · 99 lines
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100.scroll-view { position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden;}
.scroll-view__viewport { flex: 1 1 auto; min-height: 0; width: 100%; overflow-y: auto; scrollbar-width: none; outline: none;}
.scroll-view[data-orientation="horizontal"] .scroll-view__viewport { overflow-x: auto; overflow-y: hidden;}
.scroll-view[data-orientation="both"] .scroll-view__viewport { overflow: auto;}
.scroll-view__viewport::-webkit-scrollbar { display: none;}
.scroll-view__thumb { position: absolute; transition: opacity 200ms ease; cursor: default; user-select: none; pointer-events: auto; opacity: 0;}
.scroll-view__thumb[data-orientation="vertical"] { inset-inline-end: 0; top: 0; width: 12px;}
.scroll-view__thumb[data-orientation="horizontal"] { left: 0; bottom: 0; height: 12px;}
.scroll-view__thumb[data-orientation="vertical"]::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 0; bottom: 0; width: 4px; border-radius: 9999px; background-color: var(--border-weak-base); backdrop-filter: blur(4px); transition: background-color 150ms ease;}
.scroll-view__thumb[data-orientation="horizontal"]::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; transform: translateY(-50%); border-radius: 9999px; background-color: var(--border-weak-base); backdrop-filter: blur(4px); transition: background-color 150ms ease;}
.scroll-view__thumb:hover::after,.scroll-view__thumb[data-dragging="true"]::after { background-color: var(--border-strong-base);}
.dark .scroll-view__thumb::after,[data-theme="dark"] .scroll-view__thumb::after { background-color: var(--border-weak-base);}
.dark .scroll-view__thumb:hover::after,[data-theme="dark"] .scroll-view__thumb:hover::after,.dark .scroll-view__thumb[data-dragging="true"]::after,[data-theme="dark"] .scroll-view__thumb[data-dragging="true"]::after { background-color: var(--border-strong-base);}
.scroll-view__thumb[data-visible="true"] { opacity: 1;}