155 lines
8.2 KiB
CSS
155 lines
8.2 KiB
CSS
@charset "UTF-8";
|
|
/**
|
|
*
|
|
* @authors yutent (yutent@doui.cc)
|
|
* @date 2017-04-17 16:43:22
|
|
*
|
|
*/
|
|
|
|
@font-face {font-family: "edicon";
|
|
src: url('iconfont.eot'); /* IE9*/
|
|
src: url('iconfont.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
|
}
|
|
|
|
::-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:#cad5d5;}
|
|
::-webkit-scrollbar-thumb:hover {background:#9bacac;}
|
|
|
|
.do-meditor {position:relative;width:100%;height:100%;min-height:180px;padding-top:43px;border:1px solid #ddd;background:#fff;color:#666;}
|
|
.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;}
|
|
.do-meditor-about pre {padding-bottom:15px;line-height:1;}
|
|
.do-meditor-about a {color:#049789}
|
|
.do-meditor-about p {margin:0 auto 5px;}
|
|
|
|
/*表格模块*/
|
|
|
|
.do-meditor-table {width:270px;height:270px;padding:10px;}
|
|
.do-meditor-table li {width:100%;height:25px;}
|
|
.do-meditor-table li span {float:left;width:25px;height:25px;border:2px solid #fff;background:#f2f2f2;}
|
|
.do-meditor-table li 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;}
|
|
.do-meditor-face li {float:left;width:40px;height:40px;padding:8px;border:1px solid #e2e2e2;border-top:0;border-left:0}
|
|
.do-meditor-face li img {width:100%;}
|
|
.do-meditor-face 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;}
|
|
.do-meditor-h1 li {width:100%;height:auto;padding:0 10px;line-height:1.5;font-size:18px;cursor:default;}
|
|
.do-meditor-h1 li:hover {background:#f2f2f2;}
|
|
.do-meditor-h1 li::before {font-family:"edicon" !important;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}
|
|
.do-meditor-h1 li.h1 {font-size:23px;}
|
|
.do-meditor-h1 li.h2 {font-size:21px;}
|
|
.do-meditor-h1 li.h1::before {content:"\e611 "}
|
|
.do-meditor-h1 li.h2::before {content:"\e60d "}
|
|
.do-meditor-h1 li.h3::before {content:"\e60e "}
|
|
.do-meditor-h1 li.h4::before {content:"\e60f "}
|
|
.do-meditor-h1 li.h5::before {content:"\e610 "}
|
|
.do-meditor-h1 li.h6::before {content:"\e60c "}
|
|
|
|
|
|
/*通用输入模块, 链接/图片插入/文件插入/代码块插入*/
|
|
.do-meditor-common {width:360px;height:auto;padding:15px 20px;}
|
|
.do-meditor-common section {width:100%;height: 35px;margin:10px 0;line-height:35px;}
|
|
.do-meditor-common section .label {float: left;width:30%;text-align:center;background:#ddd;}
|
|
.do-meditor-common section label {float: left;width:50%;}
|
|
.do-meditor-common section .input {float: left;width:70%;height:35px;padding:0 8px;border:1px solid #ddd;border-left:0;background:#fff;color:#666;}
|
|
.do-meditor-common section .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;}
|
|
.do-meditor-codeblock section {display:block;width:100%;height:auto;margin:10px 0;line-height:35px;}
|
|
.do-meditor-codeblock section::after {visibility: hidden;overflow:hidden; display: block;height: 0;content: "."; clear: both;}
|
|
.do-meditor-codeblock section .label {float: left;width:80px;}
|
|
.do-meditor-codeblock section select {float:left;width:200px;height:35px;border:1px solid #ddd;border-radius:5px;background:#fff}
|
|
.do-meditor-codeblock section textarea {width:100%;height:300px;padding:5px 10px;border:1px solid #ddd;background:#fff;resize:none;}
|
|
.do-meditor-codeblock section .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;}
|
|
.do-meditor .tool-bar .edicon {display:inline-block;width:30px;height:32px;text-align:center;font:20px/32px "edicon" !important;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}
|
|
.do-meditor .tool-bar .edicon:hover {background:#e5e5e5;}
|
|
.do-meditor .tool-bar .icon-pipe {width:20px;}
|
|
.do-meditor .tool-bar .icon-pipe:hover {background:none;}
|
|
.do-meditor .tool-bar .icon-pipe::before {content:"\e612"}
|
|
.do-meditor .tool-bar .icon-h1::before {content:"\e611"}
|
|
.do-meditor .tool-bar .icon-bold::before {content:"\e615"}
|
|
.do-meditor .tool-bar .icon-italic::before {content:"\e61d"}
|
|
.do-meditor .tool-bar .icon-through::before {content:"\e604"}
|
|
.do-meditor .tool-bar .icon-link::before {content:"\e606"}
|
|
.do-meditor .tool-bar .icon-inlinecode::before {content:"\e61e"}
|
|
.do-meditor .tool-bar .icon-blockcode::before {content:"\e617"}
|
|
.do-meditor .tool-bar .icon-quote::before {content:"\e607"}
|
|
.do-meditor .tool-bar .icon-hr::before {content:"\e619"}
|
|
.do-meditor .tool-bar .icon-time::before {content:"\e61a"}
|
|
.do-meditor .tool-bar .icon-face::before {content:"\e616"}
|
|
.do-meditor .tool-bar .icon-image::before {content:"\e61b"}
|
|
.do-meditor .tool-bar .icon-file::before {content:"\e603"}
|
|
.do-meditor .tool-bar .icon-preview::before {content:"\e60a"}
|
|
.do-meditor .tool-bar .icon-fullscreen::before {content:"\e608"}
|
|
.do-meditor .tool-bar .icon-table::before {content:"\e601"}
|
|
.do-meditor .tool-bar .icon-ordered::before {content:"\e61c"}
|
|
.do-meditor .tool-bar .icon-unordered::before {content:"\e618"}
|
|
.do-meditor .tool-bar .icon-about::before {content:"\e613"}
|
|
.do-meditor .tool-bar .icon-help::before {content:"\e614"}
|
|
|
|
|
|
.do-meditor .editor-body {float:left;width:100%;height:100%;background:#fff;}
|
|
.do-meditor .editor-body>textarea {overflow:hidden;overflow-y:auto;width:100%;height:100%;padding:5px;border:0;outline:none;resize:none;color:#666;background:none;}
|
|
.do-meditor .md-preview {float:right;overflow:hidden;overflow-y:auto;display:block;width:50%;height:100%;padding:10px;line-height:2;border-left:1px solid #ddd;color:#666;font-size:14px;background:#fff;}
|
|
|
|
|
|
.do-meditor .md-preview .md-hd {position:relative;margin:15px 0;padding-left:30px;font-weight:normal;font-size:17px;}
|
|
.do-meditor .md-preview h1.md-hd {padding-left:0;}
|
|
.do-meditor .md-preview .md-hd a {position:relative;display:inline-block;padding:0 8px;background:#fff;color:#454545}
|
|
.do-meditor .md-preview .md-hd a:hover {text-decoration:none;}
|
|
.do-meditor .md-preview h1.md-hd a {padding-left:0;color:#000;}
|
|
.do-meditor .md-preview h2.md-hd a {color:#000;}
|
|
|
|
.do-meditor .md-preview h1.md-hd {margin:0 0 30px;font-size:25px;}
|
|
.do-meditor .md-preview h2.md-hd {margin:20px 0;font-size:23px;}
|
|
.do-meditor .md-preview h3.md-hd {margin:20px 0 15px;font-size:20px;}
|
|
.do-meditor .md-preview h1:after {display:block;width:100%;content:" ";border-bottom:1px solid #ddd;}
|
|
.do-meditor .md-preview h2:before,
|
|
.do-meditor .md-preview h3:before,
|
|
.do-meditor .md-preview h4:before,
|
|
.do-meditor .md-preview h5:before,
|
|
.do-meditor .md-preview h6:before {display:block;position:absolute;left:0;top:50%;width:100%;content:" ";border-bottom:1px solid #ddd;}
|
|
|
|
.do-meditor .md-preview a {text-decoration:none;}
|
|
.do-meditor .md-preview a:hover {text-decoration:underline;}
|
|
.do-meditor .md-preview p {margin:15px 0;}
|
|
.do-meditor .md-preview blockquote {margin:10px 0;padding:5px 10px;border-left:5px solid #6bb294;background:#f7f7f7}
|
|
.do-meditor .md-preview blockquote p {margin:0;}
|
|
.do-meditor .md-preview table thead tr {background:#f2f2f2}
|
|
.do-meditor .md-preview table thead th {padding:0 8px;border:1px solid #ddd}
|
|
.do-meditor .md-preview table tbody td {padding:0 8px;border:1px solid #ddd}
|
|
|
|
.do-meditor .md-preview hr {margin:30px 0;border-bottom:0;}
|
|
.do-meditor .md-preview ol {margin-left:2em;list-style:decimal outside none;}
|
|
.do-meditor .md-preview ul {margin-left:2em;list-style:disc outside none;}
|
|
.do-meditor .md-preview li ol {margin-left:2em;}
|
|
.do-meditor .md-preview li ul {margin-left:2em;list-style-type: circle;}
|
|
.do-meditor .md-preview li ol ul,
|
|
.do-meditor .md-preview li ul ul {list-style-type: square;}
|
|
|
|
|
|
/*全屏模式*/
|
|
.do-meditor.fullscreen {position:fixed;left:0;top:0;z-index:999;}
|
|
|
|
.do-meditor.preview .editor-body,
|
|
.do-meditor.fullscreen .editor-body {width:50%}
|
JavaScript
95.2%
CSS
4.8%