codecombat/app/styles/play/campaign-view.sass

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

$mapHeight: 1536
$mapWidth: 2350
$levelDotWidth: 2%
$levelDotHeight: $levelDotWidth * $mapWidth / $mapHeight
$levelDotZ: $levelDotHeight * 0.25
$levelDotHoverZ: $levelDotZ * 2
$levelDotShadowWidth: 0.8 * $levelDotWidth
$levelDotShadowHeight: 0.8 * $levelDotHeight
$levelClickRadius: 40px
$gameControlSize: 80px
$gameControlMargin: 30px

+keyframes(levelStartedPulse)
  from
    @include box-shadow(0px 0px 4px #333)
    margin-bottom: -$levelDotHeight / 3 + $levelDotZ
  50%
    @include box-shadow(0px 0px 22px skyblue)
    margin-bottom: -$levelDotHeight / 3 + ($levelDotHoverZ + $levelDotZ) / 2
  to
    @include box-shadow(0px 0px 4px #333)
    margin-bottom: -$levelDotHeight / 3 + $levelDotZ

#campaign-view
  width: 100%
  height: 100%
  position: absolute

  .gradient
    position: absolute
    z-index: 0

    &.horizontal-gradient
      left: 0
      right: 0
      height: 3%

    &.vertical-gradient
      top: 0
      bottom: 0
      width: 3%

    &.top-gradient
      top: 0

    &.right-gradient
      right: 0

    &.bottom-gradient
      bottom: 0

    &.left-gradient
      left: 0

  .map
    position: relative

    .map-background
      width: 100%
      height: 100%
      background-size: 100%
      @include user-select(none)

    .level, .level-shadow
      position: absolute
      border-radius: 50%
      -webkit-transform: scaleY(0.75)
      transform: scaleY(0.75)

    .level
      z-index: 2
      width: $levelDotWidth
      height: $levelDotHeight
      margin-left: -0.5 * $levelDotWidth
      margin-bottom: -$levelDotHeight / 3 + $levelDotZ
      border: 2px groove white
      @include transition(margin-bottom 0.5s ease)

      &.disabled, &.locked
        background-image: url(/images/pages/game-menu/lock.png)
        background-size: 75%
        background-repeat: no-repeat
        background-position: 50% 50%
        opacity: 0.7

        a
          cursor: default

      &.next
        width: 2 * $levelDotWidth
        height: 2 * $levelDotHeight
        margin-left: -0.5 * 2 * $levelDotWidth
        margin-bottom: -2 * $levelDotHeight / 3 + 2 * $levelDotZ

      &.started, &.next
        border: 3px solid lightgreen
        @include box-shadow(0px 0px 35px skyblue)

        // Would be cool, but kills performance, since we have to re-render all the time.
        //&:not(:hover)
        //  -webkit-animation-name: levelStartedPulse
        //  -webkit-animation-duration: 3s
        //  -webkit-animation-iteration-count: infinite

      &.complete
        border: 3px solid gold
        @include box-shadow(0px 0px 35px skyblue)

      .level-difficulty-banner-text
        position: absolute
        bottom: 170%
        pointer-events: none
        color: rgb(246, 208, 2)
        text-shadow: 0px 1px 0px black
        font-size: 1.8vw
        z-index: 1
        width: 100%
        text-align: center

      img.banner
        position: absolute
        bottom: 38%
        left: -50%
        width: 200%
        pointer-events: none

      img.star
        width: 100%
        bottom: 7%
        position: absolute
        pointer-events: none

      .glyphicon-star
        position: absolute
        color: lightblue
        font-size: 21px
        left: 1.5px

      &.started .glyphicon-star
        left: 0.5px

      img.hero-portrait
        width: 120%
        height: auto
        bottom: 75%
        left: 75%
        margin-left: 0
        margin-bottom: 0

    img.hero-portrait
      position: absolute
      border: 1px solid black
      border-radius: 50%
      background: white
      width: $levelDotWidth * 1.5
      height: $levelDotHeight * 1.5 / 1.75
      margin-left: -0.5 * $levelDotWidth * 1.5
      margin-bottom: -$levelDotHeight / 3 * 1.5 / 1.75

    .level-shadow
      z-index: 1
      width: $levelDotShadowWidth
      height: $levelDotShadowHeight
      margin-left: -0.5 * $levelDotShadowWidth
      margin-bottom: -$levelDotShadowHeight / 3
      background-color: black
      @include box-shadow(0px 0px 10px black)
      @include opacity(0.75)

      &.next
        width: 2 * $levelDotShadowWidth
        height: 2 * $levelDotShadowHeight
        margin-left: -0.5 * 2 * $levelDotShadowWidth
        margin-bottom: -2 * $levelDotShadowHeight / 3

    .level:hover
      // TODO: This rotate stops Firefox from flickering, but also disables the scaleY(0.75)
      // TODO: The dot looks like it's jumping.
      // TODO: -moz-transform: scaleY(0.75) didn't do anything
      // TODO: Does not break Chrome's oval.
      -moz-transform: rotate(0)
      margin-bottom: -$levelDotHeight / 3 + $levelDotHoverZ
      @include box-shadow(0px 0px 35px skyblue)

      &.next
        margin-bottom: -2 * $levelDotHeight / 3 + 2 * $levelDotHoverZ

    .level
      a
        display: block
        padding: $levelClickRadius
        margin-left: -0.5 * $levelClickRadius
        margin-top: -0.5 * $levelClickRadius
        border-radius: $levelClickRadius

      &.next a
        padding: 2 * $levelClickRadius
        margin-left: 2 * -0.5 * $levelClickRadius
        margin-top: 2 * -0.5 * $levelClickRadius
        border-radius: 2 * $levelClickRadius

    .tooltip
      z-index: 2

      .tooltip-arrow
        display: none

    .level-info-container
      display: none
      position: absolute
      z-index: 3
      width: 362px
      //min-height: 179px
      padding: 17px 20px 20px 20px
      border: 0
      background: transparent url(/images/pages/play/level-info-background.png) no-repeat center center
      background-size: 100% 100%

      .level-info

        h3
          color: rgb(232, 217, 87)
          text-shadow: black 2px 2px 0, black -2px -2px 0, black 2px -2px 0, black -2px 2px 0, black 2px 0px 0, black 0px -2px 0, black -2px 0px 0, black 0px 2px 0
          padding: 0 2px
          margin: 0 0 10px 31px
          white-space: nowrap
          overflow: hidden
          text-overflow: ellipsis

        .level-description
          color: black

          img
            display: block
            margin: 0px auto
            max-width: 100%

        kbd
          margin: 0 2px 2px 0
          display: inline-block
          font-size: 12px

        .level-status
          background: transparent url(/images/pages/play/level-info-status-spritesheet.png) no-repeat 0 0
          width: 60px
          height: 60px
          position: absolute
          left: -15px
          top: -15px

        &.complete .level-status
          background-position: -60px 0

        &.premium .level-status
          background-position: -120px 0

        &.complete.premium .level-status
          background-position: -180px 0

        .start-level
          min-width: 200px
          display: block
          margin: 10px auto 0 auto
          position: relative

          .badge
            position: absolute
            top: auto
            left: auto
            right: -25px
            bottom: -25px
            font-size: 20px
            color: black
            border: 1px solid black
            background-color: rgb(232, 217, 87)
            border-radius: 50%
            opacity: 1
            padding: 3px 9px

        &.shows-leaderboard
          .start-level, .view-solutions
            min-width: calc(50% - 5px)
            display: inline-block
            width: calc(50% - 5px)

          .start-level
            margin: 10px 0 0 5px

          .view-solutions
            margin: 10px 5px 0 0

        .course-version
          text-align: center

    .campaign-switch
      color: purple
      position: absolute
      z-index: 1
      font-size: 2vw
      text-shadow: 0 0 0.3vw white, 0 0 0.3vw white

      &:hover
        text-decoration: none

  .next-level-line
    transform-origin: 0 100%
    height: 8px
    position: absolute

    .line
      width: calc(100% - 12px - 10px)
      float: left
      margin-top: 2px
      margin-bottom: 2px
      height: 4px
      background: repeating-linear-gradient(-45deg, #AF9F7D, #DFC89C 5px, #F1EAC0 5px, #AF9F7D 10px)
      box-shadow: 0px 0px 4px black

    .point
      width: 12px
      float: left
      margin-top: -4px
      border-top: 8px solid transparent
      border-bottom: 8px solid transparent
      border-left: 12px solid lighten(#F1EAC0, 10%)

  .game-controls
    position: absolute
    right: 1%
    bottom: 1%
    z-index: 2

    .btn
      &:not(:first-child)
        margin-left: $gameControlMargin
        @media only screen and (max-height: 650px)
          margin-left: 0
      width: $gameControlSize
      height: $gameControlSize

      @media only screen and (max-height: 650px)
        @include scale(0.67)

      background: url(/images/pages/play/menu_icons.png) no-repeat

      position: relative
      img
        position: absolute
        left: 0
        top: 0
        width: 100%
        height: 100%

      background-size: cover
      @include transition(0.5s ease)
      @include box-shadow(2px 2px 4px black)
      border: 0
      border-radius: 12px
      // IE9 shows a blank white button with this MS gradient filter in place
      filter: none

      &:hover
        @include box-shadow(0 0 12px #bbf)

      &:active, &.highlighted
        @include box-shadow(0 0 20px white)

      &.items
        background-position: (-1 * $gameControlSize) 0px
      &.heroes
        background-position: (-2 * $gameControlSize) 0px
      &.achievements
        background-position: (-3 * $gameControlSize) 0px
      &.account
        //background-position: (-4 * $gameControlSize) 0px
        background-position: (-5 * $gameControlSize) 0px
      &.settings
        background-position: (-5 * $gameControlSize) 0px
      &.gems
        background-position: (-6 * $gameControlSize) 0px
      &.poll
        background-position: (-4 * $gameControlSize) 0px

    .tooltip
      font-size: 24px

      .tooltip-arrow
        display: none

  .user-status
    position: absolute
    bottom: 16px
    left: 8px
    text-align: center
    font-size: 24px
    color: white
    text-shadow: 0px 2px 1px black, 0px -2px 1px black, -2px 0px 1px black, 2px 0px 1px black
    height: 32px
    line-height: 32px

    .user-status-line
      position: relative

      button.btn.btn-illustrated
        margin-left: 10px
        min-width: 90px
        height: 32px
        color: white

      .gem, .player-hero-icon
        position: absolute
        top: 1px

      #gems-count
        margin-left: 40px

      .player-level
        margin-left: 5px

      .player-name
        margin-left: 45px
        
      a
        color: white

      $spriteSheetSize: 30px

      .player-hero-icon
        background: transparent url(/images/pages/play/play-spritesheet.png)
        background-size: cover
        background-position: (-2 * $spriteSheetSize) 0
        display: inline-block
        width: 30px
        height: 30px
        margin: 0px 2px

      .level-indicator
        margin-left: 15px
        color: white
        display: inline-block
        margin: 0 2px

      .player-hero-icon
        margin-left: 10px
        background-position: (-4 * $spriteSheetSize) 0

        &.knight
          background-position: (-5 * $spriteSheetSize) 0
        &.librarian
          background-position: (-6 * $spriteSheetSize) 0
        &.ninja
          background-position: (-7 * $spriteSheetSize) 0
        &.potion-master
          background-position: (-8 * $spriteSheetSize) 0
        &.samurai
          background-position: (-9 * $spriteSheetSize) 0
        &.trapper
          background-position: (-10 * $spriteSheetSize) 0
        &.forest-archer
          background-position: (-11 * $spriteSheetSize) 0
        &.sorcerer
          background-position: (-12 * $spriteSheetSize) 0

  .campaign-control-button
    position: absolute
    right: 1%
    top: 1%
    padding: 3px 8px
    @include opacity(0.75)

    &:hover
      @include opacity(1.0)

    .glyphicon
      font-size: 32px

  #volume-button
    .glyphicon
      display: none

    &.vol-up .glyphicon.glyphicon-volume-up
      display: inline-block

    &.vol-off .glyphicon.glyphicon-volume-off
      display: inline-block
      @include opacity(0.50)
      &:hover
        @include opacity(0.75)

    &.vol-down .glyphicon.glyphicon-volume-down
      display: inline-block

  #back-button, #clear-storage-button
    position: absolute
    right: 70px
    right: -webkit-calc(1% + 55px)
    right: calc(1% + 55px)

  #campaign-status
    position: absolute
    left: 0
    top: 0
    width: 100%
    margin: 0
    text-align: center
    color: rgb(232, 217, 87)
    font-size: 28px
    text-shadow: black 2px 2px 0, black -2px -2px 0, black 2px -2px 0, black -2px 2px 0, black 2px 0px 0, black 0px -2px 0, black -2px 0px 0, black 0px 2px 0
    z-index: 30
    pointer-events: none

    .campaign-status-background
      background: transparent url(/images/pages/play/campaign-banner.png) no-repeat center center
      border-radius: 10px
      padding-top: 30px
      display: inline-block
      min-width: 250px
      height: 106px

      .campaign-name
        line-height: 26px

      .levels-completed
        font-size: 22px

  .particle-man
    z-index: 2

  .portal
    position: relative
    width: 100%
    height: 100%
    background: transparent url(/images/pages/play/portal-background.png)
    display: flex
    align-items: center
    justify-content: center
    overflow: hidden

    .portals
      $campaignWidth: 317px
      $campaignHeight: 634px
      $campaignHoverScale: 1.2
      width: 6 * $campaignWidth
      height: $campaignHeight * $campaignHoverScale
      flex-wrap: nowrap
      display: flex
      overflow: hidden

      .campaign
        width: $campaignWidth
        height: $campaignHeight
        margin-top: $campaignHeight * ($campaignHoverScale - 1) / 2
        background: transparent url(/images/pages/play/portal-campaigns.png) no-repeat 0 0
        display: inline-block
        flex-shrink: 0
        position: relative
        cursor: pointer
        // http://easings.net/#easeOutBack plus tweaked a bit: http://cubic-bezier.com/#.11,.67,.08,1.42
        @include transition(0.25s cubic-bezier(0.11, 0.67, 0.8, 1.42))

        &:hover
          @include scale($campaignHoverScale)

        &.silhouette
          @include filter(contrast(50%) brightness(65%))
          pointer-events: none

        &.locked
          @include filter(contrast(80%) brightness(80%))
          pointer-events: none

        &.forest
          background-position: (-1 * $campaignWidth) 0
        &.desert
          background-position: (-2 * $campaignWidth) 0
        &.mountain
          background-position: (-3 * $campaignWidth) 0
        &.glacier
          background-position: (-4 * $campaignWidth) 0
        &.volcano
          background-position: (-5 * $campaignWidth) 0

        .campaign-label
          position: absolute
          top: 55%
          width: 100%
          text-align: center

          .campaign-name, .levels-completed, .campaign-locked
            margin: 0
            color: white
            text-shadow: black 2px 2px 0, black -2px -2px 0, black 2px -2px 0, black -2px 2px 0, black 2px 0px 0, black 0px -2px 0, black -2px 0px 0, black 0px 2px 0

          .campaign-locked
            margin: 32px 0

          .campaign-description
            margin: 0px 40px
            background: transparent url(/images/level/popover_border_background.png) no-repeat
            background-size: 100% 100%
            padding: 12px
            color: black

          .levels-completed
            font-size: 22px

          .play-button
            margin: 15px 0
            min-width: 100px

  .small-nav-logo, .picoctf-powered-by
    position: absolute
    top: 1%
    left: 1%
    height: 60px
    z-index: 1

  .picoctf-logo .small-nav-logo
    height: 90px

  .picoctf-powered-by
    color: rgb(227, 173, 53)
    top: calc(1% + 90px)
    margin: 10px 10px 10px 15px

    img
      height: 30px

  .ad-container
    width: 100%
    height: 90px
    text-align: center

  .gameplay-container
    position: absolute

body.ipad #campaign-view
  // iPad only supports up to Kithgard Gates for now.
  .campaign-switch
    display: none

body[lang='ru'] .portals h2
  font-size: 26px