codecombat/app/styles/play/level/modal/hero-victory-modal.sass

224 lines
4.6 KiB
Sass
Raw Normal View History

@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"
#hero-victory-modal
//- Top-level modal container
.modal-dialog
margin-top: 15px
padding-top: 0
2014-10-10 16:11:35 -04:00
//- Header
.background-wrapper
//background: url("/images/pages/play/level/modal/victory_modal_background.png")
2014-10-10 16:11:35 -04:00
width: 550px
border-width: 25px
border-image: url("/images/pages/play/level/modal/victory_modal_background.png") 25 fill round
border-radius: 10px
2014-10-10 16:11:35 -04:00
#victory-header
display: block
margin: 15px auto 0
// http://easings.net/#easeOutBack plus tweaked a bit: http://cubic-bezier.com/#.18,.68,.75,2
@include transition(0.5s cubic-bezier(0.18, 0.68, 0.75, 2))
&.out
@include scale(0)
2014-10-10 16:11:35 -04:00
.modal-header
height: 85px
2014-10-10 16:11:35 -04:00
border: none
//- Achievement panels
.modal-body
padding: 0 20px
min-height: 30px
2014-10-10 16:11:35 -04:00
.achievement-panel
background: url("/images/pages/play/level/modal/achievement_plate.png")
width: 451px
height: 144px
margin: 5px auto
position: relative
@include transition-duration(1s)
2014-10-10 16:11:35 -04:00
2014-10-17 23:47:32 -04:00
-webkit-filter: grayscale(100%) brightness(75%)
-moz-filter: grayscale(100%) brightness(75%)
-o-filter: grayscale(100%) brightness(75%)
filter: grayscale(100%) brightness(75%)
2014-10-10 16:11:35 -04:00
&.earned
-webkit-filter: none
-moz-filter: none
-o-filter: none
filter: none
2014-10-17 23:47:32 -04:00
.achievement-description
@include opacity(1)
2014-10-10 16:11:35 -04:00
.achievement-description
2014-10-17 23:47:32 -04:00
@include opacity(0.75)
2014-10-10 16:11:35 -04:00
position: absolute
text-align: center
left: 95px
right: 98px
top: 10px
color: white
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
2014-10-17 23:47:32 -04:00
2014-10-10 16:11:35 -04:00
.achievement-rewards
position: absolute
left: 25px
right: 23px
top: 41px
bottom: 18px
2014-10-17 23:47:32 -04:00
@include flexbox()
@include flex-justify-center()
2014-10-10 16:11:35 -04:00
//- Reward panels
.reward-panel
background: url("/images/pages/play/level/modal/reward_plate.png")
width: 77px
height: 85px
float: left
margin: 0 1.8px
position: relative
z-index: 1
@include transition(0.25s ease)
&.animating
@include scale(1.5)
z-index: 2
&.numerical &.animating .reward-text
font-size: 18px
overflow: visible
bottom: 9px
2014-10-10 16:11:35 -04:00
.reward-image-container
top: 8px
left: 11px
height: 55px
width: 56px
position: relative
@include scale(0)
@include transition-duration(0.5s)
2014-10-10 16:11:35 -04:00
&.show
@include scale(1)
2014-10-10 16:11:35 -04:00
&.pending-reward-image
img
-webkit-filter: brightness(2000%) contrast(25%)
-moz-filter: brightness(2000%) contrast(25%)
-o-filter: brightness(2000%) contrast(25%)
filter: brightness(2000%) contrast(25%)
2014-10-10 16:11:35 -04:00
img
margin: 0
position: absolute
top: 50%
left: 50%
margin-right: -50%
@include transition-duration(0.5s)
@include translate(-50%, -50%)
2014-10-10 16:11:35 -04:00
max-width: 56px
max-height: 55px
.reward-text
position: absolute
bottom: 6px
left: 4px
right: 3px
height: 15px
text-align: center
color: white
font-weight: bold
font-size: 12px
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
//- Pulse effect
+keyframes(rewardPulse)
2014-10-10 16:11:35 -04:00
from
max-width: 56px
max-height: 55px
2014-10-10 16:11:35 -04:00
50%
width: 66px
max-width: 66px
max-height: 66px
2014-10-10 16:11:35 -04:00
to
max-width: 56px
max-height: 55px
2014-10-10 16:11:35 -04:00
.xp .pulse
@include animation(rewardPulse 0.15s infinite)
.gems .pulse
@include animation(rewardPulse 0.25s infinite)
2014-10-10 16:11:35 -04:00
//- Footer
.modal-content
padding-bottom: 50px // so the footer appears at the bottom
2014-10-17 23:47:32 -04:00
&.with-sign-up .modal-content
padding-bottom: 100px // need more space for signup poke
2014-10-10 16:11:35 -04:00
.modal-footer
position: absolute
bottom: -20px
2014-10-10 16:11:35 -04:00
left: 20px
right: 20px
#totals
color: white
2014-10-17 23:47:32 -04:00
p.sign-up-poke
position: absolute
bottom: 60px
right: 20px
color: white
.sign-up-button
float: right
margin-left: 10px
.ladder-submission-view
display: inline-block
color: white
.rank-button.btn-block
display: inline-block
width: initial
padding-left: 19px
padding-right: 19px
.last-submitted
float: none
html.no-borderimage
#hero-victory-modal
.background-wrapper
background: url("/images/pages/play/level/modal/victory_modal_background.png")
height: 650px
#victory-header
margin-top: 40px
.modal-header
height: 110px
.modal-content
height: 650px
padding-bottom: 0
.modal-footer
bottom: 20px