@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)