66 lines
1.4 KiB
CSS
66 lines
1.4 KiB
CSS
.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__viewport::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.scroll-view__thumb {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 12px;
|
|
transition: opacity 200ms ease;
|
|
cursor: default;
|
|
user-select: none;
|
|
opacity: 0;
|
|
}
|
|
|
|
.scroll-view__thumb::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: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;
|
|
}
|