mirror of
https://gitlab.com/Deukhoofd/BattleSim.git
synced 2025-10-28 10:10:04 +00:00
Lots of stuff
This commit is contained in:
Deukhoofd
538
client/app/css/battle.styl
Normal file
538
client/app/css/battle.styl
Normal file
@@ -0,0 +1,538 @@
|
||||
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
|
||||
59
client/app/css/battle_list.styl
Normal file
59
client/app/css/battle_list.styl
Normal file
@@ -0,0 +1,59 @@
|
||||
.battle-list
|
||||
position absolute
|
||||
top 0
|
||||
bottom 0
|
||||
left 0
|
||||
right 0
|
||||
overflow auto
|
||||
|
||||
h2
|
||||
display block
|
||||
margin-left 10px
|
||||
|
||||
.battle-list-collection
|
||||
padding-right 10px
|
||||
|
||||
.empty
|
||||
margin-left 10px
|
||||
|
||||
.battle-list-item-wrapper
|
||||
float left
|
||||
width 100%
|
||||
padding-left 10px
|
||||
padding-bottom 10px
|
||||
box-sizing border-box
|
||||
|
||||
.battle-list-item
|
||||
cursor pointer
|
||||
border 1px solid #DDD
|
||||
background #F5F5F5
|
||||
box-shadow 1px 2px 0 rgba(0, 0, 0, 0.2)
|
||||
padding 10px
|
||||
|
||||
&:hover
|
||||
background: #FFF
|
||||
|
||||
.vs
|
||||
font-weight bold
|
||||
margin 0 5px
|
||||
|
||||
// Normally, our media queries use max-width to scale down, but for this page we want to scale up
|
||||
@media screen and (min-width: 1000px)
|
||||
.battle-list-item-wrapper
|
||||
width 50%
|
||||
|
||||
@media screen and (min-width: 1400px)
|
||||
.battle-list-item-wrapper
|
||||
width 33%
|
||||
|
||||
@media screen and (min-width: 1800px)
|
||||
.battle-list-item-wrapper
|
||||
width 25%
|
||||
|
||||
@media screen and (min-width: 2200px)
|
||||
.battle-list-item-wrapper
|
||||
width 20%
|
||||
|
||||
@media screen and (min-width: 2600px)
|
||||
.battle-list-item-wrapper
|
||||
width 16.6%
|
||||
100
client/app/css/buttons.styl
Normal file
100
client/app/css/buttons.styl
Normal file
@@ -0,0 +1,100 @@
|
||||
button-bg(clr)
|
||||
clr = lighten(clr, 50%)
|
||||
light = lighten(clr, 30%)
|
||||
dark-clr = darken(clr, 20%)
|
||||
darker-clr = darken(clr, 50%)
|
||||
darkest-clr = darken(darker-clr, 20%)
|
||||
btn-clr = darken(darkest-clr, 30%)
|
||||
background linear-gradient(top, clr, dark-clr)
|
||||
border 1px solid darker-clr
|
||||
border-top-color rgba(0, 0, 0, .1)
|
||||
border-left-color rgba(0, 0, 0, .2)
|
||||
border-right-color @border-left-color
|
||||
border-bottom-color rgba(0, 0, 0, .3)
|
||||
color btn-clr
|
||||
&:hover
|
||||
background linear-gradient(top, light, clr)
|
||||
color lighten(btn-clr, 20%)
|
||||
text-shadow 0 -1px 0 rgba(255, 255, 255, .10)
|
||||
&:active, &.pressed
|
||||
color darken(btn-clr, 50%)
|
||||
text-shadow none
|
||||
border-color darkest-clr
|
||||
&.pressed
|
||||
background darker-clr
|
||||
&:active
|
||||
background darkest-clr
|
||||
|
||||
.button
|
||||
clearfix()
|
||||
button-bg(#eee)
|
||||
display inline-block
|
||||
height 32px
|
||||
line-height @height
|
||||
border-radius 4px
|
||||
margin-bottom 6px
|
||||
padding 0 10px
|
||||
cursor pointer
|
||||
color #333
|
||||
text-shadow 0 -1px 0 rgba(255, 255, 255, .25)
|
||||
box-shadow inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.25)
|
||||
position relative
|
||||
&.block
|
||||
display block
|
||||
&:hover
|
||||
box-shadow inset 0 1px 0 rgba(255,255,255,.125), 0 1px 2px rgba(0,0,0,.125)
|
||||
.main_text
|
||||
narrow-font()
|
||||
font-weight 700
|
||||
float left
|
||||
.meta_info
|
||||
font-size 12px
|
||||
float right
|
||||
font-family "Helvetica Neue", sans-serif
|
||||
&.big
|
||||
font-size 1.5em
|
||||
height 3em
|
||||
line-height @height
|
||||
text-align center
|
||||
.main_text
|
||||
float none
|
||||
.meta_info
|
||||
position absolute
|
||||
top 0
|
||||
right 1em
|
||||
&.button_blue
|
||||
background linear-gradient(top, #0066cc, #0044cc)
|
||||
text-shadow 0 -1px rgba(0, 0, 0, .3)
|
||||
color #fff
|
||||
&:hover
|
||||
background linear-gradient(top, #0088cc, #0066cc)
|
||||
&.button_red
|
||||
background linear-gradient(top, #cc6600, #cc4400)
|
||||
text-shadow 0 -1px rgba(0, 0, 0, .3)
|
||||
color #fff
|
||||
&:hover
|
||||
background linear-gradient(top, #cc8800, #cc6600)
|
||||
for $array in $types
|
||||
&.{$array[0]}
|
||||
button-bg($array[1])
|
||||
&.disabled, &.disabled:hover
|
||||
background #333
|
||||
border-color #000
|
||||
cursor default
|
||||
color #666
|
||||
text-shadow none
|
||||
box-shadow none
|
||||
|
||||
.hover_info_moves
|
||||
.hover_info
|
||||
width 196px
|
||||
display block
|
||||
margin 0
|
||||
&:first-child
|
||||
border-radius 4px 4px 0 0
|
||||
&:last-child
|
||||
border-radius 0 0 4px 4px
|
||||
border-top none
|
||||
&:not(:first-child):not(:last-child)
|
||||
border-radius 0
|
||||
border-top none
|
||||
100
client/app/css/chat.styl
Normal file
100
client/app/css/chat.styl
Normal file
@@ -0,0 +1,100 @@
|
||||
.chat_window .chat
|
||||
left 350px
|
||||
|
||||
.chat
|
||||
position absolute
|
||||
top 0
|
||||
right 0
|
||||
bottom 0
|
||||
&.without_spectators
|
||||
.message_pane
|
||||
right 0
|
||||
.user_list
|
||||
display none
|
||||
&.without_chat_input
|
||||
.messages
|
||||
bottom 0
|
||||
.chat_input_pane
|
||||
display none
|
||||
|
||||
.user_list
|
||||
position absolute
|
||||
top 0
|
||||
right 0
|
||||
bottom 0
|
||||
width 25%
|
||||
overflow-y auto
|
||||
p
|
||||
padding 2px 6px
|
||||
margin 0
|
||||
ul
|
||||
margin 0
|
||||
padding 0
|
||||
list-style none
|
||||
li
|
||||
padding 2px 6px
|
||||
&:hover
|
||||
background #fb7
|
||||
|
||||
.message_pane
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
right 25%
|
||||
bottom 0
|
||||
box-shadow 0 0 5px rgba(0, 8, 16, .2)
|
||||
|
||||
.messages
|
||||
overflow-y auto
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
right 0
|
||||
bottom 30px
|
||||
border-left 1px solid rgba(0, 0, 0, .2)
|
||||
border-right @border-left
|
||||
background white
|
||||
word-wrap break-word
|
||||
h2, h3, p
|
||||
padding 0 16px 2px
|
||||
p
|
||||
font-size .875em
|
||||
text-rendering optimizeLegibility
|
||||
&.move_message
|
||||
font-size 1em
|
||||
margin-top 10px
|
||||
|
||||
a.pokemon-link
|
||||
color inherit
|
||||
|
||||
.alert
|
||||
margin 0.75em 16px
|
||||
|
||||
.chat_input_pane
|
||||
position absolute
|
||||
width 100%
|
||||
bottom 0
|
||||
height 30px
|
||||
|
||||
.chat_input_wrapper
|
||||
overflow: hidden // Make it take the remainder of the space not used by the button
|
||||
|
||||
.chat_input
|
||||
box-sizing border-box
|
||||
border 2px solid #384035
|
||||
padding 2px 6px
|
||||
margin 0
|
||||
width 100%
|
||||
height 30px
|
||||
border-radius 2px
|
||||
&:hover
|
||||
border-color #5D736B
|
||||
&:focus
|
||||
border-color #F27405
|
||||
outline none
|
||||
|
||||
.chat_input_send
|
||||
box-sizing border-box
|
||||
float right
|
||||
margin 0
|
||||
height 30px
|
||||
54
client/app/css/colors.styl
Normal file
54
client/app/css/colors.styl
Normal file
@@ -0,0 +1,54 @@
|
||||
$body-color = rgba(223, 231, 232, .5)
|
||||
$background-color = #f3f3f3
|
||||
$positive-color = #38AB46
|
||||
$negative-color = #DC4E48
|
||||
|
||||
$off-white = #f5f5f5
|
||||
$grey = #999
|
||||
$yellow = #b92
|
||||
|
||||
$normal = #A9A57A
|
||||
$fire = #E28544
|
||||
$water = #6A97ED
|
||||
$electric = #F0C944
|
||||
$grass = #8FC052
|
||||
$ice = #A2CFD0
|
||||
$fighting = #B04137
|
||||
$poison = #9253A0
|
||||
$ground = #DCBE6F
|
||||
$flying = #A09AEE
|
||||
$psychic = #E0698B
|
||||
$bug = #AEB22D
|
||||
$rock = #B69D42
|
||||
$ghost = #6A5F97
|
||||
$dragon = #5C59F1
|
||||
$dark = #685447
|
||||
$steel = #B7BACF
|
||||
$fairy = #F7B5F7
|
||||
|
||||
$types = ('normal' $normal) ('fire' $fire) ('water' $water) ('electric' $electric) ('grass' $grass) ('ice' $ice) ('fighting' $fighting) ('poison' $poison) ('ground' $ground) ('flying' $flying) ('psychic' $psychic) ('bug' $bug) ('rock' $rock) ('ghost' $ghost) ('dragon' $dragon) ('dark' $dark) ('steel' $steel) ('fairy' $fairy)
|
||||
|
||||
.bg-blue
|
||||
background-color lighten($ice, 50%)
|
||||
|
||||
.bg-faded-white
|
||||
background rgba(white, .5)
|
||||
|
||||
.bg-off-white
|
||||
background $off-white
|
||||
|
||||
.hover-bg-white
|
||||
&:hover
|
||||
background white
|
||||
|
||||
.bg-faded-blue
|
||||
background rgba(0, 20, 64, .5)
|
||||
|
||||
.red
|
||||
color $negative-color
|
||||
|
||||
.yellow
|
||||
color $yellow
|
||||
|
||||
.grey
|
||||
color $grey
|
||||
131
client/app/css/core.styl
Normal file
131
client/app/css/core.styl
Normal file
@@ -0,0 +1,131 @@
|
||||
narrow-font()
|
||||
font-family "PT Sans Narrow", "Helvetica Neue", sans-serif
|
||||
|
||||
normal-font()
|
||||
font-family 'proxima-nova', 'Helvetica Neue', Calibri, 'Droid Sans', Helvetica, Arial, sans-serif
|
||||
|
||||
$body_wrapper = 30px
|
||||
$nav_size = 150px
|
||||
$header_size = 52px
|
||||
|
||||
html, body
|
||||
color #333332
|
||||
padding 0
|
||||
margin 0
|
||||
font-size 100%
|
||||
normal-font()
|
||||
background $background-color url("//media.pokebattle.com/img/bg.png")
|
||||
line-height normal
|
||||
|
||||
ul, ol
|
||||
list-style none
|
||||
|
||||
ul, ol, p
|
||||
margin 0
|
||||
padding 0
|
||||
|
||||
#content
|
||||
position absolute
|
||||
top 0
|
||||
left $nav_size
|
||||
right 0
|
||||
bottom 0
|
||||
box-shadow 0 0 10px #000
|
||||
|
||||
.no-sidebar
|
||||
#content
|
||||
left 0
|
||||
#navigation
|
||||
display none
|
||||
|
||||
#main-section
|
||||
position absolute
|
||||
top $header_size
|
||||
left 0
|
||||
right 0
|
||||
bottom 0
|
||||
|
||||
.window
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
right 0
|
||||
bottom 0
|
||||
|
||||
a, .fake_link
|
||||
color #F27405
|
||||
text-decoration none
|
||||
cursor pointer
|
||||
&:hover
|
||||
color #BD4F00
|
||||
|
||||
.nav
|
||||
clearfix()
|
||||
list-style none
|
||||
padding 0
|
||||
margin 0
|
||||
li
|
||||
float left
|
||||
border-radius 4px 4px 0 0
|
||||
margin-left 2px
|
||||
margin-right @margin-left
|
||||
&:hover
|
||||
background-color #d9d7d7
|
||||
&.active
|
||||
border 1px solid #d9d7d7
|
||||
border-bottom none
|
||||
background white
|
||||
a, .fake_link, &.fake_link
|
||||
color #333
|
||||
text-decoration none
|
||||
cursor default
|
||||
a, .fake_link
|
||||
padding 5px 15px
|
||||
|
||||
.popup-absolute
|
||||
position absolute
|
||||
top 20px
|
||||
left 10px
|
||||
right @left
|
||||
text-align center
|
||||
z-index 100
|
||||
|
||||
.popover
|
||||
normal-font()
|
||||
.popover-title
|
||||
font-size 16px
|
||||
.popover-content
|
||||
font-size 14px
|
||||
|
||||
.loading-container
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
right 0
|
||||
bottom 0
|
||||
background rgba(0, 0, 0, .7)
|
||||
color white
|
||||
font-size 4em
|
||||
text-align center
|
||||
z-index 99
|
||||
display table
|
||||
width 100%
|
||||
height 100%
|
||||
|
||||
.loading-message
|
||||
display table-cell
|
||||
vertical-align middle
|
||||
|
||||
.team-pbv
|
||||
font-size 0.75em
|
||||
|
||||
// Typography
|
||||
|
||||
.monospace
|
||||
font-family "Monaco", monospace
|
||||
|
||||
abbr
|
||||
border-bottom 1px dotted #333
|
||||
|
||||
.italic
|
||||
font-style italic
|
||||
103
client/app/css/header.styl
Normal file
103
client/app/css/header.styl
Normal file
@@ -0,0 +1,103 @@
|
||||
$header_size = 52px
|
||||
|
||||
#header
|
||||
height $header_size
|
||||
line-height @height
|
||||
width 100%
|
||||
background #38342B
|
||||
z-index 10
|
||||
position absolute
|
||||
ul
|
||||
margin 0
|
||||
|
||||
.icon
|
||||
position relative
|
||||
top 3px
|
||||
font-size 20px
|
||||
|
||||
#main-nav
|
||||
padding 0 18px
|
||||
|
||||
#main-nav, #header li
|
||||
line-height 42px
|
||||
|
||||
#logo
|
||||
float left
|
||||
width 120px
|
||||
margin-right 15px
|
||||
|
||||
#logo img
|
||||
position relative
|
||||
z-index: 100
|
||||
top 3px
|
||||
|
||||
#sections
|
||||
margin-left 30px
|
||||
margin-right 120px
|
||||
visibility visible
|
||||
|
||||
#leftmenu
|
||||
display none
|
||||
|
||||
#leftmenu a
|
||||
color #fff
|
||||
padding 5px
|
||||
margin-left 15px
|
||||
&:hover
|
||||
border-radius 5px
|
||||
background #D94E47
|
||||
text-decoration none
|
||||
|
||||
#rightmenu {
|
||||
margin-left: -40px;
|
||||
}
|
||||
nav ul {
|
||||
list-style: none;
|
||||
font-size: .95em;
|
||||
}
|
||||
nav li {
|
||||
display: block;
|
||||
float: left;
|
||||
text-align: left;
|
||||
}
|
||||
nav a {
|
||||
display: block;
|
||||
padding-left: .75em;
|
||||
padding-right: .75em;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav a:hover, nav li:hover {
|
||||
background: #D94E47;
|
||||
color: #6C2724;
|
||||
text-decoration none
|
||||
}
|
||||
|
||||
#sub-nav {
|
||||
height: 10px;
|
||||
background: #D94E47;
|
||||
z-index: 6;
|
||||
position absolute
|
||||
bottom 0
|
||||
left 0
|
||||
right @left
|
||||
}
|
||||
|
||||
@keyframes anim-rotate {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.spinner-anim {
|
||||
display: inline-block;
|
||||
animation: anim-rotate 1s infinite linear;
|
||||
}
|
||||
|
||||
.spinner-anim.hidden {
|
||||
display: none;
|
||||
}
|
||||
105
client/app/css/layout.styl
Normal file
105
client/app/css/layout.styl
Normal file
@@ -0,0 +1,105 @@
|
||||
for $i in (1 2 3)
|
||||
.z{$i}
|
||||
z-index $i
|
||||
|
||||
for $i in (1 2 3 4)
|
||||
.m{$i}
|
||||
margin $i * 10px
|
||||
.p{$i}
|
||||
padding $i * 10px
|
||||
|
||||
for $i in (1 2 3 4)
|
||||
// margin
|
||||
.ml{$i}
|
||||
margin-left $i * 10px
|
||||
.mr{$i}
|
||||
margin-right $i * 10px
|
||||
.mt{$i}
|
||||
margin-top $i * 10px
|
||||
.mb{$i}
|
||||
margin-bottom $i * 10px
|
||||
// padding
|
||||
.pl{$i}
|
||||
padding-left $i * 10px
|
||||
.pr{$i}
|
||||
padding-right $i * 10px
|
||||
.pt{$i}
|
||||
padding-top $i * 10px
|
||||
.pb{$i}
|
||||
padding-bottom $i * 10px
|
||||
|
||||
.mt-header
|
||||
margin-top $header_size
|
||||
|
||||
.left
|
||||
float left
|
||||
|
||||
.right
|
||||
float right
|
||||
|
||||
.center
|
||||
text-align center
|
||||
|
||||
.align-left
|
||||
text-align left
|
||||
|
||||
.align-right
|
||||
text-align right
|
||||
|
||||
.flex-center
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center
|
||||
|
||||
.flex-column
|
||||
flex-direction column
|
||||
|
||||
.hidden
|
||||
display none
|
||||
|
||||
.absolute
|
||||
position absolute
|
||||
|
||||
.fill
|
||||
absolute top left
|
||||
bottom 0
|
||||
right 0
|
||||
|
||||
.fill-left
|
||||
absolute top left
|
||||
bottom 0
|
||||
|
||||
.fill-right
|
||||
absolute top right
|
||||
bottom 0
|
||||
|
||||
.relative
|
||||
position relative
|
||||
|
||||
.rounded
|
||||
border-radius 3px
|
||||
|
||||
.border
|
||||
border 1px solid #ddd
|
||||
|
||||
.block
|
||||
display block
|
||||
|
||||
.inline-block
|
||||
display inline-block
|
||||
|
||||
.inline
|
||||
display inline
|
||||
|
||||
.box-shadow
|
||||
box-shadow 1px 2px 0 rgba(0, 0, 0, .2)
|
||||
|
||||
.tiny-type
|
||||
font-size .75em
|
||||
|
||||
.clickable-box
|
||||
@extend .border
|
||||
@extend .bg-off-white
|
||||
@extend .hover-bg-white
|
||||
@extend .rounded
|
||||
@extend .box-shadow
|
||||
15
client/app/css/main.styl
Normal file
15
client/app/css/main.styl
Normal file
@@ -0,0 +1,15 @@
|
||||
@import 'nib'
|
||||
@import 'colors'
|
||||
@import 'core'
|
||||
@import 'layout'
|
||||
@import 'header'
|
||||
@import 'buttons'
|
||||
@import 'navigation'
|
||||
@import 'chat'
|
||||
@import 'main_buttons'
|
||||
@import 'battle'
|
||||
@import 'teambuilder'
|
||||
@import 'battle_list'
|
||||
@import 'messages'
|
||||
@import 'miscellaneous'
|
||||
@import 'responsive'
|
||||
34
client/app/css/main_buttons.styl
Normal file
34
client/app/css/main_buttons.styl
Normal file
@@ -0,0 +1,34 @@
|
||||
.main_buttons
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
bottom 0
|
||||
box-sizing border-box
|
||||
padding 30px 30px 0 30px
|
||||
width 350px
|
||||
overflow auto
|
||||
|
||||
.button
|
||||
display block
|
||||
float none
|
||||
text-align center
|
||||
margin 0 auto
|
||||
|
||||
p
|
||||
margin 1em 0 0 0
|
||||
|
||||
.section
|
||||
width 100%
|
||||
box-sizing border-box
|
||||
background rgba(64, 64, 64, .15)
|
||||
margin-bottom 15px
|
||||
padding 8px
|
||||
border-radius 8px
|
||||
|
||||
.select-team
|
||||
.team-pbv
|
||||
margin-top -2px
|
||||
|
||||
.no-alt-label
|
||||
margin-left 5px
|
||||
color #aaa
|
||||
110
client/app/css/messages.styl
Normal file
110
client/app/css/messages.styl
Normal file
@@ -0,0 +1,110 @@
|
||||
#messages
|
||||
position absolute
|
||||
bottom 0
|
||||
right 0
|
||||
width 100%
|
||||
font-size .875em
|
||||
|
||||
.popup
|
||||
position fixed
|
||||
bottom 0
|
||||
float right
|
||||
width 270px
|
||||
margin-left 10px
|
||||
box-shadow 0 2px 6px rgba(0, 0, 0, .2)
|
||||
|
||||
&.new_message
|
||||
.title
|
||||
background #d94e47
|
||||
|
||||
.popup_messages
|
||||
background white
|
||||
height 270px
|
||||
border-bottom 1px solid #ccc
|
||||
border-left 1px solid #ccc
|
||||
border-right @border-left
|
||||
overflow-y scroll
|
||||
line-height 1.3em
|
||||
|
||||
&.small
|
||||
height 150px
|
||||
|
||||
p
|
||||
margin 0 6px
|
||||
overflow hidden
|
||||
word-wrap break-word
|
||||
|
||||
.popup_menu
|
||||
background linear-gradient(top, #f0f0f0, #eee)
|
||||
border-left 1px solid #ccc
|
||||
border-right @border-left
|
||||
border-bottom @border-left
|
||||
|
||||
.popup_menu_button
|
||||
border-right 1px solid #ddd
|
||||
float left
|
||||
padding 8px
|
||||
cursor pointer
|
||||
&:hover
|
||||
background #ddd
|
||||
|
||||
.chat_input_pane
|
||||
position relative
|
||||
background #eee
|
||||
height 36px
|
||||
|
||||
.chat_input_wrapper
|
||||
padding 3px
|
||||
border-left 1px solid #ccc
|
||||
border-right @border-left
|
||||
|
||||
.title
|
||||
background #333
|
||||
border-radius 3px 3px 0 0
|
||||
padding 8px 0 8px 12px
|
||||
color white
|
||||
|
||||
&.new
|
||||
background #d94e47
|
||||
|
||||
.title_buttons
|
||||
position absolute
|
||||
top 0
|
||||
right 2px
|
||||
|
||||
.title_button
|
||||
display inline-block
|
||||
cursor pointer
|
||||
padding 5px
|
||||
margin 4px
|
||||
&:hover
|
||||
background #706666
|
||||
|
||||
.icon-minus
|
||||
position relative
|
||||
top 4px
|
||||
|
||||
.challenge
|
||||
background #f0f0f0
|
||||
border-right 1px solid #ccc
|
||||
border-left @border-right
|
||||
border-bottom @border-right
|
||||
transition bottom .25s ease-out
|
||||
|
||||
.challenge_data
|
||||
padding 8px
|
||||
|
||||
.challenge_clauses
|
||||
height 50px
|
||||
overflow-y auto
|
||||
|
||||
p
|
||||
margin 1em 0 0
|
||||
&:first-child
|
||||
margin-top 0
|
||||
|
||||
.challenge_buttons
|
||||
padding 8px
|
||||
border-top 1px solid #ccc
|
||||
.button
|
||||
margin-right 8px
|
||||
93
client/app/css/miscellaneous.styl
Normal file
93
client/app/css/miscellaneous.styl
Normal file
@@ -0,0 +1,93 @@
|
||||
.clearfix:before, .clearfix:after
|
||||
content ""
|
||||
display table
|
||||
line-height 0
|
||||
|
||||
.clearfix:after
|
||||
clear both
|
||||
|
||||
::selection
|
||||
background #F27405
|
||||
|
||||
.select
|
||||
cursor pointer
|
||||
border 1px solid #aaa
|
||||
border-radius 3px
|
||||
background #f0f0f0
|
||||
padding 10px
|
||||
&:hover
|
||||
background #fff
|
||||
border-color #bbb
|
||||
|
||||
&.disabled
|
||||
background #ccc
|
||||
cursor auto
|
||||
|
||||
.alt-input
|
||||
$button-size = 65px
|
||||
$num-buttons = 2
|
||||
$alt-input-height = 38px
|
||||
width 100%
|
||||
padding-right ($button-size * $num-buttons)
|
||||
box-sizing border-box
|
||||
|
||||
.input-wrapper
|
||||
width 100%
|
||||
float left
|
||||
input
|
||||
width 100%
|
||||
box-sizing border-box
|
||||
height $alt-input-height
|
||||
border-radius 4px 0 0 4px
|
||||
margin-bottom 0
|
||||
|
||||
.buttons-wrapper
|
||||
margin-right -($button-size * $num-buttons)
|
||||
float left
|
||||
.button
|
||||
float left
|
||||
width $button-size
|
||||
box-sizing border-box
|
||||
height $alt-input-height
|
||||
padding 0
|
||||
border-radius 0
|
||||
margin-left -1px
|
||||
margin-bottom 0
|
||||
.button:last-child
|
||||
border-radius 0 4px 4px 0
|
||||
|
||||
.challenge_clauses
|
||||
list-style none
|
||||
margin 0
|
||||
input
|
||||
vertical-align top
|
||||
margin-top 3px
|
||||
label
|
||||
display block
|
||||
margin-bottom 0
|
||||
&.disabled
|
||||
cursor not-allowed
|
||||
color #bbb
|
||||
|
||||
.achievement
|
||||
img
|
||||
float left
|
||||
width 75px
|
||||
h2
|
||||
margin-top 0
|
||||
.achievement-info
|
||||
padding-left 90px
|
||||
|
||||
#achievements-modal
|
||||
border none
|
||||
animation: achievement-glow 2s infinite
|
||||
|
||||
$animation-glow-color = #4EABDA
|
||||
|
||||
@keyframes achievement-glow
|
||||
0%
|
||||
box-shadow 1px 1px 30px 2px $animation-glow-color
|
||||
50%
|
||||
box-shadow 1px 1px 45px 2px lighten($animation-glow-color, 20%)
|
||||
100%
|
||||
box-shadow 1px 1px 30px 2px $animation-glow-color
|
||||
113
client/app/css/navigation.styl
Normal file
113
client/app/css/navigation.styl
Normal file
@@ -0,0 +1,113 @@
|
||||
h1
|
||||
narrow-font()
|
||||
font-size 2em
|
||||
font-weight 700
|
||||
line-height 50px
|
||||
margin 0
|
||||
|
||||
#header h1
|
||||
text-transform lowercase
|
||||
margin 0 $body_wrapper
|
||||
|
||||
#navigation
|
||||
$clr = #44484e
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
bottom 0
|
||||
width $nav_size
|
||||
background $clr
|
||||
font-size .875em
|
||||
overflow hidden
|
||||
.logo
|
||||
display block
|
||||
margin 0
|
||||
font-size 32px
|
||||
color rgba(255, 255, 255, .8)
|
||||
text-shadow 0 1px 0 #333
|
||||
text-align center
|
||||
height $header_size
|
||||
line-height $header_size
|
||||
.logo:hover
|
||||
cursor pointer
|
||||
.nav
|
||||
margin-bottom 1em
|
||||
a, .fake_link
|
||||
display block
|
||||
padding 4px 16px
|
||||
line-height 1.5em
|
||||
color #ccd
|
||||
border none
|
||||
background none
|
||||
float none
|
||||
margin 0
|
||||
border-radius 0
|
||||
&:hover
|
||||
background lighten($clr, 10%)
|
||||
text-decoration none
|
||||
color #fff
|
||||
h2
|
||||
text-transform uppercase
|
||||
line-height normal
|
||||
margin 0
|
||||
font-size .929em
|
||||
padding 4px 16px
|
||||
letter-spacing 1px
|
||||
color lighten($clr, 60%)
|
||||
background darken($clr, 20%)
|
||||
text-shadow 0 1px 0 rgba(0, 0, 0, .3)
|
||||
color #777
|
||||
border-bottom 1px solid #555
|
||||
border-top 1px solid #111
|
||||
|
||||
.nav_item
|
||||
position relative
|
||||
&.active, &.active:hover
|
||||
background #d94e47
|
||||
color #fff
|
||||
cursor default
|
||||
.nav_meta
|
||||
position absolute
|
||||
right 0
|
||||
font-size .714em
|
||||
.notifications, .close
|
||||
height 1.3em * (1em / .714em) // 1.3 height adjusted by the nav_meta font size
|
||||
width @height
|
||||
line-height @height
|
||||
text-align center
|
||||
margin-top 0.1em // the container is 1.5em and the contents are 1.3em
|
||||
margin-right 5px
|
||||
float left
|
||||
opacity 1
|
||||
font-size 1em
|
||||
text-shadow none
|
||||
.notifications
|
||||
border-radius 4px
|
||||
background #a30
|
||||
color #fff
|
||||
&:hover .notifications
|
||||
background #b41
|
||||
.close
|
||||
background #333
|
||||
border-radius 1em
|
||||
color #fff
|
||||
cursor pointer
|
||||
&:hover
|
||||
background #555
|
||||
|
||||
.user-info
|
||||
float right
|
||||
margin 0 16px
|
||||
|
||||
.team-dropdown
|
||||
max-height 300px
|
||||
overflow-y auto
|
||||
|
||||
.team-pbv
|
||||
margin-top -5px
|
||||
|
||||
.dropdown
|
||||
li
|
||||
border-bottom 1px solid #aaa
|
||||
li:last-of-type
|
||||
border none !important
|
||||
122
client/app/css/responsive.styl
Normal file
122
client/app/css/responsive.styl
Normal file
@@ -0,0 +1,122 @@
|
||||
@media screen and (max-width: 319px)
|
||||
#logo
|
||||
visibility hidden
|
||||
|
||||
@media screen and (max-width: 480px)
|
||||
.modal
|
||||
top 10px
|
||||
left 10px
|
||||
right 10px
|
||||
.modal-header .close
|
||||
padding 10px
|
||||
margin -10px
|
||||
|
||||
@media screen and (max-width: 640px)
|
||||
.popover
|
||||
display none !important
|
||||
|
||||
#main-nav
|
||||
padding 0
|
||||
|
||||
#logo
|
||||
float none
|
||||
margin 0 auto!important
|
||||
|
||||
#sections
|
||||
visibility hidden
|
||||
|
||||
#leftmenu
|
||||
display block
|
||||
width 0
|
||||
|
||||
#navigation
|
||||
display none
|
||||
top $header_size
|
||||
z-index 100
|
||||
|
||||
#navigation .logo
|
||||
display none
|
||||
|
||||
#navigation.active
|
||||
display block
|
||||
animation slidenav 0.3s
|
||||
|
||||
@keyframes slidenav
|
||||
0%
|
||||
left -100%
|
||||
100%
|
||||
left 0
|
||||
|
||||
#content
|
||||
left 0
|
||||
|
||||
@media screen and (max-width: 767px)
|
||||
.chat_window
|
||||
.main_buttons
|
||||
width 100%
|
||||
padding 10px
|
||||
.chat
|
||||
display none
|
||||
|
||||
// Modals
|
||||
.modal
|
||||
position fixed
|
||||
top 20px
|
||||
left 20px
|
||||
right 20px
|
||||
width auto
|
||||
margin 0
|
||||
&.fade
|
||||
top -100px
|
||||
&.fade.in
|
||||
top 20px
|
||||
|
||||
// Shrink battle window
|
||||
.battle_window
|
||||
.battle
|
||||
width 420px
|
||||
margin 0 auto
|
||||
right 0
|
||||
padding 10px 0 0
|
||||
.battle_summary
|
||||
bottom 50px
|
||||
left 0
|
||||
right 0
|
||||
.battle_container
|
||||
width 400px
|
||||
height 400px
|
||||
margin 0 auto
|
||||
.battle_pane
|
||||
left 0
|
||||
top 50px
|
||||
.battle_teams
|
||||
left 50px
|
||||
right @left
|
||||
top 50px
|
||||
.battle_user_info
|
||||
.left
|
||||
bottom 0
|
||||
.right
|
||||
top 0
|
||||
.left, .right
|
||||
width 100%
|
||||
left 0
|
||||
.battle-timer
|
||||
display inline-block
|
||||
margin-right 10px
|
||||
.pokemon_icons
|
||||
display inline-block
|
||||
vertical-align bottom
|
||||
width auto
|
||||
position relative
|
||||
top -4px
|
||||
.icon_wrapper:nth-child(even)
|
||||
top 0
|
||||
.moves.span8, .switches.span4
|
||||
width 100%
|
||||
margin-left 0
|
||||
|
||||
@media screen and (max-width: 980px)
|
||||
.battle_window
|
||||
.chat
|
||||
display none
|
||||
457
client/app/css/teambuilder.styl
Normal file
457
client/app/css/teambuilder.styl
Normal file
@@ -0,0 +1,457 @@
|
||||
$header = 50px
|
||||
$pokemon-list-height = 50px
|
||||
|
||||
// TODO: Make this a global style
|
||||
.teambuilder input
|
||||
.teambuilder select
|
||||
box-sizing border-box
|
||||
height 28px
|
||||
|
||||
.teambuilder .selectize-input input
|
||||
height 18px
|
||||
|
||||
.teambuilder
|
||||
position absolute
|
||||
top 0
|
||||
bottom 0
|
||||
left 0
|
||||
right 0
|
||||
|
||||
select, input
|
||||
margin-bottom 0!important
|
||||
width 100%
|
||||
|
||||
.teambuilder .meta-info
|
||||
max-width 1368px
|
||||
|
||||
.teambuilder .meta-info .left-side, .teambuilder .meta-info .right-side
|
||||
float left
|
||||
box-sizing border-box
|
||||
|
||||
.teambuilder .navigation
|
||||
position absolute
|
||||
top $header
|
||||
bottom 0
|
||||
background-color $body-color
|
||||
width: 150px
|
||||
|
||||
ul
|
||||
list-style-type none
|
||||
padding 0
|
||||
margin 0
|
||||
|
||||
li, .nav-button
|
||||
display block
|
||||
box-sizing border-box
|
||||
padding-left 1em
|
||||
height $pokemon-list-height
|
||||
line-height $pokemon-list-height
|
||||
font-size 14px
|
||||
|
||||
li:hover, .nav-button:hover
|
||||
cursor pointer
|
||||
background-color rgba(0, 0, 0, 0.1)
|
||||
|
||||
li.active
|
||||
background-color rgba(200, 210, 255, 0.5)
|
||||
|
||||
.pokemon_icon
|
||||
float none
|
||||
display inline-block
|
||||
margin 0
|
||||
vertical-align middle
|
||||
|
||||
.pokemon-pbv
|
||||
margin-top 7px
|
||||
font-size 0.75em
|
||||
|
||||
.pokemon-middle
|
||||
line-height 50%
|
||||
display inline-block
|
||||
vertical-align middle
|
||||
|
||||
.teambuilder .meta-info .left-side
|
||||
padding-left 180px
|
||||
width 45%
|
||||
|
||||
.teambuilder .meta-info .right-side
|
||||
width 55%
|
||||
padding-left 20px
|
||||
|
||||
.teambuilder .species
|
||||
float left
|
||||
width 180px
|
||||
margin-left -185px
|
||||
|
||||
.species_list
|
||||
width 100%
|
||||
|
||||
.pbv
|
||||
float right
|
||||
color #888
|
||||
|
||||
.teambuilder .shiny-switch
|
||||
display inline-block
|
||||
width 14px
|
||||
height 14px
|
||||
margin-right 10px
|
||||
margin-left -(@margin-right + @width)
|
||||
vertical-align middle
|
||||
cursor pointer
|
||||
background-image URL('http://91.121.152.74:8000/Sprites/images/noshiny.png')
|
||||
background-size cover
|
||||
|
||||
&.selected
|
||||
background-image URL('http://91.121.152.74:8000/Sprites/images/shiny.png')
|
||||
|
||||
|
||||
.teambuilder .happiness-switch
|
||||
display inline-block
|
||||
position relative
|
||||
width 14px
|
||||
height 14px
|
||||
margin-left 10px
|
||||
margin-right -(@margin-left + @width)
|
||||
cursor pointer
|
||||
vertical-align middle
|
||||
|
||||
$happy = #FF3C3C
|
||||
$unhappy = #333
|
||||
|
||||
&:before, &:after
|
||||
position absolute
|
||||
content ""
|
||||
left 8px
|
||||
top 0
|
||||
width 8px
|
||||
height 13px
|
||||
background $happy
|
||||
border-radius 7px 7px 0 0
|
||||
transform rotate(-45deg)
|
||||
transform-origin 0 100%
|
||||
&:after
|
||||
left 0
|
||||
transform rotate(45deg)
|
||||
transform-origin 100% 100%
|
||||
|
||||
&:hover:before, &:hover:after
|
||||
background darken($happy, 30%)
|
||||
|
||||
&.selected:before, &.selected:after
|
||||
background $unhappy
|
||||
|
||||
&.selected:hover:before, &.selected:hover:after
|
||||
background lighten($unhappy, 30%)
|
||||
|
||||
.teambuilder .team_meta
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
right 0
|
||||
height $header
|
||||
line-height @height
|
||||
.team_name
|
||||
font-weight 700
|
||||
font-size 1.5em
|
||||
height $header
|
||||
line-height @height
|
||||
float left
|
||||
margin 0
|
||||
width auto
|
||||
padding 0 (1em/@font-size)
|
||||
box-sizing border-box
|
||||
|
||||
.team_name:hover:not(:focus)
|
||||
text-decoration underline
|
||||
cursor pointer
|
||||
|
||||
.team_meta_buttons
|
||||
float right
|
||||
margin-top 7px
|
||||
.button
|
||||
float left
|
||||
margin-right 10px
|
||||
|
||||
.teambuilder .meta-info .non-stats
|
||||
display table
|
||||
width 100%
|
||||
|
||||
.teambuilder_row, .pbv-row
|
||||
display table-row
|
||||
line-height 1.5em
|
||||
|
||||
.teambuilder_col
|
||||
display table-cell
|
||||
box-sizing border-box
|
||||
height 2em
|
||||
margin 0
|
||||
&:first-child
|
||||
text-align right
|
||||
padding-right 10px
|
||||
|
||||
.pbv-row .left, .pbv-row .right
|
||||
box-sizing border-box
|
||||
height 2em
|
||||
|
||||
.non-stat-label
|
||||
width 1px // minimum possible size
|
||||
|
||||
.teambuilder .stats
|
||||
width 100%
|
||||
margin-bottom 1.5em
|
||||
|
||||
td, th
|
||||
text-align left
|
||||
padding-right 10px
|
||||
white-space nowrap
|
||||
line-height 1.5em
|
||||
height 1.5em
|
||||
|
||||
.stat-label, .stat-total, .base-stat
|
||||
width 1px // minimum possible size
|
||||
|
||||
td:first-child
|
||||
text-align right
|
||||
|
||||
input
|
||||
width 100%
|
||||
text-align right
|
||||
|
||||
th.ev-cell, th.iv-cell
|
||||
text-align right
|
||||
padding-right 17px // match with value in textfield (10px from the main cell + the input padding)
|
||||
|
||||
td.ev-cell, td.iv-cell
|
||||
width 50px
|
||||
|
||||
.plus-nature
|
||||
color $positive-color
|
||||
font-weight bold
|
||||
|
||||
.minus-nature
|
||||
color $negative-color
|
||||
|
||||
.remaining-evs
|
||||
float left
|
||||
|
||||
.hidden-power
|
||||
float right
|
||||
|
||||
.ev-lock
|
||||
float left
|
||||
margin-right 5px
|
||||
cursor pointer
|
||||
.icon-lock
|
||||
color #444
|
||||
.icon-unlocked
|
||||
color #888
|
||||
|
||||
.remaining-evs-amount.over-limit
|
||||
color $negative-color
|
||||
font-weight bold
|
||||
|
||||
.teambuilder select.select-hidden-power
|
||||
width auto
|
||||
|
||||
.teambuilder .pokemon_edit
|
||||
position absolute
|
||||
overflow auto
|
||||
left 150px
|
||||
top $header
|
||||
bottom 0
|
||||
right 0
|
||||
background white
|
||||
padding 15px
|
||||
overflow-y scroll
|
||||
|
||||
.teambuilder .forme-sprite-box
|
||||
height 120px
|
||||
line-height @height
|
||||
text-align center
|
||||
.forme-sprite
|
||||
display inline-block
|
||||
|
||||
.teambuilder .species-types
|
||||
text-align center
|
||||
margin-bottom 5px
|
||||
margin-top 50px
|
||||
img
|
||||
margin 0 2px
|
||||
|
||||
.teambuilder .selected_moves
|
||||
.header
|
||||
margin-bottom 8px
|
||||
.moves-label
|
||||
font-weight bold
|
||||
font-size 2em
|
||||
line-height 1em
|
||||
a
|
||||
line-height 2em
|
||||
|
||||
.move-button, input
|
||||
display block
|
||||
margin 0
|
||||
box-sizing border-box
|
||||
height 32px
|
||||
|
||||
.close
|
||||
opacity .4
|
||||
line-height 30px
|
||||
width 20px
|
||||
text-align center
|
||||
float right
|
||||
.close:hover, .close:focus
|
||||
opacity .8
|
||||
font-weight bold
|
||||
|
||||
.table-moves
|
||||
border-collapse separate
|
||||
border solid 1px #DDD
|
||||
thead th
|
||||
background whitesmoke
|
||||
border-bottom solid 1px #DDD
|
||||
tbody tr
|
||||
cursor pointer
|
||||
td
|
||||
border 1px solid transparent
|
||||
&.active td
|
||||
background #f0f0f9
|
||||
&:first-child
|
||||
text-decoration underline
|
||||
&.selected td
|
||||
background #f0f0f9
|
||||
&:first-child
|
||||
font-weight bold
|
||||
img
|
||||
margin-bottom 3px
|
||||
.name
|
||||
white-space nowrap
|
||||
|
||||
.teambuilder .table-moves
|
||||
margin-top 8px
|
||||
|
||||
.teambuilder .description
|
||||
width 60%
|
||||
|
||||
.teambuilder .display_teams
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
bottom 0
|
||||
right 0
|
||||
overflow auto
|
||||
|
||||
h2
|
||||
margin-left 10px
|
||||
margin-bottom 0
|
||||
|
||||
.select-team
|
||||
h2
|
||||
text-overflow ellipsis
|
||||
white-space nowrap
|
||||
overflow hidden
|
||||
width 192px
|
||||
margin 0
|
||||
font-size 1.5em
|
||||
|
||||
.add-new-team
|
||||
margin 10px
|
||||
|
||||
.team-meta
|
||||
font-size .75em
|
||||
text-align right
|
||||
margin-top 10px
|
||||
|
||||
.team-pbv
|
||||
margin-top -5px
|
||||
|
||||
textarea.textarea_modal
|
||||
box-sizing border-box
|
||||
width 100%
|
||||
height 300px
|
||||
|
||||
@media screen and (max-width: 1268px)
|
||||
// stack non-stats and stats
|
||||
.teambuilder .meta-info .left-side, .teambuilder .meta-info .right-side
|
||||
display block
|
||||
width 100%
|
||||
|
||||
// stack non-stats and stats
|
||||
.teambuilder .non-stats
|
||||
margin 0!important
|
||||
|
||||
// stack non-stats and stats
|
||||
.teambuilder .meta-info .right-side
|
||||
padding-left 0
|
||||
|
||||
// add some separation between stats and non-stats
|
||||
.teambuilder .stats
|
||||
margin-top 1.5em
|
||||
|
||||
@media screen and (max-width: 1000px)
|
||||
// Hide move descriptions
|
||||
.table-moves .description
|
||||
display none
|
||||
|
||||
// Make selected moves take up the entire row
|
||||
.teambuilder .selected_moves .span3
|
||||
width 100%
|
||||
margin-left 0
|
||||
|
||||
@media screen and (max-width: 800px)
|
||||
// Move side navigation to above
|
||||
.teambuilder .navigation li, teambuilder .navigation .nav-button
|
||||
float left
|
||||
width (100/6)%
|
||||
font-size 0 // Hide the text
|
||||
text-align center
|
||||
|
||||
// Move side navigation to above
|
||||
.teambuilder .pokemon_edit
|
||||
left 0
|
||||
top $header + $pokemon-list-height
|
||||
|
||||
// Move side navigation to above
|
||||
.teambuilder .navigation
|
||||
width 100%
|
||||
|
||||
@media screen and (max-width: 600px)
|
||||
// Scroll at the teambuilder level instead of the pokemon_edit level
|
||||
// TODO: This should kick in on tablet landscape modes,
|
||||
// with large widths but small heights (ex: nexus 7)
|
||||
.teambuilder
|
||||
overflow auto
|
||||
|
||||
.team_meta
|
||||
position static
|
||||
height auto
|
||||
|
||||
.navigation
|
||||
position static
|
||||
|
||||
.pokemon_edit
|
||||
position static
|
||||
overflow visible
|
||||
|
||||
textarea.textarea_modal
|
||||
height auto
|
||||
|
||||
@media screen and (max-width: 480px)
|
||||
// split species and non-stats
|
||||
.teambuilder .meta-info .left-side
|
||||
padding-left 0
|
||||
|
||||
// split species and non-stats
|
||||
.teambuilder .species, .teambuilder .non-stats
|
||||
margin-left 0
|
||||
width 100%
|
||||
margin-bottom 1.5em
|
||||
|
||||
// hide ev-bars
|
||||
.teambuilder .ev-range-cell
|
||||
display none
|
||||
|
||||
// Hide pp and acc cells
|
||||
.table-moves
|
||||
.pp, .acc
|
||||
display none
|
||||
Reference in New Issue
Block a user