@import './mixin.scss';

.menuBtn{
    @include box(3vw, 3vw);
    position: fixed;
    bottom: 0; right: 0; 
    z-index: 12;
    @include transition(transform 600ms ease);
    @include icon('../asset/icons/left-square.svg');
}
.menuBtnOut{
    @include icon('../asset/icons/profile.svg');
    @include transform(translateX(-25vw));
}

.menuList{
    z-index: 10;
    position: absolute;
    top: 0; right: 0;
    box-sizing: border-box;
    @include box(25vw, 100vh);
    background-color: rgb(250, 250, 250);
    @include border;
    @include transition(transform 600ms ease);
    @include transform(translateX(40vw));
    .menuContainer{
        @include box(15vw, 50vh);
        margin: 5vh auto;
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        li{
            a{ text-decoration: none; color: #999; }
            list-style: none;
            height: 7vh;
            text-align: center;
            line-height: 7vh;
            font-size: 0.17rem;
            font-weight: bold;
            box-sizing: border-box;
            @include transition(all 200ms ease);
            &:active{
                @include transform(translateX(8px));
            }
        }
    }
    // 关于软件
    .aboutAuthor{
        @include box(10vw, 8vh);
        @include transition(all 0.6s);
        position: absolute;
        bottom: 10px;left: 50%; margin-left: -5vw;
        .aboutWrapper{
            @include box(100%, 100%);
            display: flex;
            align-items: center;
            justify-content: space-around;
            &:hover{
                border-bottom: 4px solid #404040;   
            }
            .authorIcon{
                @include box(3vw, 3vw);
                @include icon('../asset/icons/idcard.svg');
                display: inline-block;
            }
            span{
                font-size: 0.16rem;
                font-weight:  bold;
            }
        }
    }
    .aboutApp{
        margin-top: 50px;
        li{
            font-size: 0.14rem;
            text-align: center;
            @include box(100%, 8vh);
            list-style: none;
            font-weight: bold;
            word-wrap: break-word;
            span:nth-child(1){
                width: 30%;
            }
            span:nth-child(2){
                width: 70%;
            }
        }
    }

    #backBtn{
        font-weight: bold;
        @include transition(all 300ms ease);
        @include box(3.5vw, 4vh);
        text-align: center;
        line-height: 4vh;
        font-size: 0.15rem;
        @include border;
        position: absolute;
        right: 20px;
        @include btn-scale(0.8);
    }
}

.deepdark{
    @include deepDark;
}
.menuListOut{
    @include transform(translateX(0));
}


// 右击菜单     
// lastmodified  2019/1/28
#contextMenu{
    width : 12vw;
    position: absolute;
    z-index: 20;
    background-color: #fafafa;
    @include border;
    border-radius: 10px;
    overflow: hidden;
    ul{
        position: relative;
        @include box(100%, 100%);
        li{
            text-align: center;
            line-height: 6.25vh;
            list-style: none;
            @include transition(transform 600ms);
            @include box(100%, 12.5%);
            @include btn-scale(0.8);
            font-size: 0.13rem;
            font-weight: bold;
            &:hover{
                background-color: #ebebeb;
            }
        }
    }
}