12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455 |
- .scrollbar {
- position: absolute;
- right: 0;
- bottom: 0;
- box-sizing: border-box;
- overflow: hidden;
- line-height: 0;
- -moz-user-select: none;
- -ms-user-select: none;
- -webkit-user-select: none;
- user-select: none;
- border-radius: 2px;
- -webkit-touch-callout: none; }
- .scrollbar.is-hovering {
- background: rgba(238, 238, 238, 0.4); }
- .scrollbar.is-dragging {
- background: rgba(238, 238, 238, 0.6) !important;
- opacity: 1; }
- .scrollbar.is-disabled {
- display: none; }
- .scrollbar-handle {
- position: absolute;
- top: 0;
- left: 0;
- line-height: 0;
- cursor: pointer;
- background: rgba(224, 224, 224, 0.6);
- border-radius: 2px;
- transition: width, height .5s; }
- .scrollbar.is-dragging .scrollbar-handle {
- background: rgba(150, 150, 150, 0.8) !important; }
- .scrollbar.is-hovering .scrollbar-handle {
- background: rgba(150, 150, 150, 0.6) !important; }
- .scrollbar.is-dragging, .scrollbar.is-hovering {
- border-radius: 5px; }
- .scrollbar.is-dragging .scrollbar-handle, .scrollbar.is-hovering .scrollbar-handle {
- border-radius: 5px; }
- .scrollbar-vertical {
- width: 4px;
- height: calc(100% - 2 * 5px);
- margin: 5px 3px; }
- .scrollbar-vertical.is-dragging, .scrollbar-vertical.is-hovering {
- width: 10px;
- margin: 5px 1px; }
- .scrollbar-vertical .scrollbar-handle {
- width: 100%; }
- .scrollbar-horizontal {
- width: calc(100% - 2 * 5px);
- height: 4px;
- margin: 3px 5px; }
- .scrollbar-horizontal.is-dragging, .scrollbar-horizontal.is-hovering {
- height: 10px;
- margin: 1px 5px; }
- .scrollbar-horizontal .scrollbar-handle {
- height: 100%; }
|