etude/client/modules/sequencer/style.styl

/// DEVICE: SEQUENCER

.sequencer-piano
  width 100%
  background #111
  margin 3px 0 6px
  display flex
  flex-direction row
  overflow-y auto
  border 1px solid black
  &-body
    overflow-x auto
    display flex
    flex-direction column-reverse
    flex-grow 1
  &-note
    position absolute
    width 6.25%
    height 12px
    background orangered
    background linear-gradient(to bottom, orangered, red)
    cursor pointer
    z-index 1
    border-left 2px solid orangered
  &-keys
    width 30px
    display flex
    flex-direction column-reverse
  &-key
    color white
    flex-shrink 1
    padding 0 3px
    border-bottom 1px solid rgba(0,0,0,0.2)
    line-height 11px
    font-size 10px
    cursor pointer
    font-weight bold
    color #ddd
    height 12px
    &.white
      background #333
      &:hover
        background #555
    &.black
      background #080808
      &:hover
        background #181818
  &-lane, &-grid-lane
    width 100%
    height 12px
    border-top 1px dotted black
  &-grid
    &, &-bar, &-beat
      position absolute
      top 0
      bottom 0
      width 0px
      cursor crosshair
    &-bar
      border-left 1px solid black
    &-beat
      border-left 1px solid rgba(0,0,0,0.2)
      margin-left -1px
      display flex
      flex-direction column-reverse
    &-lane
      border-top none
      cursor crosshair
      &:hover
        background rgba(255,255,255,0.025)


.sequencer-steps
  display flex
  flex-direction row

.sequencer-step
  width 24px
  height 24px
  background rgba(0,0,0,0.5)
  margin 0 2px 0 0

  &.current
    border-bottom 3px solid orangered
    height 27px

  &:hover
    background rgba(0,0,0,0.2)

  &.active
    background linear-gradient(to bottom, orangered, red)

    &:hover
      opacity 0.5