web-apps/apps/common/main/resources/less/scroller.less

.ps-container.oo {
    .ps-scrollbar-x-rail {
        z-index: 1;
        bottom: 1px;
        height: 9px;
        margin-right: 1px;
        margin-left: 1px;

        &.always-visible-x {
            opacity: 1 !important;
        }

        .ps-scrollbar-x {
            background-color: @gray-light;

            &.always-visible-x {
                bottom: 0px;
                height: 9px;

                background-color: @gray-light;
                .background-ximage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAQAAAAz1Zf0AAAAIUlEQVR42mNgAILz/0GQAQo+/gdBBqLAqE5ydH5k+sgEANHgUH2JtDRHAAAAAElFTkSuQmCC',
                        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAaAgMAAADZOtQaAAAACVBMVEUAAADPz8/x8fFVrc9qAAAAAXRSTlMAQObYZgAAABZJREFUeNpjYAgNYOBaxcDEgAsMLXkA/sUJfm1m4l8AAAAASUVORK5CYII=', 14px);

                background-repeat: no-repeat;
                background-position: center 0;
                .border-radius(2px);
                border: 1px solid @gray;
                -o-transition: background-color .5s 0 linear;
                -webkit-transition: background-color .5s 0 linear;
                -moz-transition: background-color .5s 0 linear;
                transition: background-color .5s 0 linear;
            }
        }

        &:hover,
        .hover {
            .ps-scrollbar-x {
                &.always-visible-x {
                    background-color: @gray;
                    background-position: center -7px;
                }
            }
        }

        &.in-scrolling {
            .ps-scrollbar-x {
                &.always-visible-x {
                    background-color: @gray-soft;
                    border-color: @gray-soft;
                    background-position: center -7px;
                }
            }
        }
    }

    .ps-scrollbar-y-rail {
        z-index: 1;
        right: 1px;
        width: 9px;
        margin-top: 1px;
        margin-bottom: 1px;

        &.always-visible-y {
            opacity: 1 !important;
        }

        .ps-scrollbar-y {
            background-color: @gray-light;

            &.always-visible-y {
                right: 0px;
                width: 9px;

                background-color: @gray-light;
                .background-ximage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAQAAAAz1Zf0AAAAIUlEQVR42mNgAILz/0GQAQo+/gdBBqLAqE5ydH5k+sgEANHgUH2JtDRHAAAAAElFTkSuQmCC',
                        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAaAgMAAADZOtQaAAAACVBMVEUAAADPz8/x8fFVrc9qAAAAAXRSTlMAQObYZgAAABZJREFUeNpjYAgNYOBaxcDEgAsMLXkA/sUJfm1m4l8AAAAASUVORK5CYII=', 14px);

                background-repeat: no-repeat;
                background-position: 0 center;
                .border-radius(2px);
                border: 1px solid @gray;
                -o-transition: background-color .5s 0 linear;
                -webkit-transition: background-color .5s 0 linear;
                -moz-transition: background-color .5s 0 linear;
                transition: background-color .5s 0 linear;
            }
        }

        &:hover,
        .hover {
            .ps-scrollbar-y {
                &.always-visible-y {
                    background-color: @gray;
                    background-position: -7px center;
                }
            }
        }

        &.in-scrolling {
            .ps-scrollbar-y {
                &.always-visible-y {
                    background-color: @gray-soft;
                    border-color: @gray-soft;
                    background-position: -7px center;
                }
            }
        }
    }

    .ps-container:hover .ps-scrollbar-y-rail,
    .ps-container.hover .ps-scrollbar-y-rail,
    .ps-container .ps-scrollbar-y-rail:hover,
    .ps-container .ps-scrollbar-y-rail.hover,
    .ps-container .ps-scrollbar-y-rail.in-scrolling,
    .ps-container:hover .ps-scrollbar-x-rail,
    .ps-container.hover .ps-scrollbar-x-rail,
    .ps-container .ps-scrollbar-x-rail:hover,
    .ps-container .ps-scrollbar-x-rail.hover,
    .ps-container .ps-scrollbar-x-rail.in-scrolling {
        background-color: transparent !important;
        opacity: 1 !important;
    }
}