styles.styl

body
  font-family "OCR A Std", "Menlo", "Andale Mono", courier
  background #eee
  text-align center
body.updating-cm .CodeMirror
  display: none
.CodeMirror
  text-align left
a
  text-decoration none
  &:hover
    text-decoration underline
.activeAreaOfBar
  background: rgba(0,0,0,0.1)
  display: inline-block
  height 100%
.context-menu
  font-family "Helvetica Neue", helvetica, arial, sans-serif
  font-size 13px
  text-align left
  position absolute
  background white
  padding 10px
  box-shadow 0 0 5px rgba(0,0,0,0.2)
  width 150px
  margin-left -85px
  z-index 6
  margin-top 10px
  box-sizing borderpbox
  border-radius 4px
  input
    width 100%
    border 1px solid #ddd
    padding 5px 7px
    &:focus
      outline 0
      border 1px solid #ccc
  &::after
    content " "
    width 0
    height 0
    position absolute
    left 50%
    margin-left -8px
    top -8px
    border-left 8px solid transparent
    border-right 8px solid transparent
    border-bottom 8px solid rgba(0 0 0 0.3)
    
#panel-right
  text-align left
  position absolute
  padding 0
  margin 0
  // top 0
  left 560px
  float left
  vertical-align top
  font-size 12px
  width 130px
  height 46px
  font-family "Helvetica Neue"
  a 
    color black
  a.annotation
    color black
    display block 
    padding 8px
    border-top 1px solid rgba(0,0,0,0.05)
    &:hover
      background rgba(0,0,0,0.05)
      text-decoration none
  li
    list-style none
    
    
.btn
  vertical-align top
  
  font-family "Helvetica Neue", helvetica, arial, sans-serif
  background: white
  // color: #05405a 
  font-weight bold
  padding 0 8px
  display block
  margin-bottom 10px
  height 29px 
  line-height 29px
  font-size 13px
  input
    cursor pointer
    
  &:hover
    text-decoration underline
.btn-dark    
  opacity 0.5
  display inline-block
  text-align center
  border 1px solid rgba(0,0,0,0.1)
  font-size 12px
  padding 0
  &:hover
    opacity 1
.width-33
  width 33.3%
  box-sizing border-box
.width-50
  width 50%
  box-sizing border-box
      
.branch-timeline
  margin-bottom 10px
  .bar
    height 20px
    background #ddd
    display block
    text-align left
    font-size 10px
    line-height 20px
    box-sizing border-box
    // overflow hidden
    position relative
    &.active
      background-color #bbb
      border-left 4px solid #aaa
    .playbackLocation
      width 2px
  .targetIndicator, .annotation
    position absolute
    display inline-block
    z-index 1
    // overflow hidden
    box-sizing border-box
    margin-left -5px
    border-radius 5px
    top 5px
    width 10px
    height 10px
    background-color #9c3000
  .annotation
    background white
    box-shadow 0 0 5px rgba(0,0,0,0.2)
    border 3px solid white
.bar
  .annotation 
    cursor pointer
  .annotation:hover, .annotation.hovering
    background #ddd
  .annotation.active
    background #9c3000
#codecap
  margin 20px auto
  max-width 550px
  position relative
.CodeMirror
  // height auto
  height 350px
.CodeMirror-scroll 
  // overflow-y: hidden
  overflow-x: auto

.playback-line
  background #ddd
  height 100%
  position relative
  //margin-left 29px

.playbackLocation
  height 100%
  width 4px
  position absolute
  background #aaa
  margin-left -1px

.controls
  height 30px
  text-align left
  a
    cursor pointer
    text-decoration none
    display inline-block
    color black
    &:hover
      background #008ac4

.controls-play
  float left
  height 100%
  width 29px
  background #00aaf1
  display inline-block
  position relative
  &::after
    display inline-block
    width 0
    height 0
    border-top 8px solid transparent
    border-bottom 8px solid transparent
    border-left 12px solid white
    position absolute
    top 50%
    left 50%
    margin-left -5px
    margin-top -7px
    content " "

.playing
  .controls-play
    &::after
      display inline-block
      width 10px
      height 10px
      background white
      position absolute
      top 50%
      left 50%
      margin-left -5px
      margin-top -5px
      content " "
      border none
.annotation
  a
    color #333
  a.edit
    display none
    margin-left 3px
    color #aaa
    font-size 11px
    cursor pointer
  &:hover
    .edit
      display inline
.branch-toggle
  text-align left
  font-size 12px
  color #aaa
  width 20px
  height 20px
  display inline-block
  &:hover span
    border-color #aaa
  span
    display block
    margin 0 0 3px 0
    border-bottom 3px solid #ccc
.codemirror-wrap
  background white
  padding 10px

.hidden
  display none !important