summaryrefslogtreecommitdiff
path: root/css
diff options
context:
space:
mode:
Diffstat (limited to 'css')
-rw-r--r--css/codeq.css151
1 files changed, 95 insertions, 56 deletions
diff --git a/css/codeq.css b/css/codeq.css
index cfe0ebc..c4dd259 100644
--- a/css/codeq.css
+++ b/css/codeq.css
@@ -6,51 +6,90 @@
*/
+/* override bootcrap’s fixed font sizes */
html {
font-size: medium;
}
-body {
- font-size: 1em;
- padding-top: 50px;
-}
-
+body,
+code,
+pre,
.btn {
font-size: 1em;
}
+/* code text style */
code {
background-color: #f4f2f9;
color: #1525c6;
- font-size: 1em;
padding: 0.1em 0.2em;
}
pre {
- font-size: 1em;
padding: 0.5em 1em;
}
-.title {
- /*color: whitesmoke;*/
- /*margin-left: 5px;*/
+.btn {
+ height: 2em;
+ line-height: 1em;
}
-/* brand */
-.navbar-brand {
- padding: 7px 15px; /*adjust the top/bottom padding if your logo looks too small */
- margin-top: 0; /* you can adjust this if your logo needs to be moved up or down but simply adjusting the padding is easier */
- height: 50px; /* this should be equal to computed height of .navbar-nav>li>a */
+/* rework header bar to allow user-specified font sizes */
+body {
+ padding-top: 3em; /* padding-top = topbar.min-height */
}
-.navbar-brand>img {
- -o-object-fit: contain; /* Opera Support */
- object-fit: contain; /* Resize down to fit container */
- max-height: 100%; /* resize DOWN to height of container which is set to 50px */
- height: 100%; /* resize UP to fit*/
- max-width: 100%;
- width: auto; /* resize based on height */
- margin: 0 auto;
+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;
}
/* modal screens*/
@@ -125,22 +164,47 @@ div.vertical-line{
/* hints */
+.block.block4 {
+ padding-bottom: 1em;
+}
+
.block > .hints {
padding: 0.5em 0.5em 20px 0.5em;
}
-.block.block4 {
- padding-bottom: 1em;
+/* code_editor */
+.block.block2 {
+ padding-top: 3em; /* padding-top = 2*block-toolbar.padding + .btn.height */
+ padding-bottom: 1.5em; /* padding-bottom = .block-statusbar.height */
}
-/* code_editor */
.block > .code_editor {
+ border-bottom: 1px solid #e5e5e5;
+ border-top: 1px solid #e5e5e5;
min-height: 8em;
}
-.block.block2 {
- padding-top: 51px;
- padding-bottom: 21px;
+.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;
+ /*font-family: monospace;*/
+ opacity: .7;
+ text-align: left;
}
/* console */
@@ -165,20 +229,6 @@ div.vertical-line{
text-align: right;
}
-.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;
- padding: 0 4px;
-}
-
/* robot connection & sensor info */
#screen_robot .block3 .status {
background-color: #666;
@@ -191,17 +241,6 @@ div.vertical-line{
right: 1em;
}
-/* block-toolbar */
-.block-toolbar {
- position: absolute;
- right: 0;
- left: 0;
- top: 0;
- border:0;
- border-bottom: 1px solid #e5e5e5;
- background-color: #F7F7F7;
-}
-
/*CodeMirror for mobile design*/
.CodeMirror {
height: auto;
@@ -221,8 +260,8 @@ div.vertical-line{
}
.block > .scrollable-content-container {
- padding-left: 1.5em;
- padding-right: 1.5em;
+ padding-left: 1em;
+ padding-right: 1em;
}
/***** responsiveness *****/