summaryrefslogtreecommitdiff
path: root/css
diff options
context:
space:
mode:
authorMarko Pušnik <marko.pusnik@guru.si>2015-09-30 18:55:33 +0200
committerMarko Pušnik <marko.pusnik@guru.si>2015-09-30 18:55:33 +0200
commitba6135a83273c625097fe7cdb59319a51acca31e (patch)
tree424688374b2e9a8cb23c83cda38c3bc5e3561b90 /css
parent2809b3fb4bfff39eb2eef28b1f681fbb6355d0f1 (diff)
responsiveness and scrolling fixed for all viewport sizes
Diffstat (limited to 'css')
-rw-r--r--css/codeq.css229
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 */