Files
habitica/website/client-old/css/loading-screen.styl
2016-09-14 15:06:32 +02:00

71 lines
1.2 KiB
Stylus

#loadingScreen
z-index: 9999
width: 100%
height: 100%
padding-top: 150px
text-align: center
#loadingScreen h2
margin-top: 60px
#loadingScreen h3
margin-top: 20px
@media (max-device-width: 768px) and (orientation: landscape)
#loadingScreen
padding-top: 75px
@media (max-device-width: 768px)
#loadingScreen h3
padding-left: 10px
padding-right: 10px
#loadingScreen h2
margin-top: 30px
#loadingScreen img
display: block
margin: 0 auto
width: 90%
#loadingScreen .loading-logo-icon
max-width: 87.5px
margin-bottom: 15px
#loadingScreen .loading-logo-text
max-width: 282.5px
.loading-spinner
margin: 100px auto 0
width: 105px
padding-left: 5px
text-align: center
margin-top: 20px
.loading-spinner > div
width: 16px
height: 16px
background-color: #432476
border-radius: 100%
display: inline-block
animation: sk-bouncedelay 1.7s infinite ease-in-out both
margin-right: 5px
.loading-spinner .spinner__item1
animation-delay: -0.60s
.loading-spinner .spinner__item2
animation-delay: -0.40s
.loading-spinner .spinner__item3
animation-delay: -0.20s
@keyframes sk-bouncedelay
0%, 80%, 100% {
transform: scale(0)
opacity: 0
} 40% {
transform: scale(1.0)
opacity: 1
}