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.

281 lines
5.4 KiB

3 years ago
  1. @font-face {
  2. font-family: 'Ubuntu-R';
  3. src: url('/assets/Ubuntu-R.ttf');
  4. font-weight: normal;
  5. font-style: normal;
  6. }
  7. .hidden {
  8. display: none !important;
  9. }
  10. * {
  11. font-family: Ubuntu,"Ubuntu-R",sans-serif;
  12. }
  13. a {
  14. text-decoration: none;
  15. color: #2359fb;
  16. }
  17. .flex {
  18. display: flex;
  19. flex-wrap: wrap;
  20. justify-content: center;
  21. }
  22. .fullheight {
  23. min-height: 100vh;
  24. }
  25. .fullheight-nav {
  26. min-height: calc(100vh - 50px);
  27. }
  28. .fullwidth {
  29. width: 100%;
  30. text-align: center;
  31. }
  32. .title {
  33. color: white;
  34. text-shadow: 0 0 5px rgba(0, 0, 0, 0.18),0 5px 5px rgba(0, 0, 0, 0.18);
  35. }
  36. h1 {
  37. font-size: 4vw;
  38. }
  39. h2 {
  40. font-size: 2.25vw;
  41. }
  42. h3 {
  43. font-size: 1.75vw;
  44. }
  45. p {
  46. font-size: 1.25vw;
  47. line-height: 1.6;
  48. }
  49. .beta-tag {
  50. background: #f47606;
  51. color: white;
  52. border-radius: 5px;
  53. font-size: 0.9rem;
  54. padding: 0.3rem;
  55. margin-left: 0.5rem;
  56. }
  57. .beta-banner a {
  58. color: #ffeb7f;
  59. }
  60. .beta-banner {
  61. background: repeating-linear-gradient( 45deg, #d56009, #d56009 10px, #c44c05 10px, #c44c05 20px );
  62. color: white;
  63. padding: 1rem;
  64. text-shadow: 0 0 5px rgba(0, 0, 0, 0.18),0 5px 5px rgba(0, 0, 0, 0.18);
  65. }
  66. .logo {
  67. width: 10vw;
  68. margin-right: 2vw;
  69. }
  70. .page-heading {
  71. background-image: url("/assets/index-background.png"), linear-gradient(0deg, #1f58c6 0%, #1c66f2 100%);
  72. background-position: 50% 50%;
  73. background-repeat: no-repeat;
  74. background-size: cover;
  75. background-attachment: fixed;
  76. }
  77. .page-heading-text {
  78. width: auto;
  79. margin: auto;
  80. padding: 1rem;
  81. }
  82. .page-heading > p {
  83. color: white;
  84. }
  85. .page-heading > p > a {
  86. color: #c3cce8;
  87. }
  88. .page-heading.error {
  89. background: url("/assets/index-background.png"), linear-gradient(0deg, #790000 0%, #a40000 100%)
  90. }
  91. .ncstyle-button.error {
  92. background: #ee4040;
  93. }
  94. .error.ncstyle-button:hover {
  95. background: #c82323;
  96. }
  97. .navbar {
  98. height: 50px;
  99. }
  100. body, html {
  101. margin: 0;
  102. padding: 0;
  103. }
  104. .ncstyle-button {
  105. color: #FFF;
  106. box-shadow: 0 0 5px rgba(0, 0, 0, 0.18),0 5px 5px rgba(0, 0, 0, 0.18);
  107. border-radius: 1vw;
  108. text-decoration: none;
  109. text-shadow: 0 0 5px rgba(0, 0, 0, 0.18),0 5px 5px rgba(0, 0, 0, 0.18);
  110. white-space: nowrap;
  111. height: max-content;
  112. line-height: 2.25rem;
  113. padding: 2vh 3vw;
  114. background: #2a87ff;
  115. font-size: 1.5vw;
  116. min-width: 18vw;
  117. display: block;
  118. transition: all .25s ease-in-out;
  119. }
  120. .margin-bottom {
  121. margin-bottom: 1rem;
  122. }
  123. .ncstyle-button:hover {
  124. background: #2478e3;
  125. }
  126. .ncstyle-input {
  127. margin: auto;
  128. padding: 7px 6px;
  129. font-size: 16px;
  130. background-color: white;
  131. color: #454545;
  132. border: 1px solid #dbdbdb;
  133. outline: none;
  134. border-radius: 3px;
  135. cursor: text;
  136. width: 50vw;
  137. }
  138. .click {
  139. cursor: pointer;
  140. }
  141. #script-copy {
  142. display: none;
  143. }
  144. @media only screen and (max-width: 1080px) {
  145. h1 {
  146. font-size: 48px;
  147. }
  148. h2 {
  149. font-size: 32px;
  150. }
  151. h3 {
  152. font-size: 24px;
  153. }
  154. p {
  155. font-size: 16px;
  156. }
  157. .title {
  158. text-align: center;
  159. }
  160. .logo {
  161. width: 20vw;
  162. margin: 0;
  163. }
  164. .ncstyle-button {
  165. font-size: 24px;
  166. }
  167. }
  168. @media only screen and (max-width: 1080px), screen and (max-height: 600px) {
  169. .scroll-down-arrow {
  170. display: none;
  171. }
  172. }
  173. .scroll-down-arrow {
  174. background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2hldnJvbl90aGluX2Rvd24iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiBmaWxsPSJ3aGl0ZSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTE3LjQxOCw2LjEwOWMwLjI3Mi0wLjI2OCwwLjcwOS0wLjI2OCwwLjk3OSwwYzAuMjcsMC4yNjgsMC4yNzEsMC43MDEsMCwwLjk2OWwtNy45MDgsNy44M2MtMC4yNywwLjI2OC0wLjcwNywwLjI2OC0wLjk3OSwwbC03LjkwOC03LjgzYy0wLjI3LTAuMjY4LTAuMjctMC43MDEsMC0wLjk2OWMwLjI3MS0wLjI2OCwwLjcwOS0wLjI2OCwwLjk3OSwwTDEwLDEzLjI1TDE3LjQxOCw2LjEwOXoiLz48L3N2Zz4=);
  175. background-size: contain;
  176. background-repeat: no-repeat;
  177. }
  178. .scroll-down-link {
  179. cursor:pointer;
  180. height: 60px;
  181. width: 80px;
  182. margin: 0px 0 0 -40px;
  183. line-height: 60px;
  184. position: absolute;
  185. left: 50%;
  186. bottom: 10px;
  187. color: #FFF;
  188. text-align: center;
  189. font-size: 70px;
  190. z-index: 100;
  191. text-decoration: none;
  192. text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
  193. animation: fade_move_down 2s ease-in-out infinite;
  194. }
  195. /*animated scroll arrow animation*/
  196. @keyframes fade_move_down {
  197. 0% { transform:translate(0,-20px); opacity: 0; }
  198. 50% { opacity: 1; }
  199. 100% { transform:translate(0,20px); opacity: 0; }
  200. }
  201. .lds-ring {
  202. display: inline-block;
  203. position: relative;
  204. width: 80px;
  205. height: 80px;
  206. }
  207. .lds-ring div {
  208. box-sizing: border-box;
  209. display: block;
  210. position: absolute;
  211. width: 64px;
  212. height: 64px;
  213. margin: 8px;
  214. border: 8px solid #fff;
  215. border-radius: 50%;
  216. animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  217. border-color: #fff transparent transparent transparent;
  218. }
  219. .lds-ring div:nth-child(1) {
  220. animation-delay: -0.45s;
  221. }
  222. .lds-ring div:nth-child(2) {
  223. animation-delay: -0.3s;
  224. }
  225. .lds-ring div:nth-child(3) {
  226. animation-delay: -0.15s;
  227. }
  228. @keyframes lds-ring {
  229. 0% {
  230. transform: rotate(0deg);
  231. }
  232. 100% {
  233. transform: rotate(360deg);
  234. }
  235. }