mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-11-24 16:17:57 -05:00
431 lines
10 KiB
Sass
431 lines
10 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: 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)
|
|
|
|
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%
|
|
position: absolute
|
|
bottom: 75%
|
|
left: 75%
|
|
border: 1px solid black
|
|
border-radius: 100%
|
|
background: white
|
|
|
|
|
|
.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
|
|
padding: 10px
|
|
border-width: 16px 12px
|
|
// Using modernizr-mixin for compat detection
|
|
@include yep(borderimage)
|
|
border-style: solid
|
|
border-image: url(/images/level/popover_border_background.png) 16 12 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
|
|
|
|
.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: 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
|
|
|
|
.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-level-icon, .player-hero-icon
|
|
position: absolute
|
|
top: 1px
|
|
|
|
#gems-count
|
|
margin-left: 40px
|
|
|
|
.player-level
|
|
margin-left: 34px
|
|
|
|
.player-name
|
|
margin-left: 45px
|
|
|
|
$spriteSheetSize: 30px
|
|
|
|
.player-level-icon, .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
|
|
|
|
.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
|
|
|
|
|
|
#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
|
|
|
|
#campaign-status
|
|
position: absolute
|
|
left: 0
|
|
top: 15px
|
|
width: 100%
|
|
margin: 0
|
|
text-align: center
|
|
color: rgb(254,188,68)
|
|
font-size: 30px
|
|
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
|
|
|
|
|
|
body:not(.ipad) #campaign-view
|
|
.level-info-container
|
|
pointer-events: none
|
|
|
|
|
|
|
|
body.ipad #campaign-view
|
|
// iPad only supports up to Kithgard Gates for now.
|
|
.campaign-switch
|
|
display: none
|
|
|
|
.old-levels
|
|
display: none
|