index.styl

animation-time =  200ms

#drop-zone

    float left
    
    width 256px
    height 256px
    padding 32px
    margin 16px
    border-radius 8px
    box-shadow inset 0 2px 8px alpha(black, 0.15)

    background-color lighten(black, 95%)
    color lighten(black, 30%)
    text-align center
    font-weight bold

    transition all animation-time

    .glyphicon
        display block
        font-size 128px
        margin 16px
    
    &.dragover
        background-color lighten(orange, 80%)

#waveform, #frequencies
    width 100%
    overflow-x scroll

#beat-ball

    float left

    height 256px
    margin 16px

    div
        position relative
        width 16px
        height 16px
        border-radius 8px

        &.real
            background-color darken(cyan, 10%)

        &.imag
            background-color lighten(green, 10%)

        &.both
            width 32px
            height 32px
            border-radius 16px
            background-color darken(red, 10%)

.vert
    
    &:before
        display inline-block
        height 100%
        content ""
        vertical-align middle

    > *
        display inline-block
        vertical-align middle
    

#clock

    float left
    height 256px
    margin 16px

    font-size 0

    .back
        width 64px
        height 64px
        border 1px solid #CCC
        border-radius 32px
        margin-right -32px

    .hand
        height 32px
        border 1px solid #444
        vertical-align baseline
        transform-origin 50% 100%
        transition transform 100ms

    p
        margin 0
        margin-left 48px
        font-size 20px