BattleSim/client/app/css/battle.styl

546 lines
11 KiB
Stylus
Raw Normal View History

2016-02-01 22:19:30 +00:00
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
2016-05-17 22:57:12 +00:00
background-image url("../Sprites/battle/backgrounds/battle_bg.png")
2016-05-22 15:17:19 +00:00
background-size cover
2016-02-01 22:19:30 +00:00
&.battle_bg_1
2016-05-17 22:57:12 +00:00
background-image url("../Sprites/battle/backgrounds/battle_bg_1.png")
2016-05-22 15:17:19 +00:00
background-size cover
2016-02-01 22:19:30 +00:00
&.battle_bg_2
2016-05-17 22:57:12 +00:00
background-image url("../Sprites/battle/backgrounds/battle_bg_2.png")
2016-05-22 15:17:19 +00:00
background-size cover
2016-02-01 22:19:30 +00:00
&.battle_bg_3
2016-05-17 22:57:12 +00:00
background-image url("../Sprites/battle/backgrounds/battle_bg_3.png")
2016-05-22 15:17:19 +00:00
background-size cover
2016-02-01 22:19:30 +00:00
&.battle_bg_4
2016-05-17 22:57:12 +00:00
background-image url("../Sprites/battle/backgrounds/battle_bg_4.png")
2016-05-22 15:17:19 +00:00
background-size cover
2016-02-01 22:19:30 +00:00
&.battle_bg_5
2016-05-17 22:57:12 +00:00
background-image url("../Sprites/battle/backgrounds/battle_bg_5.png")
2016-05-22 15:17:19 +00:00
background-size cover
2016-02-01 22:19:30 +00:00
.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
2016-02-01 22:19:30 +00:00
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