style.sass

*
  box-sizing: border-box
  margin: 0
  padding: 0

ol, ul
  list-style: none

// colors
//--grays--
$black: #000
$black-opaque-two: rgba(0, 0, 0, .2)
$background-gray: #5a5a67
$background-gray-main: #262934
$background-gray-three: #29292e
$inset-gray: #343640
$opacity-black-point3: rgba(0, 0, 0, .3)
$lightgray-one: #d3d3d3
$gray-two: #808080
$gray-one: #9a9a9a
$gray-opaque: rgba(197, 199, 204, .19)
$gray-three: #656565
$lightgray-two: #e3e3e6
$lightgray-four: #a5a5a5
$lightgray-three: #dcdcdc
$white: #fff
$black-opaque-three: rgba(0, 0, 0, .8)

// --blues--
$blue-opaque: rgba(102, 117, 152, .6)
$darkblue-one: #474a55
$darkblue-two: #60636e
$darkblue-three: #444850
$darkblue-four: #676a75
$darkblue-five: #2b2c33
$darkblue-six: #3f424c
$darkblue-seven: #474957
$darkblue-eight: #1e1e24
$darkblue-nine: #383c4b
$darkblue-ten: #393c4a
$darkblue-eleven: #3a3c49
$darkblue-twelve: #23252f
$darkblue-thirteen: #2b2e3c
$darkblue-fourteen: #2e313e
$darkblue-opaque: rgba(54, 71, 111, .6)
$darkblue-opaque-two: rgba(106, 110, 119, .19)
$lightblue: #7d7d8d
$lightblue-two: #9c9cae
$lightblue-three: #9c9bae
$gray-blue: #595c65
$gray-lightblue: #7d7f86
$lightblue-opaque: rgba(197, 199, 204, .19)
$lightblue-opaque-two: rgba(99, 112, 142, .6)


//--yellow, red, green
$lightyellow: #e9eae5
$lightgray-lightyellow: #dcdcda
$darkbrown: #4c4c4c
$red: #b03c3c
$red-two: #a95353
$lightgreen: #4caf50
$green: #5f9c5f
$purple: #676491
$purple-two: #535377


p, h1, h2, h3, h4, h5, h6, a
  color: $black
  font-family: 'Dancing Script', cursive
  font-style: italic
  font-weight: normal
  text-decoration: none

table
  border-collapse: collapse
  border-spacing: 0

input
  &:focus
    outline: none

select
  &:focus
    outline: none

textarea
  &:focus
    outline: none

button
  &:focus
    outline: none

body
  background: $background-gray

// ---- main ----
.main
  background: $background-gray-main
  border-radius: 20px
  box-shadow: 1px 5px 15px 5px $opacity-black-point3, inset 0 4px 1px 1px $inset-gray, inset 0 -3px 1px 1px $lightblue-opaque
  margin: 40px auto
  padding: 20px 40px 40px
  position: relative
  width: 1200px

.main__headerContainer
  background: url('bluebanner.png')
  background-position: center
  background-repeat: no-repeat
  background-size: contain
  height: 54px
  margin: 0 0 10px

.main__header
  color: $lightblue-three
  font-size: 22px
  font-style: italic
  line-height: 50px
  margin: 0 0 20px
  text-align: center

// ---- keyboard ----
.keyBoardContainer
  background: $darkblue-nine
  float: left
  margin: 0 0 20px
  padding: 45px 50px
  position: relative
  width: 760px

.keyboard
  background: linear-gradient(to bottom, $darkblue-one, $darkblue-two)
  box-shadow: 0 8px 10px 0 $opacity-black-point3, inset 0 4px 1px 1px $inset-gray, inset 0 -3px 1px 1px $lightblue-opaque
  font-size: 0
  height: 230px

  .keyboard__octave__btn__icon
    color: $lightgray-two
    font-size: 10px
    line-height: 30px
    text-align: center

.keyboard__topSettings
  height: 70px
  padding: 20px
  width: 100%

.keyboard__octave
  border-radius: 40%
  display: inline-block
  height: 30px
  vertical-align: top

.keyboard__octave__label
  border-radius: 3px
  display: inline-block
  height: 30px
  padding: 0 20px 0 10px
  position: relative
  text-align: center

.keyboard__octave__label__para
  color: $gray-one
  font-size: 12px
  line-height: 30px
  position: relative
  text-align: center
  top: 3px

.keyboard__volume__label
  border-radius: 3px
  display: inline-block
  height: 30px
  padding: 0 10px 0 60px
  position: relative
  text-align: center

.keyboard__octave__btn
  background-image: linear-gradient(to bottom, $darkblue-one, $darkblue-two)
  border-radius: 3px
  box-shadow: 0 2px 4px 0 $opacity-black-point3, inset 0 4px 1px 1px $darkblue-three, inset 0 -3px 1px 1px $lightblue-opaque
  display: inline-block
  height: 30px
  text-align: center
  width: 30px

  &:hover
    background-image: linear-gradient($darkblue-one, $darkblue-four)
    cursor: pointer

  &:active
    &:hover
      box-shadow: 0 2px 4px 0 $opacity-black-point3, inset 0 6px 1px 1px $darkblue-three, inset 0 -1px 1px 1px $lightblue-opaque
      cursor: pointer

.keyboard__octave__value
  background-image: linear-gradient($darkblue-five, $darkblue-six)
  border-radius: 3px
  box-shadow: 0 2px 4px 0 $opacity-black-point3, inset 0 4px 1px 1px $darkblue-opaque-two, inset 0 -3px 1px 1px $inset-gray
  display: inline-block
  height: 30px
  vertical-align: top
  width: 30px

.keyboard__octave__valuePara
  color: $lightgray-two
  font-size: 12px
  line-height: 32px
  text-align: center

.keyboard__volumne
  display: inline-block
  margin: 13px 20px

.keyboard__volumeSlider
  -webkit-appearance: none
  appearance: none
  background: $lightgray-four
  border-radius: 5px
  height: 6px
  opacity: .7
  outline: none
  transition: opacity .2s
  width: 100%

  &::-webkit-slider-thumb
    -webkit-appearance: none
    appearance: none
    background: $darkblue-eight
    border-radius: 50%
    cursor: pointer
    height: 18px
    width: 18px

  &::-moz-range-thumb
    -webkit-appearance: none
    appearance: none
    background: $darkblue-eight
    border-radius: 50%
    cursor: pointer
    height: 18px
    width: 18px
    border: none

.keyboard__leftSettings
  display: inline-block
  height: 160px
  width: 100px

.keyboard__keys
  display: inline-block

.keyboard__keys__whiteNote
  background: $lightyellow
  box-shadow: 0 0 0 0 $opacity-black-point3, inset 0 0 0 0 $inset-gray, inset 0 -3px 0 1px $lightgray-one
  display: inline-block
  height: 160px
  width: 48px

  &:hover
    cursor: pointer

.keyboard__blackkeys
  display: inline-block
  position: absolute

  .pressedKey
    background: $darkblue-seven

.keyboard__keys__blackNote
  background: $darkblue-twelve
  box-shadow: inset 0 0 3px $black-opaque-three
  display: inline-block
  height: 100px
  width: 30px

  &:hover
    cursor: pointer

.keyboard__Whitekeys
  .pressedKey
    background: $lightgray-lightyellow

.leftMarginSmall
  margin-left: 9px

.leftMarginBig
  margin-left: 34px

.rightMarginSmall
  margin-right: 9px

.rightMarginBig
  margin-right: 34px

.rightMarginVeryBig
  margin-right: 33px

// ---- loop controls ----
.loopControls
  background: $darkblue-nine
  float: right
  margin: 0 0 20px
  position: relative
  text-align: center
  width: 323px

.loopControls__header
  color: $lightblue-two
  font-size: 14px
  left: 10px
  position: absolute
  top: 10px

.keyboard__leftSettings__Btn
  background-image: linear-gradient(to bottom, $darkblue-one, $darkblue-two)
  border-radius: 5px
  box-shadow: 0 8px 10px 0 $opacity-black-point3, inset 0 4px 1px 1px $inset-gray, inset 0 -3px 1px 1px $lightblue-opaque
  display: inline-block
  height: 100px
  margin: 25px 5px
  width: 60px

  &:hover
    background-image: linear-gradient(to bottom, $darkblue-one, $darkblue-four)
    cursor: pointer

  &:active
    &:hover
      box-shadow: 0 8px 10px 0 $opacity-black-point3, inset 0 6px 1px 1px $inset-gray, inset 0 -1px 1px 1px $lightblue-opaque
      cursor: pointer

      & p
        top: 1px

.loopBtn__led
  color: $white
  font-size: 8px
  line-height: 40px
  position: relative
  text-align: center

.loopBtn__label
  color: $white
  font-size: 16px
  line-height: 50px
  position: relative
  text-align: center


.loopProgress
  background: $darkblue-ten
  clear: both
  font-size: 0
  margin: 30px 0 20px
  padding: 50px 20px 30px
  position: relative
  width: 100%

.loopControls__loopTimer__container
  background-image: linear-gradient(to bottom, $darkblue-five, $darkblue-six)
  border-radius: 5px
  box-shadow: 0 8px 10px 0 $opacity-black-point3, inset 0 4px 1px 1px $gray-opaque, inset 0 -3px 1px 1px $inset-gray
  height: 100px
  margin: 30px auto
  text-align: center
  width: 40%

.loopControls__loopTimer
  border-radius: 5px
  color: $white
  display: inline-block
  font-size: 20px
  line-height: 60px
  margin: auto
  padding-top: 35px
  text-align: center

.recorderOn
  color: $red

.playBtnOn
  color: $green

// ---- drum machine ----
.drumMachine
  background: $darkblue-eleven
  font-size: 0
  padding: 40px 20px 30px
  position: relative

.drumMachine__header
  color: $lightblue-two
  font-size: 14px
  left: 10px
  position: absolute
  top: 10px

.drumMachine__beat
  border-bottom-width: 0
  border-left-width: 0
  border-right-width: 0
  border-style: solid
  border-top-color: $darkblue-eleven
  border-top-width: 3px
  display: inline-block
  vertical-align: top
  width: 3.125%

.drumMachine__beatsContainer
  display: inline-block
  font-size: 0
  margin: 0 auto
  width: 1040px

.loopProgress__beat
  background: $darkblue-thirteen
  border-top-color: $darkblue-eleven
  border-top-style: solid
  border-top-width: 3px
  box-shadow: inset 0 0 3px $gray-three
  display: inline-block
  height: 16px
  width: 3.125%

.loopProgress__beatsContainer
  clear: both
  margin: 0 auto
  vertical-align: top
  width: 100%

.drumMachine__labelContainer
  display: inline-block
  vertical-align: top
  width: 40px

.drumMachine__label
  color: $lightblue
  font-size: 12px
  line-height: 30px
  margin-top: 3px


.drumMachine__instr
  background: $darkblue-fourteen
  border: 1px solid $darkbrown
  box-sizing: border-box
  height: 33px
  width: 33px

  &:hover
    cursor: pointer


.drum__highlight
  background: linear-gradient(to right, $purple, $purple-two)

.highlightBeat
  border-top-color: $red-two

.drumMachine__leftBorder
  border-left-color: $gray-lightblue
  border-left-style: solid
  border-left-width: 1px

.loopProgress__leftBorder
  border-left-color: $gray-blue
  border-left-style: solid
  border-left-width: 2px

.main__questionIcon
  &.fa
    color: $gray-two
    font-size: 20px
    line-height: 40px
    padding: 0 15px
    position: absolute
    right: 0
    top: 0

    &:hover
      color: $lightgray-three
      cursor: pointer

// ---- info container ----
.info
  background: $black-opaque-two
  border-radius: 5px
  color: $white
  height: 320px
  left: 0
  overflow: hidden
  position: absolute
  top: 0
  transition: height 1s
  width: 760px
  z-index: 1

.info__header
  color: $white
  font-size: 17px
  margin: 30px

.info__label
  color: $lightgray-one
  font-size: 15px
  margin: 0 0 3px 30px

.info__value
  color: $white
  font-size: 15px
  margin: 0 0 10px 30px
  margin-bottom: 20px

.info__key
  background: $blue-opaque
  color: $lightgray-one
  font-size: 13px
  padding: 10px 15px
  position: absolute

.info__key__left
  left: 50px
  top: 31px

.info__key__right
  left: 188px
  top: 31px

.info__key__w
  left: 177px
  top: 175px

.info__key__e
  left: 227px
  top: 175px

.info__key__t
  left: 325px
  top: 175px

.info__key__y
  left: 373px
  top: 175px

.info__key__u
  left: 420px
  top: 175px

.info__key__o
  left: 517px
  top: 175px

.info__key__p
  left: 567px
  top: 175px

.info__whiteKeyLabel
  background: $lightblue-opaque-two
  color: $lightgray-one
  font-size: 13px
  left: 68px
  padding: 10px 15px
  position: absolute
  top: 200px

.info__whiteKeyContainer
  font-size: 0
  left: 147px
  position: absolute
  top: 236px

.info__whiteKeyContainer__key
  background: $darkblue-opaque
  color: $lightgray-one
  display: inline-block
  font-size: 13px
  margin-left: 6px
  padding: 10px 15px
  width: 42px

.info__chordsContainer
  font-size: 0
  left: 147px
  position: absolute
  top: 282px

.info__chordsLabel
  background: $black-opaque-two
  color: $lightgray-one
  font-size: 13px
  left: 47px
  padding: 10px 15px
  position: absolute
  top: 282px

.info__close
  &.fa-times
    color: $lightgray-one
    padding: 15px
    position: absolute
    right: 0
    top: 0

    &:hover
      color: $white
      cursor: pointer

.hideInfo
  height: 0

.waringContainer
  background: #fe8989
  opacity: 0.6
  text-align: center
  width: 100%
  position: absolute
  top: 0
  left: 0
  padding: 20px
  display: none

.showWarning
 display: block

body .warning__closeIcon
  position: absolute
  top: 10px
  right: 10px

  &:hover
    cursor: pointer
    font-size: 18px
    top: 9px
    right: 9px

// ---- tablets ----
@media (max-width: 1200px)
  .main
    border-radius: 0
    margin: 0

  .main__questionIcon
    &.fa-question
      display: none

// ---- landscape mobiles ----
@media screen and (max-width: 1000px)
  .main
    border-radius: 0
    box-shadow: none
    margin: 0
    padding: 0
    transform: scale(1)
    width: 100%

  .keyBoardContainer
    margin: 0
    padding: 0
    width: 100vw

  .keyboard
    box-shadow: none
    width: 100vw

  .keyboard__keys
    float: right
    margin-right: 10px

  .loopControls
    left: 0
    position: absolute
    top: 69px
    width: calc(100vw - 538px)

  .loopControls2
    top: 149px

  .loopBtn__led
    display: none

  .drumMachine__labelContainer
    display: none

  .drumMachine__beatsContainer
    width: 100%

    &> div
      &:nth-of-type(odd)
        width: 0

  .main__headerContainer
    position: absolute
    right: 20px
    top: 6px
    z-index: 1
    background: none

  .drumMachine
    clear: both
    padding: 40px 0

  .loopProgress
    display: none

  .keyboard__leftSettings__Btn
    height: 40px
    margin: 30px 0
    width: 25%

  .drumMachine__instr
    width: 100%

  .drumMachine__beat
    width: 6.25%

  .loopControls__header
    display: none

    // ---- portrail mobile ----
@media screen and (max-width: 639px)
  .loopControls
    width: 100vw

  .keyboard__leftSettings
    height: 180px

  .keyboard__volume__label
    display: none

  .keyboard__volumne
    display: none

  .keyboard__keys__whiteNote
    width: calc(100vw/11)

  .keyboard__Whitekeys
    left: 0
    position: relative
    width: 100vw
    z-index: 1

  .keyboard__blackkeys
    left: 0
    width: 100vw
    z-index: 2

  .keyboard__keys__blackNote
    height: 80px
    width: calc(100vw/11)

  .leftMarginBig
    margin-left: calc(100vw/22)

  .rightMarginSmall
    border-right: 1px solid gray
    margin-right: 0

  .rightMarginBig
    margin-right: calc(100vw/22)

  .rightMarginVeryBig
    margin-right: calc(100vw/22)

  .leftMarginSmall
    margin-left: 0

  .keyboard__keys
    margin-right: 0

// ---- Small portrail mobile ----
@media screen and (max-width: 345px)
  .main__headerContainer
    display: none