mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-11-28 18:15:52 -05:00
151 lines
3.8 KiB
Sass
151 lines
3.8 KiB
Sass
@import "app/styles/mixins"
|
|
@import "app/styles/bootstrap/variables"
|
|
|
|
@mixin wing-background($url: '', $backgroundPosition: left)
|
|
background: black
|
|
background-image: url($url)
|
|
background-repeat: no-repeat
|
|
background-position: top $backgroundPosition
|
|
background-size: contain
|
|
|
|
#level-loading-view
|
|
width: 100%
|
|
height: 100%
|
|
position: absolute
|
|
z-index: 20
|
|
$UNVEIL_TIME: 1.2s
|
|
|
|
&.unveiled
|
|
pointer-events: none
|
|
|
|
.loading-details
|
|
position: absolute
|
|
top: 86px
|
|
left: 50%
|
|
$WIDTH: 450px
|
|
width: $WIDTH
|
|
height: 450px
|
|
margin-left: (-$WIDTH / 2)
|
|
z-index: 100
|
|
background: transparent url(/images/level/code_editor_background.png) no-repeat
|
|
background-size: 100% 100%
|
|
color: darkslategray
|
|
font-size: 15px
|
|
padding: 80px 80px 40px 80px
|
|
text-align: center
|
|
// http://matthewlein.com/ceaser/ Bounce down a bit, then snap up.
|
|
@include transition(top $UNVEIL_TIME cubic-bezier(0.285, -0.595, 0.670, -0.600))
|
|
font-family: 'Open Sans Condensed'
|
|
|
|
.level-loading-goals
|
|
text-align: left
|
|
|
|
.goals-title
|
|
font-size: 32px
|
|
color: black
|
|
font-weight: bold
|
|
|
|
li
|
|
font-size: 20px
|
|
color: black
|
|
|
|
.progress-or-start-container
|
|
position: absolute
|
|
bottom: 95px
|
|
width: 325px
|
|
height: 80px
|
|
left: 48px
|
|
|
|
.load-progress
|
|
width: 100%
|
|
height: 45px
|
|
margin: 20px auto 0 auto
|
|
|
|
.progress
|
|
height: 100%
|
|
position: relative
|
|
background-color: transparent
|
|
@include box-shadow(none)
|
|
|
|
.progress-background
|
|
width: 100%
|
|
height: 100%
|
|
background: transparent url(/images/level/loading_bar_back.png) no-repeat
|
|
background-size: 100% 100%
|
|
position: absolute
|
|
z-index: -1
|
|
|
|
.progress-bar-container
|
|
width: 75%
|
|
height: 100%
|
|
left: 10%
|
|
position: absolute
|
|
|
|
.progress-bar
|
|
width: 1%
|
|
height: 100%
|
|
transition-duration: 0
|
|
background: transparent url(/images/level/loading_bar_fill.png) no-repeat
|
|
background-size: 325px 100%
|
|
@include box-shadow(none)
|
|
|
|
&.active .progress-bar
|
|
transition-duration: 1.2s
|
|
|
|
.rim
|
|
position: absolute
|
|
left: 0
|
|
top: 0
|
|
width: 100%
|
|
height: 100%
|
|
background: transparent url(/images/level/loading_bar_rim.png) no-repeat
|
|
background-size: 100% 100%
|
|
|
|
.start-level-button
|
|
display: none
|
|
width: 100%
|
|
height: auto
|
|
margin: 0px auto
|
|
font-size: 40px
|
|
line-height: 45px
|
|
font-variant: small-caps
|
|
text-transform: none
|
|
|
|
.subscription-required, .course-membership-required
|
|
display: none
|
|
margin-top: -160px
|
|
color: black
|
|
font-size: 24px
|
|
|
|
.btn
|
|
width: 100%
|
|
margin: 0px auto
|
|
font-size: 40px
|
|
font-variant: small-caps
|
|
|
|
#tip-wrapper
|
|
position: absolute
|
|
z-index: 2
|
|
bottom: 40px
|
|
left: 25px
|
|
width: 401px
|
|
color: #666
|
|
|
|
.left-wing, .right-wing
|
|
width: 100%
|
|
height: 100%
|
|
position: absolute
|
|
|
|
.left-wing
|
|
@include wing-background('/images/level/loading_left_wing_1920.jpg', right)
|
|
@media screen and ( max-width: 1366px )
|
|
@include wing-background('/images/level/loading_left_wing_1366.jpg', right)
|
|
left: -50%
|
|
@include transition(all $UNVEIL_TIME ease)
|
|
|
|
.right-wing
|
|
@include wing-background('/images/level/loading_right_wing_1920.jpg', left)
|
|
@media screen and ( max-width: 1366px )
|
|
@include wing-background('/images/level/loading_right_wing_1366.jpg', left)
|
|
right: -50%
|
|
@include transition(all $UNVEIL_TIME ease)
|