BattleSim/client/app/css/teambuilder.styl

460 lines
8.7 KiB
Stylus

$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: 160px
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
.team-tier
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