diff --git a/customize.dist/src/less/loading.less b/customize.dist/src/less/loading.less
index e7cb8060a..a9442d3cb 100644
--- a/customize.dist/src/less/loading.less
+++ b/customize.dist/src/less/loading.less
@@ -1,7 +1,7 @@
@import "./variables.less";
@import (once) "../less2/include/colortheme.less";
-.cp #loading {
+#loading {
position: fixed;
z-index: 9999;
top: 0px;
@@ -33,7 +33,7 @@
}
}
}
-.cp #loadingTip {
+#loadingTip {
position: fixed;
z-index: 99999;
top: 80%;
diff --git a/www/code2/code.less b/www/code2/code.less
new file mode 100644
index 000000000..36883f377
--- /dev/null
+++ b/www/code2/code.less
@@ -0,0 +1,102 @@
+@import "/customize/src/less/variables.less";
+@import "/customize/src/less/mixins.less";
+@import "/common/markdown.less";
+@import "/common/file-dialog.less";
+
+html, body{
+ height: 100%;
+ width: 100%;
+ padding: 0px;
+ margin: 0px;
+ overflow: hidden;
+ box-sizing: border-box;
+ position: relative;
+}
+body {
+ display: flex;
+ flex-flow: column;
+ max-height: 100%;
+ min-height: auto;
+}
+
+@slideTime: 500ms;
+.CodeMirror {
+ display: inline-block;
+ height: 100%;
+ width: 50%;
+ &.transition {
+ transition: width @slideTime, min-width @slideTime, max-width @slideTime;
+ }
+ min-width: 20%;
+ max-width: 80%;
+ resize: horizontal;
+ font-size: initial;
+}
+.CodeMirror.fullPage {
+ //min-width: 100%;
+ max-width: 100%;
+ resize: none;
+ flex: 1;
+}
+.CodeMirror-focused .cm-matchhighlight {
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
+ background-position: bottom;
+ background-repeat: repeat-x;
+}
+#editorContainer {
+ flex: 1;
+ display: flex;
+ flex-flow: row;
+ height: 100%;
+ overflow: hidden;
+}
+#previewContainer {
+ flex: 1;
+ padding: 5px 20px;
+ overflow: auto;
+ display: inline-block;
+ height: 100%;
+ border-left: 1px solid black;
+ box-sizing: border-box;
+ font-family: Calibri,Ubuntu,sans-serif;
+ word-wrap: break-word;
+ position: relative;
+ media-tag {
+ * {
+ max-width:100%;
+ }
+ iframe[type="application/pdf"] {
+ max-height:50vh;
+ }
+ }
+}
+
+#preview {
+ max-width: 40vw;
+ margin: 1em auto;
+
+ .markdown_preformatted-code;
+ .markdown_gfm-table(black);
+}
+
+.cp-splitter {
+ position: absolute;
+ height: 100%;
+ width: 8px;
+ top: 0;
+ left: 0;
+
+ cursor: col-resize;
+}
+
+@media (max-width: @media-medium-screen) {
+ .CodeMirror {
+ flex: 1;
+ max-width: 100%;
+ resize: none;
+ }
+ #previewContainer {
+ display: none !important;
+ }
+}
+
diff --git a/www/code2/index.html b/www/code2/index.html
new file mode 100644
index 000000000..8be90cfb5
--- /dev/null
+++ b/www/code2/index.html
@@ -0,0 +1,30 @@
+
+
+
+ CryptPad
+
+
+
+
+
+
+
+