/!
Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com)
Code licensed under the Apache License v2.0.
For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
/ Toggle Styles /
- {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: Helvetica, Geneva, Swiss, Arial, SunSans-Regular, sans-serif;
line-height: normal;
font-size: 14px;
}
#ide-wrapper {
position: absolute;
bottom: 0;
padding: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
height: 100%;
width: 100%;
/ display: none; /
/ margin-right: auto; /
/ margin-left: auto; /
}
#ide-wrapper.toggled {
/ padding-right: 0px; /
}
#script-panel {
height: calc(100% - 37px);
}
#script-panel textarea {
width: 100%;
height: 100%;
margin: 0;
border: none;
resize: none;
}
#panel-wrapper {
bottom: 0;
padding: 0;
position: fixed;
width: 100%;
height: 40%;
transition: all 0.5s ease;
z-index: 6;
}
#ide-wrapper.toggled #panel-wrapper {
height: 0px;
}
.flex-container {
display: flex;
flex-direction: row;
/ height: calc(100vh - 35px); /
overflow: auto;
}
.flex-panel {
border: 1px solid #9f9f9f;
flex: 1500 1;
overflow: auto;
transition: all 0.5s ease-in-out;
}
.flex-panel > .caption {
background: #c4c4c4;
height: 20px;
padding: 3px 10px 0 10px;
position: absolute;
z-index: 3;
width: 100%;
cursor: pointer;
}
.flex-panel > .caption:after {
/ css arrow /
position: absolute;
content: "";
border-top: 8px solid transparent;
border-right: 8px solid #565656;
border-bottom: 8px solid transparent;
top: 1px;
right: 7px;
transform: rotate(-90deg);
transition: all 0.5s ease-in-out;
}
.flex-panel > .content {
margin: 22px 4px 4px 4px;
transition: all 0.5s ease-in-out;
font-family: monospace;
overflow: auto;
height: fit-content;
}
.flex-panel.collapsed {
flex: 1 1000 20px;
}
.flex-panel.collapsed > .caption:after {
transform: none;
}
.flex-panel.collapsed > .content {
opacity: 0;
}
#goal-panel {
flex: 2000 1;
}
#goal-panel.collapsed {
flex: 1 1000 20px;
}
#goal-text {
border: 0;
padding: 0;
white-space: pre;
}
#vsep, #hsep {
position: absolute;
z-index: 3;
}
#hide-panel {
cursor: pointer;
}
#hide-panel g path {
fill: #00a806;
}
#ide-wrapper.toggled #hide-panel g path {
fill: #f20000
}
#toolbar {
/ white-space: nowrap; /
width: 100%;
border-bottom: 1px solid #ddd;
/height: 36px;/
}
#toolbar .exits {
white-space: nowrap;
display: inline-block;
padding: 0;
margin: 0;
}
#toolbar img {
display: inline-block;
padding: 0;
margin: 0;
vertical-align: top;
}
#buttons {
opacity: 0;
display: inline-block;
text-align: left;
padding-left: 1em;
transition: opacity 500ms ease;
}
#buttons img {
cursor: pointer;
}
#query-panel > div {
line-height: 1.25em;
padding-left: 18px;
white-space: pre;
}
/ overloads /
.CodeMirror {
height: 100%;
}
/ Proper /
#code-wrapper {
}
#document {
margin: auto;
position: relative;
padding: auto;
width: 51em;
padding: 15px;
}
#document code {
white-space: pre;
}
#packages-panel {
display: none;
}
#packages-panel > div {
padding-bottom: 4px;
}
#packages-panel > div > img {
margin-right: 4px;
vertical-align: bottom;
cursor: pointer;
}
.rel-pos {
position: relative;
height:0;
}
.progressbar {
background: #3c57a6;
height:2px;
border-radius: 2px;
position:relative;
width:0;
}
.progress-egg {
position: absolute;
top: -18px;
right: 0;
}
