135 lines
5.6 KiB
SCSS
135 lines
5.6 KiB
SCSS
@charset "UTF-8";
|
|
/**
|
|
*
|
|
* @authors yutent (yutent@doui.cc)
|
|
* @date 2017-04-17 16:43:22
|
|
*
|
|
*/
|
|
|
|
@import "../../../../css/var.scss";
|
|
|
|
.do-meditor {position:relative;width:100%;height:100%;min-height:180px;padding-top:43px;border:1px solid #ddd;background:#fff;color:#666;
|
|
|
|
::-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-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%}
|
|
|
|
} |
JavaScript
95.2%
CSS
4.8%