style: improved the sketch page

community/public/css/lms.css

@@ -1,57 +1,4 @@
 
-.livecode-editor-large .canvas-wrapper {
-  position: relative;
-  padding: 10px;
-}
-
-.livecode-editor-large canvas {
-  position: relative;
-  z-index: 0;
-  border: 1px solid #ddd;
-  height: 300px;
-  width: 300px;
-}
-
-.livecode-editor-large .code {
-  width: 100%;
-  padding: 5px;
-  min-height: 330px;
-  resize: none;
-}
-.livecode-editor-large .output {
-  padding: 5px;
-}
-
-.livecode-editor-large .CodeMirror {
-  height: 320px;
-}
-
-.canvas-editor canvas {
-  position: relative;
-  z-index: 0;
-  border: 1px solid #ddd;
-}
-.canvas-wrapper .output {
-  position: absolute;
-  z-index: 1;
-  width: 100%;
-  left: 0px;
-  top: 0px;
-  background-color: rgba(255, 255, 255, 0);
-  margin: 15px;
-  max-height: 200px;
-}
-
-.canvas-editor .code {
-  width: 100%;
-  padding: 5px;
-  /* min-height: 330px; */
-  resize: none;
-}
-/* .canvas-editor .output {
-  padding: 5px;
-} */
-
 .heading {
   background: #eee;
   padding: 10px;
@@ -60,21 +7,6 @@
   border: 1px solid #ddd;
 }
 
-.livecode-editor-large h2 {
-  font-size: 1.2em;
-  text-transform: uppercase;
-  margin: 0px;
-  font-weight: normal;
-}
-
-.livecode-editor-large .run {
-  float: right;
-}
-
-.livecode-editor-large .col-sm {
-  border: 1px solid #ddd;
-}
-
 .sketch-header h1 {
   font-size: 1.5em;
   margin-bottom: 0px;
@@ -89,48 +21,6 @@
   color: inherit;
 }
 
-
-.canvas-editor .CodeMirror {
-  background: #ffe;
-  border: 1px solid #eed;
-  margin-bottom: 10px;
-  border-radius: 10px;
-  height: 100%;
-}
-
-canvas {
-  border: 2px solid #eee;
-}
-
-@media (min-width: 768px) {
-  .canvas-wrapper {
-    margin-bottom: -200px;
-  }
-}
-
-@media (max-width: 768px) {
-  .canvas-wrapper {
-    padding-top: 20px;
-    margin-left: 2em;
-  }
-  .canvas-wrapper .output {
-    left: 2em;
-  }
-}
-
 .hidden {
   display: none;
 }
-
-.livecode-controls {
-  margin-left: 2em;
-}
-
-.livecode-controls a {
-   margin-left: 10px;
-   color: #666;
-}
-
-.canvas-editor {
-  margin: 10px 0px;
-}

community/public/css/style.less

@@ -232,3 +232,54 @@ section.lightgray {
   color: inherit;
   text-decoration: underline;
 }
+
+// LiveCode editor
+
+.livecode-editor-large {
+
+  .CodeMirror {
+    border: 1px solid #ddd;
+    background: #ffe;
+    height: auto;
+  }
+  .CodeMirror-scroll {
+    max-height: 310px;
+    min-height: 310px;
+  }
+  .controls {
+    padding: 10px 0px;
+  }
+  canvas {
+    border: 5px solid #ddd;
+    position: relative;
+    z-index: 0;
+  }
+
+  .output {
+    position: absolute;
+    z-index: 1;
+    width: 300px;
+    left: 0px;
+    top: 0px;
+    background-color: rgba(255, 255, 255, 0);
+    max-height: 300px;
+    white-space: pre-wrap;
+    margin: 0px;
+    margin-left: 20px;
+    padding: 4px;
+    color: #888;
+  }
+
+  @media (max-width: 768px) {
+  .canvas-wrapper {
+    padding-top: 10px;
+  }
+  .code-wrapper {
+    min-height: 50px;
+  }
+  .CodeMirror {
+    min-height: 50px;
+  }
+  }
+
+}