460 lines
8.7 KiB
Stylus
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 |