.CodeMirror { height:auto; min-height: 300px; border:1px solid #ddd; border-bottom-left-radius:4px; border-bottom-right-radius:4px; padding:10px; } :-webkit-full-screen { background: #f9f9f5; padding: 0.5em 1em; width: 100%; height: 100%; } :-moz-full-screen { padding: 0.5em 1em; background: #f9f9f5; width: 100%; height: 100%; } .editor-wrapper { font: 16px/1.62 "Helvetica Neue", "Xin Gothic", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif; color: #2c3e50; } /* this is the title */ .editor-wrapper input.title { font: 18px "Helvetica Neue", "Xin Gothic", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif; background: transparent; padding: 4px; width: 100%; border: none; outline: none; opacity: 0.6; } .editor-toolbar { position: relative; opacity: 0.6; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; padding:0 10px; border-top:1px solid #bbb; border-left:1px solid #bbb; border-right:1px solid #bbb; border-top-left-radius:4px; border-top-right-radius:4px; } .editor-toolbar:before, .editor-toolbar:after { display: block; content: ' '; height: 1px; } .editor-toolbar:before { margin-bottom: 8px; } .editor-toolbar:after { margin-top: 8px; } .editor-wrapper input.title:hover, .editor-wrapper input.title:focus, .editor-toolbar:hover { opacity: 0.8; } .editor-toolbar a { display: inline-block; text-align: center; text-decoration: none !important; color: #2c3e50 !important; width:30px; height:30px; margin:0; border: 1px solid transparent; border-radius: 3px; cursor: pointer; } .editor-toolbar a:hover, .editor-toolbar a.active { background: #fcfcfc; border-color: #95a5a6; } .editor-toolbar a:before { line-height:30px; } .editor-toolbar i.separator { display: inline-block; width: 0; border-left: 1px solid #d9d9d9; border-right: 1px solid white; color: transparent; text-indent: -10px; margin: 0 6px; } .editor-toolbar a.icon-fullscreen { position: absolute; right:10px; } .editor-statusbar { padding: 8px 10px; font-size: 12px; color: #959694; text-align: right; } .editor-statusbar span { display: inline-block; min-width: 4em; margin-left: 1em; } .editor-statusbar .lines:before { content: 'lines: '; } .editor-statusbar .words:before { content: 'words: '; } .editor-preview { padding:10px; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #fff; z-index: 9999; overflow: auto; display:none; } .editor-preview-active { display:block; } .editor-preview > p { margin-top: 0; } .editor-preview pre{ background:#eee; margin-bottom:10px; }