BattleSim/client/app/css/battle.styl

outline-text(clr = #000)
  text-shadow 0 1px 0 clr, 0 -1px 0 clr,
              -1px 0 0 clr, 1px 0 0 clr

divide(a, b)
  a / b

create-projectile(clr)
  trans-clr = rgba(black, 0)
  background radial-gradient(ellipse at center, lighten(clr, 50%) 0%, clr 50%, trans-clr 51%, trans-clr 100%)

$padding = 10px
$battle-width = 600px
$battle-height = 300px
$pane-width = $battle-width + $padding + $padding
$screen-width = 400px
$side-width = ($battle-width - $screen-width) / 2

.battle_window
  .chat
    left $pane-width

.battle
  position absolute
  top 0
  left 0
  bottom 0
  width $pane-width
  box-sizing border-box
  padding $padding
  h2
    font-size      0.6875em
    text-transform uppercase
    letter-spacing 1px
    border-bottom  1px solid rgba(0, 0, 0, .10)
    line-height normal
  .battle_container
    position relative
    width $battle-width
    height $battle-height
    narrow-font()
    &.battle_bg_0
      background-image url("../Sprites/battle/backgrounds/battle_bg.png")
      background-size cover
    &.battle_bg_1
      background-image url("../Sprites/battle/backgrounds/battle_bg_1.png")
      background-size cover
    &.battle_bg_2
      background-image url("../Sprites/battle/backgrounds/battle_bg_2.png")
      background-size cover
    &.battle_bg_3
      background-image url("../Sprites/battle/backgrounds/battle_bg_3.png")
      background-size cover
    &.battle_bg_4
      background-image url("../Sprites/battle/backgrounds/battle_bg_4.png")
      background-size cover
    &.battle_bg_5
      background-image url("../Sprites/battle/backgrounds/battle_bg_5.png")
      background-size cover
  .battle_user_info
    .pokemon_icons
      margin 0 auto
      width 80px
      .icon_wrapper
        width 40px
        float left
        &:nth-child(even)
          position relative
          top 6px
    .fill-left, .fill-right
      width $side-width
    .left
      bottom 20px
      left 0
    .right
      top 20px
      right 0
    .left, .right
      position absolute
      width $side-width
      color #fff
      text-align center
      outline-text()
      font-size 13px
      .icon_wrapper
        position relative
        &:hover
          border-radius 5px
          background-color rgba(187, 184, 248, .5)
        .pokemon_hp_background
          position absolute
          right 6px
          bottom 2px
          width 4px
          height 3px
          border 1px solid rgba(32, 32, 32, .4)
          background rgba(32, 32, 32, .4)
          pointer-events none
        .pokemon_hp
          absolute bottom left
          right 0
          &.green
            background #0f0
          &.yellow
            background #ff0
          &.red
            background #f00

  .battle-timer
    font-size 2em
    &.battle-timer-low
      color #f33
    &.battle-timer-small
      font-size 1em
      &:before
        content: '('
      &:after
        content: ')'

  .battle_overlays
    position absolute
    top 0
    left 0
    right 0
    bottom 0
    pointer-events none
    overflow hidden
    .battle_overlay
      position absolute
      top 0
      left 0
      right 0
      bottom 0
      &.weather
        &.rain
          background rgba(0, 48, 196, .3)
        &.hail
          background rgba(128, 255, 255, .3)
        &.sand
          background linear-gradient(top, rgba(128, 64, 0, .3), rgba(64, 32, 48, .5))
        &.sun
          opacity 0.6!important
          background rgba(255, 196, 64, .3)

  .battle_pane
    position      absolute
    width         $screen-width
    height        $battle-height
    top           0
    left          $side-width
    .pokemon
      &.bottom
        .pokemon-info
          bottom      35%
          left        200px
        .sprite
          &.fade
            position absolute
            left     -20px
            opacity  .3
      &.top
        .pokemon-info
          top         20%
          right       238px
        .sprite
          &.fade
            position absolute
            left     20px
            opacity  .3

    .pokemon-info
      position      absolute
      width         144px
      height        6px
      border        1px solid #fff
      border-radius 2px
      box-shadow    0 0 0 1px #000
      background    rgba(0, 8, 32, .5)
      .hp, .hp-gradient
        position absolute
        top 0
        left 0
        bottom 0
        width       100%
        transition  width .4s cubic-bezier(0, 1, .5, 1)
      .hp-gradient
        background linear-gradient(top, transparent 40%, rgba(0,32,64,0.3) 60%)
      .hp
        background  #0f0
      .hp-text
        position absolute
        top -1px
        bottom @top
        left 100%
        background #333
        color #fff
        font-size 8px
        line-height @font-size
        padding 0 4px
        border-radius 0 2px 2px 0
        box-shadow 0 0 0 1px #222
        font-family Verdana, sans-serif
      .pokemon-meta
        position absolute
        left 0
        bottom 100%
        color #fff
        pointer-events visible
        outline-text()
      .pokemon-name
        font-weight 700
        color #fff
      .pokemon-level, .gender
        font-size 75%
      .pokemon-level-text
        color #EFA532
      .pokemon-effects
        position absolute
        top 9px
        color #fff
        normal-font()
        .pokemon-effect
          font-size .625em
          float left
          border-radius 3px
          background #333
          color #fff
          padding 0 4px
          border 1px solid rgba(0, 0, 0, .5)
          &.sleep
            background #535
          &.burn
            background #c33
          &.freeze
            background #38b
          &.paralyze
            background #b93
          &.poison, &.toxic
            background #b3b
          &.boost
            background #5a3
            &.negative
              background #a53
    .sprite
      position absolute
      top 0
      left 0
      pointer-events visible
      transition left 1s ease
      img
        position absolute
        max-width none
  .pokemon
    position absolute
    width 100%
    height 100%
    top 0
    left 0
    pointer-events none
    overflow hidden

  .pokeball
    position absolute
    background url("//media.pokebattle.com/img/battle/pokeballs.gif") -133px -10px
    transition opacity .25s ease-in

  .percentage
    font-family "Helvetica Neue", sans-serif
    font-weight 700
    padding 4px
    border-radius 3px
    background #4e4
    transition left 5s linear
    color #fff
    border 1px solid rgba(0, 0, 0, .3)
    box-shadow 2px 2px 2px rgba(0, 0, 0, .3)
    &.red
      background #e44

  .team-stealth-rock
    position absolute
    background url("//media.pokebattle.com/img/battle/stealth_rock.png")
    width 28px
    height 35px
    pointer-events none

  .team-toxic-spikes
    position absolute
    background url("//media.pokebattle.com/img/battle/toxic_spikes.png")
    width 21px
    height 21px
    pointer-events none

  .team-spikes
    position absolute
    background url("//media.pokebattle.com/img/battle/spikes.png")
    width 21px
    height 21px
    pointer-events none

  .team-sticky-web
    position absolute
    background url("//media.pokebattle.com/img/battle/sticky_web.png")
    width 150px
    height 151px
    pointer-events none

  .team-screen
    position absolute
    opacity .5
    width 1px
    height @width
    pointer-events none
    &.rounded
      border-radius 100%
    for $pair in ('blue' $water) ('yellow' $electric) ('pink' $fairy)
      &.{$pair[0]}
        border 1px solid darken($pair[1], 20%)
        background-color $pair[1]

  .projectile
    position absolute
    width 64px
    height @width
    pointer-events none
    for $array in $types
      &.{$array[0]}
        create-projectile($array[1])

  .battle_summary
    position absolute
    bottom 0
    left $side-width
    right @left
    background rgba(black, .5)
    color white
    display none
    text-shadow none
    padding 4px 10px
    font-size .875em
    p
      margin 0
      font-size .8125em
      &.big
        font-size 1em
        margin-top 4px
        &:first-child
          margin-top 0

  .ability_activation
    position absolute
    width 150px
    background rgba(black, .5)
    text-align center
    opacity 0
    color white
    outline-text()
    pointer-events none
    $radius = 4px
    strong
      font-size 1.2em
      display block
    &.front
      border-radius $radius 0 0 $radius
      top 64px
      right 0
    &.back
      border-radius 0 $radius $radius 0
      bottom 64px
      left 0

.moves
  .button
    display block
    float none
    margin 0 0 5px
    &.hidden
      display none

.switches
  .button
    display block
    float none
    &.disabled
      .pokemon_icon
        opacity .5
    .pokemon_icon
      display block

.mega-evolve
  text-align center
  font-size .8em

.gender
  &.gender_female
    color #EA597A
  &.gender_male
    color #62CBB0

.team_icons
  width 6 * 40px

.pokemon_icon
  position    relative
  width       32px
  height      32px
  display     inline-block
  margin      0 auto
  background url("//media.pokebattle.com/img/pokemon_icons_40px.png") top left
  vertical-align middle
  &.fainted
    opacity 0.5

.battle_teams
  position absolute
  left $side-width
  right $side-width
  text-align center
  margin 0 auto
  width 300px
  normal-font()
  li
    position relative
  .gender
    position absolute
    top 0
    right 2px
    font-size .75em
    text-shadow 0 1px 0 #333
  .level
    position absolute
    bottom 0
    right 2px
    font-size .75em
    line-height @font-size
    outline-text(#fff)
    narrow-font()

.battle_team_preview
  background #eee
  padding 10px
  border-radius 4px
  margin 10px 0
  border 1px solid #aaa

  .px_40, .sortable-placeholder
    width 40px
    margin 0 2px
    padding-left 0
    padding-right 0
    float left

  .submit_arrangement
    margin 10px 0 0

  .team_pokemon
    position relative
    width 40px
    height 32px
    margin 0 auto

  .arrange_team
    user-select none
    li
      cursor pointer
      border-radius 4px
      &.img-polaroid.active
        background-color #ccc

  .lead_text
    font-size .8125em
    min-height 0

  .pokemon_icon
    top 0
    left 0

  .sortable-placeholder
    border 1px dashed #ccc
    background none
    height 40px

  .unstyled
    margin 0

.well-battle-actions
  font-size 1.5em
  height 3em
  line-height @height
  text-align center

.save-log
  display block
  text-align center

.drop
  background linear-gradient(top, rgba($water, .7), rgba(255, 255, 255, 0.3))
  width 1px
  height 89px
  position absolute
  top 0
  transform rotate(-20deg)
  animation fall .63s linear infinite

@keyframes fall
  to
    margin-top 2 * $battle-height
    margin-left 2 * $battle-height * .36

.ray
  position absolute
  background rgba(230, 192, 70, .5)
  width ($battle-width / 10)
  height 100%
  transition all 1000ms ease
  transform rotate(360deg) skewX(30deg)
  animation fade-in-out 3s ease infinite

@keyframes fade-in-out
  0%, 100%
    opacity 0
  50%
    opacity .3

.sand_overlay
  absolute top left
  background url("//media.pokebattle.com/img/battle/weather_sand.png")
  width 600px
  height 600px
  opacity .5
  animation sandstorm .75s linear infinite

@keyframes sandstorm
  0%
    transform translate(0, 0)
  100%
    transform translate(200%, 100%)

.hailstone
  position absolute
  border-radius 4px
  width 10px
  height @width
  background rgba(230, 200, 255, .5)
  animation fall .4s linear infinite