1 files changed, 254 insertions, 0 deletions
diff --git a/src/public/scss/neo_ide.scss b/src/public/scss/neo_ide.scss
new file mode 100644
index 0000000..fb10885
--- /dev/null
+++ b/src/public/scss/neo_ide.scss
@@ -0,0 +1,254 @@
+.neo_ide {
+
+    html,
+    body {
+        height: 100%;
+        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+        padding: 0;
+        margin: 0;
+        /*margin-top: -20px;*/
+        overflow: auto;
+    }
+
+    #editor {
+        width: 100%;
+        height: 100%;
+        margin: -10px;
+    }
+
+    .page-container {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .nav-container {
+        width: 100%;
+        height: 45px;
+        background-color: #333333;
+
+        ul {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            flex: 1;
+            align-self: center;
+            width: 100%;
+            list-style: none;
+        }
+
+        ul .left {
+            color: white;
+            padding: 15px;
+            margin-left: -40px;
+            margin-top: -19px;
+            font-size: 20px;
+        }
+
+        ul .center {
+            color: white;
+        }
+
+        ul .right {
+            width: 80px;
+            margin-right: 174px;
+            color: white;
+        }
+
+        ul .right .button {
+            padding: 15px;
+            margin-top: -15px;
+        }
+
+        .fileName {
+            color: grey;
+        }
+
+        ul .button {
+
+        }
+
+        ul .button:hover {
+            background-color: black;
+        }
+    }
+
+    @keyframes menuBarIn {
+        from {height: 0;}
+        to {height: 25px;}
+    }
+
+    @keyframes menuBarOut {
+        from {height: 25px;}
+        to {height: 0;}
+    }
+
+    .menuBarIn {
+        animation-name: menuBarIn;
+        animation-duration: 0.5s;
+        height: 25px !important;
+    }
+
+    .menuBarOut {
+        animation-name: menuBarOut;
+        animation-duration: 0.5s;
+        height: 0px !important;
+    }
+
+    .menubar-container {
+        background-color: #4e4e4e;
+        height: 0;
+
+        ul {
+            display: flex;
+            flex-direction: row;
+            flex: 1;
+            width: 100%;
+            list-style: none;
+            margin-top: 2px;
+            margin-left: -30px;
+        }
+
+        .button {
+            background-color: #3e3e3e;
+            color: white;
+            padding: 3px 10px 3px 10px;
+            margin-right: 4px;
+            font-size: 13px;
+            border-radius: 7px;
+        }
+
+        .button:hover {
+            background-color: black;
+        }
+
+    }
+
+    .panel-container {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        overflow: hidden;
+
+        .panel-top {
+            flex: 0 0 auto;
+            padding: 10px;
+            height: 80%;
+            width: 100%;
+            white-space: nowrap;
+            background: #838383;
+            color: white;
+        }
+
+        .splitter {
+            flex: 0 0 auto;
+            margin-top: -20px;
+            height: 25px;
+            background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/hsizegrip.png) center center no-repeat #535353;
+            cursor: row-resize;
+        }
+
+        .splitter .text {
+            margin-left: 10px;
+            margin-top: 4px;
+            color: #cccccc;
+
+            span {
+                margin-left: 5px;
+            }
+        }
+
+        .panel-bottom {
+            flex: 1 1 auto;
+            padding: 10px;
+            /*min-height: 200px;*/
+            background: black;
+            color: white;
+
+            overflow-y: scroll;
+        }
+
+        .panel-bottom pre {
+            margin-top: -10px;
+
+            .stdout {
+                color: white;
+            }
+
+            .stderr {
+                color: red;
+            }
+
+            .close {
+                color: yellow;
+            }
+        }
+    }
+
+    label {
+        font-size: 1.2em;
+        display: block;
+        font-weight: bold;
+        margin: 30px 0 10px;
+    }
+
+
+
+
+
+    .page-loader {
+        position: absolute;
+        margin: 0;
+        padding: 0;
+        border: 0;
+        width: 100vw;
+        height: 100vh;
+          background-color: #1fa2ed;
+          color: #fff;
+
+        // LET THE LOADING BEGIN
+        .loader {
+          display: flex;
+          justify-content: center;
+          flex-flow: nowrap column;
+          align-items: center;
+          min-height: 100vh;
+        }
+        .loading {
+          display: flex;
+          margin: 24px 0;
+        }
+        .loading__element {
+          font: normal 100 2rem/1 Roboto;
+          letter-spacing: .5em;
+        }
+        [class*="el"] {
+          animation: bouncing 3s infinite ease;
+        }
+
+        @for $i from 1 through 19 {
+          $delay: percentage($i);
+          .el#{$i} {
+            animation-delay: $delay / 1000% + s;
+          }
+        }
+
+        @keyframes bouncing {
+          0%, 100% {
+            transform: scale3d(1,1,1);
+          }
+          50% {
+            transform: scale3d(0,0,1);
+          }
+        }
+
+        .current-event {
+            color: rgba(255, 255, 255, 0.53);
+            font: normal 100 1rem/1 Roboto;
+            letter-spacing: .1em;
+        }
+
+    }
+
+
+}