@imengyu/vue-scroll-rect/lib/vue-scroll-rect.css

A scroll rect component for Vue3

:root{--vue-scroll-rect-scrollbar-thumb-color: rgba(122,122,122, .3);--vue-scroll-rect-scrollbar-thumb-color-light: rgba(122, 122, 122, .5);--vue-scroll-rect-scrollbar-thumb-color-pressed: rgba(112, 112, 112, .2);--vue-scroll-rect-scrollbar-thumb-radius: 5px;--vue-scroll-rect-scrollbar-thumb-margin: 0px;--vue-scroll-rect-scrollbar-size: 8px;--vue-scroll-rect-pull-refresh-text-color: rgba(0, 0, 0, .55);--vue-scroll-rect-pull-refresh-font-size: 13px;--vue-scroll-rect-pull-refresh-spinner-color: rgba(0, 0, 0, .35);--vue-scroll-rect-back-to-top-bg: rgba(0, 0, 0, .45);--vue-scroll-rect-back-to-top-bg-hover: rgba(0, 0, 0, .58);--vue-scroll-rect-back-to-top-color: #fff;--vue-scroll-rect-back-to-top-transition-duration: .28s;--vue-scroll-rect-back-to-top-translate-y: 12px}.vue-scroll-rect{position:relative;width:100%;height:100%;margin:0;overflow:hidden}.vue-scroll-rect>.scroll-content{position:relative;max-width:100%;max-height:100%;scrollbar-width:none;-ms-overflow-style:none}.vue-scroll-rect>.scroll-content::-webkit-scrollbar{width:0;height:0}.vue-scroll-rect>.scroll-content::-ms-scrollbar{width:0;height:0}.vue-scroll-rect>.scroll-content.both{overflow:scroll}.vue-scroll-rect>.scroll-content.horizontal{overflow-x:scroll}.vue-scroll-rect>.scroll-content.vertical{overflow-y:scroll}.vue-scroll-rect>.scroll-content.pull-refresh-enabled{touch-action:pan-y}.vue-scroll-rect>.scroll-content .pull-refresh-track{box-sizing:border-box;width:100%;overflow:hidden}.vue-scroll-rect>.scroll-content .pull-refresh-track.is-transition{transition:height .22s ease}.vue-scroll-rect>.scroll-content .pull-refresh-track-inner{display:flex;align-items:center;justify-content:center;min-height:100%;padding:6px 12px;color:var(--vue-scroll-rect-pull-refresh-text-color);font-size:var(--vue-scroll-rect-pull-refresh-font-size);user-select:none;-webkit-user-select:none}.vue-scroll-rect>.scroll-content .pull-refresh-default{display:inline-flex;align-items:center;gap:8px;line-height:1.25}.vue-scroll-rect>.scroll-content .pull-refresh-default-spinner{box-sizing:border-box;width:16px;height:16px;border:2px solid var(--vue-scroll-rect-pull-refresh-spinner-color);border-top-color:transparent;border-radius:50%;animation:vue-scroll-rect-pull-spin .75s linear infinite}.vue-scroll-rect>.back-to-top-button{position:absolute;right:12px;bottom:12px;z-index:2;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:none;border-radius:50%;background:var(--vue-scroll-rect-back-to-top-bg);color:var(--vue-scroll-rect-back-to-top-color);cursor:pointer;box-shadow:0 1px 4px #0003;opacity:0;visibility:hidden;transform:translate3d(0,var(--vue-scroll-rect-back-to-top-translate-y),0);pointer-events:none;transition:opacity var(--vue-scroll-rect-back-to-top-transition-duration) ease,transform var(--vue-scroll-rect-back-to-top-transition-duration) ease,visibility 0s linear var(--vue-scroll-rect-back-to-top-transition-duration)}.vue-scroll-rect>.back-to-top-button svg{width:22px;height:22px}.vue-scroll-rect>.back-to-top-button.is-visible{opacity:1;visibility:visible;transform:translateZ(0);pointer-events:auto;transition:opacity var(--vue-scroll-rect-back-to-top-transition-duration) ease,transform var(--vue-scroll-rect-back-to-top-transition-duration) ease,visibility 0s linear 0s}.vue-scroll-rect>.back-to-top-button.is-visible:hover{background:var(--vue-scroll-rect-back-to-top-bg-hover)}.vue-scroll-rect>.back-to-top-button:not(.is-visible):hover{background:var(--vue-scroll-rect-back-to-top-bg)}.vue-scroll-rect:hover>.scrollbar{opacity:1;transition:opacity .1s}.vue-scroll-rect.pulling *{user-select:none;-webkit-user-select:none}.vue-scroll-rect.always-show-scrollbar>.scrollbar,.vue-scroll-rect .dragging>.scrollbar{opacity:1}.vue-scroll-rect.background-clickable>.scrollbar{pointer-events:all}.vue-scroll-rect>.scrollbar{position:absolute;opacity:0;transition:opacity 1.5s;pointer-events:none}.vue-scroll-rect>.scrollbar:hover{opacity:1}.vue-scroll-rect>.scrollbar .thumb{position:absolute;background-color:var(--vue-scroll-rect-scrollbar-thumb-color);border-radius:var(--vue-scroll-rect-scrollbar-thumb-radius);pointer-events:all}.vue-scroll-rect>.scrollbar .thumb:hover{background-color:var(--vue-scroll-rect-scrollbar-thumb-color-light)}.vue-scroll-rect>.scrollbar .thumb:active{background-color:var(--vue-scroll-rect-scrollbar-thumb-color-pressed)}.vue-scroll-rect>.scrollbar.horizontal{left:0;bottom:0;right:0;height:var(--vue-scroll-rect-scrollbar-size)}.vue-scroll-rect>.scrollbar.horizontal .thumb{top:var(--vue-scroll-rect-scrollbar-thumb-margin);bottom:var(--vue-scroll-rect-scrollbar-thumb-margin)}.vue-scroll-rect>.scrollbar.vertical{top:0;bottom:0;right:0;width:var(--vue-scroll-rect-scrollbar-size)}.vue-scroll-rect>.scrollbar.vertical .thumb{left:var(--vue-scroll-rect-scrollbar-thumb-margin);right:var(--vue-scroll-rect-scrollbar-thumb-margin)}@keyframes vue-scroll-rect-pull-spin{to{transform:rotate(360deg)}}