style.styl

*
  box-sizing: border-box

html, body
  height: 100%

body
  display: flex
  flex-direction: row
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif
  font-size: 16px
  font-weight: 300
  margin: 0

.hidden
  display: none

main
  display: flex
  flex-direction: row
  width: 100%

  > section
    display: flex
    flex-direction: column

    &:nth-child(2)
      flex: 1

      > section
        display: flex
        flex-direction: row

filetree
  cursor: pointer
  display: block
  margin: 0
  padding: 0
  overflow-x: hidden
  overflow-y: auto
  user-select: none

  > path-name
    display: block
    margin-left: -1em
    position: relative

    &:not(:empty)
      &::before
        content: "+ "
        left: 1em
        position: absolute
        text-align: center
        width: 1em

      &.expanded::before
        content: "- "

    &:hover
      background-color: lightyellow

  > file, > path-name
    padding-left: 1em
    padding-right: 1em
    position: relative
    white-space: nowrap

  > file
    cursor: pointer
    display: block

    > .delete
      display: none
      position: absolute
      right: 0
      top: 0

    &:hover
      background-color: lightyellow

      > .delete
        display: inline-block

    &.active
      background-color: lightblue

  > filetree
    > file, > path-name
      padding-left: 2em
    > filetree
      > file, > path-name
        padding-left: 3em
      > filetree
        > file, > path-name
          padding-left: 4em
        > filetree
          > file, > path-name
            padding-left: 5em

search-results
  display: block
  height: 100%
  width: 30%
  background-color: white
  border-left: 1px solid black
  overflow: auto

  > search-result
    display: block
    padding: 0.25em 0.5em

    &:nth-child(2n)
      background-color: #eee

    &:hover
      background-color: lightyellow

    > span.line
      &::before
        content: " :"

  > button.close
    position: absolute
    top: 1em
    right: 1em

actions
  display: inline
  flex: 1
  height: 40px

  > button
    font-size: 14px
    margin-bottom: 0.25em
    margin-right: 0.25em

github-status
  display: block
  margin-left: 0.25em
  white-space: nowrap

.repo_info
  border-bottom: 1px solid black
  font-size: 0.8em
  height: 40px
  overflow: hidden
  padding: 0.25em 1em
  width: 200px

.console-wrap
  display: block
  height: 100px
  overflow: auto

  > .errors
    box-sizing: border-box
    color: red
    margin-top: 0

    &:empty
      margin-bottom: 0

div.ace_editor
  border-bottom: 1px solid black
  flex: 1

.ace_search_form
  font-family: Arial, sans serif
  font-size: 13.3333px