codecombat/app/styles/achievements.sass

@import 'bootstrap/variables'

.achievement-body
  position: relative

  .achievement-icon
    position: absolute

    .achievement-image
      width: 100%
      height: 100%
      img
        position: absolute
        margin: auto
        top: 0
        left: 0
        right: 0
        bottom: 0

  &.locked
    .achievement-content
      background-image: url("/images/achievements/achievement_background_locked.png")
  &:not(.locked)
    .achievement-content
      background-image: url("/images/achievements/achievement_background_light.png")

  .achievement-content
    background-size: 100% 100%
    text-align: center
    overflow: hidden

    > .achievement-title
      font-family: $font-family-base
      font-weight: bold
      white-space: nowrap
      max-height: 2em
      overflow: hidden
      text-overflow: ellipsis


    > .achievement-description
      white-space: initial
      font-size: 12px
      line-height: 1.3em
      max-height: 2.6em
      margin-top: auto
      margin-bottom: 0px !important
      padding-left: 5px
      overflow: hidden
      text-overflow: ellipsis

// Specific to the user stats page
#user-achievements-view
  .achievement-body
    width: 335px
    height: 120px
    margin: 10px 0px

    .achievement-icon
      width: 120px
      height: 120px
      top: -10px

      .achievement-image
        img
          -moz-transform: scale(0.6)
          -webkit-transform: scale(0.6)
          transform: scale(0.6)

    .achievement-content
      margin-left: 60px
      margin-right: 5px
      width: 260px
      height: 100px
      padding: 15px 10px 20px 60px

      .achievement-title
        font-size: 20px

      .achievement-description
        font-size: 12px
        line-height: 1.3em
        max-height: 2.6em

.achievement-popup
  padding: 20px 0px
  position: relative

  .achievement-body
    .achievement-icon
      z-index: 1000
      width: 200px
      height: 200px
      left: -140px
      top: -20px

      .achievement-image
        img
          position: absolute
          margin: auto
          top: 0
          left: 0
          right: 0
          bottom: 0

    .achievement-content
      background-image: url("/images/achievements/achievement_background.png")
      position: relative
      width: 450px
      height: 160px
      padding: 24px 30px 20px 60px

      .achievement-title
        font-family: Bangers
        font-size: 28px
        padding-left: -50px

      .achievement-description
        font-size: 15px
        line-height: 1.3em
        max-height: 2.6em
        margin-top: auto
        margin-bottom: 0px !important

      .progress-wrapper
        margin-left: 20px
        position: absolute
        bottom: 48px

        .user-level
          font-size: 20px
          color: white
          position: absolute
          left: -15px
          margin-top: -8px
          vertical-align: middle
          z-index: 1000

        > .progress-bar-wrapper
          position: absolute
          margin-left: 17px
          width: 314px
          height: 20px
          z-index: 2

          > .progress
            margin-top: 5px
            border-radius: 50px
            height: 14px

        > .progress-bar-border
          position: absolute
          width: 340px
          height: 30px
          margin-top: -2px
          background: url("/images/achievements/bar_border.png") no-repeat
          background-size: 100% 100%
          z-index: 1

.achievement-icon
  background-size: 100% 100% !important

.achievement-wood
  &.locked
    .achievement-icon
      background: url("/images/achievements/border_wood_locked.png") no-repeat
  &:not(.locked)
    .achievement-icon
      background: url("/images/achievements/border_wood.png") no-repeat

.achievement-stone
  &.locked
    .achievement-icon
      background: url("/images/achievements/border_stone_locked.png") no-repeat
  &:not(.locked)
    .achievement-icon
      background: url("/images/achievements/border_stone.png") no-repeat

.achievement-silver
  &.locked
    .achievement-icon
      background: url("/images/achievements/border_silver_locked.png") no-repeat
  &:not(.locked)
    .achievement-icon
      background: url("/images/achievements/border_silver.png") no-repeat

.achievement-gold
  &.locked
    .achievement-icon
      background: url("/images/achievements/border_gold_locked.png") no-repeat
  &:not(.locked)
    .achievement-icon
      background: url("/images/achievements/border_gold.png") no-repeat

.achievement-diamond
  &.locked
    .achievement-icon
      background: url("/images/achievements/border_diamond_locked.png") no-repeat
  &:not(.locked)
    .achievement-icon
      background: url("/images/achievements/border_diamond.png") no-repeat

.xp-bar-old
  background-color: #680080

.xp-bar-new
  background-color: #0096ff

.xp-bar-left
  background-color: #fffbfd

// Achievements page
.achievement-category-title
  margin-left: 20px
  font-family: $font-family-base
  font-weight: bold
  color: #5a5a5a
  text-transform: uppercase

.table-layout
  #no-achievements
    margin-top: 40px

.achievement-icon-small
  height: 18px

// Achievement Popup
.achievement-popup-container
  position: fixed
  right: 0px
  bottom: 0px

.popup
  cursor: default
  left: 600px

.user-level
  background-image: url("/images/achievements/level-bg.png")
  width: 38px
  height: 38px
  line-height: 38px
  font-size: 20px
  font-family: $font-family-base