codecombat/app/styles/achievements.sass

.locked
  // This used to be a grayscale filter but they're mad intensive to paint

.achievement-body
  .achievement-icon
    position: absolute
    top: 0px

    .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.png")

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

    > .achievement-title
      font-family: Bangers
      overflow: hidden

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

// Specific to the user stats page
#user-achievements-view
  .row
    //.col-lg-4, .col-xs-12
      padding-right: 0px !important

  .achievement-body
    width: 335px
    height: 120px
    margin: 10px 0px

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

      .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
        padding-left: -50px

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

.notifyjs-achievement-wood-base, .notifyjs-achievement-stone-base, .notifyjs-achievement-silver-base,
.notifyjs-achievement-gold-base, .notifyjs-achievement-diamond-base
  padding: 20px 0px
  cursor: default

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

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

    .achievement-content
      position: relative
      width: 450px
      height: 160px
      padding: 24px 30px 20px 60px

      .achievement-title
        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
          position: absolute
          left: -15px
          margin-top: -3px
          box-shadow: 0 0 0 2px black, 0 0 0 4px lightgrey, 0 0 0 6px black

        > .progress-bar-wrapper
          position: absolute
          margin-left: 12px
          width: 319px
          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

.notifyjs-achievement-wood-base, .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

.notifyjs-achievement-stone-base, .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

.notifyjs-achievement-silver-base, .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

.notifyjs-achievement-gold-base, .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

.notifyjs-achievement-diamond-base, .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

.exp-bar-accumulated
  background-color: #680080

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

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

.user-level
  z-index: 1000
  box-shadow: 0 0 0 1px black, 0 0 0 3px lightgrey, 0 0 0 4px black
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif

// Achievements page
h2.achievements-category
  margin-left: 20px

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