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
    border-width: 25px
    border-image: url("/images/pages/play/level/modal/victory_modal_background.png") 25 fill round
    border-radius: 10px

  #victory-header
    display: block
    margin: 15px auto 0
    @include transition(0.25s ease-in)

    &.out
      margin-top: -100px
    
  .modal-header
    height: 85px
    border: none
  
    
  //- Achievement panels
  
  .modal-body
    padding: 0 20px
  
  .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%)
    -moz-filter: grayscale(100%)
    -o-filter: grayscale(100%)
    filter: grayscale(100%)

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

  .achievement-description
    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
    
    
  //- 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)

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

      .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)
      
      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-content
    padding-bottom: 50px // so the footer appears at the bottom
  
  .modal-footer
    position: absolute
    bottom: -20px
    left: 20px
    right: 20px
    
  #totals
    color: white

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