wcui/js/lib/meditor/skin/main.scss

@charset "UTF-8";
/**
 * 
 * @authors yutent (yutent@doui.cc)
 * @date    2017-04-17 16:43:22
 * 
 */

@import "../../../../css/var.scss";

::-webkit-scrollbar {width:5px;height:5px;background:#ebeeec;}
::-webkit-scrollbar:hover {background:rgba(0,0,0,.05);}
::-webkit-scrollbar-button {display:none;}
::-webkit-scrollbar-thumb {background:nth($ct, 1);}
::-webkit-scrollbar-thumb:hover {background:nth($ct, 3);}

.do-meditor {position:relative;width:100%;height:100%;min-height:180px;padding-top:43px;border:1px solid #ddd;background:#fff;color:#666;}
.do-meditor-font {font-family:"PingFang SC","Helvetica Neue","Hiragino Sans GB","Segoe UI","Microsoft YaHei",sans-serif;}




/* 关于编辑器模块*/
.do-meditor-about {width:400px;padding:10px 20px;
    pre {width:100%;padding-bottom:15px;line-height:1;font-size:14px;}
    a {color:#049789}
    p {margin:0 auto 5px;}
}

/*表格模块*/

.do-meditor-table {width:270px;height:270px;padding:10px;
    li {width:100%;height:25px;
        span {float:left;width:25px;height:25px;border:2px solid #fff;background:#f2f2f2;}
        span.active {background:rgba(4,151,137,.2);}
    }
}

/*表情模块*/
.do-meditor-face {float:left;;width:241px;height:241px;margin:10px;border-top:1px solid #e2e2e2;border-left:1px solid #e2e2e2;

    li {float:left;width:40px;height:40px;padding:8px;border:1px solid #e2e2e2;border-top:0;border-left:0}
    li img {width:100%;@include ts();}
    li:hover img {-webkit-transform:scale(3);-moz-transform:scale(3);-ms-transform:scale(3);transform:scale(3);}
}


/*段落模块*/
.do-meditor-h1 {width:150px;height:auto;padding:5px 0;

    li {width:100%;height:auto;padding:0 10px;line-height:1.5;font-size:18px;cursor:default;}
    li:hover {background:#f2f2f2;}
    li::before {font-family:"ui font" !important;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}
    li.h1 {font-size:23px;}
    li.h2 {font-size:21px;}
    li.h1::before {content:"\e62b  "}
    li.h2::before {content:"\e625  "}
    li.h3::before {content:"\e626  "}
    li.h4::before {content:"\e629  "}
    li.h5::before {content:"\e62a  "}
    li.h6::before {content:"\e624  "}
}

/*通用输入模块, 链接/图片插入/文件插入/代码块插入*/
.do-meditor-common {width:360px;height:auto;padding:15px 20px;
    section {width:100%;height: 35px;margin:10px 0;line-height:35px;

        &.input {line-height:33px;border:1px solid #e9e9e9;}
        .label {float: left;width:30%;text-align:center;background:#f7f7f7;}
        label {float: left;width:50%;}
        .txt {float: left;width:70%;height:33px;padding:0 8px;border:0;border-left:1px solid #e9e9e9;background:#fff;color:#666;}
        .submit {float:right;width:30%;height:35px;background:#ddd;color:#666;text-align:center;}
    }
}

.do-meditor-codeblock {width:780px;height:auto;padding:15px 20px;background:#fafafa;
    section {display:block;width:100%;height:auto;margin:10px 0;line-height:35px;
    
        .label {float: left;width:80px;}
        select {float:left;width:200px;height:35px;padding:0 30px 0 10px;border:0;border-bottom:1px solid #e7e7e7;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAMAAABV0m3JAAAADFBMVEUAAAD///+Pj4+JiYkxcGihAAAABHRSTlMAABBwqVQF9wAAADNJREFUeNqlzjEOACAMw8DQ/v/PSE5FFhaEx5usdekBuzRVH0RtCqJYELUFrVjQigX/5jdvzgDh9izlMQAAAABJRU5ErkJggg==) no-repeat right 8px;color:nth($cgr, 1);outline:none;-webkit-appearance:none;-moz-appearance: none;@include ts;
            
            &::-ms-expand {display:none;}

            &:focus {border-color:nth($ct, 1);}
        }
        textarea {width:100%;height:300px;padding:5px 10px;border:1px solid #ddd;background:#fff;resize:none;outline:none;}
        .submit {float:right;width:80px;height:35px;background:#ddd;color:#666;text-align:center;}
    }
}




.do-meditor {
    .tool-bar {overflow:hidden;position:absolute;top:0;left:0;z-index:99;width:100%;height:43px;padding:5px 10px;border-bottom:1px solid #ddd;background:#f5f5f5;color:#666;

        span {display:inline-block;width:30px;height:32px;line-height:32px;text-align:center;font-size:20px;}
        span:hover {background:#e5e5e5;}
        .icon-pipe {width:20px;}
        .icon-pipe:hover {background:none;}
        .icon-pipe::before {content:"\e62c"}
        .icon-h1::before {content:"\e62b"}
        .icon-bold::before {content:"\e62f"}
        .icon-italic::before {content:"\e639"}
        .icon-through::before {content:"\e619"}
        .icon-link::before {content:"\e61c"}
        .icon-inlinecode::before {content:"\e63a"}
        .icon-blockcode::before {content:"\e632"}
        .icon-quote::before {content:"\e61b"}
        .icon-hr::before {content:"\e614"}
        .icon-time::before {content:"\e636"}
        .icon-face::before {content:"\e630"}
        .icon-image::before {content:"\e637"}
        .icon-file::before {content:"\e618"}
        .icon-preview::before {content:"\e61f"}
        .icon-fullscreen::before {content:"\e621"}
        .icon-table::before {content:"\e617"}
        .icon-ordered::before {content:"\e638"}
        .icon-unordered::before {content:"\e633"}
        .icon-about::before {content:"\e700"}
    }

    .editor-body{overflow:hidden;overflow-y:auto;float:left;width:100%;height:100%;padding:5px 5px 50px;border:0;outline:none;resize:none;color:#666;background:#fff;}
    .md-preview {float:right;overflow:hidden;overflow-y:auto;display:block;width:50%;height:100%;padding:10px 10px 50px;line-height:2;border-left:1px solid #ddd;color:#666;font-size:14px;background:#fff;}



    /*全屏模式*/
    &.fullscreen {position:fixed;left:0;top:0;z-index:999;}

    &.preview .editor-body {width:50%}

}