codecombat/app/styles/game-menu/inventory-modal.sass

@import "app/styles/mixins"

$itemSlotSize: 55px
$itemSlotInnerWidth: $itemSlotSize - 4
$itemSlotGridHeight: 70px

.ui-effects-transfer
  outline: 2px solid #28f
  @include box-shadow(0 0 10px #28f)
  z-index: 9001

#inventory-modal
  
  //- Overall modal structure
  .modal-dialog
    margin: 30px auto 0 auto
    width: 1017px
    height: 660px
    
  .modal-content
    height: 100%
    width: 100%

  .modal-body
    height: 450px
    margin: 0

  +user-select(none)

  
  //- Background

  #play-items-modal-narrow-bg
    position: absolute
    top: -69px
    left: -8px


  //- Gems count

  #gems-count-container
    position: absolute
    left: 213px
    top: 10px
    width: 160px
    height: 66px
    @include rotate(5deg)

    #gems-count
      position: absolute
      left: 75px
      top: 17px
      font-size: 25px
      color: rgb(1,64,91)


  //- Close modal button

  #close-modal
    position: absolute
    left: 390px
    top: 23px
    width: 60px
    height: 60px
    color: white
    text-align: center
    font-size: 30px
    padding-top: 7px
    cursor: pointer
    @include rotate(-3deg)

    &:hover
      color: yellow


  //- Equipped area

  #equipped
    width: 330px
    background: white
    border: 3px solid black
    position: absolute
    left: 20px
    top: 112px
    height: 450px
    overflow: hidden

    #hero-image
      @include filter(contrast(0%) brightness(0%))
      opacity: 0.4
      width: 225px
      height: 410px
      position: absolute
      left: 10px
      top: 20px

    .item-slot
      width: $itemSlotSize
      height: $itemSlotSize
      margin: 5px
      background-color: rgba(255,255,255,0.4)
      border: 2px dashed rgb(100,100,150)
      position: relative
      cursor: pointer
      @include transition(0.5s ease)

      //&.disabled
      //  opacity: 0.5

      &.selected
        .placeholder, img.item
          border-color: rgb(81,153,236)
          background-color: rgb(81,153,236)
          @include box-shadow(0 0 10px rgb(81,153,236))
        img.item
          background: rgb(81,153,236)
  
      &.should-equip
        background-color: #8fa
        outline: 2px solid #8af
        @include box-shadow(2px 2px 4px black)
  
      &.droppable
        outline: 2px solid blue
        @include box-shadow(4px 4px 6px black)
  
      &.droppable-hover
        outline: 4px solid blue
        @include box-shadow(6px 6px 8px black)
  
      .placeholder
        width: 100%
        height: 100%
        background-size: cover
        @include opacity(0.7)
        background-image: url(/images/pages/game-menu/slot-icons.png)
  

      // A terrible awful bit of styling, but will be gone or messed around with soon anyway

      &[data-slot="misc-1"]
        display: none // hiding for now
        position: absolute
        left: 250px
        top: 20px + ($itemSlotGridHeight * 3)
        .placeholder
          background-position: (-0 * $itemSlotInnerWidth) 0px
  
      &[data-slot="misc-0"]
        display: none // hiding for now
        position: absolute
        left: 250px
        top: 20px + ($itemSlotGridHeight * 2)
        .placeholder
          background-position: (-4 * $itemSlotInnerWidth) 0px


      &[data-slot="minion"]
        position: absolute
        left: 250px
        top: 20px + ($itemSlotGridHeight * 1)
        .placeholder
          background-position: (-1 * $itemSlotInnerWidth) 0px
  
      &[data-slot="programming-book"]
        position: absolute
        left: 250px
        top: 20px + ($itemSlotGridHeight * 4)
        .placeholder
          background-position: (-3 * $itemSlotInnerWidth) 0px
  
      // Only for wizards...
      //&[data-slot="spellbook"] .placeholder
      //  background-position: (-2 * $itemSlotInnerWidth) 0px
  
      &[data-slot="wrists"]
        position: absolute
        left: 20px
        top: 20px + ($itemSlotGridHeight * 2.5)
        .placeholder
          background-position: (-5 * $itemSlotInnerWidth) 0px
  
      &[data-slot="left-ring"]
        position: absolute
        left: 250px
        top: 20px + ($itemSlotGridHeight * 2)
        .placeholder
          background-position: (-6 * $itemSlotInnerWidth) 0px
  
      &[data-slot="right-ring"]
        position: absolute
        left: 250px
        top: 20px + ($itemSlotGridHeight * 3)
        .placeholder
          background-position: (-7 * $itemSlotInnerWidth) 0px
  
      &[data-slot="torso"]
        position: absolute
        left: 90px
        top: 20px + ($itemSlotGridHeight * 3)
        .placeholder
          background-position: (-8 * $itemSlotInnerWidth) 0px
  
      &[data-slot="feet"]
        position: absolute
        left: 90px
        top: 20px + ($itemSlotGridHeight * 5)
        .placeholder
          background-position: (-9 * $itemSlotInnerWidth) 0px
  
      &[data-slot="neck"]
        position: absolute
        left: 90px
        top: 20px + ($itemSlotGridHeight * 2)
        .placeholder
          background-position: (-10 * $itemSlotInnerWidth) 0px
  
      &[data-slot="waist"]
        position: absolute
        left: 90px
        top: 20px + ($itemSlotGridHeight * 4)
        .placeholder
          background-position: (-11 * $itemSlotInnerWidth) 0px
  
      &[data-slot="eyes"]
        position: absolute
        left: 90px
        top: 20px + $itemSlotGridHeight
        .placeholder
          background-position: (-12 * $itemSlotInnerWidth) 0px
  
      &[data-slot="head"]
        position: absolute
        left: 90px
        top: 20px
        .placeholder
          background-position: (-13 * $itemSlotInnerWidth) 0px
        
      &[data-slot="pet"]
        position: absolute
        left: 250px
        top: 20px
        .placeholder
          background-position: (-14 * $itemSlotInnerWidth) 0px
  
      &[data-slot="gloves"]
        position: absolute
        left: 160px
        top: 20px + ($itemSlotGridHeight * 2.5)
        .placeholder
          background-position: (-15 * $itemSlotInnerWidth) 0px
  
      &[data-slot="left-hand"]
        position: absolute
        left: 160px
        top: 20px + ($itemSlotGridHeight * 3.5)
        .placeholder
          background-position: (-16 * $itemSlotInnerWidth) 0px
  
      &[data-slot="right-hand"]
        position: absolute
        left: 20px
        top: 20px + ($itemSlotGridHeight * 3.5)
        .placeholder
          background-position: (-17 * $itemSlotInnerWidth) 0px
  
      &[data-slot="flag"]
        position: absolute
        left: 250px
        top: 20px + ($itemSlotGridHeight * 5)
        .placeholder
          background-position: (-2 * $itemSlotInnerWidth) 0px
  
      img.item
        position: absolute
        left: -2px
        top: -2px

        width: $itemSlotSize
        height: $itemSlotSize
        border: 2px solid black
        background-color: white

      
  //- dragging styling 
      
  #equipped
    
    &.droppable
      outline: 2px solid blue
      @include box-shadow(4px 4px 6px black)

    &.droppable-hover
      outline: 4px solid blue
      @include box-shadow(6px 6px 8px black)
    
  .draggable-item
    width: $itemSlotSize * 1.2
    height: $itemSlotSize * 1.2

    
  //- Available equipment
   
  #unequipped
    width: 222px
    position: absolute
    left: 370px
    top: 112px
    height: 450px
    overflow-y: scroll
    border: 3px solid black
    padding: 9px
    background-color: white

    #double-click-hint
      margin: 20px 0 70px
    
    h4
      clear: both
      margin-bottom: 10px
      margin-top: 20px
      font-size: 24px
      text-transform: uppercase
      font-weight: bold
 
    img.item
      float: left
      border: 1px solid black
      margin: 3px
      padding: 1px
      width: 60px
      height: 60px

      &.active
        background-color: rgb(81,153,236)
    
        //.status-message .should-equip-message
        //  display: inline
      
      &.should-equip
        background-color: #8fa
        outline: 2px solid #8af
        @include box-shadow(4px 4px 6px black)
        z-index: 1
    
        //.status-message .should-equip-message
        //  display: inline
        //  font-weight: bold
        
      &.equipped
        background-color: #ff5
        display: none
    
        //.item-view
        //  cursor: default
        //
        //.status-message .equipped-message
        //  display: inline
    
      &.restricted
        background-color: rgba(255, 80, 67, 0.25)
    
        //.item-view
        //  cursor: default
        //
        //.status-message .restricted-message
        //  display: inline
    
      //&.locked
        //background-color: gray
        
      &.silhouette
        @include filter(contrast(25%) brightness(25%))
        opacity: 0.5
      
    
  //- Hero/Play buttons

  #choose-hero-button, #play-level-button
    top: 572px
    position: absolute
    background: url(/images/pages/play/modal/confirm-button.png)
    width: 209px
    height: 65px
    background-size: 209px 65px
    border: 0

    &:disabled
      opacity: 1
      @include filter(grayscale(100%))
    
    
  #choose-hero-button
    left: 20px
    
  #play-level-button
    right: 414px

      
  //- Item details. Mostly the same as the item store view, but figured we'd probably
  // be futzing with details so just copied it. TODO: refactor?

  #item-title
    position: absolute
    width: 228px
    height: 50px
    left: 698px
    top: 56px
    z-index: 2

    h2
      font-size: 20px
      margin: 12px 20px
      text-align: center
      color: rgb(53,40,25)

  #item-details-body
    position: absolute
    left: 650px
    top: 126px
    width: 330px
    height: 453px
    //background: rgba(100,100,100,0.5)
    overflow: scroll

    #item-container
      height: 163px
      width: 100%

    .item-img, .item-shadow
      width: 130px
      height: 130px

    .item-img
      top: 15px

    .item-shadow
      top: 25px

    img.hr
      width: 80%
      margin: 0 10% -3px

      &.faded
        opacity: 0.4

    .stat-row
      height: 24px
      position: relative
      font-size: 20px
      font-weight: bold

      .stat-label
        position: absolute
        left: 54px
        color: rgb(93,73,52)

      .stat
        position: absolute
        left: 150px
        color: rgb(42,38,28)

    #skills
      margin: 25px

      h3
        color: rgb(41,35,25)

      strong
        color: rgb(50,50,30)

  #selected-item-unlock-button
    left: 646px
    top: 594px
    width: 337px
    height: 41px
    font-size: 16px

    img
      height: 16px

  //- Item icons w/shadows (both in list and details areas)

  .item-img, .item-shadow, .item-silhouette
    position: absolute
    margin-left: auto
    margin-right: auto
    left: 0
    right: 0
    bottom: 0

  .item-img
    z-index: 1

  .item-shadow
    left: 5px
    @include filter(contrast(0%) brightness(0%))
    opacity: 0.2

  .item-silhouette
    @include filter(contrast(0%) brightness(0%))
    opacity: 0.3
  
  .unlock-button
    position: absolute
    border: 3px solid rgb(7,65,83)
    background: rgb(0,119,168)
    color: white
    font-size: 16px
    border-radius: 0

    &:disabled
      background: rgb(72, 106, 113)
      opacity: 1
      color: rgba(255,255,255, 0.4)

  #item-details-extra
    position: absolute
    left: 644px
    top: 589px
    
    & > *
      width: 338px
      height: 50px
      
    .alert
      text-align: center
      font-weight: bold

    button
      border: 3px solid rgb(46,46,46)
      background: white
      font-size: 16px