💄 #47

.gitignore

 src/main/resources/markdowns/*
 !src/main/resources/markdowns/README.md
-
+src/main/resources/dist/
 solo_h2_test/
 target/
 node_modules/

package-lock.json

@@ -8637,9 +8637,9 @@
       "dev": true
     },
     "uvstat": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/uvstat/-/uvstat-1.0.0.tgz",
-      "integrity": "sha512-cLbn3UBgaPI/+Q6ke2JQZF8tyItCQt6WNG09h6/9CoRUDJU8J9c1W+h/0VLW4DXIzxoPbx0HkOJ9nTMBd9UTUg=="
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uvstat/-/uvstat-1.0.6.tgz",
+      "integrity": "sha512-Rl7ENBVv7ZtZ2kdDL5Vv4BVsbCP0qxcyOWhRBEpEfY5LHv5nB3iPMbBbSngLRsGPX2eAEboBwseScvIdu0i6eA=="
     },
     "v8-compile-cache": {
       "version": "2.0.3",
@@ -8657,6 +8657,11 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "vcmt": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/vcmt/-/vcmt-1.0.6.tgz",
+      "integrity": "sha512-OKcnwcPHNJUenziaZzZ09jHB1R7F1E24rGFEDDpI95bVFjUtOTZ4M04GblOWZ4kysyZCVTOwpLRkE6mNB74UDA=="
+    },
     "vditor": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/vditor/-/vditor-2.1.1.tgz",

package.json

@@ -47,7 +47,8 @@
   "dependencies": {
     "jquery": "^3.4.1",
     "nprogress": "^0.2.0",
-    "uvstat": "^1.0.0",
+    "uvstat": "^1.0.6",
+    "vcmt": "^1.0.6",
     "vditor": "^2.1.1"
   }
 }

src/main/resources/admin/admin-index.ftl

@@ -173,9 +173,10 @@
     </div>
 </div>
 <#include "admin-label.ftl">
-<script src="${staticServePath}/js/admin/admin.min.js${staticResourceVersion}"></script>
+<script src="${staticServePath}/js/admin/admin.min.js?${staticResourceVersion}"></script>
 ${plugins}
 <script>
+  admin.init()
   admin.inited()
 </script>
 </body>

src/main/resources/admin/admin-label.ftl

@@ -99,5 +99,4 @@
     Label.categoryTooLongLabel = "${categoryTooLongLabel}"
     Label.descriptionLabel = "${descriptionLabel}"
     Label.previewLabel = '${previewLabel}'
-    admin.init()
 </script>

src/main/resources/js/admin/admin.js

@@ -28,7 +28,8 @@ import '../lib/jquery/jquery.bowknot.min'
  */
 
 window.$ = $
-export const htmlDecode = function (code) {
+Util.init()
+window.htmlDecode = function (code) {
   var div = document.createElement('div')
   div.innerHTML = decodeURIComponent(code)
   return div.innerText

src/main/resources/js/admin/editor.js

@@ -21,7 +21,7 @@
  * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
  * @version 1.3.0.1, Aug 6, 2019
  */
-
+import Vditor from 'vditor'
 admin.editors = {}
 
 /*
@@ -31,7 +31,7 @@ admin.editors = {}
  * @param conf.id 编辑器渲染元素 id
  * @param conf.height 编辑器种类
  */
-var SoloEditor = function (conf) {
+window.SoloEditor = function (conf) {
   this.conf = conf
   this.init()
 }

src/main/resources/js/common.js

@@ -18,6 +18,7 @@
 import $ from 'jquery'
 import NProgress from 'nprogress'
 import pjax from './pjax'
+import Uvstat from 'uvstat'
 
 /**
  * @fileoverview util and every page should be used.

src/main/resources/js/lib/jquery/jquery.bowknot.min.js

@@ -488,12 +488,7 @@ import jQuery from 'jquery'
                 })
               $(this).addClass(styleClass.lineHoverClass)
               if ($(this).find('tr').length === 2) {
-                if ($.browser.msie) {
-                  if ($.browser.version > 7) {
-                    $(this).
-                      find('tr')[1].style.display = 'block'
-                  }
-                } else {$(this).find('tr')[1].style.display = 'table-row'}
+                $(this).find('tr')[1].style.display = 'table-row'
               }
             }
           })

src/main/resources/js/pjax.js

-var Util = {
+import $ from 'jquery'
+const pjaxUtil = {
   support: {
     pjax: window.history && window.history.pushState &&
     window.history.replaceState && !navigator.userAgent.match(
@@ -35,7 +36,7 @@ var Util = {
   },
   // 清除所有的cache
   removeAllCache: function () {
-    if (!Util.support.storage)
+    if (!pjaxUtil.support.storage)
       return
     for (var name in localStorage) {
       if ((name.split('_') || [''])[0] === 'pjax') {
@@ -46,23 +47,23 @@ var Util = {
   // 获取cache
   getCache: function (src, time, flag) {
     var item, vkey, tkey, tval
-    time = Util.toInt(time)
-    if (src in Util.stack) {
-      item = Util.stack[src]
-      const ctime = Util.getTime()
+    time = pjaxUtil.toInt(time)
+    if (src in pjaxUtil.stack) {
+      item = pjaxUtil.stack[src]
+      const ctime = pjaxUtil.getTime()
       if ((item.time + time * 1000) > ctime) {
         return item
       } else {
-        delete Util.stack[src]
+        delete pjaxUtil.stack[src]
       }
-    } else if (flag && Util.support.storage) { // 从localStorage里查询
-      var l = Util.getLocalKey(src)
+    } else if (flag && pjaxUtil.support.storage) { // 从localStorage里查询
+      var l = pjaxUtil.getLocalKey(src)
       vkey = l.data
       tkey = l.time
       item = localStorage.getItem(vkey)
       if (item) {
-        tval = Util.toInt(localStorage.getItem(tkey))
-        if ((tval + time * 1000) > Util.getTime()) {
+        tval = pjaxUtil.toInt(localStorage.getItem(tkey))
+        if ((tval + time * 1000) > pjaxUtil.getTime()) {
           return {
             data: item,
             title: localStorage.getItem(l.title),
@@ -78,14 +79,14 @@ var Util = {
   },
   // 设置cache
   setCache: function (src, data, title, flag) {
-    var time = Util.getTime(), key
-    Util.stack[src] = {
+    var time = pjaxUtil.getTime(), key
+    pjaxUtil.stack[src] = {
       data: data,
       title: title,
       time: time,
     }
-    if (flag && Util.support.storage) {
-      key = Util.getLocalKey(src)
+    if (flag && pjaxUtil.support.storage) {
+      key = pjaxUtil.getLocalKey(src)
       localStorage.setItem(key.data, data)
       localStorage.setItem(key.time, time)
       localStorage.setItem(key.title, title)
@@ -93,10 +94,10 @@ var Util = {
   },
   // 清除cache
   removeCache: function (src) {
-    src = Util.getRealUrl(src || location.href)
-    delete Util.stack[src]
-    if (Util.support.storage) {
-      var key = Util.getLocalKey(src)
+    src = pjaxUtil.getRealUrl(src || location.href)
+    delete pjaxUtil.stack[src]
+    if (pjaxUtil.support.storage) {
+      var key = pjaxUtil.getLocalKey(src)
       localStorage.removeItem(key.data)
       localStorage.removeItem(key.time)
       localStorage.removeItem(key.title)
@@ -129,8 +130,8 @@ var pjax = function (options) {
       return true
     }
     // 只是hash不同
-    if (Util.getRealUrl(href) == Util.getRealUrl(location.href)) {
-      var hash = Util.getUrlHash(href)
+    if (pjaxUtil.getRealUrl(href) == pjaxUtil.getRealUrl(location.href)) {
+      var hash = pjaxUtil.getUrlHash(href)
       if (hash) {
         location.hash = hash
         options.callback && options.callback.call(this, {
@@ -295,7 +296,7 @@ pjax.success = function (data, isCached) {
   }, isCached)
   // 设置cache
   if (pjax.options.cache && !isCached) {
-    Util.setCache(pjax.options.url, data, title, pjax.options.storage)
+    pjaxUtil.setCache(pjax.options.url, data, title, pjax.options.storage)
   }
 }
 
@@ -308,9 +309,9 @@ pjax.request = function (options) {
   options = $.extend(true, pjax.defaultOptions, options)
   var cache, container = $(options.container)
   options.oldUrl = options.url
-  options.url = Util.getRealUrl(options.url)
+  options.url = pjaxUtil.getRealUrl(options.url)
   if ($(options.element).length) {
-    cache = Util.toInt($(options.element).attr('data-pjax-cache'))
+    cache = pjaxUtil.toInt($(options.element).attr('data-pjax-cache'))
     if (cache) {
       options.cache = cache
     }
@@ -318,10 +319,10 @@ pjax.request = function (options) {
   if (options.cache === true) {
     options.cache = 24 * 3600
   }
-  options.cache = Util.toInt(options.cache)
+  options.cache = pjaxUtil.toInt(options.cache)
   // 如果将缓存时间设为0，则将之前的缓存也清除
   if (options.cache === 0) {
-    Util.removeAllCache()
+    pjaxUtil.removeAllCache()
   }
   // 展现函数
   if (!options.showFn) {
@@ -332,7 +333,7 @@ pjax.request = function (options) {
   pjax.options = options
   pjax.options.success = pjax.success
   if (options.cache &&
-    (cache = Util.getCache(options.url, options.cache, options.storage))) {
+    (cache = pjaxUtil.getCache(options.url, options.cache, options.storage))) {
     options.beforeSend()
     options.title = cache.title
     pjax.success(cache.data, true)
@@ -373,7 +374,7 @@ $(window).bind('popstate', function (event) {
 })
 
 // not support
-if (!Util.support.pjax) {
+if (!pjaxUtil.support.pjax) {
   pjax = function () {
     return true
   }

src/main/resources/scss/admin.css

@@ -1462,13 +1462,14 @@ a[class*=" icon-"]:hover {
 /* start first tab */
 #tabs {
   height: 100%;
-  min-height: 468px;
   width: 240px;
   margin-top: 50px;
   position: fixed;
   top: 0;
   background-color: #32323a;
   overflow: auto; }
+  #tabs::-webkit-scrollbar {
+    display: none; }
 
 #tabs ul {
   list-style: none; }
@@ -1829,7 +1830,7 @@ button#submitArticle:hover {
 
 .dialog-panel {
   display: none;
-  position: absolute;
+  position: fixed;
   z-index: 100; }
 
 .dialog-title {

src/main/resources/scss/admin.scss

@@ -304,13 +304,15 @@ a[class*=" icon-"]:hover {
 /* start first tab */
 #tabs {
   height: 100%;
-  min-height: 468px;
   width: 240px;
   margin-top: 50px;
   position: fixed;
   top: 0;
   background-color: #32323a;
   overflow: auto;
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 #tabs ul {
@@ -744,7 +746,7 @@ button#submitArticle:hover {
 
 .dialog-panel {
   display: none;
-  position: absolute;
+  position: fixed;
   z-index: 100;
 }
 

src/main/resources/scss/base.css

+/*
+ * Solo - A small and beautiful blogging system written in Java.
+ * Copyright (c) 2010-present, b3log.org
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program 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 Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+/**
+ * base style
+ *
+ * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
+ * @version 2.0.0.1, Mar 16, 2019
+*/
+/*
+ * Solo - A small and beautiful blogging system written in Java.
+ * Copyright (c) 2010-present, b3log.org
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program 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 Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+/**
+ * Common style for reset
+ *
+ * @author <a href="http://vanessa.b3log.org">Liyuan Li</ta>
+ * @version 0.2.0.2, Mar 20, 2019
+ */
+html {
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  height: 100%; }
+
+body {
+  margin: 0;
+  font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
+  font-size: 14px;
+  background-color: #fff;
+  -webkit-font-smoothing: antialiased;
+  -webkit-overflow-scrolling: touch; }
+
+::-moz-selection {
+  text-shadow: none;
+  background: rgba(65, 131, 196, 0.4); }
+
+::selection {
+  text-shadow: none;
+  background: rgba(66, 133, 244, 0.4); }
+
+ul,
+ol {
+  margin: 0;
+  padding: 0; }
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+dl,
+dd,
+p {
+  margin: 0; }
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section {
+  display: block; }
+
+audio,
+canvas,
+video {
+  display: inline-block; }
+
+audio:not([controls]) {
+  display: none; }
+
+a {
+  outline: 0;
+  text-decoration: none; }
+
+a:hover {
+  text-decoration: underline; }
+
+sub,
+sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline; }
+
+sup {
+  top: -0.5em; }
+
+sub {
+  bottom: -0.25em; }
+
+img {
+  max-width: 100%;
+  vertical-align: middle;
+  border: 0;
+  height: auto;
+  -ms-interpolation-mode: bicubic;
+  overflow: hidden;
+  font-size: 12px; }
+
+button,
+input,
+select,
+textarea {
+  margin: 0;
+  font-size: 100%;
+  vertical-align: middle;
+  font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
+  outline: none; }
+
+button,
+input {
+  line-height: normal; }
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  padding: 0;
+  border: 0; }
+
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+  cursor: pointer;
+  -webkit-appearance: button; }
+
+input[type="search"] {
+  box-sizing: content-box;
+  -webkit-appearance: textfield; }
+
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: none; }
+
+textarea {
+  overflow: auto;
+  resize: vertical; }
+
+svg {
+  fill: currentColor;
+  display: inline-block;
+  stroke-width: 0;
+  stroke: currentColor;
+  width: 14px;
+  height: 14px; }
+
+blockquote {
+  margin: 0; }
+
+/**
+ * tool tip.
+ *
+ * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
+ * @version 0.1.0.0, Jan 25, 2019
+ */
+@-webkit-keyframes tooltip-appear {
+  from {
+    opacity: 0; }
+  to {
+    opacity: 1; } }
+@keyframes tooltip-appear {
+  from {
+    opacity: 0; }
+  to {
+    opacity: 1; } }
+
+.vditor-tooltipped {
+  position: relative;
+  cursor: pointer; }
+  .vditor-tooltipped::after {
+    position: absolute;
+    z-index: 1000000;
+    display: none;
+    padding: 5px 8px;
+    font-size: 11px;
+    font-weight: normal;
+    -webkit-font-smoothing: subpixel-antialiased;
+    color: #fff;
+    text-align: center;
+    text-decoration: none;
+    text-shadow: none;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: break-word;
+    white-space: pre;
+    pointer-events: none;
+    content: attr(aria-label);
+    background: rgba(0, 0, 0, 0.8);
+    border-radius: 3px;
+    line-height: 16px;
+    opacity: 0; }
+  .vditor-tooltipped::before {
+    position: absolute;
+    z-index: 1000001;
+    display: none;
+    width: 0;
+    height: 0;
+    color: rgba(0, 0, 0, 0.8);
+    pointer-events: none;
+    content: "";
+    border: 5px solid transparent;
+    opacity: 0; }
+  .vditor-tooltipped--hover::before, .vditor-tooltipped--hover::after, .vditor-tooltipped:hover::before, .vditor-tooltipped:hover::after, .vditor-tooltipped:active::before, .vditor-tooltipped:active::after, .vditor-tooltipped:focus::before, .vditor-tooltipped:focus::after {
+    display: inline-block;
+    text-decoration: none;
+    -webkit-animation-name: tooltip-appear;
+            animation-name: tooltip-appear;
+    -webkit-animation-duration: 0.15s;
+            animation-duration: 0.15s;
+    -webkit-animation-fill-mode: forwards;
+            animation-fill-mode: forwards;
+    -webkit-animation-timing-function: ease-in;
+            animation-timing-function: ease-in; }
+  .vditor-tooltipped__s::after, .vditor-tooltipped__se::after, .vditor-tooltipped__sw::after {
+    top: 100%;
+    right: 50%;
+    margin-top: 5px; }
+  .vditor-tooltipped__s::before, .vditor-tooltipped__se::before, .vditor-tooltipped__sw::before {
+    top: auto;
+    right: 50%;
+    bottom: -5px;
+    margin-right: -5px;
+    border-bottom-color: rgba(0, 0, 0, 0.8); }
+  .vditor-tooltipped__se::after {
+    right: auto;
+    left: 50%;
+    margin-left: -15px; }
+  .vditor-tooltipped__sw::after {
+    margin-right: -15px; }
+  .vditor-tooltipped__n::after, .vditor-tooltipped__ne::after, .vditor-tooltipped__nw::after {
+    right: 50%;
+    bottom: 100%;
+    margin-bottom: 5px; }
+  .vditor-tooltipped__n::before, .vditor-tooltipped__ne::before, .vditor-tooltipped__nw::before {
+    top: -5px;
+    right: 50%;
+    bottom: auto;
+    margin-right: -5px;
+    border-top-color: rgba(0, 0, 0, 0.8); }
+  .vditor-tooltipped__ne::after {
+    right: auto;
+    left: 50%;
+    margin-left: -15px; }
+  .vditor-tooltipped__nw::after {
+    margin-right: -15px; }
+  .vditor-tooltipped__s::after, .vditor-tooltipped__n::after {
+    -webkit-transform: translateX(50%);
+            transform: translateX(50%); }
+  .vditor-tooltipped__w::after {
+    right: 100%;
+    bottom: 50%;
+    margin-right: 5px;
+    -webkit-transform: translateY(50%);
+            transform: translateY(50%); }
+  .vditor-tooltipped__w::before {
+    top: 50%;
+    bottom: 50%;
+    left: -5px;
+    margin-top: -5px;
+    border-left-color: rgba(0, 0, 0, 0.8); }
+  .vditor-tooltipped__e::after {
+    bottom: 50%;
+    left: 100%;
+    margin-left: 5px;
+    -webkit-transform: translateY(50%);
+            transform: translateY(50%); }
+  .vditor-tooltipped__e::before {
+    top: 50%;
+    right: -5px;
+    bottom: 50%;
+    margin-top: -5px;
+    border-right-color: rgba(0, 0, 0, 0.8); }
+
+/**
+ * panel.
+ *
+ * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
+ * @version 0.1.0.0, Jan 28, 2019
+ */
+@-webkit-keyframes scale-in {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(0.5);
+            transform: scale(0.5); }
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1); } }
+@keyframes scale-in {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(0.5);
+            transform: scale(0.5); }
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1); } }
+
+.vditor-panel {
+  background-color: #fff;
+  position: absolute;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+  padding: 5px;
+  z-index: 3;
+  font-size: 14px;
+  display: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  max-width: 320px;
+  min-width: 80px;
+  -webkit-animation-duration: .15s;
+          animation-duration: .15s;
+  -webkit-animation-name: scale-in;
+          animation-name: scale-in;
+  -webkit-animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5);
+          animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5); }
+  .vditor-panel--none {
+    color: #4285f4;
+    padding: 0;
+    -webkit-animation: none;
+            animation: none;
+    background-color: #f6f8fa;
+    min-width: auto;
+    max-width: none; }
+  .vditor-panel h1, .vditor-panel h2, .vditor-panel h3, .vditor-panel h4, .vditor-panel h5, .vditor-panel h6 {
+    margin: 0;
+    cursor: pointer;
+    padding: 3px 10px;
+    border-radius: 3px;
+    line-height: normal; }
+    .vditor-panel h1:hover, .vditor-panel h2:hover, .vditor-panel h3:hover, .vditor-panel h4:hover, .vditor-panel h5:hover, .vditor-panel h6:hover {
+      background-color: #4285f4;
+      color: #fff; }
+
+.vditor-input {
+  border: 0;
+  padding: 3px 5px;
+  background-color: #f6f8fa; }
+  .vditor-input:focus {
+    background-color: #fff;
+    outline: none; }
+
+.vditor-icon {
+  color: #586069;
+  cursor: pointer;
+  float: left;
+  padding: 2px 5px;
+  height: 19px;
+  width: 25px;
+  background-color: transparent;
+  border: 0;
+  box-sizing: border-box; }
+  .vditor-icon:hover, .vditor-icon--current {
+    color: #4285f4;
+    background-color: transparent; }
+  .vditor-icon:focus {
+    outline: none; }
+  .vditor-icon svg {
+    height: 15px !important;
+    width: 15px !important;
+    float: left;
+    fill: currentColor; }
+
+/**
+ * toolbar.
+ *
+ * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
+ * @version 0.1.2.0, Jun 20, 2019
+ */
+.vditor-toolbar {
+  background-color: #f6f8fa;
+  border-bottom: 1px solid #d1d5da;
+  padding: 0 5px;
+  border-radius: 3px 3px 0 0; }
+  .vditor-toolbar > div {
+    float: left; }
+    .vditor-toolbar > div > .vditor-tooltipped {
+      border: 0;
+      margin: 0;
+      padding: 10px 5px;
+      background-color: transparent;
+      height: 35px;
+      width: 25px;
+      box-sizing: border-box; }
+      .vditor-toolbar > div > .vditor-tooltipped:focus {
+        outline: none; }
+  .vditor-toolbar .vditor-tooltipped {
+    color: #586069; }
+    .vditor-toolbar .vditor-tooltipped:hover {
+      color: #4285f4; }
+  .vditor-toolbar svg {
+    fill: currentColor;
+    display: inline-block;
+    stroke-width: 0;
+    stroke: currentColor;
+    width: 15px;
+    height: 15px; }
+  .vditor-toolbar input {
+    position: absolute;
+    width: 25px;
+    height: 35px;
+    top: 0;
+    left: 0;
+    cursor: pointer;
+    opacity: .001;
+    overflow: hidden; }
+
+.vditor-menu--current svg {
+  color: #4285f4; }
+
+.vditor-menu__divider {
+  width: 10px;
+  height: 35px; }
+
+.vditor-menu__br {
+  width: 100%;
+  padding: 0 !important;
+  height: 0 !important; }
+
+.vditor-menu--disabled svg {
+  color: rgba(88, 96, 105, 0.6);
+  cursor: not-allowed; }
+
+.vditor-emojis {
+  display: inline-block;
+  overflow: auto; }
+  .vditor-emojis::-webkit-scrollbar {
+    display: none; }
+  .vditor-emojis__tip {
+    -webkit-box-flex: 1;
+            flex: 1;
+    width: 200px;
+    margin-right: 10px;
+    color: #586069;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden; }
+  .vditor-emojis__tail {
+    margin-top: 5px;
+    font-size: 12px;
+    color: #586069;
+    display: -webkit-box;
+    display: flex; }
+    .vditor-emojis__tail a {
+      text-decoration: none;
+      color: #586069; }
+      .vditor-emojis__tail a:hover {
+        color: #4285f4; }
+  .vditor-emojis button {
+    cursor: pointer;
+    border-radius: 3px;
+    float: left;
+    height: 30px;
+    width: 30px;
+    text-align: center;
+    line-height: 26px;
+    padding: 3px;
+    box-sizing: border-box;
+    font-size: 16px;
+    -webkit-transition: all 0.15s ease-in-out;
+    transition: all 0.15s ease-in-out;
+    border: 0;
+    margin: 0;
+    background-color: transparent;
+    overflow: hidden; }
+    .vditor-emojis button:focus {
+      outline: none; }
+    .vditor-emojis button:hover .vditor-emojis__icon {
+      display: inline-block;
+      -webkit-transform: scale(1.2);
+              transform: scale(1.2); }
+  .vditor-emojis img {
+    height: 20px;
+    width: 20px;
+    float: left;
+    margin: 3px 0 0 3px; }
+
+@-webkit-keyframes slideInDown {
+  from {
+    -webkit-transform: translate3d(0, -100%, 0);
+            transform: translate3d(0, -100%, 0);
+    visibility: visible; }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0); } }
+
+@keyframes slideInDown {
+  from {
+    -webkit-transform: translate3d(0, -100%, 0);
+            transform: translate3d(0, -100%, 0);
+    visibility: visible; }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0); } }
+
+.vditor {
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+          flex-direction: column;
+  border: 1px solid #d1d5da;
+  border-radius: 3px;
+  box-sizing: border-box;
+  font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; }
+  .vditor--fullscreen {
+    position: fixed;
+    top: 0;
+    width: 100% !important;
+    left: 0;
+    height: 100vh !important;
+    z-index: 90;
+    background-color: #fff; }
+  .vditor-content {
+    display: -webkit-box;
+    display: flex;
+    min-height: 60px;
+    -webkit-box-flex: 1;
+            flex: 1;
+    position: relative; }
+  .vditor-textarea {
+    font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
+    margin: 0 1px 0 0;
+    height: 100%;
+    overflow: auto;
+    width: 100%;
+    -webkit-box-flex: 1;
+            flex: 1;
+    border: 0;
+    resize: none;
+    padding: 10px 9px 10px 10px;
+    box-sizing: border-box;
+    background-color: #fafbfc;
+    outline: 0 none;
+    font-size: 16px;
+    line-height: 22px;
+    color: #24292e;
+    border-radius: 0 0 3px 3px;
+    font-variant-ligatures: no-common-ligatures;
+    white-space: pre-wrap;
+    word-break: break-word;
+    word-wrap: break-word; }
+    .vditor-textarea[contenteditable="false"] {
+      opacity: 0.3;
+      cursor: not-allowed; }
+    .vditor-textarea:focus {
+      background-color: #fff; }
+    .vditor-textarea:empty::before {
+      content: attr(placeholder);
+      color: rgba(36, 41, 46, 0.68); }
+  .vditor-preview {
+    -webkit-box-flex: 1;
+            flex: 1;
+    background-color: #fff;
+    overflow: auto;
+    margin-left: -1px;
+    padding: 10px;
+    box-shadow: inset 1px 0 #d1d5da;
+    box-sizing: border-box;
+    border-radius: 0 0 3px 0; }
+    .vditor-preview > div::-webkit-scrollbar {
+      display: none; }
+    .vditor-preview > .vditor-reset {
+      margin: 0 auto; }
+  .vditor-devtools {
+    display: none;
+    background-color: #fff;
+    overflow: auto;
+    -webkit-box-flex: 1;
+            flex: 1;
+    box-shadow: inset 1px 0 #d1d5da;
+    box-sizing: border-box;
+    border-radius: 0 0 3px 0;
+    padding: 10px; }
+  .vditor-counter {
+    padding: 0 3px;
+    position: absolute;
+    bottom: 10px;
+    right: 20px;
+    color: #24292e;
+    background-color: rgba(255, 255, 255, 0.6);
+    border-radius: 3px;
+    font-size: 12px;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+    z-index: 2; }
+    .vditor-counter--error {
+      color: #d23f31;
+      background-color: rgba(210, 63, 49, 0.1); }
+  .vditor-resize {
+    padding: 3px 0;
+    cursor: row-resize;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+    position: absolute;
+    width: 100%;
+    z-index: 2; }
+    .vditor-resize--top {
+      top: -3px; }
+    .vditor-resize--bottom {
+      bottom: -3px; }
+    .vditor-resize > div {
+      height: 3px;
+      background-color: #f6f8fa;
+      -webkit-transition: all 0.15s ease-in-out;
+      transition: all 0.15s ease-in-out; }
+    .vditor-resize:hover > div, .vditor-resize--selected > div {
+      background-color: #4285f4; }
+    .vditor-resize:hover svg, .vditor-resize--selected svg {
+      color: #fff; }
+    .vditor-resize svg {
+      fill: currentColor;
+      stroke-width: 0;
+      stroke: currentColor;
+      width: 13px;
+      height: 3px;
+      display: block;
+      margin: 0 auto;
+      color: #586069; }
+  .vditor-upload {
+    position: absolute;
+    height: 3px;
+    left: 0;
+    top: -2px;
+    -webkit-transition: all 0.15s ease-in-out;
+    transition: all 0.15s ease-in-out;
+    background-color: rgba(66, 133, 244, 0.8); }
+  .vditor-tip {
+    position: absolute;
+    font-size: 12px;
+    top: 10px;
+    color: #fff;
+    -webkit-animation-duration: .15s;
+            animation-duration: .15s;
+    -webkit-animation-fill-mode: both;
+            animation-fill-mode: both;
+    left: 50%; }
+    .vditor-tip--show {
+      display: block;
+      -webkit-animation-name: slideInDown;
+              animation-name: slideInDown; }
+    .vditor-tip__content {
+      text-align: left;
+      display: inline-block;
+      line-height: 16px;
+      padding: 3px 10px;
+      border-radius: 3px;
+      background: rgba(66, 133, 244, 0.8);
+      position: relative;
+      margin-left: -50%; }
+      .vditor-tip__content ul {
+        margin: 2px 0;
+        padding: 0 0 0 18px; }
+    .vditor-tip__close {
+      position: absolute;
+      color: #586069;
+      top: -7px;
+      right: -15px;
+      font-weight: bold;
+      cursor: pointer; }
+      .vditor-tip__close:hover {
+        color: #4285f4; }
+
+.vditor-hint {
+  background-color: #fff;
+  position: absolute;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+  padding: 5px 0;
+  z-index: 4;
+  line-height: 20px;
+  list-style: none;
+  color: #24292e;
+  font-size: 12px;
+  margin: 0;
+  max-width: 250px;
+  min-width: 80px;
+  display: none; }
+  .vditor-hint button {
+    display: block;
+    padding: 3px 10px;
+    border: 0;
+    border-bottom: 1px solid #d1d5da;
+    line-height: 20px;
+    width: 100%;
+    box-sizing: border-box;
+    text-align: left;
+    margin: 0;
+    background-color: transparent; }
+    .vditor-hint button:last-child {
+      border-bottom: 0; }
+  .vditor-hint--current,
+  .vditor-hint button:hover {
+    background-color: #4285f4 !important;
+    color: #fff; }
+  .vditor-hint__emoji {
+    font-size: 16px;
+    float: left;
+    margin-right: 3px; }
+  .vditor-hint img {
+    height: 20px;
+    width: 20px;
+    float: left;
+    margin-right: 3px; }
+
+.vditor-reset {
+  font-variant-ligatures: no-common-ligatures;
+  font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
+  word-wrap: break-word;
+  overflow: auto;
+  line-height: 1.5;
+  font-size: 16px;
+  word-break: break-word; }
+  .vditor-reset--anchor {
+    padding-left: 20px; }
+  .vditor-reset--error {
+    color: #d23f31;
+    font-size: 12px;
+    display: block;
+    line-height: 16px; }
+  .vditor-reset ul ul ul {
+    list-style-type: square; }
+  .vditor-reset ul ul {
+    list-style-type: circle; }
+  .vditor-reset ul {
+    list-style-type: disc; }
+  .vditor-reset ul,
+  .vditor-reset ol {
+    padding-left: 2em;
+    margin-top: 0;
+    margin-bottom: 16px; }
+  .vditor-reset li + li {
+    margin-top: 0.25em; }
+  .vditor-reset audio {
+    max-width: 100%; }
+    .vditor-reset audio:focus {
+      outline: none; }
+  .vditor-reset video {
+    max-height: 90vh;
+    max-width: 100%; }
+  .vditor-reset img {
+    max-width: 100%; }
+  .vditor-reset img.emoji {
+    cursor: auto;
+    max-width: 20px;
+    vertical-align: sub; }
+  .vditor-reset h1,
+  .vditor-reset h2,
+  .vditor-reset h3,
+  .vditor-reset h4,
+  .vditor-reset h5,
+  .vditor-reset h6 {
+    margin-top: 24px;
+    margin-bottom: 16px;
+    font-weight: 600;
+    line-height: 1.25; }
+    .vditor-reset h1:hover .vditor-anchor svg,
+    .vditor-reset h2:hover .vditor-anchor svg,
+    .vditor-reset h3:hover .vditor-anchor svg,
+    .vditor-reset h4:hover .vditor-anchor svg,
+    .vditor-reset h5:hover .vditor-anchor svg,
+    .vditor-reset h6:hover .vditor-anchor svg {
+      visibility: visible; }
+  .vditor-reset h1 {
+    padding-bottom: 0.3em;
+    font-size: 1.7em;
+    border-bottom: 1px solid #eee; }
+  .vditor-reset h2 {
+    padding-bottom: 0.3em;
+    font-size: 1.5em;
+    border-bottom: 1px solid #eee; }
+  .vditor-reset h3 {
+    font-size: 1.25em; }
+  .vditor-reset h4 {
+    font-size: 1em; }
+  .vditor-reset h5 {
+    font-size: 0.875em; }
+  .vditor-reset h6 {
+    font-size: 0.85em; }
+  .vditor-reset hr {
+    height: 2px;
+    padding: 0;
+    margin: 24px 0;
+    background-color: #e7e7e7;
+    border: 0; }
+  .vditor-reset p {
+    margin-top: 0;
+    margin-bottom: 16px; }
+  .vditor-reset blockquote {
+    padding: 0 1em;
+    color: #777;
+    border-left: 0.25em solid #ddd;
+    margin: 0 0 16px 0; }
+    .vditor-reset blockquote p {
+      margin: 0; }
+  .vditor-reset ins > iframe {
+    border: 0; }
+  .vditor-reset iframe {
+    border: 1px solid #d1d5da;
+    max-width: 100%;
+    box-sizing: border-box; }
+    .vditor-reset iframe.iframe__video {
+      min-width: 80%;
+      min-height: 36vh; }
+  .vditor-reset table {
+    width: 100%;
+    border-collapse: collapse;
+    empty-cells: show;
+    margin-bottom: 16px;
+    display: block;
+    overflow: auto;
+    border-spacing: 0; }
+    .vditor-reset table tr {
+      background-color: #fff;
+      border-top: 1px solid #c6cbd1; }
+    .vditor-reset table td,
+    .vditor-reset table th {
+      padding: 6px 13px;
+      border: 1px solid #dfe2e5;
+      word-break: normal; }
+    .vditor-reset table th {
+      font-weight: 600; }
+    .vditor-reset table tbody tr:nth-child(2n) {
+      background-color: #f6f8fa; }
+  .vditor-reset code:not(.hljs):not(.highlight-chroma) {
+    padding: 0.2em 0.4em;
+    margin: 0;
+    font-size: 85%;
+    border-radius: 3px;
+    font-family: mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
+    word-break: break-word;
+    background-size: 20px 20px;
+    white-space: pre-wrap;
+    background-color: rgba(27, 31, 35, 0.05); }
+  .vditor-reset pre > code {
+    margin: 0;
+    font-size: 85%;
+    padding: 0.5em;
+    border-radius: 5px;
+    display: block;
+    overflow: auto;
+    white-space: pre;
+    font-family: mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
+    background-size: 20px 20px;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AgMAAABHkjHhAAAACVBMVEWAgIBaWlo+Pj7rTFvWAAAAA3RSTlMHCAw+VhR4AAAA+klEQVQoz4WSMW7EQAhFPxKWNh2FCx+HkaZI6RRb5DYbyVfIJXLKDCFoMbaTKSw/8ZnPAPjaH2xgZcUNUDADD7D9LtDBCLZ45fbkvo/30K8yeI64pPwl6znd/3n/Oe93P3ho9qeh72btTFzqkz0rsJle8Zr81OLEwZ1dv/713uWqvu2pl+k0fy7MWtj9r/tN5q/02z89qa/L4Dc2LvM93kezPfXlME/O86EbY/V9GB9ePX8G1/6W+/9h1dq/HGfTfzT3j/xNo7522Bfnqe5jO/fvhVthlfk434v3iO9zG/UOphyPeinPl1J8Gtaa7xPTa/Dk+RIs4deMvwGvcGsmsCvJ0AAAAABJRU5ErkJggg==);
+    word-break: initial;
+    word-wrap: normal; }
+  .vditor-reset pre:hover div.vditor-copy {
+    display: block; }
+  .vditor-reset kbd {
+    display: inline-block;
+    padding: 3px 5px;
+    font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    line-height: 10px;
+    color: #555;
+    vertical-align: middle;
+    background-color: #fcfcfc;
+    border: solid 1px #d1d5da;
+    border-bottom-color: #bbb;
+    border-radius: 3px;
+    box-shadow: inset 0 -1px 0 #bbb; }
+  .vditor-reset summary {
+    cursor: pointer; }
+    .vditor-reset summary:focus {
+      outline: none; }
+  .vditor-reset svg {
+    height: auto;
+    width: auto; }
+  .vditor-reset p:last-child,
+  .vditor-reset blockquote:last-child,
+  .vditor-reset pre:last-child,
+  .vditor-reset ul:last-child,
+  .vditor-reset ol:last-child,
+  .vditor-reset hr:last-child {
+    margin-bottom: 0; }
+  .vditor-reset .language-echarts {
+    overflow: hidden;
+    height: 420px; }
+
+.vditor-task {
+  list-style: none; }
+  .vditor-task input {
+    margin: 0 .2em .25em -1.6em;
+    font-size: 12px;
+    vertical-align: middle; }
+
+.vditor-copy {
+  position: relative;
+  display: none;
+  z-index: 1; }
+  .vditor-copy textarea {
+    position: absolute;
+    left: -100000px;
+    height: 10px; }
+  .vditor-copy span {
+    cursor: pointer;
+    position: absolute;
+    right: 0.5em;
+    top: 0.5em;
+    height: 14px;
+    width: 14px;
+    display: block;
+    background-color: #f6f8fa;
+    border-radius: 3px;
+    padding: 3px; }
+  .vditor-copy svg {
+    color: #586069;
+    height: 14px;
+    width: 14px !important;
+    display: block;
+    fill: currentColor; }
+
+.vditor-linenumber {
+  padding-left: 4em !important;
+  position: relative; }
+  .vditor-linenumber__rows {
+    position: absolute;
+    pointer-events: none;
+    top: 0.5em;
+    left: 0;
+    width: 3em;
+    /* works for line-numbers below 1000 lines */
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+    counter-reset: linenumber; }
+    .vditor-linenumber__rows > span {
+      pointer-events: none;
+      display: block; }
+      .vditor-linenumber__rows > span::before {
+        counter-increment: linenumber;
+        content: counter(linenumber);
+        color: rgba(158, 150, 150, 0.38);
+        display: block;
+        padding-right: 1em;
+        text-align: right; }
+
+.vditor-speech {
+  position: absolute;
+  display: none;
+  background-color: #f6f8fa;
+  border: 1px solid #d1d5da;
+  border-radius: 3px;
+  padding: 3px;
+  cursor: pointer;
+  color: #586069; }
+  .vditor-speech:hover, .vditor-speech--current {
+    color: #4285f4; }
+  .vditor-speech svg {
+    height: 14px;
+    width: 14px;
+    fill: currentColor;
+    display: block;
+    stroke-width: 0;
+    stroke: currentColor; }
+
+.vditor-anchor {
+  float: left;
+  padding-right: 4px;
+  margin-left: -20px; }
+  .vditor-anchor svg {
+    visibility: hidden; }
+  .vditor-anchor:hover svg {
+    visibility: visible; }
+  .vditor-anchor:focus {
+    outline: none; }
+
+.vditor-linkcard {
+  margin: 31px auto 16px;
+  -webkit-transition: all 0.15s ease-in-out;
+  transition: all 0.15s ease-in-out;
+  cursor: pointer;
+  max-width: 768px;
+  padding: 0 10px; }
+  .vditor-linkcard a {
+    border-radius: 3px;
+    background-color: #f6f8fa;
+    overflow: hidden;
+    max-height: 250px;
+    display: -webkit-box;
+    display: flex;
+    text-decoration: none;
+    flex-wrap: wrap-reverse;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
+    .vditor-linkcard a:hover {
+      box-shadow: 0 0 3px rgba(0, 0, 0, 0.13), 0 3px 6px rgba(0, 0, 0, 0.26);
+      text-decoration: none; }
+    .vditor-linkcard a:visited .vditor-linkcard__abstract {
+      color: rgba(88, 96, 105, 0.6); }
+  .vditor-linkcard__info {
+    padding: 10px;
+    min-width: 200px;
+    box-sizing: border-box;
+    -webkit-box-flex: 1;
+            flex: 1; }
+  .vditor-linkcard__title {
+    font-size: 14px;
+    font-weight: 400;
+    color: #24292e;
+    display: -webkit-box;
+    display: flex;
+    -webkit-box-align: center;
+            align-items: center; }
+    .vditor-linkcard__title img {
+      cursor: pointer;
+      height: 20px;
+      width: 20px;
+      border-radius: 3px;
+      flex-shrink: 0;
+      margin-right: 5px; }
+  .vditor-linkcard__abstract {
+    word-wrap: break-word;
+    word-break: break-all;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    font-size: 13px;
+    color: #586069;
+    margin: 5px 0; }
+  .vditor-linkcard__site {
+    font-size: 12px;
+    color: #4285f4; }
+  .vditor-linkcard__image {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    max-width: 250px;
+    min-width: 126px;
+    cursor: pointer;
+    background-color: #fff; }
+
+.vditor-wysiwyg {
+  background-color: #fafbfc;
+  box-sizing: border-box;
+  -webkit-box-flex: 1;
+          flex: 1;
+  margin: 0;
+  white-space: pre-wrap;
+  position: relative; }
+  .vditor-wysiwyg[contenteditable="false"] {
+    opacity: 0.3;
+    cursor: not-allowed; }
+  .vditor-wysiwyg:focus {
+    outline: none;
+    background-color: #fff; }
+  .vditor-wysiwyg blockquote:empty::before,
+  .vditor-wysiwyg pre > code:empty::before {
+    content: ' '; }
+  .vditor-wysiwyg__block[data-type="html-block"] > pre,
+  .vditor-wysiwyg__block[data-type="math-block"] > pre {
+    margin-bottom: 0; }
+  .vditor-wysiwyg__block > pre {
+    margin-bottom: -1em; }
+    .vditor-wysiwyg__block > pre > code {
+      background-color: #fff !important;
+      border: 1px solid #d1d5da;
+      overflow: auto !important; }
+  .vditor-wysiwyg__block[data-type=html-inline] .vditor-wysiwyg__preview svg {
+    fill: rgba(88, 96, 105, 0.36);
+    height: 12px;
+    cursor: pointer;
+    width: 12px; }
+  .vditor-wysiwyg__preview {
+    cursor: pointer;
+    white-space: initial;
+    min-height: 27px; }
+    .vditor-wysiwyg__preview pre {
+      margin-bottom: 1em !important; }
+  .vditor-wysiwyg h1:before,
+  .vditor-wysiwyg h2:before,
+  .vditor-wysiwyg h3:before,
+  .vditor-wysiwyg h4:before,
+  .vditor-wysiwyg h5:before,
+  .vditor-wysiwyg h6:before,
+  .vditor-wysiwyg div.vditor-wysiwyg__block:before {
+    float: left;
+    padding-right: 4px;
+    margin-left: -29px;
+    content: 'h1';
+    font-size: 0.85rem;
+    font-weight: normal;
+    text-transform: uppercase;
+    color: rgba(88, 96, 105, 0.36); }
+  .vditor-wysiwyg h2:before {
+    content: 'h2'; }
+  .vditor-wysiwyg h3:before {
+    content: 'h3'; }
+  .vditor-wysiwyg h4:before {
+    content: 'h4'; }
+  .vditor-wysiwyg h5:before {
+    content: 'h5'; }
+  .vditor-wysiwyg h6:before {
+    content: 'h6'; }
+  .vditor-wysiwyg div.vditor-wysiwyg__block:before {
+    content: "</>"; }
+  .vditor-wysiwyg details {
+    white-space: initial; }
+  .vditor-wysiwyg span[data-type="backslash"] > span {
+    display: none;
+    color: rgba(88, 96, 105, 0.36); }
+
+textarea {
+  overflow: hidden; }
+
+button, .button {
+  background: url(../images/icon.png) repeat center bottom;
+  border: 1px solid;
+  border-color: #CCC #BBBBBB #A0A0A0;
+  border-radius: 4px;
+  height: 28px;
+  margin: 0;
+  padding: 0 6px;
+  vertical-align: top; }
+
+button:hover, .button:hover {
+  border-color: #BBB; }
+
+.padding12 {
+  padding: 12px; }
+
+.paddingBottom12 {
+  padding-bottom: 12px !important; }
+
+.paddingTop12 {
+  padding-top: 12px !important; }
+
+.margin12 {
+  margin: 12px; }
+
+.marginTop12 {
+  margin-top: 12px !important; }
+
+.marginBottom12 {
+  margin-bottom: 12px !important; }
+
+.marginLeft12 {
+  margin-left: 12px !important; }
+
+.marginLeft6 {
+  margin-left: 6px !important; }
+
+.marginRight12 {
+  margin-right: 12px !important; }
+
+.f-bold {
+  font-weight: bold !important; }
+
+.nowrap {
+  white-space: nowrap; }
+
+.left {
+  float: left; }
+
+.right {
+  float: right; }
+
+.clear {
+  background-color: transparent;
+  border: 0;
+  clear: both;
+  display: block;
+  font-size: 0;
+  height: 0;
+  line-height: 0;
+  overflow: hidden; }
+
+.fn-clear:before,
+.fn-clear:after {
+  display: table;
+  content: ""; }
+
+.fn-clear:after {
+  clear: both; }
+
+.fn__flex {
+  display: -webkit-box;
+  display: flex; }
+
+.fn__flex1 {
+  -webkit-box-flex: 1;
+          flex: 1;
+  min-width: 1px; }
+
+.fn__flex-inline {
+  display: -webkit-inline-box !important;
+  display: inline-flex !important;
+  -webkit-box-align: center;
+          align-items: center; }
+
+.none {
+  display: none; }
+
+.pointer {
+  cursor: pointer; }
+
+.no-underline {
+  text-decoration: none !important; }
+
+.red {
+  color: red; }
+
+.contentBody {
+  margin-bottom: 12px;
+  padding: 3px 12px; }
+
+/* start form */
+.form th {
+  text-align: right;
+  white-space: nowrap; }
+
+.form input[type='text'], .form input[type='password'], .form textarea {
+  border-color: #C0C0C0 #D9D9D9 #D9D9D9;
+  border-right: 1px solid #D9D9D9;
+  border-style: solid;
+  border-width: 1px;
+  font-family: Helvetica,Arial,sans-serif;
+  font-size: 12px;
+  outline: medium none;
+  width: 99%;
+  padding: 0 3px; }
+
+.form input {
+  height: 24px; }
+
+.form input[type='checkbox'] {
+  border: 0;
+  vertical-align: sub;
+  height: 20px; }
+
+.form input.normalInput {
+  width: auto; }
+
+.form input[type='checkbox']:focus {
+  border: 0;
+  box-shadow: 0 0 0; }
+
+.form input:focus, .form textarea:focus {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset; }
+
+.form textarea {
+  padding: 3px;
+  overflow: auto;
+  resize: vertical; }
+
+/* end form */
+.logo {
+  padding: 0 5px;
+  text-decoration: none;
+  text-shadow: 0 0 1px #EEEEEE; }
+
+/* start icon */
+.putTopIcon, .notPutTopIcon, .deleteIcon, .updateIcon, .commentIcon,
+.homeIcon, .adminIcon, .loginIcon, .logoutIcon, .calendarIcon, .browserIcon,
+.postIcon, .articlesIcon, .draftsIcon, .usersIcon, .linkIcon,
+.preferenceIcon, .pageIcon, .trueIcon, .falseIcon,
+.fileIcon, .othersIcon, .goTopIcon, .goBottomIcon, .cacheIcon, .aboutIcon {
+  background-image: url("../images/icon.png");
+  cursor: pointer;
+  height: 16px;
+  width: 16px; }
+
+.adminIcon, .loginIcon, .logoutIcon, .homeIcon {
+  margin-top: 3px; }
+
+.pageIcon {
+  background-position: -144px 0px; }
+
+.postIcon {
+  background-position: -16px 0; }
+
+.linkIcon {
+  background-position: -32px 0; }
+
+.preferenceIcon {
+  background-position: -48px 0; }
+
+.articlesIcon {
+  background-position: -64px 0; }
+
+.trueIcon {
+  background-position: -80px 0;
+  cursor: auto; }
+
+.falseIcon {
+  background-position: -96px 0;
+  cursor: auto; }
+
+.fileIcon {
+  background-position: -112px 0; }
+
+.deleteIcon {
+  background-position: 0 -16px; }
+
+.updateIcon {
+  background-position: -16px -16px; }
+
+.commentIcon {
+  background-position: -32px -16px; }
+
+.homeIcon {
+  background-position: -64px -16px; }
+
+.adminIcon {
+  background-position: -80px -16px; }
+
+.logoutIcon {
+  background-position: -96px -16px; }
+
+.loginIcon {
+  background-position: -112px -16px; }
+
+.browserIcon {
+  background-position: -128px -16px; }
+
+.calendarIcon {
+  background-position: -144px -16px; }
+
+.putTopIcon {
+  background-position: -16px -32px;
+  float: left; }
+
+.notPutTopIcon {
+  background-position: -32px -32px;
+  float: left; }
+
+.othersIcon {
+  background-position: -48px -32px; }
+
+.cacheIcon {
+  background-position: -96px -32px; }
+
+.draftsIcon {
+  background-position: -96px -32px; }
+
+.usersIcon {
+  background-position: -112px -32px; }
+
+.goTopIcon {
+  background-position: -64px -32px;
+  position: fixed;
+  right: 20px;
+  top: 45%; }
+
+.goBottomIcon {
+  background-position: -80px -32px;
+  bottom: 40%;
+  position: fixed;
+  right: 20px; }
+
+/* end icon */
+/* start tags */
+#tags {
+  list-style: none; }
+
+#tags li {
+  float: left;
+  list-style: none;
+  height: 38px; }
+
+#tags a:hover {
+  text-shadow: 0 0 2px #555555; }
+
+#tags a {
+  border-radius: 3px 3px 3px 3px;
+  box-shadow: 1px 1px 3px #555555;
+  float: left;
+  margin: 3px 6px;
+  padding: 3px 12px;
+  text-decoration: none; }
+
+#tags .tags1 {
+  font-size: 12px;
+  font-weight: normal; }
+
+#tags .tags2 {
+  font-size: 14px;
+  font-weight: normal; }
+
+#tags .tags3 {
+  font-size: 16px;
+  font-weight: normal; }
+
+#tags .tags4 {
+  font-size: 18px;
+  font-weight: bold; }
+
+#tags .tags5 {
+  font-size: 20px;
+  font-weight: bold; }
+
+/* end tags */
+/* start comment */
+#captcha, #captchaReply {
+  cursor: pointer; }
+
+/* end comment */

src/main/resources/scss/start.css

+/*
+ * Solo - A small and beautiful blogging system written in Java.
+ * Copyright (c) 2010-present, b3log.org
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program 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 Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+/**
+* 401, 403, 404, 500, article-pwd, start, search and kill-browser page style.
+*
+* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
+* @author <a href="http://88250.b3log.org">Liang Ding</a>
+* @version 2.1.0.0, Dec 14, 2019
+*/
+/*
+ * Solo - A small and beautiful blogging system written in Java.
+ * Copyright (c) 2010-present, b3log.org
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program 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 Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+/**
+ * Common style for reset
+ *
+ * @author <a href="http://vanessa.b3log.org">Liyuan Li</ta>
+ * @version 0.2.0.2, Mar 20, 2019
+ */
+html {
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  height: 100%; }
+
+body {
+  margin: 0;
+  font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
+  font-size: 14px;
+  background-color: #fff;
+  -webkit-font-smoothing: antialiased;
+  -webkit-overflow-scrolling: touch; }
+
+::-moz-selection {
+  text-shadow: none;
+  background: rgba(65, 131, 196, 0.4); }
+
+::selection {
+  text-shadow: none;
+  background: rgba(66, 133, 244, 0.4); }
+
+ul,
+ol {
+  margin: 0;
+  padding: 0; }
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+dl,
+dd,
+p {
+  margin: 0; }
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section {
+  display: block; }
+
+audio,
+canvas,
+video {
+  display: inline-block; }
+
+audio:not([controls]) {
+  display: none; }
+
+a {
+  outline: 0;
+  text-decoration: none; }
+
+a:hover {
+  text-decoration: underline; }
+
+sub,
+sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline; }
+
+sup {
+  top: -0.5em; }
+
+sub {
+  bottom: -0.25em; }
+
+img {
+  max-width: 100%;
+  vertical-align: middle;
+  border: 0;
+  height: auto;
+  -ms-interpolation-mode: bicubic;
+  overflow: hidden;
+  font-size: 12px; }
+
+button,
+input,
+select,
+textarea {
+  margin: 0;
+  font-size: 100%;
+  vertical-align: middle;
+  font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
+  outline: none; }
+
+button,
+input {
+  line-height: normal; }
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  padding: 0;
+  border: 0; }
+
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+  cursor: pointer;
+  -webkit-appearance: button; }
+
+input[type="search"] {
+  box-sizing: content-box;
+  -webkit-appearance: textfield; }
+
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: none; }
+
+textarea {
+  overflow: auto;
+  resize: vertical; }
+
+svg {
+  fill: currentColor;
+  display: inline-block;
+  stroke-width: 0;
+  stroke: currentColor;
+  width: 14px;
+  height: 14px; }
+
+blockquote {
+  margin: 0; }
+
+/**
+ * tool tip.
+ *
+ * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
+ * @version 0.1.0.0, Jan 25, 2019
+ */
+@-webkit-keyframes tooltip-appear {
+  from {
+    opacity: 0; }
+  to {
+    opacity: 1; } }
+@keyframes tooltip-appear {
+  from {
+    opacity: 0; }
+  to {
+    opacity: 1; } }
+
+.vditor-tooltipped {
+  position: relative;
+  cursor: pointer; }
+  .vditor-tooltipped::after {
+    position: absolute;
+    z-index: 1000000;
+    display: none;
+    padding: 5px 8px;
+    font-size: 11px;
+    font-weight: normal;
+    -webkit-font-smoothing: subpixel-antialiased;
+    color: #fff;
+    text-align: center;
+    text-decoration: none;
+    text-shadow: none;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: break-word;
+    white-space: pre;
+    pointer-events: none;
+    content: attr(aria-label);
+    background: rgba(0, 0, 0, 0.8);
+    border-radius: 3px;
+    line-height: 16px;
+    opacity: 0; }
+  .vditor-tooltipped::before {
+    position: absolute;
+    z-index: 1000001;
+    display: none;
+    width: 0;
+    height: 0;
+    color: rgba(0, 0, 0, 0.8);
+    pointer-events: none;
+    content: "";
+    border: 5px solid transparent;
+    opacity: 0; }
+  .vditor-tooltipped--hover::before, .vditor-tooltipped--hover::after, .vditor-tooltipped:hover::before, .vditor-tooltipped:hover::after, .vditor-tooltipped:active::before, .vditor-tooltipped:active::after, .vditor-tooltipped:focus::before, .vditor-tooltipped:focus::after {
+    display: inline-block;
+    text-decoration: none;
+    -webkit-animation-name: tooltip-appear;
+            animation-name: tooltip-appear;
+    -webkit-animation-duration: 0.15s;
+            animation-duration: 0.15s;
+    -webkit-animation-fill-mode: forwards;
+            animation-fill-mode: forwards;
+    -webkit-animation-timing-function: ease-in;
+            animation-timing-function: ease-in; }
+  .vditor-tooltipped__s::after, .vditor-tooltipped__se::after, .vditor-tooltipped__sw::after {
+    top: 100%;
+    right: 50%;
+    margin-top: 5px; }
+  .vditor-tooltipped__s::before, .vditor-tooltipped__se::before, .vditor-tooltipped__sw::before {
+    top: auto;
+    right: 50%;
+    bottom: -5px;
+    margin-right: -5px;
+    border-bottom-color: rgba(0, 0, 0, 0.8); }
+  .vditor-tooltipped__se::after {
+    right: auto;
+    left: 50%;
+    margin-left: -15px; }
+  .vditor-tooltipped__sw::after {
+    margin-right: -15px; }
+  .vditor-tooltipped__n::after, .vditor-tooltipped__ne::after, .vditor-tooltipped__nw::after {
+    right: 50%;
+    bottom: 100%;
+    margin-bottom: 5px; }
+  .vditor-tooltipped__n::before, .vditor-tooltipped__ne::before, .vditor-tooltipped__nw::before {
+    top: -5px;
+    right: 50%;
+    bottom: auto;
+    margin-right: -5px;
+    border-top-color: rgba(0, 0, 0, 0.8); }
+  .vditor-tooltipped__ne::after {
+    right: auto;
+    left: 50%;
+    margin-left: -15px; }
+  .vditor-tooltipped__nw::after {
+    margin-right: -15px; }
+  .vditor-tooltipped__s::after, .vditor-tooltipped__n::after {
+    -webkit-transform: translateX(50%);
+            transform: translateX(50%); }
+  .vditor-tooltipped__w::after {
+    right: 100%;
+    bottom: 50%;
+    margin-right: 5px;
+    -webkit-transform: translateY(50%);
+            transform: translateY(50%); }
+  .vditor-tooltipped__w::before {
+    top: 50%;
+    bottom: 50%;
+    left: -5px;
+    margin-top: -5px;
+    border-left-color: rgba(0, 0, 0, 0.8); }
+  .vditor-tooltipped__e::after {
+    bottom: 50%;
+    left: 100%;
+    margin-left: 5px;
+    -webkit-transform: translateY(50%);
+            transform: translateY(50%); }
+  .vditor-tooltipped__e::before {
+    top: 50%;
+    right: -5px;
+    bottom: 50%;
+    margin-top: -5px;
+    border-right-color: rgba(0, 0, 0, 0.8); }
+
+/**
+ * panel.
+ *
+ * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
+ * @version 0.1.0.0, Jan 28, 2019
+ */
+@-webkit-keyframes scale-in {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(0.5);
+            transform: scale(0.5); }
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1); } }
+@keyframes scale-in {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(0.5);
+            transform: scale(0.5); }
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1); } }
+
+.vditor-panel {
+  background-color: #fff;
+  position: absolute;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+  padding: 5px;
+  z-index: 3;
+  font-size: 14px;
+  display: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  max-width: 320px;
+  min-width: 80px;
+  -webkit-animation-duration: .15s;
+          animation-duration: .15s;
+  -webkit-animation-name: scale-in;
+          animation-name: scale-in;
+  -webkit-animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5);
+          animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5); }
+  .vditor-panel--none {
+    color: #4285f4;
+    padding: 0;
+    -webkit-animation: none;
+            animation: none;
+    background-color: #f6f8fa;
+    min-width: auto;
+    max-width: none; }
+  .vditor-panel h1, .vditor-panel h2, .vditor-panel h3, .vditor-panel h4, .vditor-panel h5, .vditor-panel h6 {
+    margin: 0;
+    cursor: pointer;
+    padding: 3px 10px;
+    border-radius: 3px;
+    line-height: normal; }
+    .vditor-panel h1:hover, .vditor-panel h2:hover, .vditor-panel h3:hover, .vditor-panel h4:hover, .vditor-panel h5:hover, .vditor-panel h6:hover {
+      background-color: #4285f4;
+      color: #fff; }
+
+.vditor-input {
+  border: 0;
+  padding: 3px 5px;
+  background-color: #f6f8fa; }
+  .vditor-input:focus {
+    background-color: #fff;
+    outline: none; }
+
+.vditor-icon {
+  color: #586069;
+  cursor: pointer;
+  float: left;
+  padding: 2px 5px;
+  height: 19px;
+  width: 25px;
+  background-color: transparent;
+  border: 0;
+  box-sizing: border-box; }
+  .vditor-icon:hover, .vditor-icon--current {
+    color: #4285f4;
+    background-color: transparent; }
+  .vditor-icon:focus {
+    outline: none; }
+  .vditor-icon svg {
+    height: 15px !important;
+    width: 15px !important;
+    float: left;
+    fill: currentColor; }
+
+/**
+ * toolbar.
+ *
+ * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
+ * @version 0.1.2.0, Jun 20, 2019
+ */
+.vditor-toolbar {
+  background-color: #f6f8fa;
+  border-bottom: 1px solid #d1d5da;
+  padding: 0 5px;
+  border-radius: 3px 3px 0 0; }
+  .vditor-toolbar > div {
+    float: left; }
+    .vditor-toolbar > div > .vditor-tooltipped {
+      border: 0;
+      margin: 0;
+      padding: 10px 5px;
+      background-color: transparent;
+      height: 35px;
+      width: 25px;
+      box-sizing: border-box; }
+      .vditor-toolbar > div > .vditor-tooltipped:focus {
+        outline: none; }
+  .vditor-toolbar .vditor-tooltipped {
+    color: #586069; }
+    .vditor-toolbar .vditor-tooltipped:hover {
+      color: #4285f4; }
+  .vditor-toolbar svg {
+    fill: currentColor;
+    display: inline-block;
+    stroke-width: 0;
+    stroke: currentColor;
+    width: 15px;
+    height: 15px; }
+  .vditor-toolbar input {
+    position: absolute;
+    width: 25px;
+    height: 35px;
+    top: 0;
+    left: 0;
+    cursor: pointer;
+    opacity: .001;
+    overflow: hidden; }
+
+.vditor-menu--current svg {
+  color: #4285f4; }
+
+.vditor-menu__divider {
+  width: 10px;
+  height: 35px; }
+
+.vditor-menu__br {
+  width: 100%;
+  padding: 0 !important;
+  height: 0 !important; }
+
+.vditor-menu--disabled svg {
+  color: rgba(88, 96, 105, 0.6);
+  cursor: not-allowed; }
+
+.vditor-emojis {
+  display: inline-block;
+  overflow: auto; }
+  .vditor-emojis::-webkit-scrollbar {
+    display: none; }
+  .vditor-emojis__tip {
+    -webkit-box-flex: 1;
+            flex: 1;
+    width: 200px;
+    margin-right: 10px;
+    color: #586069;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden; }
+  .vditor-emojis__tail {
+    margin-top: 5px;
+    font-size: 12px;
+    color: #586069;
+    display: -webkit-box;
+    display: flex; }
+    .vditor-emojis__tail a {
+      text-decoration: none;
+      color: #586069; }
+      .vditor-emojis__tail a:hover {
+        color: #4285f4; }
+  .vditor-emojis button {
+    cursor: pointer;
+    border-radius: 3px;
+    float: left;
+    height: 30px;
+    width: 30px;
+    text-align: center;
+    line-height: 26px;
+    padding: 3px;
+    box-sizing: border-box;
+    font-size: 16px;
+    -webkit-transition: all 0.15s ease-in-out;
+    transition: all 0.15s ease-in-out;
+    border: 0;
+    margin: 0;
+    background-color: transparent;
+    overflow: hidden; }
+    .vditor-emojis button:focus {
+      outline: none; }
+    .vditor-emojis button:hover .vditor-emojis__icon {
+      display: inline-block;
+      -webkit-transform: scale(1.2);
+              transform: scale(1.2); }
+  .vditor-emojis img {
+    height: 20px;
+    width: 20px;
+    float: left;
+    margin: 3px 0 0 3px; }
+
+@-webkit-keyframes slideInDown {
+  from {
+    -webkit-transform: translate3d(0, -100%, 0);
+            transform: translate3d(0, -100%, 0);
+    visibility: visible; }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0); } }
+
+@keyframes slideInDown {
+  from {
+    -webkit-transform: translate3d(0, -100%, 0);
+            transform: translate3d(0, -100%, 0);
+    visibility: visible; }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0); } }
+
+.vditor {
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+          flex-direction: column;
+  border: 1px solid #d1d5da;
+  border-radius: 3px;
+  box-sizing: border-box;
+  font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; }
+  .vditor--fullscreen {
+    position: fixed;
+    top: 0;
+    width: 100% !important;
+    left: 0;
+    height: 100vh !important;
+    z-index: 90;
+    background-color: #fff; }
+  .vditor-content {
+    display: -webkit-box;
+    display: flex;
+    min-height: 60px;
+    -webkit-box-flex: 1;
+            flex: 1;
+    position: relative; }
+  .vditor-textarea {
+    font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
+    margin: 0 1px 0 0;
+    height: 100%;
+    overflow: auto;
+    width: 100%;
+    -webkit-box-flex: 1;
+            flex: 1;
+    border: 0;
+    resize: none;
+    padding: 10px 9px 10px 10px;
+    box-sizing: border-box;
+    background-color: #fafbfc;
+    outline: 0 none;
+    font-size: 16px;
+    line-height: 22px;
+    color: #24292e;
+    border-radius: 0 0 3px 3px;
+    font-variant-ligatures: no-common-ligatures;
+    white-space: pre-wrap;
+    word-break: break-word;
+    word-wrap: break-word; }
+    .vditor-textarea[contenteditable="false"] {
+      opacity: 0.3;
+      cursor: not-allowed; }
+    .vditor-textarea:focus {
+      background-color: #fff; }
+    .vditor-textarea:empty::before {
+      content: attr(placeholder);
+      color: rgba(36, 41, 46, 0.68); }
+  .vditor-preview {
+    -webkit-box-flex: 1;
+            flex: 1;
+    background-color: #fff;
+    overflow: auto;
+    margin-left: -1px;
+    padding: 10px;
+    box-shadow: inset 1px 0 #d1d5da;
+    box-sizing: border-box;
+    border-radius: 0 0 3px 0; }
+    .vditor-preview > div::-webkit-scrollbar {
+      display: none; }
+    .vditor-preview > .vditor-reset {
+      margin: 0 auto; }
+  .vditor-devtools {
+    display: none;
+    background-color: #fff;
+    overflow: auto;
+    -webkit-box-flex: 1;
+            flex: 1;
+    box-shadow: inset 1px 0 #d1d5da;
+    box-sizing: border-box;
+    border-radius: 0 0 3px 0;
+    padding: 10px; }
+  .vditor-counter {
+    padding: 0 3px;
+    position: absolute;
+    bottom: 10px;
+    right: 20px;
+    color: #24292e;
+    background-color: rgba(255, 255, 255, 0.6);
+    border-radius: 3px;
+    font-size: 12px;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+    z-index: 2; }
+    .vditor-counter--error {
+      color: #d23f31;
+      background-color: rgba(210, 63, 49, 0.1); }
+  .vditor-resize {
+    padding: 3px 0;
+    cursor: row-resize;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+    position: absolute;
+    width: 100%;
+    z-index: 2; }
+    .vditor-resize--top {
+      top: -3px; }
+    .vditor-resize--bottom {
+      bottom: -3px; }
+    .vditor-resize > div {
+      height: 3px;
+      background-color: #f6f8fa;
+      -webkit-transition: all 0.15s ease-in-out;
+      transition: all 0.15s ease-in-out; }
+    .vditor-resize:hover > div, .vditor-resize--selected > div {
+      background-color: #4285f4; }
+    .vditor-resize:hover svg, .vditor-resize--selected svg {
+      color: #fff; }
+    .vditor-resize svg {
+      fill: currentColor;
+      stroke-width: 0;
+      stroke: currentColor;
+      width: 13px;
+      height: 3px;
+      display: block;
+      margin: 0 auto;
+      color: #586069; }
+  .vditor-upload {
+    position: absolute;
+    height: 3px;
+    left: 0;
+    top: -2px;
+    -webkit-transition: all 0.15s ease-in-out;
+    transition: all 0.15s ease-in-out;
+    background-color: rgba(66, 133, 244, 0.8); }
+  .vditor-tip {
+    position: absolute;
+    font-size: 12px;
+    top: 10px;
+    color: #fff;
+    -webkit-animation-duration: .15s;
+            animation-duration: .15s;
+    -webkit-animation-fill-mode: both;
+            animation-fill-mode: both;
+    left: 50%; }
+    .vditor-tip--show {
+      display: block;
+      -webkit-animation-name: slideInDown;
+              animation-name: slideInDown; }
+    .vditor-tip__content {
+      text-align: left;
+      display: inline-block;
+      line-height: 16px;
+      padding: 3px 10px;
+      border-radius: 3px;
+      background: rgba(66, 133, 244, 0.8);
+      position: relative;
+      margin-left: -50%; }
+      .vditor-tip__content ul {
+        margin: 2px 0;
+        padding: 0 0 0 18px; }
+    .vditor-tip__close {
+      position: absolute;
+      color: #586069;
+      top: -7px;
+      right: -15px;
+      font-weight: bold;
+      cursor: pointer; }
+      .vditor-tip__close:hover {
+        color: #4285f4; }
+
+.vditor-hint {
+  background-color: #fff;
+  position: absolute;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+  padding: 5px 0;
+  z-index: 4;
+  line-height: 20px;
+  list-style: none;
+  color: #24292e;
+  font-size: 12px;
+  margin: 0;
+  max-width: 250px;
+  min-width: 80px;
+  display: none; }
+  .vditor-hint button {
+    display: block;
+    padding: 3px 10px;
+    border: 0;
+    border-bottom: 1px solid #d1d5da;
+    line-height: 20px;
+    width: 100%;
+    box-sizing: border-box;
+    text-align: left;
+    margin: 0;
+    background-color: transparent; }
+    .vditor-hint button:last-child {
+      border-bottom: 0; }
+  .vditor-hint--current,
+  .vditor-hint button:hover {
+    background-color: #4285f4 !important;
+    color: #fff; }
+  .vditor-hint__emoji {
+    font-size: 16px;
+    float: left;
+    margin-right: 3px; }
+  .vditor-hint img {
+    height: 20px;
+    width: 20px;
+    float: left;
+    margin-right: 3px; }
+
+.vditor-reset {
+  font-variant-ligatures: no-common-ligatures;
+  font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
+  word-wrap: break-word;
+  overflow: auto;
+  line-height: 1.5;
+  font-size: 16px;
+  word-break: break-word; }
+  .vditor-reset--anchor {
+    padding-left: 20px; }
+  .vditor-reset--error {
+    color: #d23f31;
+    font-size: 12px;
+    display: block;
+    line-height: 16px; }
+  .vditor-reset ul ul ul {
+    list-style-type: square; }
+  .vditor-reset ul ul {
+    list-style-type: circle; }
+  .vditor-reset ul {
+    list-style-type: disc; }
+  .vditor-reset ul,
+  .vditor-reset ol {
+    padding-left: 2em;
+    margin-top: 0;
+    margin-bottom: 16px; }
+  .vditor-reset li + li {
+    margin-top: 0.25em; }
+  .vditor-reset audio {
+    max-width: 100%; }
+    .vditor-reset audio:focus {
+      outline: none; }
+  .vditor-reset video {
+    max-height: 90vh;
+    max-width: 100%; }
+  .vditor-reset img {
+    max-width: 100%; }
+  .vditor-reset img.emoji {
+    cursor: auto;
+    max-width: 20px;
+    vertical-align: sub; }
+  .vditor-reset h1,
+  .vditor-reset h2,
+  .vditor-reset h3,
+  .vditor-reset h4,
+  .vditor-reset h5,
+  .vditor-reset h6 {
+    margin-top: 24px;
+    margin-bottom: 16px;
+    font-weight: 600;
+    line-height: 1.25; }
+    .vditor-reset h1:hover .vditor-anchor svg,
+    .vditor-reset h2:hover .vditor-anchor svg,
+    .vditor-reset h3:hover .vditor-anchor svg,
+    .vditor-reset h4:hover .vditor-anchor svg,
+    .vditor-reset h5:hover .vditor-anchor svg,
+    .vditor-reset h6:hover .vditor-anchor svg {
+      visibility: visible; }
+  .vditor-reset h1 {
+    padding-bottom: 0.3em;
+    font-size: 1.7em;
+    border-bottom: 1px solid #eee; }
+  .vditor-reset h2 {
+    padding-bottom: 0.3em;
+    font-size: 1.5em;
+    border-bottom: 1px solid #eee; }
+  .vditor-reset h3 {
+    font-size: 1.25em; }
+  .vditor-reset h4 {
+    font-size: 1em; }
+  .vditor-reset h5 {
+    font-size: 0.875em; }
+  .vditor-reset h6 {
+    font-size: 0.85em; }
+  .vditor-reset hr {
+    height: 2px;
+    padding: 0;
+    margin: 24px 0;
+    background-color: #e7e7e7;
+    border: 0; }
+  .vditor-reset p {
+    margin-top: 0;
+    margin-bottom: 16px; }
+  .vditor-reset blockquote {
+    padding: 0 1em;
+    color: #777;
+    border-left: 0.25em solid #ddd;
+    margin: 0 0 16px 0; }
+    .vditor-reset blockquote p {
+      margin: 0; }
+  .vditor-reset ins > iframe {
+    border: 0; }
+  .vditor-reset iframe {
+    border: 1px solid #d1d5da;
+    max-width: 100%;
+    box-sizing: border-box; }
+    .vditor-reset iframe.iframe__video {
+      min-width: 80%;
+      min-height: 36vh; }
+  .vditor-reset table {
+    width: 100%;
+    border-collapse: collapse;
+    empty-cells: show;
+    margin-bottom: 16px;
+    display: block;
+    overflow: auto;
+    border-spacing: 0; }
+    .vditor-reset table tr {
+      background-color: #fff;
+      border-top: 1px solid #c6cbd1; }
+    .vditor-reset table td,
+    .vditor-reset table th {
+      padding: 6px 13px;
+      border: 1px solid #dfe2e5;
+      word-break: normal; }
+    .vditor-reset table th {
+      font-weight: 600; }
+    .vditor-reset table tbody tr:nth-child(2n) {
+      background-color: #f6f8fa; }
+  .vditor-reset code:not(.hljs):not(.highlight-chroma) {
+    padding: 0.2em 0.4em;
+    margin: 0;
+    font-size: 85%;
+    border-radius: 3px;
+    font-family: mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
+    word-break: break-word;
+    background-size: 20px 20px;
+    white-space: pre-wrap;
+    background-color: rgba(27, 31, 35, 0.05); }
+  .vditor-reset pre > code {
+    margin: 0;
+    font-size: 85%;
+    padding: 0.5em;
+    border-radius: 5px;
+    display: block;
+    overflow: auto;
+    white-space: pre;
+    font-family: mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
+    background-size: 20px 20px;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AgMAAABHkjHhAAAACVBMVEWAgIBaWlo+Pj7rTFvWAAAAA3RSTlMHCAw+VhR4AAAA+klEQVQoz4WSMW7EQAhFPxKWNh2FCx+HkaZI6RRb5DYbyVfIJXLKDCFoMbaTKSw/8ZnPAPjaH2xgZcUNUDADD7D9LtDBCLZ45fbkvo/30K8yeI64pPwl6znd/3n/Oe93P3ho9qeh72btTFzqkz0rsJle8Zr81OLEwZ1dv/713uWqvu2pl+k0fy7MWtj9r/tN5q/02z89qa/L4Dc2LvM93kezPfXlME/O86EbY/V9GB9ePX8G1/6W+/9h1dq/HGfTfzT3j/xNo7522Bfnqe5jO/fvhVthlfk434v3iO9zG/UOphyPeinPl1J8Gtaa7xPTa/Dk+RIs4deMvwGvcGsmsCvJ0AAAAABJRU5ErkJggg==);
+    word-break: initial;
+    word-wrap: normal; }
+  .vditor-reset pre:hover div.vditor-copy {
+    display: block; }
+  .vditor-reset kbd {
+    display: inline-block;
+    padding: 3px 5px;
+    font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    line-height: 10px;
+    color: #555;
+    vertical-align: middle;
+    background-color: #fcfcfc;
+    border: solid 1px #d1d5da;
+    border-bottom-color: #bbb;
+    border-radius: 3px;
+    box-shadow: inset 0 -1px 0 #bbb; }
+  .vditor-reset summary {
+    cursor: pointer; }
+    .vditor-reset summary:focus {
+      outline: none; }
+  .vditor-reset svg {
+    height: auto;
+    width: auto; }
+  .vditor-reset p:last-child,
+  .vditor-reset blockquote:last-child,
+  .vditor-reset pre:last-child,
+  .vditor-reset ul:last-child,
+  .vditor-reset ol:last-child,
+  .vditor-reset hr:last-child {
+    margin-bottom: 0; }
+  .vditor-reset .language-echarts {
+    overflow: hidden;
+    height: 420px; }
+
+.vditor-task {
+  list-style: none; }
+  .vditor-task input {
+    margin: 0 .2em .25em -1.6em;
+    font-size: 12px;
+    vertical-align: middle; }
+
+.vditor-copy {
+  position: relative;
+  display: none;
+  z-index: 1; }
+  .vditor-copy textarea {
+    position: absolute;
+    left: -100000px;
+    height: 10px; }
+  .vditor-copy span {
+    cursor: pointer;
+    position: absolute;
+    right: 0.5em;
+    top: 0.5em;
+    height: 14px;
+    width: 14px;
+    display: block;
+    background-color: #f6f8fa;
+    border-radius: 3px;
+    padding: 3px; }
+  .vditor-copy svg {
+    color: #586069;
+    height: 14px;
+    width: 14px !important;
+    display: block;
+    fill: currentColor; }
+
+.vditor-linenumber {
+  padding-left: 4em !important;
+  position: relative; }
+  .vditor-linenumber__rows {
+    position: absolute;
+    pointer-events: none;
+    top: 0.5em;
+    left: 0;
+    width: 3em;
+    /* works for line-numbers below 1000 lines */
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+    counter-reset: linenumber; }
+    .vditor-linenumber__rows > span {
+      pointer-events: none;
+      display: block; }
+      .vditor-linenumber__rows > span::before {
+        counter-increment: linenumber;
+        content: counter(linenumber);
+        color: rgba(158, 150, 150, 0.38);
+        display: block;
+        padding-right: 1em;
+        text-align: right; }
+
+.vditor-speech {
+  position: absolute;
+  display: none;
+  background-color: #f6f8fa;
+  border: 1px solid #d1d5da;
+  border-radius: 3px;
+  padding: 3px;
+  cursor: pointer;
+  color: #586069; }
+  .vditor-speech:hover, .vditor-speech--current {
+    color: #4285f4; }
+  .vditor-speech svg {
+    height: 14px;
+    width: 14px;
+    fill: currentColor;
+    display: block;
+    stroke-width: 0;
+    stroke: currentColor; }
+
+.vditor-anchor {
+  float: left;
+  padding-right: 4px;
+  margin-left: -20px; }
+  .vditor-anchor svg {
+    visibility: hidden; }
+  .vditor-anchor:hover svg {
+    visibility: visible; }
+  .vditor-anchor:focus {
+    outline: none; }
+
+.vditor-linkcard {
+  margin: 31px auto 16px;
+  -webkit-transition: all 0.15s ease-in-out;
+  transition: all 0.15s ease-in-out;
+  cursor: pointer;
+  max-width: 768px;
+  padding: 0 10px; }
+  .vditor-linkcard a {
+    border-radius: 3px;
+    background-color: #f6f8fa;
+    overflow: hidden;
+    max-height: 250px;
+    display: -webkit-box;
+    display: flex;
+    text-decoration: none;
+    flex-wrap: wrap-reverse;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
+    .vditor-linkcard a:hover {
+      box-shadow: 0 0 3px rgba(0, 0, 0, 0.13), 0 3px 6px rgba(0, 0, 0, 0.26);
+      text-decoration: none; }
+    .vditor-linkcard a:visited .vditor-linkcard__abstract {
+      color: rgba(88, 96, 105, 0.6); }
+  .vditor-linkcard__info {
+    padding: 10px;
+    min-width: 200px;
+    box-sizing: border-box;
+    -webkit-box-flex: 1;
+            flex: 1; }
+  .vditor-linkcard__title {
+    font-size: 14px;
+    font-weight: 400;
+    color: #24292e;
+    display: -webkit-box;
+    display: flex;
+    -webkit-box-align: center;
+            align-items: center; }
+    .vditor-linkcard__title img {
+      cursor: pointer;
+      height: 20px;
+      width: 20px;
+      border-radius: 3px;
+      flex-shrink: 0;
+      margin-right: 5px; }
+  .vditor-linkcard__abstract {
+    word-wrap: break-word;
+    word-break: break-all;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    font-size: 13px;
+    color: #586069;
+    margin: 5px 0; }
+  .vditor-linkcard__site {
+    font-size: 12px;
+    color: #4285f4; }
+  .vditor-linkcard__image {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    max-width: 250px;
+    min-width: 126px;
+    cursor: pointer;
+    background-color: #fff; }
+
+.vditor-wysiwyg {
+  background-color: #fafbfc;
+  box-sizing: border-box;
+  -webkit-box-flex: 1;
+          flex: 1;
+  margin: 0;
+  white-space: pre-wrap;
+  position: relative; }
+  .vditor-wysiwyg[contenteditable="false"] {
+    opacity: 0.3;
+    cursor: not-allowed; }
+  .vditor-wysiwyg:focus {
+    outline: none;
+    background-color: #fff; }
+  .vditor-wysiwyg blockquote:empty::before,
+  .vditor-wysiwyg pre > code:empty::before {
+    content: ' '; }
+  .vditor-wysiwyg__block[data-type="html-block"] > pre,
+  .vditor-wysiwyg__block[data-type="math-block"] > pre {
+    margin-bottom: 0; }
+  .vditor-wysiwyg__block > pre {
+    margin-bottom: -1em; }
+    .vditor-wysiwyg__block > pre > code {
+      background-color: #fff !important;
+      border: 1px solid #d1d5da;
+      overflow: auto !important; }
+  .vditor-wysiwyg__block[data-type=html-inline] .vditor-wysiwyg__preview svg {
+    fill: rgba(88, 96, 105, 0.36);
+    height: 12px;
+    cursor: pointer;
+    width: 12px; }
+  .vditor-wysiwyg__preview {
+    cursor: pointer;
+    white-space: initial;
+    min-height: 27px; }
+    .vditor-wysiwyg__preview pre {
+      margin-bottom: 1em !important; }
+  .vditor-wysiwyg h1:before,
+  .vditor-wysiwyg h2:before,
+  .vditor-wysiwyg h3:before,
+  .vditor-wysiwyg h4:before,
+  .vditor-wysiwyg h5:before,
+  .vditor-wysiwyg h6:before,
+  .vditor-wysiwyg div.vditor-wysiwyg__block:before {
+    float: left;
+    padding-right: 4px;
+    margin-left: -29px;
+    content: 'h1';
+    font-size: 0.85rem;
+    font-weight: normal;
+    text-transform: uppercase;
+    color: rgba(88, 96, 105, 0.36); }
+  .vditor-wysiwyg h2:before {
+    content: 'h2'; }
+  .vditor-wysiwyg h3:before {
+    content: 'h3'; }
+  .vditor-wysiwyg h4:before {
+    content: 'h4'; }
+  .vditor-wysiwyg h5:before {
+    content: 'h5'; }
+  .vditor-wysiwyg h6:before {
+    content: 'h6'; }
+  .vditor-wysiwyg div.vditor-wysiwyg__block:before {
+    content: "</>"; }
+  .vditor-wysiwyg details {
+    white-space: initial; }
+  .vditor-wysiwyg span[data-type="backslash"] > span {
+    display: none;
+    color: rgba(88, 96, 105, 0.36); }
+
+/* reset */
+button,
+.btn {
+  background-size: 110% 110%;
+  border: 1px solid rgba(27, 31, 35, 0.2);
+  font-size: 13px;
+  font-weight: 700;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
+  white-space: nowrap;
+  background-color: #eff3f6;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#fafbfc), color-stop(90%, #eff3f6));
+  background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
+  color: #24292e;
+  border-radius: 3px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.075);
+  outline: none;
+  padding: 7px 15px;
+  margin-top: 10px;
+  cursor: pointer; }
+  button:hover,
+  .btn:hover {
+    background-color: #e6ebf1;
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#f0f3f6), color-stop(90%, #e6ebf1));
+    background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%);
+    background-position: -.5em;
+    border-color: rgba(27, 31, 35, 0.35);
+    text-decoration: none; }
+
+a {
+  color: #4285f4;
+  text-decoration: none; }
+
+h2 {
+  background-color: #F3F1E5;
+  border-radius: 4px 4px 0 0;
+  font-size: 16px;
+  margin: 0;
+  padding: 10px 20px; }
+  h2 a:hover {
+    color: #d23f31; }
+
+input[type=password],
+input[type=text] {
+  border: 1px solid #d1d5da;
+  background-color: #FAFAFA;
+  border-radius: 3px;
+  box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075);
+  padding: 7px 8px;
+  width: 100%;
+  line-height: 17px;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  outline: none;
+  margin-top: 10px; }
+
+input[type=password]:focus,
+input[type=text]:focus {
+  background-color: #FFF;
+  box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em #dbedff;
+  border: 1px solid #4285f4; }
+
+/* common */
+.error {
+  color: #d23f31;
+  font-weight: bold; }
+
+/* framework */
+.wrap {
+  border-top: 5px solid #E6E5D9;
+  background-color: #F3F1E5;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+          flex-direction: column;
+  min-height: 100vh;
+  box-sizing: border-box; }
+
+.content-wrap {
+  -webkit-box-flex: 1;
+          flex: 1;
+  display: -webkit-box;
+  display: flex; }
+
+.content {
+  background-color: #fff;
+  margin: 0 auto;
+  width: 760px;
+  align-self: center;
+  display: -webkit-box;
+  display: flex; }
+
+.main {
+  border-left: 1px solid #E6E5D9;
+  font-size: 15px;
+  padding: 20px;
+  -webkit-box-flex: 1;
+          flex: 1; }
+
+.footerWrapper {
+  background-color: #FFFFFF;
+  border-top: 1px solid #E6E5D9;
+  padding: 12px 0;
+  text-align: center; }
+
+/* start 403/404/500 */
+.a-error {
+  text-align: right; }
+
+.img-error {
+  max-width: 100%;
+  margin: 20px auto;
+  padding: 0;
+  display: block; }
+
+/* end 403/404/500 */
+/* start kill */
+.kill__btns {
+  text-align: right; }
+
+.kill__img {
+  float: right;
+  margin: -280px 0 0 0; }
+
+.kill .vditor-reset {
+  margin: 10px; }
+
+/* end kill */
+/* start */
+.start {
+  display: block;
+  margin: 20px auto 20px;
+  width: 280px;
+  text-align: center; }
+  .start__icon {
+    height: 200px;
+    width: 210px;
+    margin: 0 auto 20px;
+    color: #3b3e43;
+    -webkit-transition: all 0.15s ease-in-out;
+    transition: all 0.15s ease-in-out;
+    padding-right: 24px; }
+    .start__icon:hover {
+      -webkit-transform: scale(1.1);
+              transform: scale(1.1); }
+  .start__action {
+    display: -webkit-inline-box;
+    display: inline-flex;
+    -webkit-box-align: center;
+            align-items: center; }
+  .start .btn {
+    margin: 0 10px 0 0; }
+
+/* start search */
+.search {
+  border-top: 5px solid #e6e5d9;
+  background-color: #f3f1e5;
+  padding: 20px 0 20px 84px;
+  min-height: 480px;
+  -webkit-box-flex: 1;
+          flex: 1; }
+
+.search__body {
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+          flex-direction: column; }
+
+.search__header {
+  margin: 20px;
+  display: -webkit-box;
+  display: flex; }
+
+.search__header a {
+  line-height: 32px; }
+
+.search__input {
+  -webkit-box-flex: 1;
+          flex: 1;
+  display: -webkit-box;
+  display: flex; }
+
+.search__input input {
+  margin: 0 10px 0 20px;
+  width: 523px;
+  height: 32px;
+  line-height: 32px; }
+
+.search__input button {
+  height: 32px;
+  margin: 0; }
+
+.search__articles {
+  width: 600px; }
+  .search__articles .tag {
+    color: #616161;
+    padding: 2px 5px;
+    border: 1px solid transparent;
+    position: relative;
+    height: 20px;
+    white-space: nowrap;
+    word-wrap: normal;
+    background-color: #f7f7f7;
+    border-radius: 3px 3px 3px 3px;
+    line-height: 21px;
+    font-size: 12px;
+    display: inline-block;
+    margin-right: 5px; }
+    .search__articles .tag:hover {
+      color: #000;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+      text-decoration: none; }
+
+.search__articles header h1 {
+  margin: 0; }
+
+.search__articles header h1 > a {
+  font-size: 18px;
+  text-decoration: none;
+  font-weight: normal; }
+
+.search__articles .meta {
+  font-size: 14px;
+  color: #999;
+  margin: 5px 0; }
+
+.search__articles footer {
+  margin-bottom: 30px; }
+
+.search__articles footer a {
+  text-decoration: none;
+  font-size: 13px; }
+
+.search__articles footer a:hover,
+.search__articles header h1 > a:hover,
+.search__pagination a:hover {
+  text-decoration: underline; }
+
+.search__pagination a {
+  color: #4285f4;
+  text-decoration: none; }
+
+.search__pagination a,
+.search__pagination span {
+  margin-right: 5px; }
+
+/* end search */
+/* start responsive */
+@media (max-width: 780px) {
+  .wrap {
+    padding: 40px 0 0 0; }
+  .content {
+    width: auto; }
+  .logo,
+  .search__header img,
+  .search__header > .fn-right {
+    display: none; }
+  .main {
+    border: 0;
+    float: none;
+    width: auto;
+    padding: 10px; }
+  .a-500,
+  .a-403,
+  .a-404 {
+    margin: 0 20px 0 0; }
+  #init {
+    width: 100%;
+    padding: 0 20px;
+    box-sizing: border-box;
+    left: 0; }
+  .search {
+    padding: 20px;
+    width: 100%;
+    min-height: auto;
+    box-sizing: border-box; }
+    .search__input input {
+      width: auto;
+      -webkit-box-flex: 1;
+              flex: 1;
+      margin-left: 0; }
+    .search__articles {
+      width: auto; } }
+
+/* end responsive */

webpack.js

@@ -8,7 +8,7 @@
  * @fileoverview webpack ipfs.
  *
  * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
- * @version 3.2.0.0, Jan 8, 2020
+ * @version 0.1.0.0, Jan 18, 2020
  */
 
 const path = require('path')
@@ -67,11 +67,11 @@ module.exports = {
       './src/main/resources/js/admin/plugin.js',
       './src/main/resources/js/admin/main.js',
       './src/main/resources/js/admin/about.js'],
-    // 'js/common': './src/main/resources/js/common.js',
-    // 'js/page': './src/main/resources/js/page.js',
-    'css/admin': './src/main/resources/scss/admin.scss',
-    // 'css/base': './src/main/resources/scss/base.scss',
-    // 'css/start': './src/main/resources/scss/start.scss',
+    'js/common': './src/main/resources/js/common.js',
+    'js/page': './src/main/resources/js/page.js',
+    'dist/admin': './src/main/resources/scss/admin.scss',
+    'dist/base': './src/main/resources/scss/base.scss',
+    'dist/start': './src/main/resources/scss/start.scss',
   }),
   module: {
     rules: [