codecombat/app/styles/play/level/control-bar-view.sass

@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"

#control-bar-view
  $control-yellow: rgb(227, 173, 53)
  $control-yellow-highlight: rgb(243, 211, 59)

  width: 55%
  height: 50px
  @include box-sizing(border-box)
  overflow: visible
  position: absolute
  z-index: 6
  text-transform: uppercase
  font-family: $headings-font-family
  font-weight: bold

  &.controls-disabled
    @include filter(brightness(50%))

  .levels-link-area
    position: absolute
    left: 40px
    width: 160px
    text-align: center
    cursor: pointer

    a.levels-link
      margin: 0
      height: 50px
      line-height: 50px
      color: white
      font-size: 16px

      .glyphicon
        margin-left: -20px
        margin-right: 10px
        @include scaleXY(-1.25, 1.25)
        color: $control-yellow
        text-shadow: 1px 1px 0px rgb(143, 123, 62)

    &:hover
      a.levels-link
        text-decoration: underline
        .glyphicon
          color: $control-yellow-highlight

  .left-cap, .right-cap, .center-chain, .right-chain, .wood-background
    position: absolute
    top: 0
    pointer-events: none

  .left-cap
    background: transparent url(/images/level/control_bar_cap_left.png)
    background-size: cover
    width: 217px
    height: 63px
    left: 0

  .right-cap
    background: transparent url(/images/level/control_bar_cap_right.png)
    background-size: cover
    right: 0
    width: 78px
    height: 60px

  .center-chain
    background: transparent url(/images/level/control_bar_chain_center.png)
    background-size: cover
    left: 30%
    width: 111px
    height: 24px
    z-index: 1

  .right-chain
    background: transparent url(/images/level/control_bar_chain_right.png)
    background-size: cover
    top: 30px
    right: 0
    width: 97px
    height: 51px
    z-index: -1

  .wood-background
    background: transparent url(/images/level/control_bar_background.png)
    background-size: contain
    width: 100%
    height: 55px
    z-index: -1

  .level-name-area-container
    position: relative
    width: 100%
    pointer-events: none
    z-index: 1

    .level-name-area
      min-width: 200px
      max-width: 293px
      margin: 0 auto
      padding: 8px
      border-style: solid
      border-image: url(/images/level/control_bar_level_name_background.png) 20 fill round
      border-width: 0 10px 10px 10px
      text-align: center
      position: absolute
      left: 50%
      @include translate(-50%, 0)

      .level-label
        font-size: 12px
        color: $control-yellow-highlight
        margin-bottom: -5px

      .level-name
        color: white
        font-size: 18px

      .level-difficulty
        font-size: 28px
        color: $control-yellow-highlight
        display: inline-block
        @include rotate(-15deg)
        vertical-align: middle

  .buttons-area
    position: absolute
    right: 35px
    top: 8px

    button
      float: right
      margin-left: 10px
      position: relative

    #game-menu-button
      background: transparent
      border: 0
      outline: 0
      @include box-shadow(none)
      text-transform: uppercase
      font-size: 18px

      .hamburger
        display: inline-block

        span.icon-bar
          display: block
          border-radius: 4px
          width: 18px
          height: 4px
          margin: 4px
          background: $control-yellow

      .game-menu-text
        display: inline-block
        vertical-align: middle
        margin-top: -18px

      &:hover
        @include scale(1.05)

        .hamburger span.icon-bar
          background-color: $control-yellow-highlight

    #level-done-button, #next-game-button, #control-bar-sign-up-button
      top: 7px
      font-size: 13px
      height: 24px

    #level-done-button
      display: none


html.no-borderimage
  #control-bar-view .level-name-area
    border: 0
    background: transparent url(/images/level/control_bar_level_name_background.png)
    background-size: contain
    background-repeat: no-repeat