_console.sass

.special
  color : #f00

.webapp-console
  background-color : #eaeaea
  padding          : 0px
  margin           : 0px
  border           : 0px solid black

.webapp-console-topbar
  padding  : 0px
  margin   : 0px
  overflow : hidden
  border   : 1px solid lightgrey

.webapp-console-filename
  padding        : 10px
  font-weight    : bold
  color          : #555
  padding-top    : 4px
  padding-bottom : 0

.webapp-console-title
  padding        : 10px
  font-weight    : bold
  overflow       : hidden
  color          : #555
  max-width      : 40%
  max-height     : 1.5em
  padding-top    : 4px
  padding-bottom : 0
  padding-right  : 50px

.webapp-console-description
  color : #888

.webapp-console-for-mobile
  position : absolute
  opacity  : 0
  color    : #fff

.webapp-console-terminal
  height      : 100%
  width       : 100%
  position    : absolute
  font-family : droid-sans-mono
  padding     : 1px
  margin      : 0px
  padding     : 5px
  white-space : nowrap
  flex        : 1

.webapp-console-scrollbar
  height     : 99.5%
  overflow-x : hidden
  overflow-y : scroll
  z-index    : 1          /* so terminal text doesn't appear visible when horizontally resizing */

.webapp-console-cursor-blur
  border        : 1px solid grey
  border-radius : 3px

.webapp-console-cursor-focus
  animation      : webapp-cursor-blink 1.3s linear 0s infinite
  background     : #fff
  color          : #555
  border         : 1px solid #555
  margin         : -1px

@keyframes webapp-cursor-blink
  0%, 40%
    -webkit-filter: invert(1.0)
    filter: invert(1.0)
  50%, 90%
    -webkit-filter: invert(0.0)
    filter: invert(0.0)

.webapp-console-textarea
  height   : 0px
  width    : 0px
  border   : 0px solid white
  opacity  : 0
  position : fixed

.webapp-console-focus
  border        : 1px solid #77b6e8
  border-radius : 4px
  box-shadow    : inset 0 0 4px #77b6e8

.webapp-console-blur
  border        : 1px solid lightgrey
  border-radius : 4px