mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-11-25 00:28:31 -05:00
95 lines
2.2 KiB
Sass
95 lines
2.2 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
|
|
color: blue
|
|
width: 100%
|
|
height: 100%
|
|
position: absolute
|
|
z-index: 20
|
|
$UNVEIL_TIME: 1.2s
|
|
|
|
&.unveiled
|
|
pointer-events: none
|
|
|
|
.loading-details
|
|
position: absolute
|
|
top: 20px
|
|
left: 50%
|
|
$WIDTH: 1000px
|
|
width: $WIDTH
|
|
min-height: 60px
|
|
margin-left: (-$WIDTH / 2)
|
|
z-index: 100
|
|
background-color: rgba(220, 255, 230, 0.6)
|
|
color: darkslategray
|
|
font-size: 15px
|
|
border-radius: 30px
|
|
padding: 10px
|
|
text-align: center
|
|
// http://matthewlein.com/ceaser/ Bounce down a bit, then snap up.
|
|
-webkit-transition: top $UNVEIL_TIME cubic-bezier(0.285, 0, 0.670, 0)
|
|
-webkit-transition: top $UNVEIL_TIME cubic-bezier(0.285, -0.595, 0.670, -0.600)
|
|
-moz-transition: top $UNVEIL_TIME cubic-bezier(0.285, -0.595, 0.670, -0.600)
|
|
-o-transition: top $UNVEIL_TIME cubic-bezier(0.285, -0.595, 0.670, -0.600)
|
|
transition: top $UNVEIL_TIME cubic-bezier(0.285, -0.595, 0.670, -0.600)
|
|
|
|
.load-progress
|
|
position: absolute
|
|
left: 2%
|
|
top: 0px
|
|
opacity: 0.6
|
|
width: 96%
|
|
height: 40px
|
|
margin: 10px auto 0
|
|
|
|
.progress
|
|
height: 100%
|
|
|
|
.progress-bar
|
|
width: 1%
|
|
height: 100%
|
|
transition-duration: 0
|
|
|
|
&.active .progress-bar
|
|
transition-duration: 1.2s
|
|
|
|
#tip-wrapper
|
|
position: relative
|
|
z-index: 2
|
|
top: 10px
|
|
|
|
.level-loading-goals
|
|
margin: 30px auto 10px
|
|
width: 400px
|
|
|
|
.panel-heading
|
|
font-size: 24px
|
|
|
|
.list-group-item
|
|
font-size: 20px
|
|
|
|
.start-level-button
|
|
font-size: 40px
|
|
|
|
.left-wing, .right-wing
|
|
width: 100%
|
|
height: 100%
|
|
position: absolute
|
|
|
|
.left-wing
|
|
@include wing-background('/images/level/loading_left_wing.png', right)
|
|
left: -50%
|
|
transition: all $UNVEIL_TIME ease
|
|
|
|
.right-wing
|
|
@include wing-background('/images/level/loading_right_wing.png', left)
|
|
right: -50%
|
|
transition: all $UNVEIL_TIME ease
|