responsiveness and scrolling fixed for all viewport sizes

1 files changed, 151 insertions, 78 deletions

diff --git a/css/codeq.css b/css/codeq.css
index 3a9195f..96033d0 100644
--- a/css/codeq.css
+++ b/css/codeq.css
@@ -1,51 +1,21 @@
+/*
+
+    We use http://getbootstrap.com/ for ground HTML and CSS styling. RTFM!
+    General settings apply to all resolutions.
+    Put special viewport size settings inside @emedia queries.
+
+*/
+
 body {
     padding-top: 50px;
 }
 
-
 .title {
     /*color: whitesmoke;*/
     margin-left: 5px;
 }
 
-/* form-signin */
-.form-signin {
-    max-width: 330px;
-    padding: 15px;
-    margin: 0 auto;
-}
-.form-signin .form-signin-heading,
-.form-signin .checkbox {
-    margin-bottom: 10px;
-}
-.form-signin .checkbox {
-    font-weight: normal;
-}
-.form-signin .form-control {
-    position: relative;
-    height: auto;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    padding: 10px;
-    font-size: 16px;
-}
-.form-signin .form-control:focus {
-    z-index: 2;
-}
-.form-signin input[type="text"] {
-    margin-bottom: -1px;
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-}
-.form-signin input[type="password"] {
-    margin-bottom: 10px;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-}
-
 /* modalLogIn */
-
 #modalLogIn{
     min-width: 250px;
     padding: 14px 14px 0;
@@ -70,7 +40,6 @@ body {
 }
 
 
-
 /* screen language */
 #screen_language {
     margin-top: 20px;
@@ -80,13 +49,34 @@ body {
     cursor: pointer;
 }
 
-/* screen problems code*/
-
+/* screen problems*/
 .block {
     border-right: 1px solid #e5e5e5;
     border-bottom: 1px solid #e5e5e5;
     padding: 0;
     min-height: 4em;
+    overflow: hidden;
+}
+
+/* description */
+.block > .description {
+    padding: 0.5em 0.5em 20px 0.5em;
+}
+
+/* info */
+.block > .hints {
+    padding: 0.5em 0.5em 20px 0.5em;
+}
+
+/* code_editor */
+.block > .code_editor {
+}
+
+/* console */
+.block > .console {
+    background: black;
+    font-size: 14px;
+    padding: 0;
 }
 
 .block-label {
@@ -94,22 +84,47 @@ body {
     position: absolute;
     z-index: 60;
     opacity: .7;
-    right: 1em;
-    bottom: 0.25em;
+    right: 0.75em;
+    /*bottom: 0.25em;*/
+    bottom: 0;
     margin: 0;
     width: 150px;
     text-transform: uppercase;
-    font-size: large;
+    /*font-size: large;*/
     text-align: right;
 }
 
-/* block-toolbar */
+.block-statusbar {
+    min-height: 20px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: #F7F7F7;
+    border-top: 1px solid #DDD;
+    /*font-family: monospace;*/
+    opacity: .7;
+    text-align: left;
+}
 
-#block-toolbar {
+/* block-toolbar */
+.block-toolbar {
     position: absolute;
-    width:100%;
-    margin-bottom: 0px;
-    border: 0;
+    right: 0;
+    left: 0;
+    top: 0;
+    border:0;
+    border-bottom: 1px solid #e5e5e5;
+    background-color: #F7F7F7;
+}
+
+/*CodeMirror for mobile design*/
+.CodeMirror {
+    height: auto;
+}
+
+.CodeMirror-scroll {
+    height: auto;
 }
 
 /**** animations *****/
@@ -151,41 +166,49 @@ body {
 
 }
 
-/* sm */
-@media (min-width: 768px) and (max-width: 991px) {
-}
+/* md & ld */
+@media (min-width: 992px) {
+    /* description */
+    .block > .description {
+    }
 
-/* xs */
-@media (max-width: 767px) {
-}
+    /* info */
+    .block > .hints {
+        height: 100%;
+        overflow-y: auto;
+    }
 
+    /* code_editor */
+    .block > .code_editor {
+        min-height: 100%;
+        height: 100%;
+    }
 
-/***** blocks *****/
-/* description */
-.block > .description {
-    padding: 0.5em;
-}
+    /* console */
+    .block > .console {
+        height: 100%;
+        overflow-y: auto;
+    }
+
+    .CodeMirror {
+        height: 100%;
+    }
+
+    .CodeMirror-scroll {
+        height: 100%;
+    }
 
-/* info */
-.block > .hints {
-    padding: 0.5em;
 }
 
-/* code_editor */
-.block > .code_editor {
-    min-height: 100%;
-    height: 100%;
+/* sm */
+@media (min-width: 768px) and (max-width: 991px) {
 }
 
-/* console */
-.block > .console {
-    background: black;
-    font-size: 14px;
-    height: 100%;
-    overflow-y: auto;
-    padding: 0;
+/* xs */
+@media (max-width: 767px) {
 }
 
+
 /* codeq hints */
 
 /* the highlighted part of the text, used in pop-up and drop-down hints */
@@ -202,15 +225,15 @@ body {
 
 .editor-statusbar {
     background-color: #F7F7F7;
-    border-top: 1px solid #DDD;
+    border-top: 1px solid #e5e5e5;
     font-family: monospace;
     padding: 1px 4px;
-    text-align: right;
+    text-align: left;
 }
 
 /***** helpers *****/
-/* webkit-scrollbar */
-::-webkit-scrollbar {
+/** webkit-scrollbar 1 **/
+/*::-webkit-scrollbar {
     width: 12px;
 }
 
@@ -222,6 +245,56 @@ body {
 ::-webkit-scrollbar-thumb {
     border-radius: 10px;
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
+}*/
+
+
+/** webkit-scrollbar 2**/
+::-webkit-scrollbar {
+    width: 6px;
+    background-color: #F5F5F5;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+    background-color: #F5F5F5;
+}
+::-webkit-scrollbar-track:hover {
+    background: #F5F5F5;
+}
+::-webkit-scrollbar-track:active {
+    background: #F5F5F5;
+}
+/* Handle */
+::-webkit-scrollbar-thumb {
+    background-color: rgba(0,0,0,0.5);
+}
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(0,0,0,0.7);
+}
+::-webkit-scrollbar-thumb:active {
+    background: rgba(0,0,0,0.9);
+}
+
+/** special webkit-scrollbar for console **/
+/* Track */
+.console::-webkit-scrollbar-track {
+    background-color: #0b0b0b;
+}
+.console::-webkit-scrollbar-track:hover {
+    background: #0b0b0b;
+}
+.console::-webkit-scrollbar-track:active {
+    background: #0b0b0b;
+}
+/* Handle */
+.console::-webkit-scrollbar-thumb {
+    background-color: rgba(255,255,255,0.5);
+}
+.console::-webkit-scrollbar-thumb:hover {
+    background: rgba(255,255,255,0.7);;
+}
+.console::-webkit-scrollbar-thumb:active {
+    background: rgba(255,255,255,0.9);;
 }
 
 /* status bar */