/* CodeQ: an online programming tutor. Copyright (C) 2015,2016 UL FRI This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program. If not, see . */ /* We use http://getbootstrap.com/ for ground HTML and CSS styling. RTFM! General settings apply to all resolutions. Put special viewport size settings inside @media queries. */ /* override bootcrap’s fixed font sizes */ html { font-size: medium; } body { font-size: 1em; } /* code text style */ code, pre { font-size: 0.95em; } code { background-color: #f4f2f9; color: #1525c6; padding: 0.1em 0.2em; } pre { padding: 0.5em 1em; } .btn { font-size: 1em; height: 2em; line-height: 1em; } /* rework header bar to allow user-specified font sizes */ body { padding-top: 3em; /* padding-top = topbar.min-height */ } div#topbar { border-bottom-style: 1px solid black; min-height: 3em; } div.container-fluid { padding: 0; } div.container-fluid > div.navbar-header, div.container-fluid > div.navbar-collapse { margin: 0; } div.navbar-collapse { padding: 0; } button.navbar-toggle { margin: 0.6em; /* line-height + 2*(margin + padding) = topbar.min-height */ padding: 0.4em; border-style: none; } div.navbar-header > a > img { height: 3em; /* height = topbar.min-height */ width: auto; float: left; padding: 0.6em 1em; } .navbar-nav { margin: 0; } .navbar-nav > li > a { line-height: 1em; /* line-height + 2*padding = topbar.min-height */ padding: 1em; } p.navbar-text { line-height: 1em; /* line-height + 2*margin = topbar.min-height */ margin: 1em; } button.navbar-toggle > span.glyphicon { color: #888; } .row { margin: 0; } /* misc */ form { margin-bottom: 0; } div#disabled { background-color: rgba(0, 0, 0, 0.7); cursor: wait; position: fixed; left: 0; right: 0; top: 0; bottom: 0; } /* modal screens*/ #screen-login, #screen-signup, #screen-change-pass, #screen-settings, #screen-upgrade-to-aai { padding: 15px 0; } #screen-login div.login-failed { color: red; } /* screen language */ #screen-language { margin-top: 4em; margin-bottom: 4em; } #screen-language .col-lg-4 { cursor: pointer; } #screen-language .col-lg-4 a { color: inherit; text-decoration: none; } /* screen about*/ .about-logos { text-align: center; height: 6em; margin: 1em 0 1em 0; } .about-logos div { height: 100%; /* set on element if more logos in line */ display: inline-block; position: relative; } .about-logos div img { max-height: 100%; max-width: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); position: absolute; } div.vertical-line{ height: 100%; width: 0px; border: 0; border-left: 1px solid #eee; margin: 0 1% 0 1%; } /* screen problems */ .block { padding: 0; min-height: 4em; overflow: hidden; } /* screen solutions */ h2.group-title a.view-solutions { font-size: small; } /* description */ .block-left { padding-left: 1em; padding-right: 1em; } .description-container { padding-bottom: 1em; } .description-container > h1 { font-size: 1.3em; font-weight: bold; } /* code_editor */ .block.block2 { padding-top: 3em; /* padding-top = 2*block-toolbar.padding + .btn.height */ padding-bottom: 1.5em; /* padding-bottom = .block-statusbar.height */ } .block > .code_editor { border-bottom: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5; } .block-toolbar { position: absolute; right: 0; left: 0; top: 0; background-color: #F7F7F7; padding: 0.5em; } .block-statusbar { height: 1.5em; line-height: 1em; padding: 0.25em; position: absolute; bottom: 0; left: 0; right: 0; background-color: #F7F7F7; opacity: .7; text-align: left; } /* console */ .block > .console { background: #222; padding: 0.5em; min-height: 8em; } .block-label { color: grey; position: absolute; z-index: 60; opacity: .7; right: 0.75em; bottom: 0; margin: 0; width: 150px; text-transform: uppercase; text-align: right; } /* robot connection & sensor info */ #screen-robot .block3 .status { background-color: #666; border: 1px solid #444; color: yellow; font-family: monospace; padding: 0.5em; position: absolute; top: 1em; right: 1em; } /*CodeMirror for mobile design*/ .CodeMirror { height: auto; } .CodeMirror-scroll { height: auto; min-height: 6em; } .CodeMirror.disabled { opacity: 0.75; } .block > .scrollable-content-container { padding-left: 1em; padding-right: 1em; } /***** responsiveness *****/ /* md & ld */ @media (min-width: 992px) { /* BEGIN layouts */ /*~~ line-layout ~~*/ .quadrants.line-layout > * > .block { overflow: auto; min-height: 100%; height: 100%; } /* prolog */ /* code_editor */ .line-layout#screen-prolog .block.block2 { min-height: 100%; height: 100%; min-width: 50%; width: 50%; } /* console */ .line-layout#screen-prolog .block.block3 { min-height: 100%; height: 100%; min-width: 50%; width: 50%; } /* python */ /* code_editor */ .line-layout#screen-python .block.block2 { min-height: 100%; height: 100%; min-width: 50%; width: 50%; } /* console */ .line-layout#screen-python .block.block3 { min-height: 100%; height: 100%; min-width: 50%; width: 50%; } /* robot */ /* code_editor */ .line-layout#screen-robot .block.block2 { min-height: 100%; height: 100%; min-width: 50%; width: 50%; } /* console */ .line-layout#screen-robot .block.block3 { min-height: 100%; height: 100%; min-width: 50%; width: 50%; } /*~~ square-layout ~~*/ .quadrants.square-layout > * > .block:not(.block-left):not(.block-right) {/*the not-s are important here, because else the height of the surrounding divs will be set to 50% and the entire page will only be for half the screen*/ overflow: auto; min-height: 50%; height: 50%; } /* prolog */ .quadrants.square-layout#screen-prolog > * > .block { overflow: auto; min-height: 100%; height: 100%; } /* instructions+hints */ .square-layout#screen-prolog .block-left { min-width: 33%; width: 33%; } /* code_editor + console */ .square-layout#screen-prolog .block-right { min-width: 67%; width: 67%; } /* code_editor */ .square-layout#screen-prolog .block.block2 { min-height: 50%; height: 50%; min-width: 100%; width: 100%; } /* console */ .square-layout#screen-prolog .block.block3 { min-height: 50%; height: 50%; min-width: 100%; width: 100%; } /* python */ .quadrants.square-layout#screen-python.prof2 > * > .block { overflow: auto; min-height: 100%; height: 100%; } /* instructions+hints */ .square-layout#screen-python .block-left { min-width: 33%; width: 33%; } /* code_editor + console */ .square-layout#screen-python .block-right { min-width: 67%; width: 67%; } /* code_editor */ .square-layout#screen-python .block.block2 { min-height: 50%; height: 50%; min-width: 100%; width: 100%; } /* console */ .square-layout#screen-python .block.block3 { min-height: 50%; height: 50%; min-width: 100%; width: 100%; } /* robot */ .quadrants.square-layout#screen-robot.prof2 > * > .block { overflow: auto; min-height: 100%; height: 100%; } /* instructions+hints */ .square-layout#screen-robot .block-left { min-width: 33%; width: 33%; } /* code_editor + console */ .square-layout#screen-robot .block-right { min-width: 67%; width: 67%; } /* code_editor */ .square-layout#screen-robot .block.block2 { min-height: 50%; height: 50%; min-width: 100%; width: 100%; } /* console */ .square-layout#screen-robot .block.block3 { min-height: 50%; height: 50%; min-width: 100%; width: 100%; } /* END layouts */ .block-left, .block-right { min-height: 100%; height: 100%; } .block-left { border-right: 1px solid #ddd; } /* info */ .block > .scrollable-content-container { height: 100%; overflow-y: auto; } /* code_editor */ .block > .code_editor { min-height: 100%; height: 100%; } /* console */ .block > .console { height: 100%; overflow-y: auto; } .CodeMirror { height: 100%; } .CodeMirror-scroll { height: 100%; } } /* xs & sm */ @media (max-width: 991px) { /*layout selection is disable on small screens*/ #settings-layout-group { display: none; } } /***** helpers *****/ /** 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 */ ul.dropdown-menu a { cursor: pointer; } /* main screen */ #screen-language a { cursor: pointer; } /* problem index screen */ #screen-problem-list .language-description { margin-bottom: 1em; } #screen-problem-list .group-description { margin-bottom: 0.5em; } #screen-problem-list h2 { font-size: 1.4em; font-weight: bold; } #screen-problem-list ul.group-problems { padding-left: 1em; } #screen-problem-list ul.group-problems li { list-style-type: none; } #screen-problem-list a { cursor: pointer; } #screen-problem-list ul.group-problems a::before { color: gray; content: '○  '; /* non-breaking spaces */ } #screen-problem-list ul.group-problems a.attempted::before { color: #e4c13b; content: '●  '; /* non-breaking spaces */ } #screen-problem-list ul.group-problems a.solved::before { color: #5baa5b; content: '●  '; /* non-breaking spaces */ }