vue-scrollbars/dist/bundle.css

A light vue scrollbar comes from jquery.scrollbar.js

/*************** SCROLLBAR BASE CSS ***************/
.scroll-wrapper{
    overflow:hidden !important;
    padding:0 !important;
    position:relative;
}
.scroll-wrapper > .scroll-content{
    border:none !important;
    box-sizing:content-box !important;
    height:auto;
    left:0;
    margin:0;
    max-height:none;
    max-width:none !important;
    overflow:scroll !important;
    padding:0;
    position:relative !important;
    top:0;
    width:auto !important;
}
.scroll-wrapper > .scroll-content::-webkit-scrollbar{
    height:0;
    width:0;
}
.scroll-element{
    display:none;
}
.scroll-element, .scroll-element div{
    box-sizing:content-box;
}
.scroll-element.scroll-x.scroll-scrollx_visible,
.scroll-element.scroll-y.scroll-scrolly_visible{
    display:block;
}
.scroll-element .scroll-bar,
.scroll-element .scroll-arrow{
    cursor:default;
}
.scroll-textarea{
    border:1px solid #cccccc;
    border-top-color:#999999;
}
.scroll-textarea > .scroll-content{
    overflow:hidden !important;
}
.scroll-textarea > .scroll-content > textarea{
    border:none !important;
    box-sizing:border-box;
    height:100% !important;
    margin:0;
    max-height:none !important;
    max-width:none !important;
    overflow:scroll !important;
    outline:none;
    padding:2px;
    position:relative !important;
    top:0;
    width:100% !important;
}
.scroll-textarea > .scroll-content > textarea::-webkit-scrollbar{
    height:0;
    width:0;
}
.scroll-element .scroll-bar{
    /*transition: width 0.5s linear, height 0.5s linear;*/
}
/*************** SCROLLBAR GOOGLE CHROME ***************/

.scrollbar-chrome > .scroll-element,
.scrollbar-chrome > .scroll-element div{
    border:none;
    margin:0;
    overflow:hidden;
    padding:0;
    position:absolute;
    z-index:10;
}
.scrollbar-chrome > .scroll-element{
    background-color:#ffffff;
}
.scrollbar-chrome > .scroll-element div{
    display:block;
    height:100%;
    left:0;
    top:0;
    width:100%;
}
.scrollbar-chrome > .scroll-element .scroll-element_outer{ }
.scrollbar-chrome > .scroll-element .scroll-element_track{
    background:#f1f1f1;
    border:1px solid #dbdbdb;
}
.scrollbar-chrome > .scroll-element.scroll-x{
    bottom:0;
    height:16px;
    left:0;
    min-width:100%;
    width:100%;
}
.scrollbar-chrome > .scroll-element.scroll-y{
    height:100%;
    min-height:100%;
    right:0;
    top:0;
    width:16px;
}
.scrollbar-chrome > .scroll-element .scroll-bar{
    background-color:#d9d9d9;
    border:1px solid #bdbdbd;
    cursor:default;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
}
.scrollbar-chrome > .scroll-element .scroll-bar:hover{
    background-color:#c2c2c2;
    border-color:#a9a9a9;
}
.scrollbar-chrome > .scroll-element.scroll-draggable .scroll-bar{
    background-color:#919191;
    border-color:#7e7e7e;
}
/* scrollbar height/width & offset from container borders */

.scrollbar-chrome > .scroll-content.scroll-scrolly_visible{ left:-16px; margin-left:16px; }
.scrollbar-chrome > .scroll-content.scroll-scrollx_visible{ top:-16px; margin-top:16px; }
.scrollbar-chrome > .scroll-element.scroll-x .scroll-bar{ height:8px; min-width:10px; top:3px; }
.scrollbar-chrome > .scroll-element.scroll-y .scroll-bar{ left:3px; min-height:10px; width:8px; }
.scrollbar-chrome > .scroll-element.scroll-x .scroll-element_outer{ border-left:1px solid #dbdbdb; }
.scrollbar-chrome > .scroll-element.scroll-x .scroll-element_track{ height:14px; left:-3px; }
.scrollbar-chrome > .scroll-element.scroll-x .scroll-element_size{ height:14px; left:-4px; }
.scrollbar-chrome > .scroll-element.scroll-y .scroll-element_outer{ border-top:1px solid #dbdbdb; }
.scrollbar-chrome > .scroll-element.scroll-y .scroll-element_track{ top:-3px; width:14px; }
.scrollbar-chrome > .scroll-element.scroll-y .scroll-element_size{ top:-4px; width:14px; }
/* update scrollbar offset if both scrolls are visible */

.scrollbar-chrome > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size{ left:-19px; }
.scrollbar-chrome > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size{ top:-19px; }
.scrollbar-chrome > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track{ left:-19px; }
.scrollbar-chrome > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track{ top:-19px; }
/*************** SCROLLBAR DYNAMIC ***************/

.scrollbar-dynamic > .scroll-element,
.scrollbar-dynamic > .scroll-element div{
    background:none;
    border:none;
    margin:0;
    padding:0;
    position:absolute;
    z-index:10;
}
.scrollbar-dynamic > .scroll-element div{
    display:block;
    height:100%;
    left:0;
    top:0;
    width:100%;
}
.scrollbar-dynamic > .scroll-element.scroll-x{
    bottom:2px;
    height:7px;
    left:0;
    min-width:100%;
    width:100%;
}
.scrollbar-dynamic > .scroll-element.scroll-y{
    height:100%;
    min-height:100%;
    right:2px;
    top:0;
    width:7px;
}
.scrollbar-dynamic > .scroll-element .scroll-element_outer{
    opacity:0.3;
    -webkit-border-radius:12px;
    -moz-border-radius:12px;
    border-radius:12px;
}
.scrollbar-dynamic > .scroll-element .scroll-element_size{
    background-color:#cccccc;
    opacity:0;
    -webkit-border-radius:12px;
    -moz-border-radius:12px;
    border-radius:12px;
    -webkit-transition:opacity 0.2s;
    -moz-transition:opacity 0.2s;
    -o-transition:opacity 0.2s;
    -ms-transition:opacity 0.2s;
    transition:opacity 0.2s;
}
.scrollbar-dynamic > .scroll-element .scroll-bar{
    background-color:#6c6e71;
    -webkit-border-radius:7px;
    -moz-border-radius:7px;
    border-radius:7px;
}
/* scrollbar height/width & offset from container borders */

.scrollbar-dynamic > .scroll-element.scroll-x .scroll-bar{
    bottom:0;
    height:7px;
    min-width:24px;
    top:auto;
}
.scrollbar-dynamic > .scroll-element.scroll-y .scroll-bar{
    left:auto;
    min-height:24px;
    right:0;
    width:7px;
}
.scrollbar-dynamic > .scroll-element.scroll-x .scroll-element_outer{
    bottom:0;
    top:auto;
    left:2px;
    -webkit-transition:height 0.2s;
    -moz-transition:height 0.2s;
    -o-transition:height 0.2s;
    -ms-transition:height 0.2s;
    transition:height 0.2s;
}
.scrollbar-dynamic > .scroll-element.scroll-y .scroll-element_outer{
    left:auto;
    right:0;
    top:2px;
    -webkit-transition:width 0.2s;
    -moz-transition:width 0.2s;
    -o-transition:width 0.2s;
    -ms-transition:width 0.2s;
    transition:width 0.2s;
}
.scrollbar-dynamic > .scroll-element.scroll-x .scroll-element_size{ left:-4px; }
.scrollbar-dynamic > .scroll-element.scroll-y .scroll-element_size{ top:-4px; }
/* update scrollbar offset if both scrolls are visible */

.scrollbar-dynamic > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size{ left:-11px; }
.scrollbar-dynamic > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size{ top:-11px; }
/* hover & drag */

.scrollbar-dynamic > .scroll-element:hover .scroll-element_outer,
.scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer{
    overflow:hidden;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter:alpha(opacity=70);
    opacity:0.7;
}
.scrollbar-dynamic > .scroll-element:hover .scroll-element_outer .scroll-element_size,
.scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer .scroll-element_size{
    opacity:1;
}
.scrollbar-dynamic > .scroll-element:hover .scroll-element_outer .scroll-bar,
.scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer .scroll-bar{
    height:100%;
    width:100%;
    -webkit-border-radius:12px;
    -moz-border-radius:12px;
    border-radius:12px;
}
.scrollbar-dynamic > .scroll-element.scroll-x:hover .scroll-element_outer,
.scrollbar-dynamic > .scroll-element.scroll-x.scroll-draggable .scroll-element_outer{
    height:20px;
    min-height:7px;
}
.scrollbar-dynamic > .scroll-element.scroll-y:hover .scroll-element_outer,
.scrollbar-dynamic > .scroll-element.scroll-y.scroll-draggable .scroll-element_outer{
    min-width:7px;
    width:20px;
}
/*************** SCROLLBAR MAC OS X ***************/

.scrollbar-macosx > .scroll-element,
.scrollbar-macosx > .scroll-element div{
    background:none;
    border:none;
    margin:0;
    padding:0;
    position:absolute;
    z-index:10;
}
.scrollbar-macosx > .scroll-element div{
    display:block;
    height:100%;
    left:0;
    top:0;
    width:100%;
}
.scrollbar-macosx > .scroll-element .scroll-element_track{ display:none; }
.scrollbar-macosx > .scroll-element .scroll-bar{
    background-color:#6C6E71;
    display:block;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter:alpha(opacity=0);
    opacity:0;
    -webkit-border-radius:7px;
    -moz-border-radius:7px;
    border-radius:7px;
    -webkit-transition:opacity 0.2s linear;
    -moz-transition:opacity 0.2s linear;
    -o-transition:opacity 0.2s linear;
    -ms-transition:opacity 0.2s linear;
    transition:opacity 0.2s linear;
}
.scrollbar-macosx:hover > .scroll-element .scroll-bar,
.scrollbar-macosx > .scroll-element.scroll-draggable .scroll-bar{
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter:alpha(opacity=70);
    opacity:0.7;
}
.scrollbar-macosx > .scroll-element.scroll-x{
    bottom:0px;
    height:0px;
    left:0;
    min-width:100%;
    overflow:visible;
    width:100%;
}
.scrollbar-macosx > .scroll-element.scroll-y{
    height:100%;
    min-height:100%;
    right:0px;
    top:0;
    width:0px;
}
/* scrollbar height/width & offset from container borders */
.scrollbar-macosx > .scroll-element.scroll-x .scroll-bar{ height:7px; min-width:10px; top:-9px; }
.scrollbar-macosx > .scroll-element.scroll-y .scroll-bar{ left:-9px; min-height:10px; width:7px; }
.scrollbar-macosx > .scroll-element.scroll-x .scroll-element_outer{ left:2px; }
.scrollbar-macosx > .scroll-element.scroll-x .scroll-element_size{ left:-4px; }
.scrollbar-macosx > .scroll-element.scroll-y .scroll-element_outer{ top:2px; }
.scrollbar-macosx > .scroll-element.scroll-y .scroll-element_size{ top:-4px; }
/* update scrollbar offset if both scrolls are visible */
.scrollbar-macosx > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size{ left:-11px; }
.scrollbar-macosx > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size{ top:-11px; }
/******************* PAGE THUMBNAIL SCROLLBAR *******************/

.scrollbar-map > .scroll-element_outer{
    display:none;
    height:100px;
    position:absolute;
    right:10px;
    top:10px;
    width:100px;
    background-repeat: no-repeat;
    background-size: contain;
}
.scrollbar-map > .scroll-element_outer .scroll-element_size,
.scrollbar-map > .scroll-element_outer .scroll-element_track{
    background-color:#999;
    background-color:rgba(153, 153, 153, 0.4);
    height:100%;
    position:absolute;
    right:0;
    top:0;
    width:100%;
}
.scrollbar-map > .scroll-element_outer .scroll-bar{
    background-color:#CCC;
    background-color:rgba(204, 204, 204, 0.5);
    height:100%;
    position:absolute;
    left:0;
    top:0;
    width:100%;
}
.scrollbar-map > .scroll-element_outer.scroll-scrollx_visible,
.scrollbar-map > .scroll-element_outer.scroll-scrolly_visible{
    display:block;
}
/*************** SIMPLE INNER SCROLLBAR ***************/

.scrollbar-inner > .scroll-element,
.scrollbar-inner > .scroll-element div{
    border:none;
    margin:0;
    padding:0;
    position:absolute;
    z-index:10;
}
.scrollbar-inner > .scroll-element div{
    display:block;
    height:100%;
    left:0;
    top:0;
    width:100%;
}
.scrollbar-inner > .scroll-element.scroll-x{
    bottom:2px;
    height:8px;
    left:0;
    width:100%;
}
.scrollbar-inner > .scroll-element.scroll-y{
    height:100%;
    right:2px;
    top:0;
    width:8px;
}
.scrollbar-inner > .scroll-element .scroll-element_outer{
    overflow:hidden;
}
.scrollbar-inner > .scroll-element .scroll-element_outer,
.scrollbar-inner > .scroll-element .scroll-element_track,
.scrollbar-inner > .scroll-element .scroll-bar{
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
}
.scrollbar-inner > .scroll-element .scroll-element_track,
.scrollbar-inner > .scroll-element .scroll-bar{
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter:alpha(opacity=40);
    opacity:0.4;
}
.scrollbar-inner > .scroll-element .scroll-element_track{ background-color:#e0e0e0; }
.scrollbar-inner > .scroll-element .scroll-bar{ background-color:#c2c2c2; }
.scrollbar-inner > .scroll-element:hover .scroll-bar{ background-color:#919191; }
.scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar{ background-color:#919191; }
/* update scrollbar offset if both scrolls are visible */

.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track{ left:-12px; }
.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track{ top:-12px; }
.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size{ left:-12px; }
.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size{ top:-12px; }
/*************** SIMPLE OUTER SCROLLBAR ***************/

.scrollbar-outer > .scroll-element,
.scrollbar-outer > .scroll-element div{
    border:none;
    margin:0;
    padding:0;
    position:absolute;
    z-index:10;
}
.scrollbar-outer > .scroll-element{
    background-color:#ffffff;
}
.scrollbar-outer > .scroll-element div{
    display:block;
    height:100%;
    left:0;
    top:0;
    width:100%;
}
.scrollbar-outer > .scroll-element.scroll-x{
    bottom:0;
    height:12px;
    left:0;
    width:100%;
}
.scrollbar-outer > .scroll-element.scroll-y{
    height:100%;
    right:0;
    top:0;
    width:12px;
}
.scrollbar-outer > .scroll-element.scroll-x .scroll-element_outer{ height:8px; top:2px; }
.scrollbar-outer > .scroll-element.scroll-y .scroll-element_outer{ left:2px; width:8px; }
.scrollbar-outer > .scroll-element .scroll-element_outer{ overflow:hidden; }
.scrollbar-outer > .scroll-element .scroll-element_track{ background-color:#eeeeee; }
.scrollbar-outer > .scroll-element .scroll-element_outer,
.scrollbar-outer > .scroll-element .scroll-element_track,
.scrollbar-outer > .scroll-element .scroll-bar{
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
}
.scrollbar-outer > .scroll-element .scroll-bar{ background-color:#d9d9d9; }
.scrollbar-outer > .scroll-element .scroll-bar:hover{ background-color:#c2c2c2; }
.scrollbar-outer > .scroll-element.scroll-draggable .scroll-bar{ background-color:#919191; }
/* scrollbar height/width & offset from container borders */

.scrollbar-outer > .scroll-content.scroll-scrolly_visible{ left:-12px; margin-left:12px; }
.scrollbar-outer > .scroll-content.scroll-scrollx_visible{ top:-12px; margin-top:12px; }
.scrollbar-outer > .scroll-element.scroll-x .scroll-bar{ min-width:10px; }
.scrollbar-outer > .scroll-element.scroll-y .scroll-bar{ min-height:10px; }
/* update scrollbar offset if both scrolls are visible */

.scrollbar-outer > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track{ left:-14px; }
.scrollbar-outer > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track{ top:-14px; }
.scrollbar-outer > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size{ left:-14px; }
.scrollbar-outer > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size{ top:-14px; }