mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-12-02 20:07:25 -05:00
403 lines
9.1 KiB
Sass
403 lines
9.1 KiB
Sass
@import "app/styles/mixins"
|
|
@import "app/styles/bootstrap/variables"
|
|
|
|
#hero-victory-modal
|
|
$hero-yellow-text: rgb(252, 201, 53)
|
|
|
|
//- Top-level modal container
|
|
.modal-dialog
|
|
margin-top: 0
|
|
padding-top: 0
|
|
width: 750px
|
|
|
|
.modal-content
|
|
position: relative
|
|
margin-top: -251px
|
|
|
|
&.full-achievements
|
|
@media only screen and (max-height: 720px)
|
|
.modal-dialog
|
|
margin-top: -76px
|
|
#victory-header
|
|
background: transparent
|
|
@media only screen and (max-height: 640px)
|
|
.modal-dialog
|
|
margin-top: -130px
|
|
#victory-header
|
|
display: none
|
|
|
|
//- Header
|
|
|
|
.background-wrapper
|
|
//background: url("/images/pages/play/level/modal/victory_modal_background.png")
|
|
width: 750px
|
|
background: transparent
|
|
border: 0px solid transparent
|
|
border-style: solid
|
|
border-image: url("/images/pages/play/level/modal/victory_modal_border_background.png") 250 0 100 0 fill round
|
|
border-width: 250px 0 100px 0
|
|
border-radius: 12px
|
|
|
|
.modal-header
|
|
border: none
|
|
position: absolute
|
|
left: 188px
|
|
width: 378px
|
|
height: 134px
|
|
margin: 0
|
|
padding: 0
|
|
|
|
#victory-header
|
|
position: relative
|
|
// 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))
|
|
z-index: 1
|
|
width: 100%
|
|
height: 100%
|
|
text-align: center
|
|
background: transparent url(/images/pages/play/level/modal/victory_hero.png/) no-repeat
|
|
background-position: center -88px
|
|
|
|
&.out
|
|
@include scale(0)
|
|
|
|
#victory-title
|
|
display: inline-block
|
|
margin-top: 74px
|
|
|
|
h1
|
|
text-transform: uppercase
|
|
text-align: center
|
|
color: $hero-yellow-text
|
|
font-size: 80px
|
|
margin: 0
|
|
padding: 0
|
|
text-shadow: black 8px 8px 0, black -8px -8px 0, black 8px -8px 0, black -8px 8px 0, black 8px 0px 0, black 0px -8px 0, black -8px 0px 0, black 0px 8px 0
|
|
|
|
//- Achievement panels
|
|
|
|
.modal-body
|
|
padding: 0 20px
|
|
min-height: 30px
|
|
margin-top: 160px
|
|
|
|
.achievement-panel
|
|
background: transparent url("/images/pages/play/level/modal/victory_modal_shelf.png") no-repeat center 73px
|
|
width: 824px
|
|
height: 127px
|
|
margin: 0px -37px 0px -57px
|
|
position: relative
|
|
|
|
@include transition-duration(1s)
|
|
|
|
-webkit-filter: grayscale(100%) brightness(75%)
|
|
-moz-filter: grayscale(100%) brightness(75%)
|
|
-o-filter: grayscale(100%) brightness(75%)
|
|
filter: grayscale(100%) brightness(75%)
|
|
|
|
&.earned
|
|
-webkit-filter: none
|
|
-moz-filter: none
|
|
-o-filter: none
|
|
filter: none
|
|
|
|
.achievement-description
|
|
@include opacity(1)
|
|
|
|
.achievement-description
|
|
@include opacity(0.75)
|
|
z-index: 1
|
|
position: absolute
|
|
text-align: center
|
|
left: 95px
|
|
right: 98px
|
|
top: 86px
|
|
color: $hero-yellow-text
|
|
font-weight: bold
|
|
text-transform: uppercase
|
|
font-family: $headings-font-family
|
|
white-space: nowrap
|
|
overflow: hidden
|
|
text-overflow: ellipsis
|
|
|
|
.achievement-rewards
|
|
position: absolute
|
|
left: 25px
|
|
right: 23px
|
|
top: 0
|
|
@include flexbox()
|
|
@include flex-justify-center()
|
|
|
|
//- 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)
|
|
|
|
&.hero, &.item, &.xp, &.gems
|
|
background: url("/images/pages/play/level/modal/reward_plate_wide.png")
|
|
width: 120px
|
|
height: 83px
|
|
margin-top: 1px
|
|
|
|
.reward-image-container
|
|
left: 33px
|
|
|
|
&.animating
|
|
@include scale(1.5)
|
|
z-index: 2
|
|
|
|
&.numerical &.animating .reward-text
|
|
font-size: 18px
|
|
overflow: visible
|
|
bottom: 9px
|
|
|
|
.reward-image-container
|
|
top: 8px
|
|
left: 11px
|
|
height: 55px
|
|
width: 56px
|
|
position: relative
|
|
|
|
@include scale(0)
|
|
@include transition-duration(0.5s)
|
|
|
|
&.show
|
|
@include scale(1)
|
|
|
|
&.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%)
|
|
|
|
img
|
|
margin: 0
|
|
position: absolute
|
|
top: 50%
|
|
left: 50%
|
|
margin-right: -50%
|
|
@include transition-duration(0.5s)
|
|
@include translate(-50%, -50%)
|
|
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)
|
|
from
|
|
max-width: 56px
|
|
max-height: 55px
|
|
50%
|
|
width: 66px
|
|
max-width: 66px
|
|
max-height: 66px
|
|
to
|
|
max-width: 56px
|
|
max-height: 55px
|
|
|
|
.xp .pulse
|
|
@include animation(rewardPulse 0.15s infinite)
|
|
|
|
.gems .pulse
|
|
@include animation(rewardPulse 0.25s infinite)
|
|
|
|
|
|
//- Footer - totals
|
|
|
|
#totals
|
|
width: 709px
|
|
height: 96px
|
|
background: transparent url(/images/pages/play/level/modal/xp_gems_parchment.png)
|
|
position: relative
|
|
text-align: left
|
|
|
|
.total-wrapper
|
|
position: absolute
|
|
top: 18px
|
|
|
|
&#xp-wrapper
|
|
left: 117px
|
|
width: 300px
|
|
|
|
&#gem-wrapper
|
|
left: 529px
|
|
|
|
.total-label
|
|
width: 90px
|
|
|
|
.total-count
|
|
float: left
|
|
font-size: 45px
|
|
font-weight: bold
|
|
color: rgb(40, 33, 22)
|
|
margin-right: 12px
|
|
|
|
.total-label
|
|
float: left
|
|
color: rgb(103, 92, 76)
|
|
text-transform: uppercase
|
|
font-weight: bold
|
|
font-family: $headings-font-family
|
|
font-size: 18px
|
|
margin-top: 13px
|
|
line-height: 18px
|
|
|
|
.xp-bar-outer
|
|
background-color: rgb(40, 33, 22)
|
|
border: 4px solid rgb(40, 33, 22)
|
|
border-radius: 8px
|
|
width: 150px
|
|
height: 16px
|
|
margin-top: 3px
|
|
position: relative
|
|
float: left
|
|
|
|
.xp-bar-already-achieved
|
|
background-color: rgb(166, 213, 88)
|
|
//background-color: white
|
|
border-radius: 8px
|
|
height: 100%
|
|
position: absolute
|
|
z-index: 1
|
|
|
|
.xp-bar-total
|
|
background-color: rgb(253, 171, 45)
|
|
border: 1px solid rgb(239, 177, 73)
|
|
border-radius: 8px
|
|
height: 100%
|
|
position: absolute
|
|
|
|
|
|
//- Footer - other stuff
|
|
|
|
.modal-footer
|
|
// Negative bottom margin counteracts most of the extra the border image height.
|
|
margin: 0 0 -80px 0
|
|
padding: 0 20px
|
|
text-align: center
|
|
|
|
.sign-up-poke
|
|
width: 430px
|
|
|
|
.sign-up-blurb
|
|
width: 175px
|
|
font-family: $headings-font-family
|
|
font-weight: bold
|
|
text-transform: uppercase
|
|
font-size: 18px
|
|
line-height: 18px
|
|
text-align: left
|
|
float: left
|
|
margin: 5px 0 0 5px
|
|
color: rgb(160, 150, 126)
|
|
|
|
.sign-up-button
|
|
width: 250px
|
|
height: 60px
|
|
line-height: 30px
|
|
margin: 0
|
|
float: left
|
|
|
|
.leaderboard-button
|
|
height: 60px
|
|
line-height: 30px
|
|
margin: 0 10px
|
|
float: left
|
|
|
|
.next-level-buttons
|
|
float: right
|
|
|
|
.next-level-button, .return-to-ladder-button
|
|
width: 258px
|
|
height: 60px
|
|
line-height: 30px
|
|
margin: 0 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
|
|
|
|
.hour-of-code-done
|
|
clear: both
|
|
margin: 5px auto 0 auto
|
|
padding: 10px
|
|
background-color: rgba(22, 34, 30, 0.5)
|
|
border-radius: 8px
|
|
display: inline-block
|
|
|
|
strong
|
|
color: white
|
|
display: block
|
|
margin-bottom: 10px
|
|
font-weight: normal
|
|
|
|
.image-link
|
|
float: right
|
|
margin-left: 10px
|
|
|
|
.text-link
|
|
color: lighten(#0b63bc, 10%)
|
|
|
|
|
|
html.no-borderimage
|
|
#hero-victory-modal
|
|
.modal-dialog
|
|
margin-top: 251px
|
|
.background-wrapper
|
|
border: 0
|
|
background: url("/images/pages/play/level/modal/victory_modal_background.png")
|
|
height: 713px
|
|
|
|
&.full-achievements
|
|
@media only screen and (max-height: 720px)
|
|
.modal-dialog
|
|
margin-top: 175px
|
|
#victory-header
|
|
background: transparent
|
|
@media only screen and (max-height: 640px)
|
|
.modal-dialog
|
|
margin-top: 121px
|
|
#victory-header
|
|
display: none
|
|
|
|
|
|
body.ipad
|
|
#hero-victory-modal
|
|
// This animation is slow and wigs out on iPad and very old computers.
|
|
.xp .pulse, .gems .pulse
|
|
@include animation(none)
|
|
|
|
body[lang='ru'], body[lang^='es-ES'], body[lang^='it'], body[lang^='hu'], body[lang^='mk-MK'], body[lang^='ja'], body[lang^='uk']
|
|
#hero-victory-modal #totals .total-wrapper .total-label
|
|
font-size: 12px
|