BattleSim/client/app/css/responsive.styl

123 lines
1.9 KiB
Stylus

@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