mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-12-05 13:21:10 -05:00
224 lines
5 KiB
Sass
224 lines
5 KiB
Sass
@import "app/styles/mixins"
|
|
@import "app/styles/bootstrap/variables"
|
|
|
|
#control-bar-view
|
|
$control-yellow: rgb(227, 173, 53)
|
|
$control-yellow-highlight: rgb(243, 211, 59)
|
|
|
|
width: 55%
|
|
height: 50px
|
|
@include box-sizing(border-box)
|
|
overflow: visible
|
|
position: absolute
|
|
z-index: 6
|
|
text-transform: uppercase
|
|
font-family: $headings-font-family
|
|
font-weight: bold
|
|
|
|
&.controls-disabled
|
|
@include filter(brightness(50%))
|
|
|
|
.levels-link-area
|
|
position: absolute
|
|
left: 40px
|
|
width: 160px
|
|
text-align: center
|
|
cursor: pointer
|
|
|
|
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)
|
|
|
|
&:hover
|
|
a.levels-link
|
|
text-decoration: underline
|
|
.glyphicon
|
|
color: $control-yellow-highlight
|
|
|
|
.left-cap, .right-cap, .center-chain, .right-chain, .wood-background
|
|
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
|
|
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-style: solid
|
|
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
|
|
|
|
.level-difficulty
|
|
font-size: 28px
|
|
color: $control-yellow-highlight
|
|
display: inline-block
|
|
@include rotate(-15deg)
|
|
vertical-align: middle
|
|
|
|
.multiplayer-area-container
|
|
position: relative
|
|
width: 100%
|
|
height: 50px
|
|
pointer-events: none
|
|
|
|
.multiplayer-area
|
|
min-width: 200px
|
|
max-width: 293px
|
|
height: 60px
|
|
margin: 0 auto
|
|
padding: 8px
|
|
border-style: solid
|
|
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%
|
|
cursor: pointer
|
|
pointer-events: all
|
|
@include translate(-50%, 0)
|
|
|
|
.multiplayer-label
|
|
font-size: 12px
|
|
color: $control-yellow-highlight
|
|
margin-bottom: -5px
|
|
|
|
.multiplayer-status
|
|
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, #control-bar-sign-up-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
|
|
#control-bar-view .multiplayer-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
|
|
|