style.css 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. .webgl-content *,* {
  2. border: 0;
  3. margin: 0;
  4. padding: 0;
  5. }
  6. html,body,.webgl-content {
  7. width: 100%;
  8. height: 100%;
  9. }
  10. body{
  11. }
  12. .video{
  13. position: fixed;
  14. z-index: 999;
  15. top: 30px;
  16. left: 30px;
  17. }
  18. #fixVideo{
  19. width: 350px;
  20. display: none;
  21. }
  22. .enter{
  23. position: fixed;
  24. top: 0;
  25. left: 0;
  26. background: #000;
  27. width: 100%;
  28. height: 100%;
  29. }
  30. .enter > span{
  31. display: inline-block;
  32. position: absolute;
  33. top: 50%;
  34. left: 50%;
  35. transform: translate(-50%,-50%);
  36. color: #60ffff;
  37. min-width: 100px;
  38. border: #60ffff 1px solid;
  39. z-index: 999;
  40. }
  41. .webgl-content .logo,
  42. .progress {
  43. position: absolute;
  44. left: 50%;
  45. top: 50%;
  46. -webkit-transform: translate(-50%, -50%);
  47. transform: translate(-50%, -50%);
  48. }
  49. .webgl-content .logo {
  50. background: url("progressLogo.Light.png") no-repeat center / contain;
  51. width: 154px;
  52. height: 130px;
  53. }
  54. .webgl-content .progress {
  55. height: 18px;
  56. width: 141px;
  57. margin-top: 90px;
  58. }
  59. .webgl-content .progress .empty {
  60. background: url("progressEmpty.Light.png") no-repeat right / cover;
  61. float: right;
  62. width: 100%;
  63. height: 100%;
  64. display: inline-block;
  65. }
  66. .webgl-content .progress .full {
  67. background: url("progressFull.Light.png") no-repeat left / cover;
  68. float: left;
  69. width: 0%;
  70. height: 100%;
  71. display: inline-block;
  72. }
  73. .webgl-content .logo.Dark {
  74. background-image: url("progressLogo.Dark.png");
  75. }
  76. .webgl-content .progress.Dark .empty {
  77. background-image: url("progressEmpty.Dark.png");
  78. }
  79. .webgl-content .progress.Dark .full {
  80. background-image: url("progressFull.Dark.png");
  81. }
  82. .webgl-content .footer {
  83. margin-top: 5px;
  84. height: 38px;
  85. line-height: 38px;
  86. font-family: Helvetica, Verdana, Arial, sans-serif;
  87. font-size: 18px;
  88. }
  89. .webgl-content .footer .webgl-logo,
  90. .title,
  91. .fullscreen {
  92. height: 100%;
  93. display: inline-block;
  94. background: transparent center no-repeat;
  95. }
  96. .webgl-content .footer .webgl-logo {
  97. background-image: url("webgl-logo.png");
  98. width: 204px;
  99. float: left;
  100. }
  101. .webgl-content .footer .title {
  102. margin-right: 10px;
  103. float: right;
  104. }
  105. .webgl-content .footer .fullscreen {
  106. background-image: url("fullscreen.png");
  107. width: 38px;
  108. float: right;
  109. }
  110. .welcome{
  111. position: fixed;
  112. top: 0;
  113. left: 0;
  114. width: 100%;
  115. height: 100%;
  116. background: rgba(0, 0, 0, 0.8);
  117. }
  118. .welcome span{
  119. display: inline-block;
  120. position: absolute;
  121. text-align: center;
  122. line-height: 40px;
  123. height: 40px;
  124. top: 50%;
  125. left: 50%;
  126. transform: translate(-50%,-50%);
  127. width: 100px;
  128. background: #d07b0e;
  129. color: #fff;
  130. border-radius: 20px;
  131. padding: 0 30px;
  132. cursor: pointer;
  133. }