Random-English-Learning/asset/less/main.less

html{_background-image:url(about:blank);_background-attachment:fixed;}body{margin:0;padding:0;font:12px/2em "Courier","兰亭黑","微软雅黑","\5B8B\4F53",Arial,sans-serif;background:#fff;}div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p,img,a{padding:0;margin:0;}a{text-decoration:none;outline:none;cursor:pointer;}img{vertical-align:top;}table{border-collapse:collapse;}img,table,fieldset{border:0;}ol,ul{list-style:none;}li{list-style-type:none;}h1,h2,h3,h4,h5,h6{font-size:12px;font-weight:normal;}.clear{overflow:auto;overflow-y:hidden;zoom:1;}

html,body{height:100%;width:100%;}
::-webkit-scrollbar{display:none;}

#main{
    .title{
        height:30px;background:#49A3D4;color:#fff;font-size:14px;text-align:center;line-height:30px;position:relative;;
        span{-webkit-app-region: drag;}
        a{position:absolute;height:14px;border-radius:10px;width:40px;top:8px;font-size:9px;line-height:12px;display:block;-webkit-app-region: nodrag;}
        .minimize{background:#F9B148;right:10px;}
        .close{background:#FF5858;left:10px}
    }
    .tabs{
        display:flex;flex-flow:row;justify-content:center;align-items:stretch;height:40px;
        a{
            flex-grow:1;text-align:center;font-size:16px;line-height:40px;color:#666;background:#eee;
            &.on{font-weight:bold;background:#fff;}
            span{font-size:12px;color:#999}
        }
    }
    .content{position:absolute;bottom:0;left:0;right:0;top:70px;padding:20px;background:#fff;}
    .tabContent{
        display:none;height:100%;box-sizing:border-box;position:relative;
        &.on{display:block}
        input.search{display:block;width:100%;box-sizing:border-box;height:36px;border-radius:18px;border:1px solid #ccc;outline:none;padding:0 50px 0 20px;font-size:16px;text-align: center;background:url(../img/search.png) no-repeat;background-position:right 5px center;background-size:24px;color:#999}
        .list{
            position:absolute;top:56px;bottom:0;right:0;left:0;overflow-y:scroll;
            &:first-child{padding-bottom: 60px;}
            li{
                height:32px;border-bottom:1px dashed #ccc;line-height:32px;position: relative;font-size:16px;padding:0 15px;
                &:last-child{border:none}
                &:hover{background:#eee}
                .btn{position:absolute;right:0;top:0;height:32px;}
                a{padding:0 5px;font-size:16px;margin:0 5px;}
            }
        }
        .control{}
    }
    .loading{display:none;width:100%;height:100%;position: absolute;top:0;left:0;right:0;z-index:100;bottom:0;background:rgba(0,0,0,0.6);justify-content:center;align-items:center;
        &.on{display:flex}
        p{color:#fff;line-height:40px;font-size:28px}
    }
    .settings{
        a.save{display:block;width:100px;height:40px;line-height:40px;background:#ff5858;color:#fff;text-align:center;margin:20px auto}
    }
}

#popup{
    background:#49A3D4;color:#fff;padding:20px;box-sizing:border-box;overflow:scroll;position: relative;
    .movebar{-webkit-app-region: drag;position:absolute;top:0;left:0;right:60px;height:20px;}
    .loading{display:none;width:100%;height:100%;position: absolute;top:0;left:0;right:0;z-index:100;bottom:0;background:rgba(0,0,0,0.6);justify-content:center;align-items:center;
        &.on{display:flex}
        p{color:#fff;line-height:40px;font-size:16px}
    }
    a.close{
        position: absolute;right:5px;top:5px;background:#FF5858;font-size:10px;display:block;width:40px;height:14px;border-radius:20px;text-align:center;line-height:12px;

    }
    .word{
        line-height:20px;height:49px;border-bottom:1px solid #fff;position: relative;margin-bottom:10px;padding-bottom:5px;
        .w{font-size:24px;line-height:24px}
        .pron{font-size:14px;}
        a{
            font-size:14px;color:rgba(255,255,255,0.8);margin-left:10px;
            &:hover{color:#fff}
        }
    }
    .def{
        line-height:20px;font-size:12px;border-bottom:1px solid #fff;padding-bottom:10px;
    }
    .example{
        .ex{
            border-bottom:1px dashed #eee;padding:10px 0;
            &:last-child{border:none;margin-bottom:10px}
            &:hover{
                background:rgba(255,255,255,0.3);
                p:last-child{
                    color:rgba(255,255,255,1);
                    &:after{content:''}
                }
            }
            p{line-height:12px;}
            p:last-child{
                padding-top:10px;color:rgba(255,255,255,0);position:relative;
                &:after{content:'********************';position: absolute;left:0;right:0;top:10px;bottom:0;z-index:10;color:rgba(255,255,255,1);line-height:12px;}
            }
        }
    }
    .from{
        line-height:24px;text-align: center;background:rgba(255,255,255,0.3);border-radius:20px;font-size:12px;
        a{color:#fff}
    }
}

#import{
    padding:20px;text-align:center;
    .importForm{width:260px}
    textarea{width:260px;height:320px;border:1px #ddd solid;outline:none;padding:10px;box-sizing:border-box;resize:none;line-height:20px;display:block;margin-bottom:20px;}
    a{display:inline-block;width:80px;height:30px;margin:0 auto;border:1px solid #ccc;background:#eee;line-height:30px}
    .loading{display:none;width:100%;height:100%;position: absolute;top:0;left:0;right:0;z-index:100;bottom:0;background:rgba(0,0,0,0.6);justify-content:center;align-items:center;
        &.on{display:flex}
        p{color:#fff;line-height:40px;font-size:16px}
    }
}