codecombat/app/styles/achievements.sass

188 lines
4.2 KiB
Sass
Raw Normal View History

.locked
filter: grayscale(100%)
-moz-filter: grayscale(100%)
-webkit-filter: grayscale(100%)
2014-07-07 09:03:28 -04:00
.achievement-body
.achievement-icon
position: absolute
top: 0px
.achievement-image
width: 100%
height: 100%
img
position: absolute
margin: auto
top: 0
left: 0
right: 0
bottom: 0
.achievement-content
background-image: url("/images/achievements/reward_background2.png")
background-size: 100% 100%
text-align: center
overflow: hidden
> .achievement-title
2014-07-07 09:03:28 -04:00
font-family: Bangers
overflow: hidden
> .achievement-description
2014-07-07 09:03:28 -04:00
white-space: initial
font-size: 12px
2014-07-07 09:03:28 -04:00
line-height: 1.3em
overflow: hidden
max-height: 2.6em
margin-top: auto
margin-bottom: 0px !important
padding-left: 8px
2014-07-07 09:03:28 -04:00
#user-achievements-view
.row
//.col-lg-4, .col-xs-12
padding-right: 0px !important
.achievement-body
width: 335px
height: 120px
margin: 10px 0px
.achievement-icon
width: 120px
height: 120px
top: 0px
.achievement-image
img
-moz-transform: scale(0.6)
-webkit-transform: scale(0.6)
transform: scale(0.6)
.achievement-content
margin-left: 60px
margin-right: 5px
width: 260px
height: 100px
padding: 20px 10px 20px 60px
.achievement-title
font-size: 20px
padding-left: -50px
.achievement-description
font-size: 12px
line-height: 1.3em
max-height: 2.6em
2014-07-07 09:03:28 -04:00
.notifyjs-achievement-wood-base, .notifyjs-achievement-stone-base, .notifyjs-achievement-silver-base,
.notifyjs-achievement-gold-base, .notifyjs-achievement-diamond-base
padding: 20px 0px
cursor: default
2014-07-07 09:03:28 -04:00
.achievement-body
.achievement-icon
z-index: 1000
width: 200px
height: 200px
left: -140px
top: 0px
.achievement-image
img
position: absolute
margin: auto
top: 0
left: 0
right: 0
bottom: 0
.achievement-content
position: relative
width: 450px
height: 160px
padding: 24px 30px 20px 60px
.achievement-title
font-size: 28px
padding-left: -50px
.achievement-description
font-size: 15px
line-height: 1.3em
max-height: 2.6em
margin-top: auto
margin-bottom: 0px !important
.progress-wrapper
margin-left: 20px
position: absolute
bottom: 48px
.user-level
font-size: 20px
position: absolute
left: -15px
margin-top: -3px
box-shadow: 0 0 0 2px black, 0 0 0 4px lightgrey, 0 0 0 6px black
> .progress-bar-wrapper
position: absolute
width: 331px
height: 20px
z-index: 2
> .progress
margin-top: 5px
border-radius: 50px
height: 14px
> .progress-bar-border
position: absolute
width: 340px
height: 30px
margin-top: -2px
background: url("/images/achievements/bar_border.png") no-repeat
background-size: 100% 100%
z-index: 1
2014-07-07 09:03:28 -04:00
.notifyjs-achievement-wood-base
.achievement-icon
background: url("/images/achievements/border_wood.png") no-repeat
background-size: 100% 100%
.notifyjs-achievement-stone-base
.achievement-icon
background: url("/images/achievements/border_stone.png") no-repeat
background-size: 100% 100%
.notifyjs-achievement-silver-base
.achievement-icon
background: url("/images/achievements/border_silver.png") no-repeat
background-size: 100% 100%
.notifyjs-achievement-gold-base
.achievement-icon
background: url("/images/achievements/border_gold.png") no-repeat
background-size: 100% 100%
.notifyjs-achievement-diamond-base
.achievement-icon
background: url("/images/achievements/border_diamond.png") no-repeat
background-size: 100% 100%
.exp-bar-accumulated
background-color: #680080
.exp-bar-new
background-color: #0096ff
.exp-bar-left
background-color: #fffbfd
.user-level
z-index: 1000
box-shadow: 0 0 0 1px black, 0 0 0 3px lightgrey, 0 0 0 4px black
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif