@opentiny/vue-theme/scrollbar/index.css

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

.tiny-scrollbar{--tv-Scrollbar-vertical-right:var(--tv-space-sm, 4px);--tv-Scrollbar-vertical-width:var(--tv-space-md, 8px);--tv-Scrollbar-thumb-bg-color:var(--tv-color-bg-scrollbar-thumb, #dbdbdb);--tv-Scrollbar-thumb-hover-bg-color:var(--tv-color-bg-scrollbar-thumb-hover, #dbdbdb);--tv-Scrollbar-thumb-border-radius:var(--tv-border-radius-scrollbar-thumb, 4px);overflow:hidden;position:relative}.tiny-scrollbar:active>.tiny-scrollbar__bar,.tiny-scrollbar:focus>.tiny-scrollbar__bar,.tiny-scrollbar:hover>.tiny-scrollbar__bar{opacity:1;-webkit-transition:opacity 340ms ease-out;transition:opacity 340ms ease-out}.tiny-scrollbar__wrap{overflow:scroll;height:100%;max-height:200px}.tiny-scrollbar__wrap--hidden-default::-webkit-scrollbar{width:0;height:0}.tiny-scrollbar__thumb{position:relative;display:block;width:0;height:0;cursor:pointer;border-radius:var(--tv-Scrollbar-thumb-border-radius);background-color:var(--tv-Scrollbar-thumb-bg-color);-webkit-transition:.3s background-color;transition:.3s background-color}.tiny-scrollbar__thumb:hover{background-color:var(--tv-Scrollbar-thumb-hover-bg-color)}.tiny-scrollbar__bar{position:absolute;bottom:2px;z-index:1;border-radius:4px;opacity:0;-webkit-transition:opacity 120ms ease-out;transition:opacity 120ms ease-out}.tiny-scrollbar__bar.is-vertical{width:var(--tv-Scrollbar-vertical-width);top:2px;right:var(--tv-Scrollbar-vertical-right)}.tiny-scrollbar__bar.is-vertical>div{width:100%}.tiny-scrollbar__bar.is-horizontal{height:6px;left:2px;right:2px}.tiny-scrollbar__bar.is-horizontal>div{height:100%}@media (min-width:768px){.tiny-scrollbar::-webkit-scrollbar{width:var(--tv-size-scrollbar-width);height:var(--tv-size-scrollbar-height)}.tiny-scrollbar::-webkit-scrollbar-track-piece{background:0 0;border:0}.tiny-scrollbar::-webkit-scrollbar-thumb{background:var(--tv-color-bg-scrollbar-thumb);border-radius:var(--tv-border-radius-scrollbar-thumb)}.tiny-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--tv-color-bg-scrollbar-thumb-hover)}.tiny-scrollbar::-webkit-scrollbar-thumb:active{background:var(--tv-color-bg-scrollbar-thumb-active)}.tiny-min-scrollbar::-webkit-scrollbar{width:4px;height:4px}.tiny-min-scrollbar::-webkit-scrollbar-track-piece{background:0 0;border:0}.tiny-min-scrollbar::-webkit-scrollbar-thumb{background:var(--tv-color-bg-scrollbar-thumb);border-radius:2px}.tiny-min-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--tv-color-bg-scrollbar-thumb-hover)}.tiny-min-scrollbar::-webkit-scrollbar-thumb:active{background:var(--tv-color-bg-scrollbar-thumb-active)}}