mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-11-24 16:17:57 -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
646 lines
16 KiB
Sass
646 lines
16 KiB
Sass
@import "app/styles/mixins"
|
|
@import "app/styles/bootstrap/variables"
|
|
|
|
$mapHeight: 1536
|
|
$mapWidth: 2350
|
|
$levelDotWidth: 2%
|
|
$levelDotHeight: $levelDotWidth * $mapWidth / $mapHeight
|
|
$levelDotZ: $levelDotHeight * 0.25
|
|
$levelDotHoverZ: $levelDotZ * 2
|
|
$levelDotShadowWidth: 0.8 * $levelDotWidth
|
|
$levelDotShadowHeight: 0.8 * $levelDotHeight
|
|
$levelClickRadius: 40px
|
|
$gameControlSize: 80px
|
|
$gameControlMargin: 30px
|
|
|
|
+keyframes(levelStartedPulse)
|
|
from
|
|
@include box-shadow(0px 0px 4px #333)
|
|
margin-bottom: -$levelDotHeight / 3 + $levelDotZ
|
|
50%
|
|
@include box-shadow(0px 0px 22px skyblue)
|
|
margin-bottom: -$levelDotHeight / 3 + ($levelDotHoverZ + $levelDotZ) / 2
|
|
to
|
|
@include box-shadow(0px 0px 4px #333)
|
|
margin-bottom: -$levelDotHeight / 3 + $levelDotZ
|
|
|
|
#campaign-view
|
|
width: 100%
|
|
height: 100%
|
|
position: absolute
|
|
|
|
.gradient
|
|
position: absolute
|
|
z-index: 0
|
|
|
|
&.horizontal-gradient
|
|
left: 0
|
|
right: 0
|
|
height: 3%
|
|
|
|
&.vertical-gradient
|
|
top: 0
|
|
bottom: 0
|
|
width: 3%
|
|
|
|
&.top-gradient
|
|
top: 0
|
|
|
|
&.right-gradient
|
|
right: 0
|
|
|
|
&.bottom-gradient
|
|
bottom: 0
|
|
|
|
&.left-gradient
|
|
left: 0
|
|
|
|
.map
|
|
position: relative
|
|
|
|
.map-background
|
|
width: 100%
|
|
height: 100%
|
|
background-size: 100%
|
|
@include user-select(none)
|
|
|
|
.level, .level-shadow
|
|
position: absolute
|
|
border-radius: 50%
|
|
-webkit-transform: scaleY(0.75)
|
|
transform: scaleY(0.75)
|
|
|
|
.level
|
|
z-index: 2
|
|
width: $levelDotWidth
|
|
height: $levelDotHeight
|
|
margin-left: -0.5 * $levelDotWidth
|
|
margin-bottom: -$levelDotHeight / 3 + $levelDotZ
|
|
border: 2px groove white
|
|
@include transition(margin-bottom 0.5s ease)
|
|
|
|
&.disabled, &.locked
|
|
background-image: url(/images/pages/game-menu/lock.png)
|
|
background-size: 75%
|
|
background-repeat: no-repeat
|
|
background-position: 50% 50%
|
|
opacity: 0.7
|
|
|
|
a
|
|
cursor: default
|
|
|
|
&.next
|
|
width: 2 * $levelDotWidth
|
|
height: 2 * $levelDotHeight
|
|
margin-left: -0.5 * 2 * $levelDotWidth
|
|
margin-bottom: -2 * $levelDotHeight / 3 + 2 * $levelDotZ
|
|
|
|
&.started, &.next
|
|
border: 3px solid lightgreen
|
|
@include box-shadow(0px 0px 35px skyblue)
|
|
|
|
// Would be cool, but kills performance, since we have to re-render all the time.
|
|
//&:not(:hover)
|
|
// -webkit-animation-name: levelStartedPulse
|
|
// -webkit-animation-duration: 3s
|
|
// -webkit-animation-iteration-count: infinite
|
|
|
|
&.complete
|
|
border: 3px solid gold
|
|
@include box-shadow(0px 0px 35px skyblue)
|
|
|
|
.level-difficulty-banner-text
|
|
position: absolute
|
|
bottom: 170%
|
|
pointer-events: none
|
|
color: rgb(246, 208, 2)
|
|
text-shadow: 0px 1px 0px black
|
|
font-size: 1.8vw
|
|
z-index: 1
|
|
width: 100%
|
|
text-align: center
|
|
|
|
img.banner
|
|
position: absolute
|
|
bottom: 38%
|
|
left: -50%
|
|
width: 200%
|
|
pointer-events: none
|
|
|
|
img.star
|
|
width: 100%
|
|
bottom: 7%
|
|
position: absolute
|
|
pointer-events: none
|
|
|
|
.glyphicon-star
|
|
position: absolute
|
|
color: lightblue
|
|
font-size: 21px
|
|
left: 1.5px
|
|
|
|
&.started .glyphicon-star
|
|
left: 0.5px
|
|
|
|
img.hero-portrait
|
|
width: 120%
|
|
height: auto
|
|
bottom: 75%
|
|
left: 75%
|
|
margin-left: 0
|
|
margin-bottom: 0
|
|
|
|
img.hero-portrait
|
|
position: absolute
|
|
border: 1px solid black
|
|
border-radius: 50%
|
|
background: white
|
|
width: $levelDotWidth * 1.5
|
|
height: $levelDotHeight * 1.5 / 1.75
|
|
margin-left: -0.5 * $levelDotWidth * 1.5
|
|
margin-bottom: -$levelDotHeight / 3 * 1.5 / 1.75
|
|
|
|
.level-shadow
|
|
z-index: 1
|
|
width: $levelDotShadowWidth
|
|
height: $levelDotShadowHeight
|
|
margin-left: -0.5 * $levelDotShadowWidth
|
|
margin-bottom: -$levelDotShadowHeight / 3
|
|
background-color: black
|
|
@include box-shadow(0px 0px 10px black)
|
|
@include opacity(0.75)
|
|
|
|
&.next
|
|
width: 2 * $levelDotShadowWidth
|
|
height: 2 * $levelDotShadowHeight
|
|
margin-left: -0.5 * 2 * $levelDotShadowWidth
|
|
margin-bottom: -2 * $levelDotShadowHeight / 3
|
|
|
|
.level:hover
|
|
// TODO: This rotate stops Firefox from flickering, but also disables the scaleY(0.75)
|
|
// TODO: The dot looks like it's jumping.
|
|
// TODO: -moz-transform: scaleY(0.75) didn't do anything
|
|
// TODO: Does not break Chrome's oval.
|
|
-moz-transform: rotate(0)
|
|
margin-bottom: -$levelDotHeight / 3 + $levelDotHoverZ
|
|
@include box-shadow(0px 0px 35px skyblue)
|
|
|
|
&.next
|
|
margin-bottom: -2 * $levelDotHeight / 3 + 2 * $levelDotHoverZ
|
|
|
|
.level
|
|
a
|
|
display: block
|
|
padding: $levelClickRadius
|
|
margin-left: -0.5 * $levelClickRadius
|
|
margin-top: -0.5 * $levelClickRadius
|
|
border-radius: $levelClickRadius
|
|
|
|
&.next a
|
|
padding: 2 * $levelClickRadius
|
|
margin-left: 2 * -0.5 * $levelClickRadius
|
|
margin-top: 2 * -0.5 * $levelClickRadius
|
|
border-radius: 2 * $levelClickRadius
|
|
|
|
.tooltip
|
|
z-index: 2
|
|
|
|
.tooltip-arrow
|
|
display: none
|
|
|
|
.level-info-container
|
|
display: none
|
|
position: absolute
|
|
z-index: 3
|
|
width: 362px
|
|
//min-height: 179px
|
|
padding: 17px 20px 20px 20px
|
|
border: 0
|
|
background: transparent url(/images/pages/play/level-info-background.png) no-repeat center center
|
|
background-size: 100% 100%
|
|
|
|
.level-info
|
|
|
|
h3
|
|
color: rgb(232, 217, 87)
|
|
text-shadow: black 2px 2px 0, black -2px -2px 0, black 2px -2px 0, black -2px 2px 0, black 2px 0px 0, black 0px -2px 0, black -2px 0px 0, black 0px 2px 0
|
|
padding: 0 2px
|
|
margin: 0 0 10px 31px
|
|
white-space: nowrap
|
|
overflow: hidden
|
|
text-overflow: ellipsis
|
|
|
|
.level-description
|
|
color: black
|
|
|
|
img
|
|
display: block
|
|
margin: 0px auto
|
|
max-width: 100%
|
|
|
|
kbd
|
|
margin: 0 2px 2px 0
|
|
display: inline-block
|
|
font-size: 12px
|
|
|
|
.level-status
|
|
background: transparent url(/images/pages/play/level-info-status-spritesheet.png) no-repeat 0 0
|
|
width: 60px
|
|
height: 60px
|
|
position: absolute
|
|
left: -15px
|
|
top: -15px
|
|
|
|
&.complete .level-status
|
|
background-position: -60px 0
|
|
|
|
&.premium .level-status
|
|
background-position: -120px 0
|
|
|
|
&.complete.premium .level-status
|
|
background-position: -180px 0
|
|
|
|
.start-level
|
|
min-width: 200px
|
|
display: block
|
|
margin: 10px auto 0 auto
|
|
position: relative
|
|
|
|
.badge
|
|
position: absolute
|
|
top: auto
|
|
left: auto
|
|
right: -25px
|
|
bottom: -25px
|
|
font-size: 20px
|
|
color: black
|
|
border: 1px solid black
|
|
background-color: rgb(232, 217, 87)
|
|
border-radius: 50%
|
|
opacity: 1
|
|
padding: 3px 9px
|
|
|
|
&.shows-leaderboard
|
|
.start-level, .view-solutions
|
|
min-width: calc(50% - 5px)
|
|
display: inline-block
|
|
width: calc(50% - 5px)
|
|
|
|
.start-level
|
|
margin: 10px 0 0 5px
|
|
|
|
.view-solutions
|
|
margin: 10px 5px 0 0
|
|
|
|
.course-version
|
|
text-align: center
|
|
|
|
.campaign-switch
|
|
color: purple
|
|
position: absolute
|
|
z-index: 1
|
|
font-size: 2vw
|
|
text-shadow: 0 0 0.3vw white, 0 0 0.3vw white
|
|
|
|
&:hover
|
|
text-decoration: none
|
|
|
|
.next-level-line
|
|
transform-origin: 0 100%
|
|
height: 8px
|
|
position: absolute
|
|
|
|
.line
|
|
width: calc(100% - 12px - 10px)
|
|
float: left
|
|
margin-top: 2px
|
|
margin-bottom: 2px
|
|
height: 4px
|
|
background: repeating-linear-gradient(-45deg, #AF9F7D, #DFC89C 5px, #F1EAC0 5px, #AF9F7D 10px)
|
|
box-shadow: 0px 0px 4px black
|
|
|
|
.point
|
|
width: 12px
|
|
float: left
|
|
margin-top: -4px
|
|
border-top: 8px solid transparent
|
|
border-bottom: 8px solid transparent
|
|
border-left: 12px solid lighten(#F1EAC0, 10%)
|
|
|
|
.game-controls
|
|
position: absolute
|
|
right: 1%
|
|
bottom: 1%
|
|
z-index: 2
|
|
|
|
.btn
|
|
&:not(:first-child)
|
|
margin-left: $gameControlMargin
|
|
@media only screen and (max-height: 650px)
|
|
margin-left: 0
|
|
width: $gameControlSize
|
|
height: $gameControlSize
|
|
|
|
@media only screen and (max-height: 650px)
|
|
@include scale(0.67)
|
|
|
|
background: url(/images/pages/play/menu_icons.png) no-repeat
|
|
|
|
position: relative
|
|
img
|
|
position: absolute
|
|
left: 0
|
|
top: 0
|
|
width: 100%
|
|
height: 100%
|
|
|
|
background-size: cover
|
|
@include transition(0.5s ease)
|
|
@include box-shadow(2px 2px 4px black)
|
|
border: 0
|
|
border-radius: 12px
|
|
// IE9 shows a blank white button with this MS gradient filter in place
|
|
filter: none
|
|
|
|
&:hover
|
|
@include box-shadow(0 0 12px #bbf)
|
|
|
|
&:active, &.highlighted
|
|
@include box-shadow(0 0 20px white)
|
|
|
|
&.items
|
|
background-position: (-1 * $gameControlSize) 0px
|
|
&.heroes
|
|
background-position: (-2 * $gameControlSize) 0px
|
|
&.achievements
|
|
background-position: (-3 * $gameControlSize) 0px
|
|
&.account
|
|
//background-position: (-4 * $gameControlSize) 0px
|
|
background-position: (-5 * $gameControlSize) 0px
|
|
&.settings
|
|
background-position: (-5 * $gameControlSize) 0px
|
|
&.gems
|
|
background-position: (-6 * $gameControlSize) 0px
|
|
&.poll
|
|
background-position: (-4 * $gameControlSize) 0px
|
|
|
|
.tooltip
|
|
font-size: 24px
|
|
|
|
.tooltip-arrow
|
|
display: none
|
|
|
|
.user-status
|
|
position: absolute
|
|
bottom: 16px
|
|
left: 8px
|
|
text-align: center
|
|
font-size: 24px
|
|
color: white
|
|
text-shadow: 0px 2px 1px black, 0px -2px 1px black, -2px 0px 1px black, 2px 0px 1px black
|
|
height: 32px
|
|
line-height: 32px
|
|
|
|
.user-status-line
|
|
position: relative
|
|
|
|
button.btn.btn-illustrated
|
|
margin-left: 10px
|
|
min-width: 90px
|
|
height: 32px
|
|
color: white
|
|
|
|
.gem, .player-hero-icon
|
|
position: absolute
|
|
top: 1px
|
|
|
|
#gems-count
|
|
margin-left: 40px
|
|
|
|
.player-level
|
|
margin-left: 5px
|
|
|
|
.player-name
|
|
margin-left: 45px
|
|
|
|
a
|
|
color: white
|
|
|
|
$spriteSheetSize: 30px
|
|
|
|
.player-hero-icon
|
|
background: transparent url(/images/pages/play/play-spritesheet.png)
|
|
background-size: cover
|
|
background-position: (-2 * $spriteSheetSize) 0
|
|
display: inline-block
|
|
width: 30px
|
|
height: 30px
|
|
margin: 0px 2px
|
|
|
|
.level-indicator
|
|
margin-left: 15px
|
|
color: white
|
|
display: inline-block
|
|
margin: 0 2px
|
|
|
|
.player-hero-icon
|
|
margin-left: 10px
|
|
background-position: (-4 * $spriteSheetSize) 0
|
|
|
|
&.knight
|
|
background-position: (-5 * $spriteSheetSize) 0
|
|
&.librarian
|
|
background-position: (-6 * $spriteSheetSize) 0
|
|
&.ninja
|
|
background-position: (-7 * $spriteSheetSize) 0
|
|
&.potion-master
|
|
background-position: (-8 * $spriteSheetSize) 0
|
|
&.samurai
|
|
background-position: (-9 * $spriteSheetSize) 0
|
|
&.trapper
|
|
background-position: (-10 * $spriteSheetSize) 0
|
|
&.forest-archer
|
|
background-position: (-11 * $spriteSheetSize) 0
|
|
&.sorcerer
|
|
background-position: (-12 * $spriteSheetSize) 0
|
|
|
|
.campaign-control-button
|
|
position: absolute
|
|
right: 1%
|
|
top: 1%
|
|
padding: 3px 8px
|
|
@include opacity(0.75)
|
|
|
|
&:hover
|
|
@include opacity(1.0)
|
|
|
|
.glyphicon
|
|
font-size: 32px
|
|
|
|
#volume-button
|
|
.glyphicon
|
|
display: none
|
|
|
|
&.vol-up .glyphicon.glyphicon-volume-up
|
|
display: inline-block
|
|
|
|
&.vol-off .glyphicon.glyphicon-volume-off
|
|
display: inline-block
|
|
@include opacity(0.50)
|
|
&:hover
|
|
@include opacity(0.75)
|
|
|
|
&.vol-down .glyphicon.glyphicon-volume-down
|
|
display: inline-block
|
|
|
|
#back-button, #clear-storage-button
|
|
position: absolute
|
|
right: 70px
|
|
right: -webkit-calc(1% + 55px)
|
|
right: calc(1% + 55px)
|
|
|
|
#campaign-status
|
|
position: absolute
|
|
left: 0
|
|
top: 0
|
|
width: 100%
|
|
margin: 0
|
|
text-align: center
|
|
color: rgb(232, 217, 87)
|
|
font-size: 28px
|
|
text-shadow: black 2px 2px 0, black -2px -2px 0, black 2px -2px 0, black -2px 2px 0, black 2px 0px 0, black 0px -2px 0, black -2px 0px 0, black 0px 2px 0
|
|
z-index: 30
|
|
pointer-events: none
|
|
|
|
.campaign-status-background
|
|
background: transparent url(/images/pages/play/campaign-banner.png) no-repeat center center
|
|
border-radius: 10px
|
|
padding-top: 30px
|
|
display: inline-block
|
|
min-width: 250px
|
|
height: 106px
|
|
|
|
.campaign-name
|
|
line-height: 26px
|
|
|
|
.levels-completed
|
|
font-size: 22px
|
|
|
|
.particle-man
|
|
z-index: 2
|
|
|
|
.portal
|
|
position: relative
|
|
width: 100%
|
|
height: 100%
|
|
background: transparent url(/images/pages/play/portal-background.png)
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
overflow: hidden
|
|
|
|
.portals
|
|
$campaignWidth: 317px
|
|
$campaignHeight: 634px
|
|
$campaignHoverScale: 1.2
|
|
width: 6 * $campaignWidth
|
|
height: $campaignHeight * $campaignHoverScale
|
|
flex-wrap: nowrap
|
|
display: flex
|
|
overflow: hidden
|
|
|
|
.campaign
|
|
width: $campaignWidth
|
|
height: $campaignHeight
|
|
margin-top: $campaignHeight * ($campaignHoverScale - 1) / 2
|
|
background: transparent url(/images/pages/play/portal-campaigns.png) no-repeat 0 0
|
|
display: inline-block
|
|
flex-shrink: 0
|
|
position: relative
|
|
cursor: pointer
|
|
// http://easings.net/#easeOutBack plus tweaked a bit: http://cubic-bezier.com/#.11,.67,.08,1.42
|
|
@include transition(0.25s cubic-bezier(0.11, 0.67, 0.8, 1.42))
|
|
|
|
&:hover
|
|
@include scale($campaignHoverScale)
|
|
|
|
&.silhouette
|
|
@include filter(contrast(50%) brightness(65%))
|
|
pointer-events: none
|
|
|
|
&.locked
|
|
@include filter(contrast(80%) brightness(80%))
|
|
pointer-events: none
|
|
|
|
&.forest
|
|
background-position: (-1 * $campaignWidth) 0
|
|
&.desert
|
|
background-position: (-2 * $campaignWidth) 0
|
|
&.mountain
|
|
background-position: (-3 * $campaignWidth) 0
|
|
&.glacier
|
|
background-position: (-4 * $campaignWidth) 0
|
|
&.volcano
|
|
background-position: (-5 * $campaignWidth) 0
|
|
|
|
.campaign-label
|
|
position: absolute
|
|
top: 55%
|
|
width: 100%
|
|
text-align: center
|
|
|
|
.campaign-name, .levels-completed, .campaign-locked
|
|
margin: 0
|
|
color: white
|
|
text-shadow: black 2px 2px 0, black -2px -2px 0, black 2px -2px 0, black -2px 2px 0, black 2px 0px 0, black 0px -2px 0, black -2px 0px 0, black 0px 2px 0
|
|
|
|
.campaign-locked
|
|
margin: 32px 0
|
|
|
|
.campaign-description
|
|
margin: 0px 40px
|
|
background: transparent url(/images/level/popover_border_background.png) no-repeat
|
|
background-size: 100% 100%
|
|
padding: 12px
|
|
color: black
|
|
|
|
.levels-completed
|
|
font-size: 22px
|
|
|
|
.play-button
|
|
margin: 15px 0
|
|
min-width: 100px
|
|
|
|
.small-nav-logo, .picoctf-powered-by
|
|
position: absolute
|
|
top: 1%
|
|
left: 1%
|
|
height: 60px
|
|
z-index: 1
|
|
|
|
.picoctf-logo .small-nav-logo
|
|
height: 30px
|
|
|
|
.picoctf-powered-by
|
|
color: rgb(227, 173, 53)
|
|
top: calc(1% + 30px)
|
|
|
|
img
|
|
height: 30px
|
|
|
|
.ad-container
|
|
width: 100%
|
|
height: 90px
|
|
text-align: center
|
|
|
|
.gameplay-container
|
|
position: absolute
|
|
|
|
body.ipad #campaign-view
|
|
// iPad only supports up to Kithgard Gates for now.
|
|
.campaign-switch
|
|
display: none
|
|
|
|
body[lang='ru'] .portals h2
|
|
font-size: 26px
|
|
|