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("//91.121.152.74:8000/Sprites/battle/backgrounds/battle_bg.png") &.battle_bg_1 background-image url("//91.121.152.74:8000/Sprites/battle/backgrounds/battle_bg_1.png") &.battle_bg_2 background-image url("//91.121.152.74:8000/Sprites/battle/backgrounds/battle_bg_2.png") &.battle_bg_3 background-image url("//91.121.152.74:8000/Sprites/battle/backgrounds/battle_bg_3.png") &.battle_bg_4 background-image url("//91.121.152.74:8000/Sprites/battle/backgrounds/battle_bg_4.png") &.battle_bg_5 background-image url("//91.121.152.74:8000/Sprites/battle/backgrounds/battle_bg_5.png") .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