mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-12-01 11:27:14 -05:00
173 lines
4 KiB
Sass
173 lines
4 KiB
Sass
@import "app/styles/mixins"
|
|
@import "app/styles/bootstrap/variables"
|
|
|
|
$maxHeroPortraitSize: 100px
|
|
$minHeroPortraitSize: 50px
|
|
|
|
$heroCanvasHeight: 265px
|
|
|
|
#choose-hero-view
|
|
|
|
#hero-carousel
|
|
margin: 0 auto 20px auto
|
|
|
|
.carousel-indicator-container
|
|
height: $maxHeroPortraitSize
|
|
text-align: center
|
|
width: 100%
|
|
margin-bottom: 10px
|
|
margin-top: 10px
|
|
position: relative
|
|
z-index: 1
|
|
|
|
.carousel-indicators
|
|
position: static
|
|
height: $maxHeroPortraitSize
|
|
width: 100%
|
|
margin-left: 0
|
|
background-repeat: no-repeat
|
|
|
|
.hero-indicator
|
|
width: $maxHeroPortraitSize
|
|
height: $maxHeroPortraitSize
|
|
margin: 0px 3px
|
|
border: 2px solid black
|
|
border-radius: 2px
|
|
position: relative
|
|
|
|
.hero-avatar
|
|
width: 100%
|
|
height: 100%
|
|
background-size: contain
|
|
|
|
&.initialized
|
|
@include transition(0.5s ease)
|
|
|
|
&.active
|
|
border-color: gold
|
|
|
|
&.locked
|
|
.hero-avatar
|
|
@include filter(contrast(50%) brightness(65%))
|
|
|
|
.lock-indicator
|
|
position: absolute
|
|
width: 40%
|
|
left: 30%
|
|
top: 30%
|
|
@include filter(invert(90%))
|
|
|
|
.hero-item
|
|
|
|
&.locked
|
|
@include opacity(0.6)
|
|
|
|
canvas, .hero-feature-image, .hero-stats
|
|
width: 45%
|
|
height: $heroCanvasHeight
|
|
float: left
|
|
|
|
canvas, .hero-feature-image
|
|
margin-left: 5%
|
|
|
|
.hero-feature-image
|
|
display: none
|
|
text-align: center
|
|
|
|
img
|
|
height: $heroCanvasHeight
|
|
|
|
.hero-stats
|
|
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6)
|
|
|
|
.hero-class, .hero-status, .hero-skills
|
|
font-size: 14px
|
|
|
|
.hero-stat
|
|
margin: 10px 0
|
|
|
|
.progress
|
|
width: 90%
|
|
text-align: center
|
|
height: 26px
|
|
position: relative
|
|
margin: 0
|
|
|
|
.hero-stat-label
|
|
position: absolute
|
|
width: 100%
|
|
font-size: 18px
|
|
text-transform: uppercase
|
|
color: white
|
|
text-shadow: 0px 1px 0px black, 0px -1px 0px black, -1px 0px 0px black, 1px 0px 0px black
|
|
|
|
.carousel-control.left
|
|
border-top-left-radius: 10px
|
|
border-bottom-left-radius: 10px
|
|
|
|
.carousel-control.right
|
|
border-top-right-radius: 10px
|
|
border-bottom-right-radius: 10px
|
|
|
|
.carousel-control
|
|
height: 75%
|
|
top: 30%
|
|
width: 10%
|
|
|
|
.select-group
|
|
display: inline-block
|
|
min-height: 20px
|
|
margin-top: 10px
|
|
margin-bottom: 10px
|
|
padding-left: 20px
|
|
vertical-align: middle
|
|
|
|
label
|
|
margin-right: 20px
|
|
margin-bottom: 0
|
|
text-align: top
|
|
|
|
&[for="option-code-language"]
|
|
vertical-align: top
|
|
margin-top: 10px
|
|
|
|
select
|
|
font-size: 18px
|
|
|
|
.fancy-select
|
|
display: inline-block
|
|
|
|
.trigger, .options
|
|
text-transform: none
|
|
background-color: #def
|
|
|
|
.options
|
|
padding-left: 5px
|
|
|
|
.selected
|
|
color: #111
|
|
|
|
.hover
|
|
color: #111
|
|
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)
|
|
|
|
body.ipad #choose-hero-view
|
|
.form
|
|
display: none
|