mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-12-19 12:02:35 -05:00
255ebbc048
Display leaderboard ads on campaign and play views. Do no show ads in classroom, picoCTF, or to teachers. Add no ads blurb to subscription features matrix. Scale game UI for ads on short screens. Closes #3491
320 lines
6.7 KiB
Sass
320 lines
6.7 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.
|
|
|
|
#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
|
|
|
|
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)
|