mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-12-01 03:16:56 -05:00
d77625bc77
* Tweak API doc behavior and styling * Instead of moving to the left during active dialogues, just move to the top * Allow pointer events * Adjust close button * Re-enable pinning API docs for game-dev and web-dev levels * Make sidebar in PlayGameDevLevelView stretch, better layout columns * Set up content of PlayGameDevLevelView sidebar to scroll * Add rest of PlayGameDevLevelView sidebar content, rework what loading looks like * Finish PlayGameDevLevelView * Add share area below * Cover the brown background, paint it gray * Tweak PlayGameDevLevelView * Have progress bar show everything * Fix Surface resize handling * Fix PlayGameDevLevelView resizing incorrectly when playing * Add GameDevVictoryModal to PlayGameDevLevelView * Don't show missing-doctype annotation in Ace * Hook up GameDevVictoryModal copy button * Fix onChangeAnnotation runtime error * Fix onLevelLoaded runtime error * Have CourseVictoryModal link to /courses when course is done * Trim, update CourseDetailsView * Remove last vestiges of teacherMode * Remove giant navigation buttons at top * Quick switch to flat style * Add analytics for game-dev * Update Analytics events for gamedev * Prefix event names with context * Send to Mixpanel * Include more properties * Mostly set up indefinite play and autocast for game-dev levels * Set up cast buttons and shortcut for game-dev * Add rudimentary instructions when students play game-dev levels * Couple tweaks * fix a bit of code that expects frames to always stick around * have PlayGameDevLevelView render a couple frames on load * API Docs use 'game' instead of 'hero' * Move tags to head without combining * Add HTML comment-start string Fixes missing entry point arrows * Fix some whitespace
180 lines
3.9 KiB
Sass
180 lines
3.9 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%
|
|
pointer-events: none
|
|
z-index: 1
|
|
|
|
.level-name-area
|
|
min-width: 200px
|
|
max-width: 293px
|
|
margin: 0 auto
|
|
padding: 8px
|
|
border-style: solid
|
|
border-image: url(/images/level/control_bar_level_name_background.png) 20 fill round
|
|
border-width: 0 10px 10px 10px
|
|
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
|
|
|
|
.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
|