| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172 |
- .tracks
- display table
- width 100%
- padding 3px
- .track
- padding 12px 12px
- line-height 24px
- display table-row
- &-header,
- &-body
- display table-cell
- vertical-align top
- &-label
- background #222
- padding 0 6px
- color #ccc
- font-weight bold
- text-shadow 0 1px 0 black
- border-left 3px solid orangered
- &-controls
- display flex
- flex-direction row
- align-items center
- margin-bottom 6px
- margin-left 3px
- & .btn
- width 24px
- padding 0
- text-align center
- & .knob
- margin-left 6px
- .sequencer
- display flex
- flex-direction row
- /// LAUNCHER
- .launcher
- margin-top 36px
- display flex
- flex-direction row
- justify-content center
- .track
- background rgba(0,0,0,0.3)
- display flex
- flex-direction column
- line-height 20px
- padding 0 0 0 3px
- &:first-child
- padding-left 0
- .track-name
- font-weight bold
- padding 2px 6px
- background linear-gradient(to bottom,rgba(0,0,0,0.0), rgba(0,0,0,0.5))
- text-shadow 0 2px 1px black
- .clip
- padding 2px 6px
- text-shadow 0 2px 1px black
- background rgba(0,0,0,0.5)
- transition background 0.2s ease-out
- cursor pointer
- &:hover
- background rgba(0,0,0,0.6)
|
