168 lines
12 KiB
SCSS
168 lines
12 KiB
SCSS
|
@charset "UTF-8";
|
||
|
|
/**
|
||
|
|
*
|
||
|
|
* @authors yutent (yutent@doui.cc)
|
||
|
|
* @date 2017-04-17 16:43:22
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
@import "var.scss";
|
||
|
|
|
||
|
|
@font-face {font-family: "mefont";
|
||
|
|
src: url('data:application/x-font-woff;charset=utf-8;base64,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
|
||
|
|
}
|
||
|
|
|
||
|
|
.do-meditor {position:relative;display:block;width:100%;height:100%;padding-top:41px;border:1px solid nth($cp, 3);background:#fff;color:nth($cgr, 3);
|
||
|
|
|
||
|
|
::-webkit-scrollbar {width:5px;height:5px;background:nth($cp, 1);}
|
||
|
|
::-webkit-scrollbar:hover {background:nth($cp, 2);}
|
||
|
|
::-webkit-scrollbar-button {display:none;}
|
||
|
|
::-webkit-scrollbar-thumb {background:nth($cgr, 1);}
|
||
|
|
::-webkit-scrollbar-thumb:hover {background:nth($cgr, 2);}
|
||
|
|
|
||
|
|
&.disabled{border-color:nth($co, 1);
|
||
|
|
|
||
|
|
&::after {position:absolute;left:0;top:0;z-index:100;width:100%;height:100%;content:"";background:rgba(255, 182, 24, 0.07);}
|
||
|
|
}
|
||
|
|
|
||
|
|
.tool-bar {overflow:hidden;position:absolute;top:0;left:0;z-index:99;width:100%;height:41px;line-height:40px;border-bottom:1px solid nth($cp, 2);background:#fff;color:nth($cd, 2);text-align:center;font-size:24px;
|
||
|
|
|
||
|
|
span {float:left;width:40px;height:40px;
|
||
|
|
|
||
|
|
&:hover,&.active {background:#f7f8fb;}
|
||
|
|
&.icon-pipe {width:28px;background:#fff;color:nth($cp, 3);}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.editor-body{overflow:hidden;overflow-y:auto;float:left;width:100%;height:100%;padding:5px 5px 90px;line-height:1.5;border:0;outline:none;resize:none;color:nth($cgr, 1);background:#fff;font-size:13px;font-family:Menlo,Monaco,Consolas,"Courier New",monospace;}
|
||
|
|
|
||
|
|
.md-preview {float:right;overflow:hidden;overflow-y:auto;display:block;width:50%;height:100%;padding:10px 10px 90px;line-height:1.5;border-left:1px solid nth($cp, 2);color:nth($cd, 1);font-size:14px;background:#fff;}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/*全屏模式*/
|
||
|
|
&.fullscreen {position:fixed;left:0;top:0;z-index:999;}
|
||
|
|
|
||
|
|
&.preview .editor-body {width:50%}
|
||
|
|
|
||
|
|
}
|
||
|
|
.do-meditor__font {font-family:"PingFang SC","Helvetica Neue","Hiragino Sans GB","Segoe UI","Microsoft YaHei",sans-serif;}
|
||
|
|
.do-meditor__icon {display:inline-block;font-family:"mefont" !important;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
|
||
|
|
|
||
|
|
&.icon-attach:before { content: "\e673"; }
|
||
|
|
&.icon-about:before { content: "\e674"; }
|
||
|
|
&.icon-blockcode:before { content: "\e675"; }
|
||
|
|
&.icon-bold:before { content: "\e679"; }
|
||
|
|
&.icon-through:before { content: "\e67a"; }
|
||
|
|
&.icon-fullscreen:before { content: "\e67b"; }
|
||
|
|
&.icon-italic:before { content: "\e67c"; }
|
||
|
|
&.icon-h2:before { content: "\e67d"; }
|
||
|
|
&.icon-h1:before { content: "\e67e"; }
|
||
|
|
&.icon-h4:before { content: "\e67f"; }
|
||
|
|
&.icon-h5:before { content: "\e680"; }
|
||
|
|
&.icon-h3:before { content: "\e681"; }
|
||
|
|
&.icon-help:before { content: "\e682"; }
|
||
|
|
&.icon-h6:before { content: "\e683"; }
|
||
|
|
&.icon-inlinecode:before { content: "\e684"; }
|
||
|
|
&.icon-hr:before { content: "\e685"; }
|
||
|
|
&.icon-link:before { content: "\e686"; }
|
||
|
|
&.icon-unordered:before { content: "\e687"; }
|
||
|
|
&.icon-ordered:before { content: "\e688"; }
|
||
|
|
&.icon-image:before { content: "\e689"; }
|
||
|
|
&.icon-pipe:before { content: "\e68a"; }
|
||
|
|
&.icon-preview:before { content: "\e68c"; }
|
||
|
|
&.icon-quote:before { content: "\e68d"; }
|
||
|
|
&.icon-table:before { content: "\e690"; }
|
||
|
|
&.icon-time:before { content: "\e691"; }
|
||
|
|
&.icon-face:before { content: "\e677"; }
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.do-meditor__button {overflow:hidden;position:relative;display:inline-block;width:auto;min-width:60px;height:40px;margin-left:5px;padding:0 10px;line-height:40px;color:nth($ct, 2);text-align:center;
|
||
|
|
|
||
|
|
&::before {position:absolute;left:-50%;top:-50%;z-index:-1;display:block;width:200%;height:200%;border-radius:50%;background:nth($cp, 1); content:"";opacity:0;transform: scale(0, .0); transition:opacity 1.3s cubic-bezier(0.23, 1, 0.32, 1),transform 1.3s cubic-bezier(0.23, 1, 0.32, 1);}
|
||
|
|
&:hover {
|
||
|
|
&::before {opacity:1;transform:scale(1, .8);}
|
||
|
|
}
|
||
|
|
&:active {background:nth($cp, 2)}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* 关于编辑器模块*/
|
||
|
|
.do-meditor-about {width:400px;padding:10px 20px;
|
||
|
|
pre {width:100%;padding-bottom:15px;line-height:1;font-size:14px;}
|
||
|
|
a {color:nth($ct, 1)}
|
||
|
|
p {margin:0 auto 5px;}
|
||
|
|
}
|
||
|
|
|
||
|
|
/*表格模块*/
|
||
|
|
|
||
|
|
.do-meditor-table {width:270px;height:270px;padding:0;
|
||
|
|
li {width:100%;height:27px;
|
||
|
|
span {float:left;width:27px;height:27px;border:2px solid #fff;background:#f2f2f2;}
|
||
|
|
span.active {background:rgba(4,151,137,.2);}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/*表情模块*/
|
||
|
|
.do-meditor-face {float:left;;width:241px;height:241px;border-top:1px solid #e2e2e2;border-left:1px solid #e2e2e2;
|
||
|
|
|
||
|
|
li {float:left;width:40px;height:40px;padding:5px;line-height:30px;border:1px solid #e2e2e2;border-top:0;border-left:0;text-align:center;}
|
||
|
|
li span {display:block;width:100%;height:100%;background:#fff;@include ts();}
|
||
|
|
li:hover span {box-shadow:0 1px 5px rgba(0,0,0,.2);transform:scale(3);}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/*段落模块*/
|
||
|
|
.do-meditor-h1 {width:150px;height:auto;
|
||
|
|
|
||
|
|
li {width:100%;height:auto;padding:0 10px;line-height:1.5;font-size:18px;cursor:default;}
|
||
|
|
li:hover {background:#f2f2f2;}
|
||
|
|
li.h1 {font-size:25px;}
|
||
|
|
li.h2 {font-size:23px;}
|
||
|
|
li.h3 {font-size:21px;}
|
||
|
|
}
|
||
|
|
|
||
|
|
/*通用输入模块, 链接/图片插入/文件插入/代码块插入*/
|
||
|
|
.do-meditor-common {width:360px;height:auto;padding:0 20px;font-size:14px;color:nth($cd, 1);
|
||
|
|
|
||
|
|
section {width:100%;height: 40px;margin:10px 0;line-height:40px;
|
||
|
|
|
||
|
|
.txt {width:100%;height:40px;padding:0 10px;border:0;border-radius:5px;background:nth($cp, 1);color:nth($cd, 2);font-size:14px;}
|
||
|
|
.label {float: left;width:50%;}
|
||
|
|
.submit {float:right;width:30%;}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.do-meditor-codeblock {width:780px;height:auto;
|
||
|
|
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-radius:0;border-bottom:1px solid nth($cp, 3);background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAMAAABV0m3JAAAADFBMVEUAAAD///+Pj4+JiYkxcGihAAAABHRSTlMAABBwqVQF9wAAADNJREFUeNqlzjEOACAMw8DQ/v/PSE5FFhaEx5usdekBuzRVH0RtCqJYELUFrVjQigX/5jdvzgDh9izlMQAAAABJRU5ErkJggg==) no-repeat right 12px;color:nth($cd, 2);outline:none;-webkit-appearance:none;-moz-appearance: none;@include ts;
|
||
|
|
|
||
|
|
&::-ms-expand {display:none;}
|
||
|
|
|
||
|
|
&:focus {box-shadow:0 0 5px nth($ct, 1)}
|
||
|
|
}
|
||
|
|
textarea {width:100%;height:300px;padding:5px 10px;border:0;border-radius:5px;background:nth($cp, 1);font-size:14px;resize:none;outline:none;color:nth($cd, 2);
|
||
|
|
|
||
|
|
&:focus {box-shadow:0 0 5px nth($ct, 1)}
|
||
|
|
}
|
||
|
|
.submit {float:right;width:80px;}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
@media screen and (max-width:768px) {
|
||
|
|
.do-meditor {
|
||
|
|
.tool-bar {
|
||
|
|
span {display:none;
|
||
|
|
|
||
|
|
&.icon-quote,&.icon-bold,&.icon-italic,&.icon-through,&.icon-preview {display:inline-block;}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.md-preview {width:100%;border:0;background:#fafafa;}
|
||
|
|
&.preview .editor-body {display:none;}
|
||
|
|
}
|
||
|
|
}
|