diff options
Diffstat (limited to 'css')
| -rw-r--r-- | css/codeq.css | 229 |
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 */ |