mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-11-28 01:55:38 -05:00
321 lines
7.9 KiB
Sass
321 lines
7.9 KiB
Sass
@import "app/styles/mixins"
|
|
@import "app/styles/bootstrap/variables"
|
|
|
|
$mapHeight: 1536
|
|
$forestMapWidth: 2500
|
|
$dungeonMapWidth: 2350
|
|
$forestMapSeaBackground: #71bad0
|
|
$dungeonMapCaveBackground: rgba(68, 54, 45, 1)
|
|
$dungeonMapCaveBackgroundTransparent: rgba(68, 54, 45, 0)
|
|
$levelDotWidth: 2%
|
|
$levelDotHeight: $levelDotWidth * $forestMapWidth / $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
|
|
|
|
#world-map-view
|
|
width: 100%
|
|
height: 100%
|
|
position: absolute
|
|
|
|
&.forest
|
|
background-color: $forestMapSeaBackground
|
|
|
|
&.dungeon
|
|
background-color: $dungeonMapCaveBackground
|
|
|
|
.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
|
|
background: linear-gradient(to bottom, $dungeonMapCaveBackground 0%, $dungeonMapCaveBackgroundTransparent 100%)
|
|
|
|
&.right-gradient
|
|
right: 0
|
|
background: linear-gradient(to left, $dungeonMapCaveBackground 0%, $dungeonMapCaveBackgroundTransparent 100%)
|
|
|
|
&.bottom-gradient
|
|
bottom: 0
|
|
background: linear-gradient(to top, $dungeonMapCaveBackground 0%, $dungeonMapCaveBackgroundTransparent 100%)
|
|
|
|
&.left-gradient
|
|
left: 0
|
|
background: linear-gradient(to right, $dungeonMapCaveBackground 0%, $dungeonMapCaveBackgroundTransparent 100%)
|
|
|
|
.map
|
|
position: relative
|
|
|
|
.map-background
|
|
width: 100%
|
|
height: 100%
|
|
|
|
.level, .level-shadow
|
|
position: absolute
|
|
border-radius: 100%
|
|
-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-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
|
|
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
|
|
|
|
.level-info-container
|
|
display: none
|
|
position: absolute
|
|
z-index: 3
|
|
padding: 10px
|
|
border-width: 15px
|
|
// Using modernizr-mixin for compat detection
|
|
@include yep(borderimage)
|
|
border-image: url(/images/level/popover_background.png) 18 fill round
|
|
@include nope(borderimage)
|
|
background-color: rgb(247, 242, 218)
|
|
|
|
.level-info.complete h3:after
|
|
content: " - Complete!"
|
|
color: green
|
|
|
|
.level-info.started h3:after
|
|
content: " - Started"
|
|
color: desaturate(green, 50%)
|
|
|
|
.level-info
|
|
h3
|
|
margin-top: 0
|
|
margin-bottom: 0px
|
|
|
|
.level-description
|
|
color: black
|
|
text-shadow: 0 1px 0 white
|
|
|
|
.campaign-label
|
|
text-shadow: 0 1px 0 white
|
|
|
|
.start-level
|
|
display: block
|
|
margin: 10px auto 0 auto
|
|
width: 200px
|
|
|
|
.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
|
|
|
|
&#forest-link
|
|
left: 94.5%
|
|
top: 7%
|
|
transform: rotate(-35deg)
|
|
|
|
&#dungeon-link
|
|
left: 26.6%
|
|
top: 43%
|
|
transform: rotate(180deg)
|
|
|
|
.game-controls
|
|
position: absolute
|
|
right: 1%
|
|
bottom: 1%
|
|
z-index: 3
|
|
|
|
.btn
|
|
&:not(:first-child)
|
|
margin-left: $gameControlMargin
|
|
width: $gameControlSize
|
|
height: $gameControlSize
|
|
|
|
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
|
|
@include box-shadow(0 0 20px white)
|
|
|
|
&.heroes
|
|
background-position: (-1 * $gameControlSize) 0px
|
|
&.achievements
|
|
background-position: (-2 * $gameControlSize) 0px
|
|
&.account
|
|
background-position: (-3 * $gameControlSize) 0px
|
|
&.settings
|
|
background-position: (-4 * $gameControlSize) 0px
|
|
&.gems
|
|
background-position: (-5 * $gameControlSize) 0px
|
|
|
|
.tooltip
|
|
font-size: 24px
|
|
|
|
.user-status
|
|
position: absolute
|
|
bottom: 1%
|
|
left: 1%
|
|
text-align: center
|
|
font-size: 24px
|
|
color: white
|
|
text-shadow: 1px 1px 0px black
|
|
|
|
button
|
|
margin-left: 10px
|
|
|
|
#volume-button
|
|
position: absolute
|
|
left: 1%
|
|
top: 1%
|
|
padding: 3px 8px
|
|
@include opacity(0.75)
|
|
|
|
&:hover
|
|
@include opacity(1.0)
|
|
|
|
.glyphicon
|
|
display: none
|
|
font-size: 32px
|
|
|
|
&.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
|
|
|
|
body:not(.ipad) #world-map-view
|
|
.level-info-container
|
|
pointer-events: none
|
|
|
|
|
|
|
|
body.ipad #world-map-view
|
|
// iPad only supports up to Kithgard Gates for now.
|
|
.campaign-switch
|
|
display: none
|
|
|
|
.old-levels
|
|
display: none
|