1.Update UI (a lot)

2.Delete useless Mode
3.speed markdown speed

views/main/base16-light.css

@@ -35,6 +35,10 @@
     background: linear-gradient(to bottom, rgb(245, 245, 245) 40%, transparent);
 }
 
+#right-panel .cover-top {
+    background: linear-gradient(to bottom, rgb(255, 255, 255) 40%, transparent)
+}
+
 #cover-bottom #cover-bottom-background-left {
     background: rgb(245, 245, 245);
 }

views/main/index.html

@@ -102,7 +102,7 @@
                     <div class="CodeMirror-vscrollbar" cm-not-content="true" style="display: block; ">
                         <div style="min-width: 1px;"></div>
                     </div>
-                    <div id="container-wrapper" tabindex="-1">
+                    <div id="preview" tabindex="-1">
                         <div id="container" class="preview post-body"></div>
                     </div>
                     <div class="cover-top"></div>
@@ -123,49 +123,24 @@
                     <!--</div>-->
                 </div>
                 <div id="cover-bottom-right">
-                    <script type="text/javascript">
-                        function clickItem(index){
-                            var modeMenu = document.getElementById('popup-menu-mode');
-                            var modeMenuItems = modeMenu.getElementsByTagName('li');
-                            modeMenuItems[index].click();
-                        }
-                    </script>
-
                     <div class="button-bottom l10n-title" id="button-bottom-focus" title="Toggle focus mode">
                         <i class="fa fa-dot-circle-o" aria-hidden="true"></i>
                     </div>
 
-                    <div class="button-bottom l10n-title"  title="Write Mode" exdata="(Ctrl+W)" onclick="clickItem(0)">
+                    <div class="button-bottom l10n-title"  title="Write Mode" exdata="(Ctrl+W)" mode-button="write">
                         <i class="fa fa-pencil" aria-hidden="true"></i>
                     </div>
-                    <div class="button-bottom l10n-title"  title="Preview Mode" exdata="(Ctrl+P)" onclick="clickItem(6)">
+                    <div class="button-bottom l10n-title"  title="Preview Mode" exdata="(Ctrl+P)" mode-button="preview">
                         <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                     </div>
-                    <div class="button-bottom l10n-title"  title="Read Mode" exdata="(Ctrl+R)" onclick="clickItem(3)">
+                    <div class="button-bottom l10n-title"  title="Read Mode" exdata="(Ctrl+R)" mode-button="read">
                         <i class="fa fa-eye" aria-hidden="true"></i>
                     </div>
-                    <div class="button-bottom l10n-title" id="button-bottom-mode" title="Edit mode">
-                        <i class="fa fa-circle-o" aria-hidden="true"></i>
-                    </div>
                 </div>
             </div>
         </div>
-        <div id="popup-layer">
-            <div class="popup-menu" id="popup-menu-mode" tabindex="-1">
-                <ul>
-                    <li data-name="write-wide"><i class="fa fa-check" aria-hidden="true"></i><span class="l10n">Write Mode</span> (<span class="l10n">Wide</span>)</li>
-                    <li data-name="write-medium"><i class="fa fa-check" aria-hidden="true"></i><span class="l10n">Write Mode</span> (<span class="l10n">Medium</span>)</li>
-                    <li data-name="write-narrow"><i class="fa fa-check" aria-hidden="true"></i><span class="l10n">Write Mode</span> (<span class="l10n">Narrow</span>)</li>
-                    <li data-name="read-wide"><i class="fa fa-check" aria-hidden="true"></i><span class="l10n">Read Mode</span> (<span class="l10n">Wide</span>)</li>
-                    <li data-name="read-medium"><i class="fa fa-check" aria-hidden="true"></i><span class="l10n">Read Mode</span> (<span class="l10n">Medium</span>)</li>
-                    <li data-name="read-narrow"><i class="fa fa-check" aria-hidden="true"></i><span class="l10n">Read Mode</span> (<span class="l10n">Narrow</span>)</li>
-                    <li data-name="preview"><i class="fa fa-check" aria-hidden="true"></i><span class="l10n">Preview Mode</span></li>
-                </ul>
-            </div>
-        </div>
 
         <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
-        <link rel="stylesheet" href="main/moe-popmenu.css">
         <link rel="stylesheet" href="../node_modules/codemirror/lib/codemirror.css">
         <link rel="stylesheet" href="../node_modules/katex/dist/katex.min.css">
         <link rel="stylesheet" href="../node_modules/biu.js/dist/biu.css">
@@ -222,7 +197,6 @@
 
         <script type="text/javascript" src="main/moe-sidemenu.js"></script>
         <!--<script type="text/javascript" src="main/moe-treeview.js"></script>-->
-        <script type="text/javascript" src="main/moe-popmenu.js"></script>
         <script type="text/javascript" src="main/moe-mode.js"></script>
         <script type="text/javascript" src="main/moe-export.js"></script>
         <script type="text/javascript" src="main/moe-popmessage.js"></script>

views/main/moe-contextmenu.js

@@ -25,7 +25,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const remote = require('electron').remote;
     const {Menu, MenuItem} = remote;
 
-    const editor = document.getElementById('editor'), containerWrapper = document.getElementById('container-wrapper');
+    const editor = document.getElementById('editor'), containerWrapper = document.getElementById('preview');
 
     window.addEventListener('contextmenu', (e) => {
         e.preventDefault();

views/main/moe-document.js

@@ -77,6 +77,7 @@ $(() => {
     //     editor.showHint();
     // });
 
+
     window.mkdirsSync = (dirpath, mode) => {
         if (!fs.existsSync(dirpath)) {
             var pathtmp;
@@ -285,8 +286,48 @@ $(() => {
         }
     }
 
-    editor.on('change', (editor, obj) => {
-        window.updatePreview(false)
+    window.throttle = (func,wait,must)=>{
+       let timeout = 0;
+       return function(){
+           var context = this,
+               args = arguments,
+               curTime = new Date();
+
+           clearTimeout(timeout);
+           // 如果达到了规定的触发时间间隔，触发 handler
+           if(curTime - startTime >= mustRun){
+               func.apply(context,args);
+               startTime = curTime;
+               // 没达到触发间隔，重新设定定时器
+           }else{
+               timeout = setTimeout(func, wait);
+           }
+       }
+    }
+
+    let debounceTimeout = 0;
+    let debounceStartTime =0;
+    window.debounce = (func, wait, mustRun)=> {
+        clearTimeout(debounceTimeout);
+        let curTime = new Date();
+        if(curTime - debounceStartTime >= mustRun){
+            func();
+            debounceTimeout = 0;
+            debounceStartTime = curTime;
+        }else{
+            debounceTimeout = setTimeout(()=>{
+                func();
+                debounceTimeout = 0;
+                debounceStartTime = curTime
+            }, wait);
+        }
+};
+
+
+    editor.on('change', () => {
+        debounce(()=> {
+            window.updatePreview(false)
+        }, 150,500);
     });
 
     editor.on('blur', () => {
@@ -312,7 +353,7 @@ $(() => {
 
     const s = require('electron').shell;
 
-    const containerWrapper = document.getElementById('container-wrapper');
+    const containerWrapper = document.getElementById('preview');
     document.addEventListener('keydown', (e) => {
         if ((process.platform === 'darwin' ? e.metaKey : e.ctrlKey) && e.keyCode == 65) {
             if (document.getElementById('editor').contains(e.target)) {
@@ -496,7 +537,7 @@ $(() => {
     }, true)
 
     window.addEventListener('resize', e => {
-        $('#right-panel .CodeMirror-vscrollbar div').height(document.getElementById('container-wrapper').scrollHeight);
+        $('#right-panel .CodeMirror-vscrollbar div').height(document.getElementById('preview').scrollHeight);
     })
 
     let editordiv = document.querySelector('#editor');

views/main/moe-mode.js

@@ -21,63 +21,17 @@
 'use strict';
 
 document.addEventListener('DOMContentLoaded', () => {
-    const titlebar = document.getElementById('electron-titlebar');
-    const main = document.getElementById('main');
-    const modeButton = document.getElementById('button-bottom-mode');
-    const rightPanel = document.getElementById('right-panel');
-    const modeMenu = document.getElementById('popup-menu-mode');
-    const modeMenuItems = modeMenu.getElementsByTagName('li');
     const editor = document.getElementById('editor');
-    const container = document.getElementById('container');
 
+    document.querySelectorAll('#cover-bottom-right> [mode-button]').forEach(function (item) {
+        item.addEventListener('click', (e) => {
+            var type = item.getAttribute('mode-button');
+            setMode(type)
+        })
+    })
     function setMode(m) {
-        function setBaseMode(bm) {
-            document.body.setAttribute('settings-mode', bm);
-            if (bm === 'write') {
-                main.classList.add('write-mode');
-                moeApp.config.set('edit-mode-write', m);
-            } else if (bm === 'read') {
-                main.classList.add('read-mode');
-                moeApp.config.set('edit-mode-read', m);
-            }
-        }
-
-        [
-            'write-mode',
-            'read-mode',
-            'write-mode-wide',
-            'write-mode-medium',
-            'write-mode-thin',
-            'read-mode-wide',
-            'read-mode-medium',
-            'read-mode-thin'
-        ].forEach(x => main.classList.remove(x));
-
-        if (m === 'write-wide') {
-            setBaseMode('write');
-            main.classList.add('write-mode-wide');
-        } else if (m === 'write-medium') {
-            setBaseMode('write');
-            main.classList.add('write-mode-medium');
-        } else if (m === 'write-narrow') {
-            setBaseMode('write');
-            main.classList.add('write-mode-thin');
-        } else if (m === 'preview') {
-            setBaseMode('preview');
-        } else if (m === 'read-wide') {
-            setBaseMode('read');
-            main.classList.add('read-mode-wide');
-        } else if (m === 'read-medium') {
-            setBaseMode('read');
-            main.classList.add('read-mode-medium');
-        } else if (m === 'read-narrow') {
-            setBaseMode('read');
-            main.classList.add('read-mode-thin');
-        }
-
         if (window.editMode === m) return;
-
-        for (const it of modeMenuItems) it.getElementsByClassName('fa')[0].style.opacity = (it.attributes['data-name'].value === m) ? '1' : '0';
+        document.body.setAttribute('class', m);
 
         window.editMode = m;
         if (window.updatePreview)
@@ -91,27 +45,20 @@ document.addEventListener('DOMContentLoaded', () => {
 
     setMode(moeApp.config.get('edit-mode'));
 
-    modeButton.addEventListener('click', () => {
-        window.toggleMenu(modeMenu);
-    });
-
-    for (const it of modeMenuItems) it.addEventListener('click', () => {
-        setMode(it.attributes['data-name'].value);
-        window.editor.focus();
-    })
+    window.editor.focus();
 
     require('electron').ipcRenderer.on('change-edit-mode', (e, arg) => {
         if (arg === 'read' || arg === 'write')
             setMode(moeApp.config.get('edit-mode-' + arg));
-        else if (arg === 'change'){
-            if(document.querySelector('#main.write-mode'))
+        else if (arg === 'change') {
+            if (document.querySelector('.write'))
                 setMode(moeApp.config.get('edit-mode-read'));
             else
                 setMode(moeApp.config.get('edit-mode-write'));
-        }else if (arg === 'changepreview'){
-            if(document.querySelector('#main.write-mode'))
+        } else if (arg === 'changepreview') {
+            if (document.querySelector('.write'))
                 setMode('preview');
-            else if(document.querySelector('#main.read-mode'))
+            else if (document.querySelector('.read'))
                 setMode(moeApp.config.get('edit-mode-write'));
             else
                 setMode(moeApp.config.get('edit-mode-read'));
@@ -122,8 +69,4 @@ document.addEventListener('DOMContentLoaded', () => {
     editor.addEventListener('transitionend', (e) => {
         if (e.target === editor && e.propertyName === 'width') window.editor.refresh();
     });
-
-    // rightPanel.addEventListener('transitionend', (e) => {
-    //     if (e.target === rightPanel && (window.editMode.startsWith('read') || window.editMode.startsWith('preview'))) window.updatePreview(true);
-    // });
 });

views/main/moe-popmenu.css

@@ -1,74 +0,0 @@
-/*
- *  This file is part of Moeditor.
- *
- *  Copyright (c) 2016 Menci <huanghaorui301@gmail.com>
- *  Copyright (c) 2016 tmr232
- *
- *  Moeditor is free software: you can redistribute it and/or modify
- *  it under the terms of the GNU General Public License as published by
- *  the Free Software Foundation, either version 3 of the License, or
- *  (at your option) any later version.
- *
- *  Moeditor is distributed in the hope that it will be useful,
- *  but WITHOUT ANY WARRANTY; without even the implied warranty of
- *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- *  GNU General Public License for more details.
- *
- *  You should have received a copy of the GNU General Public License
- *  along with Moeditor. If not, see <http://www.gnu.org/licenses/>.
- */
-
-#popup-layer {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: transparent;
-    pointer-events: none;
-}
-
-#popup-layer .popup-menu {
-    outline: none;
-    position: fixed;
-    pointer-events: all;
-    cursor: default;
-    -webkit-user-select: none;
-    display: none;
-}
-
-#popup-layer .popup-menu ul {
-    padding-left: 0;
-    border: 1px solid #ccc;
-    font-size: 14px;
-    background-color: #fafafa;
-}
-
-#popup-layer .popup-menu ul li {
-    list-style-type: none;
-    height: 20px;
-    line-height: 20px;
-    padding: 10px;
-    letter-spacing: 1px;
-    color: #444;
-    font-family: Roboto, Helvetica, 'Segoe UI', Arial, sans-serif;;
-}
-
-#popup-layer .popup-menu ul li:hover {
-    background-color: rgb(236, 236, 236);
-}
-
-#popup-layer .popup-menu ul li:active {
-    background-color: rgb(222, 222, 222);
-}
-
-#popup-layer .popup-menu ul li .fa {
-    margin-right: 8px;
-    opacity: 0;
-}
-
-#popup-menu-mode {
-    width: 232px;
-    top: calc(100% - 320px);
-    left: calc(100% - 232px);
-}

views/main/moe-popmenu.js

@@ -1,62 +0,0 @@
-/*
- *  This file is part of Moeditor.
- *
- *  Copyright (c) 2016 Menci <huanghaorui301@gmail.com>
- *
- *  Moeditor is free software: you can redistribute it and/or modify
- *  it under the terms of the GNU General Public License as published by
- *  the Free Software Foundation, either version 3 of the License, or
- *  (at your option) any later version.
- *
- *  Moeditor is distributed in the hope that it will be useful,
- *  but WITHOUT ANY WARRANTY; without even the implied warranty of
- *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- *  GNU General Public License for more details.
- *
- *  You should have received a copy of the GNU General Public License
- *  along with Moeditor. If not, see <http://www.gnu.org/licenses/>.
- */
-
-'use strict';
-
-document.addEventListener('DOMContentLoaded', () => {
-    const popUpLayer = document.getElementById('popup-layer');
-    const popUpMenus = popUpLayer.getElementsByClassName('popup-menu');
-
-    var mouse = { x: 0, y: 0 };
-    document.addEventListener('mousemove', (e) => {
-        mouse.x = e.pageX;
-        mouse.y = e.pageY;
-    });
-
-    function toggleMenu(m, f) {
-        if (f) {
-            var p = mouse;
-            if (p.y + m.offsetHeight > window.innerHeight) p.y -= m.offsetHeight;
-            if (p.x + m.offsetWidth > window.innerWidth) p.x -= m.offsetWidth;
-            m.style.top = p.x;
-            m.style.left = p.y;
-        }
-        if (m.style.display === 'block') m.style.display = '';
-        else m.style.display = 'block', m.focus();
-    }
-
-    function hideMenu(m) {
-        m.style.display = '';
-    }
-
-    window.toggleMenu = toggleMenu;
-
-    for (const m of popUpMenus) {
-        m.addEventListener('blur', () => {
-            hideMenu(m);
-        });
-
-        const menuItems = m.getElementsByTagName('li');
-        for (const it of menuItems) {
-            it.addEventListener('click', () => {
-                hideMenu(m);
-            })
-        }
-    }
-});

views/main/moe-preview.js

@@ -19,48 +19,46 @@
 
 'use strict';
 
-var updatePreview = false, updatePreviewRunning = false;
 const marked = require('./moe-marked') ;
 const MoeditorMathRenderer = require('./moe-math');
 const SVGFixer = require('./svgfixer');
 
+let gLastContent = '';
+let gNeedUpdate = false;
+let gUpdateRunning = false;
 
 module.exports = (cm, force, cb) => {
-    function updateAsync() {
-        updatePreview = false;
-        updatePreviewRunning = true;
+    const content = cm.getValue();
+    if (hexoWindow.content === content) {
+        hexoWindow.changed = true;
+        hexoWindow.window.setDocumentEdited(true);
+    } else {
+        hexoWindow.changed = false;
+    }
 
-        const content = cm.getValue();
-        if (hexoWindow.content === content && !force) {
-            updatePreviewRunning = false;
-            if (updatePreview) setTimeout(updateAsync, 0);
-            cb();
-            return;
-        }
+    if (gNeedUpdate || (!force && gLastContent == content))
+        return;
 
-        if (hexoWindow.content !== content) {
-            hexoWindow.content = content;
-            hexoWindow.changed = true;
-            hexoWindow.window.setDocumentEdited(true);
-        }
-
-        if (window.editMode && !window.editMode.startsWith('preview') && !window.editMode.startsWith('read')) {
-            updatePreviewRunning = false;
-            if (updatePreview) setTimeout(updateAsync, 0);
-            cb();
-            return;
-        }
+    if (gUpdateRunning ){
+        gNeedUpdate = true;
+    } else {
+        setTimeout(updateAsync,0);
+    }
 
-        var math = new Array();
-        var rendered = null;
+    function updateAsync() {
+        gLastContent = cm.getValue();
+        gUpdateRunning = true;
 
-        rendered = document.createElement('span');
-        marked(content,markEnd);
+        marked(gLastContent,markEnd);
 
         function markEnd(value){
+            var math = new Array();
+            var rendered = null;
+            rendered = document.createElement('span');
             rendered.innerHTML = value;
             MoeditorMathRenderer.renderMany(math, (math) => {
-                for (let id in math) rendered.querySelector('#' + id).innerHTML = math[id].res;
+                for (let id in math)
+                    rendered.querySelector('#' + id).innerHTML = math[id].res;
 
                 var set = new Set();
                 let lineNumbers = rendered.querySelectorAll('moemark-linenumber') || [];
@@ -75,22 +73,17 @@ module.exports = (cm, force, cb) => {
 
                 document.getElementById('container').innerHTML = rendered.innerHTML;
                 SVGFixer(document.getElementById('container'));
-                $('#right-panel .CodeMirror-vscrollbar div').height(document.getElementById('container-wrapper').scrollHeight);
-
-                if (!window.xyz) window.xyz = rendered.innerHTML;
+                $('#right-panel .CodeMirror-vscrollbar div').height(document.getElementById('preview').scrollHeight);
 
-                cb();
-
-                updatePreviewRunning = false;
-                if (updatePreview) setTimeout(updateAsync, 0);
+                gUpdateRunning = false;
+                if (gNeedUpdate){
+                    setTimeout(updateAsync,0);
+                }
+                gNeedUpdate = false;
+                if(typeof cb === 'function')
+                    cb();
             });
-            $('#right-panel .CodeMirror-vscrollbar div').height(document.getElementById('container-wrapper').scrollHeight);
+            $('#right-panel .CodeMirror-vscrollbar div').height(document.getElementById('preview').scrollHeight);
         }
     }
-    updatePreview = true;
-
-    if (!updatePreviewRunning) {
-        setTimeout(updateAsync, 0);
-    }
-
 }

views/main/moe-scroll.js

@@ -30,7 +30,7 @@ function lookup(a, x) {
     return l;
 }
 
-var container = document.getElementById('container'), containerWrapper = document.getElementById('container-wrapper');
+var container = document.getElementById('container'), containerWrapper = document.getElementById('preview');
 var editorScroll = $('.CodeMirror-vscrollbar')[0], containerScroll = containerWrapper;
 function getLineNumberTags() {
     // from http://stackoverflow.com/questions/9496427/get-elements-by-attribute-when-queryselectorall-is-not-available-without-using-l
@@ -111,7 +111,7 @@ $editorScroll.on('scroll', function(e) {
 });
 
 
-var $previewer = $('#container-wrapper');
+var $previewer = $('#preview');
 var $previewerScroll = $('#right-panel .CodeMirror-vscrollbar');
 
 $previewer.on('scroll', function() {

views/main/moe-style.css

@@ -18,6 +18,10 @@
  *  along with Moeditor. If not, see <http://www.gnu.org/licenses/>.
  */
 
+:root{
+    --spaceX: 45px;
+    --spaceY: 30px;
+}
 
 .notransition, .notransition *:not(.CodeMirror-cursors):not(.CodeMirror-lines):not(.CodeMirror-sizer):not(.CodeMirror-vscrollbar) {
     transition: none !important;
@@ -134,69 +138,40 @@ html, body {
     position: absolute;
     right: 0;
     width: 50%;
+    overflow: hidden;
     height: calc(100% - 25px);
     transition: all 500ms ease-in-out;
 }
 
-#main.read-mode #left-panel {
+.read #left-panel {
     left: -50%;
     width: 50%;
 }
 
-#main.read-mode #right-panel {
+.read #right-panel {
     width: 100%;
-    /*padding-right: 4px;*/
 }
 
-#main.read-mode #right-panel .cover-top {
+.read #right-panel .cover-top {
     left: 0;
     width: calc(100% - 10px);
 }
 
-#main.write-mode #left-panel {
+.write #left-panel {
     width: 100%;
 }
 
-#main.read-mode #left-panel .cover-top {
+.read #left-panel .cover-top {
     width: calc(100% - 10px);
 }
 
-#main.write-mode #right-panel {
+.write #right-panel {
     right: -50%;
     width: 50%;
 }
 
-#editor {
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    transition: all 500ms ease-in-out;
-    -webkit-user-select: initial;
-}
 
-#main.write-mode.write-mode-thin .CodeMirror-scroll {
-    width: calc(100% / 3 + var(--scrollWidth)) !important;
-    padding-left: calc(100% / 3) !important;
-    padding-right: calc(100% / 3) !important;
-}
 
-#main.write-mode.write-mode-medium .CodeMirror-scroll {
-    width: calc(100% / 2 + var(--scrollWidth)) !important;
-    padding-left: calc(100% / 4) !important;
-    padding-right: calc(100% / 4) !important;
-}
-
-#main.write-mode.write-mode-wide .CodeMirror-scroll {
-    width: calc((100% / 3) * 2 + var(--scrollWidth)) !important;
-    padding-left: calc(100% / 6) !important;
-    padding-right: calc(100% / 6) !important;
-}
-
-#editor.write-mode .CodeMirror-scroll {
-    padding-left: 0;
-    padding-right: 0;
-    width: calc(100% + 30px) !important;
-}
 
 #editor.focus .CodeMirror-line {
     transition: opacity 150ms !important;
@@ -235,7 +210,6 @@ html, body {
     z-index: 1000;
 }
 
-
 #drag-left {
     z-index: -1;
     position: absolute;
@@ -293,19 +267,19 @@ html, body {
     transition: all 500ms ease-in-out;
 }
 
-#main.read-mode #cover-bottom-background-left {
+.read #cover-bottom #cover-bottom-background-left {
     left: -50%;
 }
 
-#main.read-mode #cover-bottom-background-right {
+.read #cover-bottom #cover-bottom-background-right {
     width: 100%;
 }
 
-#main.write-mode #cover-bottom-background-left {
+.write #cover-bottom #cover-bottom-background-left {
     width: 100%;
 }
 
-#main.write-mode #cover-bottom-background-right {
+.write #cover-bottom #cover-bottom-background-right {
     right: -50%;
 }
 
@@ -369,60 +343,29 @@ body[settings-editor-font="sans"] #editor  * {
     font-family: sans-serif !important;
 }
 
-.CodeMirror-wrap, .CodeMirror pre, .CodeMirror span, .CodeMirror-vscrollbar div, .CodeMirror-measure {
-    /*transition: none !important;*/
-}
-
-#editor .CodeMirror {
-    width: 100%;
-    height: 100%;
+#preview {
+    position: relative !important;
+    -webkit-user-select: initial;
+    transition: all 500ms ease-in-out;
+    width: calc(100% - var(--spaceX) * 2) !important;
+    height: calc(100% - var(--spaceY)) !important;
+    padding: var(--spaceY)  var(--spaceX) 0  var(--spaceX);
+    overflow: scroll !important;
+    font-size: 14px !important;
+    outline: none;
 }
 
-#container-wrapper {
-    /*width: calc(100% + var(--scrollWidth)) !important;*/
-    width: calc(100% + var(--scrollWidth)) !important;
-    height: 100%;
-    overflow-y: scroll;
-    overflow-x: hidden;
-    outline: none;
-    position: relative;
+@media screen and (min-width: 875px){
+    .read #container {
+        max-width: 1200px !important;
+        width: 70% !important;
+    }
 }
 
 #container {
-    padding-top: 40px;
-    padding-bottom: 30px;
-    padding-left: 45px;
-    padding-right: 40px;
-    font-size: 14px !important;
     transition: all 500ms ease-in-out;
     -webkit-user-select: initial;
-}
-
-#main.read-mode #container {
-    padding-left: 0;
-    padding-right: 0;
-}
-
-#main.read-mode #container-wrapper {
-    width: calc(100%) !important;
-}
-
-#main.read-mode.read-mode-thin #container {
-    width: calc(100% / 3);
-    margin-left: calc(100% / 3);
-    margin-right: calc(100% / 3);
-}
-
-#main.read-mode.read-mode-medium #container {
-    width: calc(100% / 2);
-    margin-left: calc(100% / 4);
-    margin-right: calc(100% / 4);
-}
-
-#main.read-mode.read-mode-wide #container {
-    width: calc((100% / 3) * 2);
-    margin-left: calc(100% / 6);
-    margin-right: calc(100% / 6);
+    margin: auto !important;
 }
 
 .cm-s-default .cm-header {
@@ -436,31 +379,14 @@ body[settings-editor-font="sans"] #editor  * {
 .cm-header-5 { font-size: 1.05em; }
 .cm-header-6 { font-size: 1em; }
 
-.CodeMirror-scroll {
-    overflow: hidden !important;
-    overflow-x: hidden !important;
-    overflow-y: scroll !important;
-    padding-left: 45px;
-    padding-right: 20px;
-    padding-top: 35px;
-    height: calc(100% - 35px - 31px);
-    /*width: calc(100% - 45px - 20px - 24px + 30px) !important;*/
-    width: calc(100% - 45px - 20px + var(--scrollWidth)) !important;
-    transition: all 500ms ease-in-out;
-}
-
 .CodeMirror-vscrollbar {
     z-index: 1000000 !important;
     position: absolute !important;
-    right: 0px !important;
-    bottom: 25px !important;
 }
 
-#container-wrapper .CodeMirror-vscrollbar,
-#main.write-mode .CodeMirror-vscrollbar {
+#preview .CodeMirror-vscrollbar,
+.write .CodeMirror-vscrollbar {
     position: absolute !important;
-    right: 0px !important;
-    bottom: 25px !important;
 }
 
 .CodeMirror {
@@ -480,6 +406,35 @@ body[settings-editor-font="sans"] #editor  * {
     overflow-x: visible;
 }
 
+#left-panel{
+    overflow: hidden!important;
+}
+
+#editor {
+    position: relative  !important;
+    overflow: visible  !important;
+    -webkit-user-select: initial;
+    transition: all 500ms ease-in-out;
+    width: calc(100% - var(--spaceX) * 2)  !important;
+    height: 100%  !important;
+    padding: 0 var(--spaceX) 0 var(--spaceX)  !important;
+}
+
+#editor .CodeMirror {
+    position: absolute !important;
+    overflow: visible  !important;
+    width: calc(100% - var(--spaceX) * 2) !important;
+    height: calc(100% - var(--spaceY)) !important;
+    padding-top: var(--spaceY)  !important;
+}
+
+#editor .CodeMirror .CodeMirror-vscrollbar {
+    position: absolute;
+    overflow-y: scroll;
+    transition: all 500ms ease-in-out;
+    right: calc(0px - var(--spaceX));
+}
+
 moemark-linenumber{
     word-wrap: break-word !important;
 }
@@ -588,50 +543,6 @@ body[settings-mode=read] #drag-right, body[settings-mode=write] #drag-right {
     background: red;
 }
 
-/*.CodeMirror-linenumber.CodeMirror-gutter-elt {*/
-    /*!* border-right: 1px solid #cfeacf; *!*/
-    /*color: #a3a3a3;*/
-    /*background: #e8e8e8;*/
-    /*box-shadow: 2px 1px 1px 0px #bbb;*/
-    /*margin-left: -3px;*/
-    /*padding-right: 4px;*/
-/*}*/
-
-
-/*.CodeMirror-gutter-wrapper {*/
-    /*display: none;*/
-/*}*/
-
-
-/*#editor.nogutter .CodeMirror-sizer {*/
-    /*margin-left: 0 !important;*/
-/*}*/
-
-/*#editor.gutter .CodeMirror-gutter-wrapper {*/
-    /*display: block;*/
-    /*position: absolute;*/
-    /*z-index: 4;*/
-    /*background: none !important;*/
-    /*border: none !important;*/
-/*}*/
-
-/*#editor.gutter .CodeMirror-code {*/
-    /*box-shadow: inset 3px -2px 3px #ddd;*/
-    /*padding-bottom: 3px;*/
-/*}*/
-
-/*#editor.gutter .CodeMirror-code::after {*/
-    /*content: "";*/
-    /*position: relative;*/
-    /*bottom: -3px;*/
-    /*height: 4px;*/
-    /*width: 100%;*/
-    /*background-color: whitesmoke;*/
-    /*display: block;*/
-/*}*/
-
-
-
 .CodeMirror-gutter-wrapper {
     display: none;
 }

views/moe-scrollbar.css

@@ -136,12 +136,18 @@
 
 
 /*#editor .CodeMirror-vscrollbar::-webkit-scrollbar-thumb ,*/
-/*#container-wrapper::-webkit-scrollbar-thumb {*/
+/*#preview::-webkit-scrollbar-thumb {*/
     /*background-color: rgba(0,0,0,0);*/
     /*-webkit-animation: 1s;*/
 /*}*/
 
 /*#editor .CodeMirror-vscrollbar.hoverScroll::-webkit-scrollbar-thumb ,*/
-/*#container-wrapper.hoverScroll::-webkit-scrollbar-thumb {*/
+/*#preview.hoverScroll::-webkit-scrollbar-thumb {*/
     /*background-color: rgba(0,0,0,0.2);*/
 /*}*/
+
+#preview::-webkit-scrollbar,
+.CodeMirror-scroll::-webkit-scrollbar {
+    width: 0px !important;
+    height: 0px !important;
+}