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%}

#main{
    .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:40px;padding:20px;}
    .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}
    }
}

#popup{
    background:#49A3D4;color:#fff;padding:20px;box-sizing:border-box;overflow:scroll;
    .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:12px;display:block;width:20px;height:20px;border-radius:20px;text-align:center;line-height:20px;

    }
    .word{
        line-height:20px;height:49px;border-bottom:1px dashed #fff;position: relative;margin-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 dashed #fff;margin-bottom:5px;padding-bottom:5px;
    }
    .example{
        .ex{
            border-bottom:1px dashed #e1e1e1;padding-bottom:5px;margin-bottom:5px;
            &:last-child{border:none;padding:0;margin-bottom:10px}
            p:first-child{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}
    }
}