codecombat/app/styles/play/level/control_bar.sass

173 lines
3.7 KiB
Sass
Raw Normal View History

@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"
2014-01-03 13:32:13 -05:00
#control-bar-view
$control-yellow: rgb(227, 173, 53)
$control-yellow-highlight: rgb(243, 211, 59)
2014-01-03 13:32:13 -05:00
width: 55%
height: 50px
2014-01-03 13:32:13 -05:00
@include box-sizing(border-box)
overflow: visible
position: absolute
z-index: 6
text-transform: uppercase
font-family: Open Sans Condensed
font-weight: bold
.levels-link-area
position: absolute
left: 40px
width: 160px
text-align: center
a.levels-link
margin: 0
height: 50px
line-height: 50px
color: white
font-size: 16px
.glyphicon
margin-left: -20px
margin-right: 10px
@include scaleXY(-1.25, 1.25)
color: $control-yellow
text-shadow: 1px 1px 0px rgb(143, 123, 62)
2014-01-03 13:32:13 -05:00
&:hover .glyphicon
color: $control-yellow-highlight
2014-01-03 13:32:13 -05:00
.left-cap, .right-cap, .center-chain, .right-chain, .wood-background
2014-01-03 13:32:13 -05:00
position: absolute
top: 0
pointer-events: none
.left-cap
background: transparent url(/images/level/control_bar_cap_left.png)
background-size: cover
width: 217px
height: 63px
left: 0
.right-cap
background: transparent url(/images/level/control_bar_cap_right.png)
background-size: cover
right: 0
width: 78px
height: 60px
.center-chain
background: transparent url(/images/level/control_bar_chain_center.png)
background-size: cover
left: 30%
width: 111px
2014-01-03 13:32:13 -05:00
height: 24px
z-index: 1
.right-chain
background: transparent url(/images/level/control_bar_chain_right.png)
background-size: cover
top: 30px
right: 0
width: 97px
height: 51px
z-index: -1
.wood-background
background: transparent url(/images/level/control_bar_background.png)
background-size: contain
width: 100%
height: 55px
z-index: -1
.level-name-area-container
position: relative
width: 100%
height: 50px
pointer-events: none
.level-name-area
min-width: 200px
max-width: 293px
height: 60px
margin: 0 auto
padding: 8px
border-image: url(/images/level/control_bar_level_name_background.png) 30 fill round
border-width: 0 15px 15px 15px
text-align: center
position: absolute
left: 50%
@include translate(-50%, 0)
.level-label
font-size: 12px
color: $control-yellow-highlight
margin-bottom: -5px
.level-name
color: white
font-size: 18px
.buttons-area
position: absolute
right: 35px
top: 8px
button
float: right
margin-left: 10px
position: relative
#game-menu-button
background: transparent
border: 0
outline: 0
@include box-shadow(none)
text-transform: uppercase
font-size: 18px
.hamburger
display: inline-block
span.icon-bar
display: block
border-radius: 4px
width: 18px
height: 4px
margin: 4px
background: $control-yellow
.game-menu-text
display: inline-block
vertical-align: middle
margin-top: -18px
&:hover
@include scale(1.05)
.hamburger span.icon-bar
background-color: $control-yellow-highlight
#level-done-button, #next-game-button
top: 7px
font-size: 13px
height: 24px
#level-done-button
display: none
html.no-borderimage
#control-bar-view .level-name-area
border: 0
background: transparent url(/images/level/control_bar_level_name_background.png)
background-size: contain
background-repeat: no-repeat
body:not(.ipad)
@media only screen and (max-width: 1300px)
#control-bar-view .level-name-area-container
display: none