mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-11-24 16:17:57 -05:00
150 lines
3 KiB
Sass
150 lines
3 KiB
Sass
@import "app/styles/bootstrap/mixins"
|
|
@import "app/styles/mixins"
|
|
|
|
body.is-playing
|
|
background-color: black
|
|
.footer
|
|
background-color: black
|
|
|
|
#level-view
|
|
margin: 0 auto
|
|
@include user-select(none)
|
|
|
|
.level-content
|
|
position: relative
|
|
|
|
#canvas-wrapper
|
|
width: 55%
|
|
position: relative
|
|
overflow: hidden
|
|
|
|
canvas#surface
|
|
background-color: #333
|
|
width: 100%
|
|
display: block
|
|
z-index: 1
|
|
|
|
min-width: 1024px
|
|
position: relative
|
|
|
|
#code-area
|
|
@include box-sizing(border-box)
|
|
padding: 10px 1%
|
|
width: 45%
|
|
background: transparent url(/images/level/wood_texture.png)
|
|
background-size: 100% 100%
|
|
position: absolute
|
|
right: 0
|
|
top: 0px
|
|
bottom: 0
|
|
|
|
#pointer
|
|
position: absolute
|
|
left: 0
|
|
top: 0
|
|
height: 100px
|
|
opacity: 0.0
|
|
pointer-events: none
|
|
z-index: 10
|
|
|
|
// Level Docs
|
|
.ui-effects-transfer
|
|
border: 2px dotted gray
|
|
|
|
.modal
|
|
img
|
|
float: right
|
|
|
|
img.diagram
|
|
float: none
|
|
|
|
#multiplayer-join-link
|
|
font-size: 12px
|
|
|
|
// Custom Buttons
|
|
.btn.banner
|
|
@include banner-button(#FFF, #333)
|
|
@include box-shadow(2px 2px 2px rgba(0, 0, 0, 0.5))
|
|
border: 1px solid black
|
|
text-shadow: none
|
|
|
|
$buttonConfig: 'primary' #6CA8EA, 'info' #71AACC, 'success' #90B236, 'warning' #CD6800, 'danger' #B43C20, 'inverse' #3A537F
|
|
@each $tuple in $buttonConfig
|
|
&.btn-#{nth($tuple, 1)}
|
|
@include banner-button(nth($tuple, 2), #FFF)
|
|
|
|
.footer .footer-link-text a
|
|
@include opacity(0.75)
|
|
@include transition(opacity .10s linear)
|
|
|
|
&:hover, &:active
|
|
@include opacity(1)
|
|
|
|
$GI: 0.5 // gradient intensity; can tweak this 0-1
|
|
|
|
.gradient
|
|
position: absolute
|
|
z-index: 10
|
|
|
|
#code-area-gradient
|
|
top: 0px
|
|
width: 3px
|
|
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,$GI) 100%)
|
|
left: -3px
|
|
bottom: 0
|
|
|
|
#hud-top-gradient
|
|
top: -32px
|
|
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8*$GI) 100%)
|
|
left: 0
|
|
right: 0
|
|
bottom: 0
|
|
height: 3px
|
|
|
|
#canvas-left-gradient
|
|
left: 0px
|
|
width: 5px
|
|
background: linear-gradient(to left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8*$GI) 100%)
|
|
bottom: -30px
|
|
top: 0
|
|
|
|
#canvas-top-gradient
|
|
top: 0
|
|
height: 5px
|
|
left: 0
|
|
right: 0
|
|
background: linear-gradient(to top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8*$GI) 100%)
|
|
|
|
#hud-left-gradient
|
|
background: linear-gradient(to right, rgba(0,0,0,$GI) 0%,rgba(0,0,0,0) 100%)
|
|
left: 0
|
|
top: 0
|
|
height: 100%
|
|
width: 2%
|
|
|
|
#hud-right-gradient
|
|
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,$GI) 100%)
|
|
right: 0
|
|
position: absolute
|
|
top: 0
|
|
height: 100%
|
|
width: 2%
|
|
|
|
.footer
|
|
@media screen and (min-aspect-ratio: 17/10)
|
|
display: none
|
|
|
|
&:not(:hover)
|
|
@include opacity(0.6)
|
|
|
|
.hour-of-code-explanation
|
|
margin-top: 5px
|
|
color: white
|
|
font-size: 12px
|
|
|
|
&:not(:hover)
|
|
@include opacity(0.75)
|
|
|
|
a
|
|
color: white
|
|
text-decoration: underline
|