mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-11-28 18:15:52 -05:00
328 lines
6.7 KiB
Sass
328 lines
6.7 KiB
Sass
@import "app/styles/mixins"
|
|
@import "app/styles/bootstrap/variables"
|
|
|
|
$heroCanvasHeight: 265px
|
|
|
|
#play-heroes-modal
|
|
|
|
//- Clear modal defaults
|
|
|
|
.modal-dialog
|
|
padding: 0
|
|
width: 820px
|
|
height: 658px
|
|
|
|
|
|
//- Background
|
|
|
|
#play-heroes-background
|
|
position: absolute
|
|
top: -59px
|
|
left: -20px
|
|
|
|
|
|
//- Header
|
|
|
|
h1
|
|
position: absolute
|
|
left: 154px
|
|
top: 25px
|
|
margin: 0
|
|
width: 450px
|
|
text-align: center
|
|
color: rgb(254,188,68)
|
|
font-size: 38px
|
|
text-shadow: black 4px 4px 0, black -4px -4px 0, black 4px -4px 0, black -4px 4px 0, black 4px 0px 0, black 0px -4px 0, black -4px 0px 0, black 0px 4px 0
|
|
|
|
|
|
//- Close modal button
|
|
|
|
#close-modal
|
|
position: absolute
|
|
left: 615px
|
|
top: 17px
|
|
width: 60px
|
|
height: 60px
|
|
color: white
|
|
text-align: center
|
|
font-size: 30px
|
|
padding-top: 15px
|
|
cursor: pointer
|
|
@include rotate(-3deg)
|
|
|
|
&:hover
|
|
color: yellow
|
|
|
|
|
|
//- Carousel character portraits
|
|
|
|
#hero-carousel
|
|
width: 750px
|
|
height: 386px
|
|
position: absolute
|
|
left: 34px
|
|
top: 117px
|
|
|
|
.carousel-indicator-container
|
|
position: relative
|
|
z-index: 1
|
|
|
|
.carousel-indicators
|
|
position: static
|
|
width: 100%
|
|
margin-left: 0
|
|
|
|
.hero-indicator
|
|
width: 104px
|
|
height: 98px
|
|
margin: 0 -11px
|
|
position: relative
|
|
background: url(/images/pages/play/modal/hero_portrait_picker_inactive.png)
|
|
border: none
|
|
&.active
|
|
background: url(/images/pages/play/modal/hero_portrait_picker_active.png)
|
|
z-index: 5
|
|
|
|
.hero-avatar
|
|
width: 61px
|
|
height: 61px
|
|
background-size: contain
|
|
position: relative
|
|
left: 21px
|
|
top: 18px
|
|
|
|
&.locked
|
|
.hero-avatar
|
|
@include filter(contrast(50%) brightness(65%))
|
|
|
|
.lock-indicator
|
|
position: absolute
|
|
width: 40%
|
|
left: 30%
|
|
top: 30%
|
|
@include filter(invert(90%))
|
|
|
|
|
|
//- Small transformations to jumble the hero icons a little
|
|
|
|
.hero-index-0
|
|
transform: rotate(-5deg)
|
|
z-index: 2
|
|
|
|
.hero-index-1
|
|
top: -3px
|
|
z-index: 1
|
|
|
|
.hero-index-2
|
|
top: -3px
|
|
transform: rotate(5deg)
|
|
z-index: 1
|
|
|
|
.hero-index-3
|
|
transform: rotate(-1deg)
|
|
z-index: 0
|
|
|
|
.hero-index-4
|
|
transform: rotate(3deg)
|
|
|
|
.hero-index-5
|
|
z-index: 0
|
|
|
|
.hero-index-6
|
|
transform: rotate(6deg)
|
|
top: -8px
|
|
z-index: 1
|
|
|
|
.hero-index-8
|
|
transform: rotate(4deg)
|
|
|
|
|
|
//- Carousel panel
|
|
|
|
#hero-carousel
|
|
.hero-item
|
|
|
|
&.locked
|
|
@include opacity(0.6)
|
|
|
|
canvas, .hero-feature-image
|
|
width: 334px
|
|
height: $heroCanvasHeight
|
|
float: left
|
|
|
|
.hero-stats
|
|
width: 384px
|
|
height: $heroCanvasHeight
|
|
float: left
|
|
|
|
.hero-feature-image
|
|
display: none
|
|
text-align: center
|
|
|
|
img
|
|
height: $heroCanvasHeight
|
|
|
|
.hero-stats
|
|
color: white
|
|
|
|
h2
|
|
margin-top: 0px
|
|
color: white
|
|
|
|
.hero-description
|
|
margin-bottom: 10px
|
|
|
|
.hero-stat-row
|
|
margin: 5px 0
|
|
|
|
.stat-label
|
|
float: left
|
|
width: 100px
|
|
color: rgb(203,170,148)
|
|
|
|
.stat-value
|
|
display: inline-block
|
|
width: 280px
|
|
color: rgb(244,189,68)
|
|
|
|
.stat-progress
|
|
background: rgb(32,27,22)
|
|
height: 15px
|
|
padding: 4px 5px
|
|
border-radius: 16px
|
|
position: relative
|
|
top: 2px
|
|
left: -3px
|
|
width: 70%
|
|
|
|
.stat-progress-bar
|
|
height: 7px
|
|
border-radius: 7px
|
|
|
|
|
|
&.attack .stat-progress-bar
|
|
background: purple
|
|
|
|
&.health .stat-progress-bar
|
|
background: red
|
|
|
|
&.speed .stat-progress-bar
|
|
background: green
|
|
|
|
|
|
//- Carousel switch buttons
|
|
|
|
a.left, a.right
|
|
color: rgb(74,61,51)
|
|
position: absolute
|
|
top: 195px
|
|
width: 40px
|
|
height: 84px
|
|
font-size: 24px
|
|
|
|
.glyphicon
|
|
position: relative
|
|
top: 27px
|
|
left: 8px
|
|
|
|
&:hover, &:active
|
|
color: rgb(126,105,88)
|
|
|
|
a.right
|
|
right: -49px
|
|
|
|
a.left
|
|
left: -46px
|
|
.glyphicon
|
|
@include scaleXY(-1, 1)
|
|
|
|
|
|
//- Programming select box
|
|
|
|
.form
|
|
position: absolute
|
|
left: 32px
|
|
top: 527px
|
|
width: 541px
|
|
height: 102px
|
|
padding: 10px 40px
|
|
|
|
.help-block
|
|
color: rgb(51,51,51)
|
|
font-size: 14px
|
|
font-weight: bold
|
|
|
|
select
|
|
font-size: 18px
|
|
|
|
.fancy-select
|
|
display: inline-block
|
|
width: 100%
|
|
|
|
.options
|
|
text-transform: none
|
|
|
|
.trigger, .options
|
|
background-color: rgb(239,232,217)
|
|
width: 100%
|
|
color: black
|
|
|
|
.trigger
|
|
text-transform: uppercase
|
|
border: 3px solid black
|
|
font-size: 16px
|
|
padding: 5px 10px
|
|
|
|
//- the little triangle on the right side of the fancy select box
|
|
&:after
|
|
border: 8px solid transparent
|
|
border-top-color: black
|
|
top: 13px
|
|
right: 11px
|
|
|
|
.options
|
|
padding-left: 5px
|
|
|
|
.selected
|
|
color: black
|
|
|
|
.hover
|
|
color: black
|
|
background-color: #abc
|
|
|
|
.options
|
|
li
|
|
padding-left: 40px
|
|
background: transparent url(/images/common/code_languages/javascript_small.png) no-repeat left center
|
|
background-size: 32px 32px
|
|
|
|
&[data-value="python"]
|
|
background-image: url(/images/common/code_languages/python_small.png)
|
|
&[data-value="coffeescript"]
|
|
background-image: url(/images/common/code_languages/coffeescript_small.png)
|
|
&[data-value="clojure"]
|
|
background-image: url(/images/common/code_languages/clojure_small.png)
|
|
&[data-value="lua"]
|
|
background-image: url(/images/common/code_languages/lua_small.png)
|
|
&[data-value="io"]
|
|
background-image: url(/images/common/code_languages/io_small.png)
|
|
|
|
#confirm-button
|
|
background: url(/images/pages/play/modal/confirm-button.png)
|
|
width: 209px
|
|
height: 110px
|
|
position: absolute
|
|
left: 588px
|
|
top: 522px
|
|
padding: 36px 0
|
|
text-align: center
|
|
text-transform: uppercase
|
|
font-size: 26px
|
|
font-family: Open Sans Condensed
|
|
color: white
|
|
|
|
|
|
body.ipad #play-heroes-modal
|
|
// iPad is Python-only for now, and has its own reset button.
|
|
.form
|
|
display: none
|