@jxstjh/jhvideo/src/style/sideMenu.less

HTML5 jhvideo base on MPEG2-TS Stream Player

.@{prefix-cls}-video-box {
    &.show-tools.show-setting {
        .@{prefix-cls}-toolbar.side-menu {
            right: 0px;
        }
    }
}
.@{prefix-cls}-toolbar {
    &.side-menu{
        height: auto;
        ul,li{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        position: absolute;
        // right: 0;
        right: -132px;
        left: unset;
        bottom: 2.8em;
        // border: 1px solid red;
        z-index: 9;
        width: 130px;
        line-height: 1em;
        .menu a {
            background: fade( #3d3d3d,28%);
            color: #fff;
            padding: 10px;
            padding-right: 20px;
            text-align: right;
            display: block;
            border-bottom: 1px solid fade( #3d3d3d,28%);
            -webkit-transition: 0.5s all;
            transition: 0.5s all;
        }

        .menu a:hover {
            background: fade( #3d3d3d,70%);
            padding: 10px 30px 10px 20px;
        }

        .menu li:first-child a,
        .menu li .menu__drop li:first-child a {
            border-radius: 3px 3px 0 0;
        }

        .menu li:last-child a,
        .menu li .menu__drop li:last-child a {
            border-radius: 0 0 3px 3px;
            border-bottom: 0;
        }

        .menu li .menu__drop li a {
            border-radius: 0;
            border-bottom: 1px solid fade( #3d3d3d,28%);;
        }

        /*Всплывающие меню*/

        .menu__list {
            position: relative;
        }

        .menu__drop {
            position: absolute;
            width: 100%;
            right: 100%;
            bottom: -9999em;
            opacity: 0;
            border-right: 6px solid transparent;
            -webkit-transition: 0.5s opacity;
            transition: 0.5s opacity;
        }

        .menu__list:hover .menu__drop {
            opacity: 1;
            bottom: 0;
        }


        .menu__list::after {
            content: " ";
            position: absolute;
            border: 5px solid;
            border-color: transparent #eee transparent transparent;
            top: 1em;
            left: 0.7em;
            -webkit-transition: 0.5s;
            transition: 0.5s;
        }

        .menu__list:hover::after {
            -webkit-transform: scaleX(-1);
            -ms-transform: scaleX(-1);
            transform: scaleX(-1);
        }
    }
}