mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-12-13 01:01:34 -05:00
361 lines
7.4 KiB
Sass
361 lines
7.4 KiB
Sass
@import "app/styles/mixins"
|
|
@import "app/styles/bootstrap/variables"
|
|
|
|
body.is-playing
|
|
background-color: black
|
|
|
|
$level-resize-transition-time: 0.5s
|
|
|
|
#level-view
|
|
margin: 0 auto
|
|
@include user-select(none)
|
|
|
|
&.real-time
|
|
// Hmm, somehow the #page-container is cutting us off by ~17px on the right, looks a bit off.
|
|
|
|
&.real-time.game-dev
|
|
#canvas-wrapper
|
|
width: 80%
|
|
|
|
#canvas-wrapper
|
|
width: 100%
|
|
canvas
|
|
margin: 0 auto
|
|
#normal-surface
|
|
left: 0
|
|
right: 0
|
|
margin-left: auto
|
|
margin-right: auto
|
|
#control-bar-view
|
|
width: 100%
|
|
button, h4
|
|
display: none
|
|
&:not(.flags)
|
|
#playback-view
|
|
width: 100%
|
|
&.flags
|
|
#playback-view
|
|
$flags-width: 200px
|
|
width: 90%
|
|
width: -webkit-calc(100% - 200px)
|
|
width: calc(100% - 200px)
|
|
left: $flags-width
|
|
#code-area, #thang-hud, #goals-view
|
|
display: none
|
|
visibility: hidden
|
|
#gold-view
|
|
right: 1%
|
|
@include box-shadow(-1px 1px 10px cyan)
|
|
.team-gold
|
|
font-size: 2vw
|
|
line-height: 2vw
|
|
img
|
|
width: 1.8vw
|
|
height: 1.8vw
|
|
#duel-stats-view
|
|
right: calc(1% + 100px)
|
|
bottom: 50px
|
|
#control-bar-view .title
|
|
left: 20%
|
|
width: 60%
|
|
text-align: center
|
|
#stop-real-time-playback-button
|
|
display: block
|
|
z-index: 20
|
|
#level-dialogue-view
|
|
display: none
|
|
|
|
.level-content
|
|
margin: 0px auto
|
|
|
|
.level-content
|
|
position: relative
|
|
background-color: black
|
|
|
|
#canvas-wrapper
|
|
top: 50px
|
|
width: 55%
|
|
position: relative
|
|
overflow: hidden
|
|
@include transition(all $level-resize-transition-time ease-out, z-index 1.2s linear)
|
|
z-index: 0
|
|
|
|
&.preview-overlay
|
|
z-index: 20
|
|
#goals-view
|
|
visibility: hidden
|
|
|
|
canvas#webgl-surface
|
|
background-color: #333
|
|
z-index: 1
|
|
|
|
canvas#normal-surface
|
|
z-index: 1
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
pointer-events: none
|
|
|
|
canvas#webgl-surface, canvas#normal-surface
|
|
display: block
|
|
z-index: 2
|
|
@include transition($level-resize-transition-time ease-out)
|
|
|
|
&.grabbable:not(.flag-color-selected)
|
|
cursor: -moz-grab
|
|
cursor: -webkit-grab
|
|
cursor: grab
|
|
|
|
&:active
|
|
cursor: -moz-grabbing
|
|
cursor: -webkit-grabbing
|
|
cursor: grabbing
|
|
|
|
&.flag-color-selected
|
|
cursor: crosshair
|
|
|
|
#ascii-surface
|
|
position: absolute
|
|
z-index: 3
|
|
top: 0
|
|
left: 0
|
|
pointer-events: none
|
|
white-space: pre
|
|
font-family: Courier, monospace
|
|
color: white
|
|
background-color: rgba(14, 59, 130, 0.25)
|
|
transform-origin: 0 0 0
|
|
line-height: 15px
|
|
|
|
min-width: 1024px
|
|
position: relative
|
|
|
|
#code-area
|
|
@include box-sizing(border-box)
|
|
padding: 0px 0.9% 10px 1.4%
|
|
width: 45%
|
|
background: transparent url(/images/level/wood_texture.png)
|
|
background-size: 100% 100%
|
|
position: absolute
|
|
right: 0
|
|
top: 0px
|
|
bottom: 0
|
|
@include transition(width $level-resize-transition-time ease-in-out, right $level-resize-transition-time ease-in-out)
|
|
z-index: 2
|
|
|
|
#game-area
|
|
position: relative
|
|
overflow: hidden
|
|
|
|
// 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)
|
|
|
|
$GI: 0.5 // gradient intensity; can tweak this 0-1
|
|
|
|
.gradient
|
|
position: absolute
|
|
z-index: 5
|
|
|
|
#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
|
|
|
|
#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%
|
|
|
|
#play-footer
|
|
text-align: center
|
|
font-family: $headings-font-family
|
|
font-variant: small-caps
|
|
font-size: 25px
|
|
padding: 10px 0
|
|
@include transition(opacity .10s linear)
|
|
@include opacity(0.6)
|
|
|
|
&:hover
|
|
@include opacity(1)
|
|
|
|
a
|
|
@include opacity(0.75)
|
|
@include transition(opacity .10s linear)
|
|
color: white
|
|
|
|
&:hover, &:active
|
|
@include opacity(1)
|
|
|
|
@media screen and (min-aspect-ratio: 17/10)
|
|
&:not(.premium)
|
|
display: none
|
|
|
|
#level-footer-shadow
|
|
position: absolute
|
|
width: 100%
|
|
height: 30px
|
|
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%)
|
|
|
|
#fullscreen-editor-background-screen
|
|
background-color: black
|
|
opacity: 0.5
|
|
cursor: pointer
|
|
display: none
|
|
position: absolute
|
|
left: 0
|
|
right: 0
|
|
bottom: 0
|
|
top: 0
|
|
z-index: 19
|
|
|
|
#stop-real-time-playback-button
|
|
display: none
|
|
position: absolute
|
|
bottom: 70px
|
|
right: 15px
|
|
font-size: 30px
|
|
|
|
.ad-container
|
|
width: 100%
|
|
height: 90px
|
|
text-align: center
|
|
|
|
.hints-view
|
|
position: absolute
|
|
top: 10px
|
|
bottom: 10px
|
|
right: 45%
|
|
z-index: 1000000
|
|
|
|
&.web-dev
|
|
position: absolute
|
|
top: 0
|
|
bottom: 0
|
|
left: 0
|
|
right: 0
|
|
|
|
#playback-view, #thang-hud, #level-dialogue-view, #play-footer, #level-footer-background, #level-footer-shadow
|
|
display: none
|
|
|
|
.game-container, .level-content, #game-area, #canvas-wrapper
|
|
height: 100%
|
|
|
|
#canvas-wrapper canvas
|
|
display: none
|
|
|
|
#web-surface-view
|
|
position: absolute
|
|
top: 0
|
|
right: 0
|
|
left: 0
|
|
bottom: 0
|
|
|
|
#how-to-play-game-dev-panel
|
|
position: absolute
|
|
right: 0
|
|
top: 52px
|
|
width: 20%
|
|
bottom: 38px
|
|
|
|
html.fullscreen-editor
|
|
#level-view
|
|
#fullscreen-editor-background-screen
|
|
display: block
|
|
|
|
#code-area
|
|
position: fixed
|
|
width: 95%
|
|
height: 100%
|
|
right: 0
|
|
|
|
body.ipad #level-view
|
|
// Full-width Surface, preserving aspect ratio, with space for control bar.
|
|
height: 1024px * (589 / 924) + 50px
|
|
overflow: hidden
|
|
|
|
#code-area, #play-footer, #thang-hud
|
|
display: none
|
|
|
|
#level-chat-view
|
|
bottom: 40px
|
|
|
|
#playback-view
|
|
background-color: transparent
|
|
z-index: 3
|
|
bottom: 30px
|
|
|
|
button
|
|
background-color: #333
|
|
|
|
.scrubber .progress
|
|
background-color: rgba(255, 255, 255, 0.4)
|
|
|
|
#canvas-wrapper, #control-bar-view, #playback-view, #thang-hud
|
|
width: 100%
|
|
|
|
#canvas-wrapper
|
|
height: 653px
|
|
|
|
canvas
|
|
margin: 0 auto
|
|
overflow: hidden
|
|
|
|
#level-footer-background
|
|
display: none
|
|
position: absolute
|
|
background: transparent url(/images/level/footer_background.jpg) no-repeat
|
|
bottom: 0
|
|
width: 100%
|
|
background-size: 100% 400px
|
|
height: 400px
|
|
z-index: -9001
|
|
@include opacity(0.25)
|