You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

273 lines
5.9 KiB

  1. // dark #326599
  2. // light #4591c4
  3. define([], function () {
  4. var loadingStyle = (function(){/*
  5. #cp-loading {
  6. visibility: visible;
  7. position: fixed;
  8. z-index: 10000000;
  9. top: 0px;
  10. bottom: 0px;
  11. left: 0px;
  12. right: 0px;
  13. background: linear-gradient(to right, #326599 0%, #326599 50%, #4591c4 50%, #4591c4 100%);
  14. color: #fafafa;
  15. font-size: 1.3em;
  16. line-height: 120%;
  17. opacity: 1;
  18. display: flex;
  19. flex-flow: column;
  20. justify-content: center;
  21. align-items: center;
  22. }
  23. #cp-loading.cp-loading-hidden {
  24. opacity: 0;
  25. visibility: hidden;
  26. transition: opacity 0.75s, visibility 0s 0.75s;
  27. }
  28. #cp-loading .cp-loading-logo {
  29. height: 300px;
  30. width: 300px;
  31. margin-top: 50px;
  32. flex: 0 1 auto;
  33. min-height: 0;
  34. text-align: center;
  35. }
  36. #cp-loading .cp-loading-logo img {
  37. max-width: 100%;
  38. max-height: 100%;
  39. }
  40. #cp-loading .cp-loading-container {
  41. width: 700px;
  42. max-width: 90vw;
  43. height: 500px;
  44. max-height: calc(100vh - 20px);
  45. margin: 50px;
  46. flex-shrink: 0;
  47. display: flex;
  48. flex-flow: column;
  49. justify-content: space-around;
  50. align-items: center;
  51. }
  52. @media screen and (max-height: 800px) {
  53. #cp-loading .cp-loading-container {
  54. height: auto;
  55. }
  56. }
  57. @media screen and (max-width: 600px) {
  58. #cp-loading .cp-loading-container {
  59. height: auto;
  60. }
  61. }
  62. #cp-loading .cp-loading-cryptofist {
  63. margin-left: auto;
  64. margin-right: auto;
  65. //height: 300px;
  66. max-width: 90vw;
  67. max-height: 300px;
  68. width: auto;
  69. height: auto;
  70. margin-bottom: 2em;
  71. }
  72. @media screen and (max-height: 500px) {
  73. #cp-loading .cp-loading-logo {
  74. display: none;
  75. }
  76. }
  77. #cp-loading-message {
  78. background: #FFF;
  79. padding: 20px;
  80. width: 100%;
  81. color: #3F4141;
  82. text-align: left;
  83. display: none;
  84. }
  85. #cp-loading-password-prompt p.cp-password-error {
  86. color: white;
  87. background: #9e0000;
  88. padding: 5px;
  89. margin-bottom: 15px;
  90. }
  91. #cp-loading-password-prompt .cp-password-info {
  92. text-align: left;
  93. margin-bottom: 15px;
  94. }
  95. #cp-loading-burn-after-reading .cp-password-info {
  96. margin-bottom: 15px;
  97. }
  98. p.cp-password-info{
  99. text-align: left;
  100. }
  101. #cp-loading-password-prompt .cp-password-form {
  102. display: flex;
  103. flex-wrap: wrap;
  104. }
  105. #cp-loading-password-prompt .cp-password-form button{
  106. background-color: #4591c4;
  107. color: white;
  108. border: 1px solid #4591c4;
  109. }
  110. .cp-password-input{
  111. font-size:16px;
  112. border: 1px solid #4591c4;
  113. background-color: white;
  114. border-radius 0;
  115. }
  116. .cp-password-form button{
  117. padding: 8px 12px;
  118. font-weight: bold;
  119. text-transform: uppercase;
  120. }
  121. #cp-loading-password-prompt .cp-password-form{
  122. width: 100%;
  123. }
  124. #cp-loading-password-prompt .cp-password-form .cp-password-container {
  125. flex-shrink: 1;
  126. min-width: 0;
  127. }
  128. #cp-loading-password-prompt .cp-password-form .cp-password-container .cp-password-reveal{
  129. color: #4591c4;
  130. padding: 0px 24px;
  131. }
  132. #cp-loading-password-prompt .cp-password-form input {
  133. flex: 1;
  134. padding: 12px;
  135. min-width: 0;
  136. text-overflow: ellipsis;
  137. }
  138. #cp-loading-password-prompt .cp-password-form button:hover {
  139. background-color: #326599;
  140. }
  141. #cp-loading-password-prompt ::placeholder {
  142. color: #999999;
  143. opacity: 1;
  144. }
  145. #cp-loading-password-prompt :-ms-input-placeholder {
  146. color: #d9d9d9;
  147. }
  148. #cp-loading-password-prompt ::-ms-input-placeholder {
  149. color: #d9d9d9;
  150. }
  151. #cp-loading .cp-loading-spinner-container {
  152. position: relative;
  153. height: 100px;
  154. }
  155. #cp-loading .cp-loading-spinner-container > div {
  156. height: 100px;
  157. }
  158. #cp-loading-tip {
  159. position: fixed;
  160. z-index: 10000000;
  161. top: 80%;
  162. left: 0;
  163. right: 0;
  164. text-align: center;
  165. transition: opacity 750ms;
  166. transition-delay: 3000ms;
  167. }
  168. @media screen and (max-height: 600px) {
  169. #cp-loading-tip {
  170. display: none;
  171. }
  172. }
  173. #cp-loading-tip span {
  174. background: #222;
  175. color: #fafafa;
  176. text-align: center;
  177. font-size: 1.3em;
  178. opacity: 0.7;
  179. font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
  180. padding: 15px;
  181. max-width: 60%;
  182. display: inline-block;
  183. }
  184. .cp-loading-progress {
  185. width: 100%;
  186. margin: 20px;
  187. }
  188. .cp-loading-progress p {
  189. margin: 5px;
  190. overflow: hidden;
  191. white-space: nowrap;
  192. text-overflow: ellipsis;
  193. }
  194. .cp-loading-progress-bar {
  195. height: 24px;
  196. background: white;
  197. }
  198. .cp-loading-progress-bar-value {
  199. height: 100%;
  200. background: #5cb85c;
  201. }
  202. @keyframes spin {
  203. from {
  204. transform: rotate(0deg);
  205. }
  206. to {
  207. transform: rotate(1800deg);
  208. }
  209. }
  210. .cp-spinner {
  211. display: inline-block;
  212. box-sizing: border-box;
  213. width: 80px;
  214. height: 80px;
  215. border: 11px solid white;
  216. border-radius: 50%;
  217. border-top-color: transparent;
  218. animation: spin infinite 3s;
  219. animation-timing-function: cubic-bezier(.6,0.15,0.4,0.85);
  220. }
  221. button.primary{
  222. border: 1px solid #4591c4;
  223. padding: 8px 12px;
  224. text-transform: uppercase;
  225. background-color: #4591c4;
  226. color: white;
  227. font-weight: bold;
  228. }
  229. button.primary:hover{
  230. background-color: rgb(52, 118, 162);
  231. }
  232. */}).toString().slice(14, -3);
  233. var urlArgs = window.location.href.replace(/^.*\?([^\?]*)$/, function (all, x) { return x; });
  234. var elem = document.createElement('div');
  235. elem.setAttribute('id', 'cp-loading');
  236. elem.innerHTML = [
  237. '<style>',
  238. loadingStyle,
  239. '</style>',
  240. '<div class="cp-loading-logo">',
  241. '<img class="cp-loading-cryptofist" src="/customize/loading-logo.png?' + urlArgs + '">',
  242. '</div>',
  243. '<div class="cp-loading-container">',
  244. '<div class="cp-loading-spinner-container">',
  245. '<span class="cp-spinner"></span>',
  246. '</div>',
  247. '<p id="cp-loading-message"></p>',
  248. '</div>'
  249. ].join('');
  250. return function () {
  251. var intr;
  252. var append = function () {
  253. if (!document.body) { return; }
  254. clearInterval(intr);
  255. document.body.appendChild(elem);
  256. };
  257. intr = setInterval(append, 100);
  258. append();
  259. };
  260. });