539 lines
11 KiB
Stylus
539 lines
11 KiB
Stylus
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
|
|
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
|