|
body { |
|
margin: 0px; |
|
padding: 0px; |
|
overflow: hidden; |
|
} |
|
.webgl-content * { |
|
border: 0; |
|
margin: 0; |
|
padding: 0; |
|
} |
|
|
|
#gameContainer canvas { |
|
display: block; |
|
background: #222; |
|
|
|
|
|
} |
|
|
|
.webgl-content { |
|
position: absolute; |
|
top: 50%; |
|
left: 50%; |
|
-webkit-transform: translate(-50%, -50%); |
|
transform: translate(-50%, -50%); |
|
|
|
-webkit-touch-callout: none; |
|
-webkit-user-select: none; |
|
-khtml-user-select: none; |
|
-moz-user-select: none; |
|
-ms-user-select: none; |
|
user-select: none; |
|
} |
|
|
|
.webgl-content .logo, |
|
.progress, |
|
.text { |
|
position: absolute; |
|
left: 50%; |
|
top: 40%; |
|
-webkit-transform: translate(-50%, -50%); |
|
transform: translate(-50%, -50%); |
|
} |
|
|
|
.webgl-content .logo { |
|
background: url('logo.png') no-repeat center / contain; |
|
width: 500px; |
|
height: 155px; |
|
} |
|
|
|
.webgl-content .progress { |
|
height: 26px; |
|
width: 211px; |
|
margin-top: 120px; |
|
} |
|
|
|
.webgl-content .progress .empty { |
|
background: url('progressEmpty.Light.png') no-repeat right / cover; |
|
float: right; |
|
width: 100%; |
|
height: 100%; |
|
display: inline-block; |
|
} |
|
|
|
.webgl-content .progress .full { |
|
background: url('progressFull.Light.png') no-repeat left / cover; |
|
float: left; |
|
width: 0%; |
|
height: 100%; |
|
display: inline-block; |
|
} |
|
|
|
.webgl-content .text { |
|
margin-top: 170px; |
|
|
|
color: white; |
|
font-family: 'Times New Roman', Times, serif, Haettenschweiler, 'Arial Narrow Bold', sans-serif, Helvetica, Verdana, sans-serif; |
|
font-weight: 700; |
|
font-size: 25px; |
|
width: 500px; |
|
text-align: center; |
|
} |
|
|
|
.webgl-content .spinner { |
|
vertical-align: middle; |
|
height: 100px; |
|
} |
|
|
|
.webgl-content .logo.Dark { |
|
//background-image: url('logo.png'); |
|
} |
|
|
|
.webgl-content .progress.Dark .empty { |
|
background: white; |
|
} |
|
|
|
.webgl-content .progress.Dark .full { |
|
background: royalblue; |
|
} |
|
|
|
.webgl-content .footer { |
|
margin-top: 5px; |
|
height: 38px; |
|
line-height: 38px; |
|
font-family: Helvetica, Verdana, Arial, sans-serif; |
|
font-size: 18px; |
|
background: #fff; |
|
} |
|
|
|
.webgl-content .footer .webgl-logo, |
|
.title, |
|
.fullscreen { |
|
height: 100%; |
|
display: inline-block; |
|
background: transparent center no-repeat; |
|
} |
|
|
|
.webgl-content .footer .webgl-logo { |
|
background-image: url('webgl-logo.png'); |
|
width: 204px; |
|
float: left; |
|
} |
|
|
|
.webgl-content .footer .title { |
|
margin-right: 10px; |
|
float: right; |
|
} |
|
|
|
.webgl-content .footer .fullscreen { |
|
background-image: url('fullscreen.png'); |
|
width: 38px; |
|
float: right; |
|
} |
|
|