codecombat/app/styles/play/level/modal/hero-victory-modal.sass

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

#hero-victory-modal
  //- Top-level modal container
  .modal-dialog
    margin-top: 15px
    padding-top: 0
  
  //- Header
  
  .background-wrapper
    //background: url("/images/pages/play/level/modal/victory_modal_background.png")
    width: 550px
    background-color: transparent
    border: 0px solid transparent
    border-width: 25px
    border-image: url("/images/pages/play/level/modal/victory_modal_background.png") 25 fill round
    border-radius: 12px

  #victory-banner
    position: absolute
    left: -30px
    z-index: 0

  #victory-header
    position: absolute
    left: 135px
    display: block
    margin: 10px auto 0
    // http://easings.net/#easeOutBack plus tweaked a bit: http://cubic-bezier.com/#.18,.68,.75,2
    @include transition(0.5s cubic-bezier(0.18, 0.68, 0.75, 2))
    z-index: 1

    &.out
      @include scale(0)
    
  .modal-header
    height: 85px
    border: none
  
    
  //- Achievement panels
  
  .modal-body
    padding: 0 20px
    min-height: 30px
  
  .achievement-panel
    background: url("/images/pages/play/level/modal/achievement_plate.png")
    width: 451px
    height: 144px
    margin: 5px auto
    position: relative

    @include transition-duration(1s)

    -webkit-filter: grayscale(100%) brightness(75%)
    -moz-filter: grayscale(100%) brightness(75%)
    -o-filter: grayscale(100%) brightness(75%)
    filter: grayscale(100%) brightness(75%)

    &.earned
      -webkit-filter: none
      -moz-filter: none
      -o-filter: none
      filter: none

      .achievement-description
        @include opacity(1)

  .achievement-description
    @include opacity(0.75)
    position: absolute
    text-align: center
    left: 95px
    right: 98px
    top: 10px
    color: white
    white-space: nowrap
    overflow: hidden
    text-overflow: ellipsis

  .achievement-rewards
    position: absolute
    left: 25px
    right: 23px
    top: 41px
    bottom: 18px
    @include flexbox()
    @include flex-justify-center()
    
  //- Reward panels
  
  .reward-panel
    background: url("/images/pages/play/level/modal/reward_plate.png")
    width: 77px
    height: 85px
    float: left
    margin: 0 1.8px
    position: relative
    z-index: 1
    @include transition(0.25s ease)

    &.hero, &.item
      background: url("/images/pages/play/level/modal/reward_plate_wide.png")
      width: 120px
      height: 83px
      margin-top: 1px

      .reward-image-container
        left: 33px

    &.animating
      @include scale(1.5)
      z-index: 2

    &.numerical &.animating .reward-text
      font-size: 18px
      overflow: visible
      bottom: 9px

    .reward-image-container
      top: 8px
      left: 11px
      height: 55px
      width: 56px
      position: relative

      @include scale(0)
      @include transition-duration(0.5s)
      
      &.show
        @include scale(1)
      
      &.pending-reward-image
        img
          -webkit-filter: brightness(2000%) contrast(25%)
          -moz-filter: brightness(2000%) contrast(25%)
          -o-filter: brightness(2000%) contrast(25%)
          filter: brightness(2000%) contrast(25%)

      img
        margin: 0
        position: absolute
        top: 50%
        left: 50%
        margin-right: -50%
        @include transition-duration(0.5s)
        @include translate(-50%, -50%)
        max-width: 56px
        max-height: 55px

    .reward-text
      position: absolute
      bottom: 6px
      left: 4px
      right: 3px
      height: 15px
      text-align: center
      color: white
      font-weight: bold
      font-size: 12px
      white-space: nowrap
      overflow: hidden
      text-overflow: ellipsis
    
  //- Pulse effect

  +keyframes(rewardPulse)
    from
      max-width: 56px
      max-height: 55px
    50%
      width: 66px
      max-width: 66px
      max-height: 66px
    to
      max-width: 56px
      max-height: 55px

  .xp .pulse
    @include animation(rewardPulse 0.15s infinite)

  .gems .pulse
    @include animation(rewardPulse 0.25s infinite)
    
  //- Footer
  
  .modal-footer
    padding-bottom: 0
    
  p.sign-up-poke
    color: white

    .sign-up-button
      float: right
      margin: 2px 10px

  #totals
    color: white

  .next-level-buttons
    float: right

    .next-level-button
      display: block
      margin: 8px 10px
      width: 150px

    .ladder-submission-view
      display: inline-block
      color: white

      .rank-button.btn-block
        display: inline-block
        width: initial
        padding-left: 19px
        padding-right: 19px

      .last-submitted
        float: none

  .next-levels-prompt
    display: none
    margin: 30px -21px

    .btn
      width: 30%
      width: -webkit-calc(33.333333% - 10px)
      width: calc(33.333333% - 10px)
      margin: 5px

  .hour-of-code-done
    clear: both
    padding-top: 10px

    strong
      color: white
      display: block
      margin-bottom: 10px
      font-weight: normal

    .image-link
      float: right
      margin-left: 10px

    .text-link
      color: lighten(#0b63bc, 10%)


html.no-borderimage
  #hero-victory-modal
    .background-wrapper
      border: 0
      background: url("/images/pages/play/level/modal/victory_modal_background.png")
      height: 650px
    #victory-header
      margin-top: 40px
      left: 160px
    #victory-banner
      left: 0px
      top: 40px
    .modal-header
      height: 110px
    .modal-content
      height: 650px
      padding-bottom: 0
    .modal-footer
      bottom: 20px

body.ipad
  #hero-victory-modal
    // This animation is slow and wigs out on iPad and very old computers.
    .xp .pulse, .gems .pulse
      @include animation(none)