AHND-HTML5-Shipping.css 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. /* CSS style sheet used with Epic Games HTML5 projects
  2. *
  3. * much of this is for UE4 development purposes.
  4. *
  5. * to create a custom CSS file for your project:
  6. * - make a copy of this file - or make one from scratch
  7. * - and put it in: "your project folder"/Build/HTML/GameX.css.template
  8. */
  9. html, body, .container {
  10. height: 100%;
  11. font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
  12. background: rgba(50, 50, 50, 1);
  13. }
  14. .h4, h4 {
  15. margin-top: 1pt;
  16. margin-bottom: 1pt;
  17. font-size: 10pt;
  18. }
  19. .container {
  20. display: table;
  21. vertical-align: middle;
  22. border: 0px;
  23. border-spacing: 0px;
  24. }
  25. .glyphicon-spin {
  26. animation: spin 2000ms infinite linear;
  27. }
  28. @keyframes spin {
  29. 0% {
  30. transform: rotate(0deg);
  31. }
  32. 100% {
  33. transform: rotate(359deg);
  34. }
  35. }
  36. @-webkit-keyframes spin {
  37. 0% {
  38. transform: rotate(0deg);
  39. }
  40. 100% {
  41. transform: rotate(359deg);
  42. }
  43. }
  44. .wrapper {
  45. position: relative;
  46. margin: 0 auto 0 auto;
  47. text-align: center;
  48. min-width: 100%;
  49. width: 100%;
  50. height: 100%; /* initial height, will be dynamically adjusted at runtime */
  51. /* max-width: 100%; */
  52. display: block;
  53. align-items: center;
  54. position: relative;
  55. text-align: center;
  56. justify-content: center;
  57. }
  58. .emscripten {
  59. padding-right: 0;
  60. margin-left: auto;
  61. margin-right: auto;
  62. display: block;
  63. display: -webkit-box;
  64. display: -moz-box;
  65. display: box;
  66. -webkit-box-align: center;
  67. -moz-box-align: center;
  68. box-align: center;
  69. -webkit-box-pack: center;
  70. -moz-box-pack: center;
  71. box-pack: center;
  72. outline: none;
  73. }
  74. #canvas:not([fullscreen]) {
  75. padding-right: 0;
  76. margin-left: auto;
  77. margin-right: auto;
  78. width: 100%;
  79. }
  80. .texthalf {
  81. height: 37%;
  82. border: 0px;
  83. padding: 0px;
  84. overflow-y: scroll;
  85. font-size: 2em;
  86. }
  87. .buttonarea {
  88. /*
  89. position: relative;
  90. top: -50px;
  91. */
  92. border-top: 0px;
  93. border-bottom: 0px;
  94. padding: 0px;
  95. margin-left: 0px;
  96. margin-right: 0px;
  97. margin-top: 0px;
  98. margin-bottom: 0px;
  99. min-height: 35px;
  100. }
  101. .btn { padding: 3px; text-align: center; min-width: 150px; max-height: 25px; margin-top: 10px; margin-bottom: 10px; margin-left: 5px; margin-right: 5px; }
  102. .progress { background: rgba(245, 245, 245, 1); border: 0px solid rgba(245, 245, 245, 1); border-radius: 0px; height: 4px; }
  103. .progress-bar-custom { background: rgba(153, 153, 153, 1); }
  104. .centered-axis-xy {
  105. position: fixed;
  106. }
  107. /* these styles convert the "blue buttons" into transparent buttons which are more subtle and less distracting */
  108. /*
  109. .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  110. background-color: transparent;
  111. border-color: transparent;
  112. outline: none;
  113. }
  114. .btn-primary {
  115. color: rgba(150, 150, 150, 150);
  116. }
  117. .btn-primary:hover {
  118. color: rgba(200, 200, 200, 200);
  119. }
  120. .btn-primary:focus {
  121. color: rgba(225, 225, 225, 225);
  122. }
  123. .btn-primary:active {
  124. color: rgba(250, 250, 250, 250);
  125. outline: none !important;
  126. box-shadow: none;
  127. }
  128. */
  129. /** these styles hide the text on each button, leaving just the icon */
  130. /*
  131. .buttontext {
  132. display: none;
  133. }
  134. .btn {
  135. min-width: 30px;
  136. margin-left: 30px; margin-right: 30px;
  137. }
  138. */