mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-11-24 16:17:57 -05:00
c87f505759
Add 1st game-dev and web-dev campaigns to world selector Take player back out to world selector after completing campaigns up through forest Closes #3828
702 lines
18 KiB
Sass
702 lines
18 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 * 1.5
|
|
$levelDotShadowWidth: 0.8 * $levelDotWidth
|
|
$levelDotShadowHeight: 0.8 * $levelDotHeight
|
|
$levelClickRadius: 20px
|
|
$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
|
|
top: 0
|
|
right: 0
|
|
bottom: 0
|
|
left: 0
|
|
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
|
|
|
|
&.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: 80%
|
|
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%
|
|
width: 100%
|
|
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)
|
|
|
|
.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)
|
|
|
|
.level
|
|
a
|
|
display: block
|
|
padding: $levelClickRadius
|
|
margin-left: -0.5 * $levelClickRadius
|
|
margin-top: -0.5 * $levelClickRadius
|
|
border-radius: $levelClickRadius
|
|
|
|
.tooltip
|
|
z-index: 3
|
|
pointer-events: none
|
|
|
|
.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
|
|
|
|
.beta-container
|
|
$betaImagesWidth: 1902px
|
|
width: $campaignWidth
|
|
height: $campaignHeight
|
|
display: inline-block
|
|
flex-shrink: 0
|
|
position: relative
|
|
|
|
.beta-campaign
|
|
width: $campaignWidth
|
|
height: $campaignHeight / 2
|
|
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
|
|
|
|
.campaign-label
|
|
position: absolute
|
|
top: 40%
|
|
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
|
|
font-size: 12px
|
|
|
|
.levels-completed
|
|
font-size: 22px
|
|
|
|
.play-button
|
|
margin: 10px 0
|
|
min-width: 100px
|
|
color: white
|
|
|
|
.background-container
|
|
position: absolute
|
|
left: $campaignWidth / 4
|
|
width: $campaignWidth / 2
|
|
height: $campaignHeight / 2
|
|
background: transparent url(/images/pages/play/portal-beta-campaigns.png) no-repeat 0 0
|
|
background-size: $betaImagesWidth / 2
|
|
|
|
&.campaign-web-dev-1
|
|
background-position: -151px 0px
|
|
&.campaign-game-dev-1
|
|
background-position: -454px 0px
|
|
|
|
|
|
.small-nav-logo, .picoctf-powered-by
|
|
position: absolute
|
|
top: 1%
|
|
left: 1%
|
|
height: 60px
|
|
z-index: 1
|
|
|
|
.picoctf-logo .small-nav-logo
|
|
height: 90px
|
|
|
|
.picoctf-powered-by
|
|
color: rgb(227, 173, 53)
|
|
top: calc(1% + 90px)
|
|
margin: 10px 10px 10px 15px
|
|
|
|
img
|
|
height: 30px
|
|
|
|
.ad-container
|
|
width: 100%
|
|
height: 90px
|
|
text-align: center
|
|
|
|
.gameplay-container
|
|
position: absolute
|
|
height: 100%
|
|
width: 100%
|
|
|
|
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
|