experimental/webtry/res/webtry/sass/webtry.scss

@import "bootstrap-compass";
@import "bootstrap-variables";
@import "bootstrap";

$sidebar-width: 200px;
$content-background: white;
$sidebar-background: #eee;

html, body {
  min-height: 100%;
}

#wrapper { 
  padding-top: 50px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#lower-wrapper {
  min-height: 100%;
  position: relative;
}

#content {
  height: 100%;
  padding: 1em;

  margin-left: $sidebar-width;
  background: $content-background;
}

#sidebar {
  position: absolute;
  top: 0px;
  left: 0px;
  width: $sidebar-width;
  background: $sidebar-background;
  height: 100%;

  padding: 5px;

  .panel-heading {
    padding: 3px 5px;

    .panel-title {
      font-size: 12px;
      font-weight: 200;
    }
  }
}

.navbar {
  margin-top: -50px;
}

img {
  box-shadow: 2px 2px 5px gray;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAAAAAA6mKC9AAAAAXNSR0IArs4c6QAAAAJiS0dEAP+Hj8y/AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAB3RJTUUH3gUBEi4DGRAQYgAAAB1JREFUGNNjfMoAAVJQmokBDdBHgPE/lPFsYN0BABdaAwN6tehMAAAAAElFTkSuQmCC");
}

h1 {
  font-size: 18px;
}

h2 {
  font-size: 16px;
}

.waiting, .waiting * {
  cursor: wait;
}

.iframe textarea {
  resize: none;
}

template {
  display: none;
}

code {
  color: green;
}

code {
  padding: 0;
}

.tries {
  margin: 1em;
  float: left;
}

#tryHistory {
  position: absolute;
  top: 3em;
  right: 10px;
  width: 75px;

  .tries {
    float: none;
  }
}

#chooseList {
  display: flex;
  flex-flow: row wrap;
}

.action-buttons {
  padding: 10px 0;
}

.show {
  display: block !important;
}

#chooseSource {
  display: none;
}

#selectedSource {
  display: none;
}

#sourceCode {
  display: none;
  margin-top: 10px;
}

#gitInfo {
  font-size: 70%;
}

#output, #stdout {
  display: none;
}

/* CodeMirror customization */

.CodeMirror-lines,
.CodeMirror-scroll
{
  background-color: #eee;
}

.CodeMirror {
  border: solid gray 1px;
  height: auto;
}

/* Make the code editor automatically resize */

.CodeMirror-scroll {
  overflow-y: hidden;
  overflow-x: auto;
}

/* Twitter Bootstrap customization */

.navbar {
  border: none;
}

.navbar-brand {
  padding: 0;

  img {
    height: 50px;
    box-shadow: none;
    background: none;
  }
}