gitlord
/
isleward
kopie van https://gitlab.com/Isleward/isleward.git
1
0
Vork 0
Code Kwesties 0 Publicaties 203 Wiki Activiteit
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.
3843 Commits
10 Branches
204 MiB
 
 
 
Branch: master
Branches Labels
${ item.name }
Maak branch ${ searchTerm }
van 'master'
${ noResults }
isleward/src/client/css/loader.less

103 regels
6.6 KiB
Ruw Permalink Blame Geschiedenis 

  1. @import "colors.less";

  2. 

  3. @font-face {

  4. 	font-family: bitty;

  5. 	src: url('../fonts/bitty.ttf');

  6. }

  7. 

  8. .loader-container {

  9. 	width: 100vw;

  10. 	height: 100vh;

  11. 

  12. 	.loader {

  13. 		animation: loader-spin 1s linear infinite;

  14. 		height: 10px;

  15. 		width: 10px;

  16. 		position: absolute;

  17. 		top: 50%;

  18. 		left: 50%;

  19. 		transform: translateXY(-50%, -50%);

  20. 	}

  21. 

  22. 	.loader-text {

  23. 		position: absolute;

  24. 		top: calc(50% + 75px);

  25. 		width: 100%;

  26. 		text-align: center;

  27. 		color: @white;

  28. 		font-size: 24px;

  29. 	}

  30. 

  31. 	@keyframes loader-spin {

  32. 		0% {

  33. 			box-shadow: 0px -30px @blueD, 10px -30px @blueA, 20px -20px @blueA, 30px -10px @blueA, 30px 0px @blueA, 30px 10px @blueA, 20px 20px @blueA, 10px 30px @white, 0px 30px transparent, -10px 30px transparent, -20px 20px transparent, -30px 10px transparent, -30px 0px transparent, -30px -10px transparent, -20px -20px transparent, -10px -30px transparent;

  34. 		}

  35. 

  36. 		6.25% {

  37. 			box-shadow: 0px -30px transparent, 10px -30px @blueD, 20px -20px @blueA, 30px -10px @blueA, 30px 0px @blueA, 30px 10px @blueA, 20px 20px @blueA, 10px 30px @blueA, 0px 30px @white, -10px 30px transparent, -20px 20px transparent, -30px 10px transparent, -30px 0px transparent, -30px -10px transparent, -20px -20px transparent, -10px -30px transparent;

  38. 		}

  39. 

  40. 		12.5% {

  41. 			box-shadow: 0px -30px transparent, 10px -30px transparent, 20px -20px @blueD, 30px -10px @blueA, 30px 0px @blueA, 30px 10px @blueA, 20px 20px @blueA, 10px 30px @blueA, 0px 30px @blueA, -10px 30px @white, -20px 20px transparent, -30px 10px transparent, -30px 0px transparent, -30px -10px transparent, -20px -20px transparent, -10px -30px transparent;

  42. 		}

  43. 

  44. 		18.75% {

  45. 			box-shadow: 0px -30px transparent, 10px -30px transparent, 20px -20px transparent, 30px -10px @blueD, 30px 0px @blueA, 30px 10px @blueA, 20px 20px @blueA, 10px 30px @blueA, 0px 30px @blueA, -10px 30px @blueA, -20px 20px @white, -30px 10px transparent, -30px 0px transparent, -30px -10px transparent, -20px -20px transparent, -10px -30px transparent;

  46. 		}

  47. 

  48. 		25% {

  49. 			box-shadow: 0px -30px transparent, 10px -30px transparent, 20px -20px transparent, 30px -10px transparent, 30px 0px @blueD, 30px 10px @blueA, 20px 20px @blueA, 10px 30px @blueA, 0px 30px @blueA, -10px 30px @blueA, -20px 20px @blueA, -30px 10px @white, -30px 0px transparent, -30px -10px transparent, -20px -20px transparent, -10px -30px transparent;

  50. 		}

  51. 

  52. 		31.25% {

  53. 			box-shadow: 0px -30px transparent, 10px -30px transparent, 20px -20px transparent, 30px -10px transparent, 30px 0px transparent, 30px 10px @blueD, 20px 20px @blueA, 10px 30px @blueA, 0px 30px @blueA, -10px 30px @blueA, -20px 20px @blueA, -30px 10px @blueA, -30px 0px @white, -30px -10px transparent, -20px -20px transparent, -10px -30px transparent;

  54. 		}

  55. 

  56. 		37.5% {

  57. 			box-shadow: 0px -30px transparent, 10px -30px transparent, 20px -20px transparent, 30px -10px transparent, 30px 0px transparent, 30px 10px transparent, 20px 20px @blueD, 10px 30px @blueA, 0px 30px @blueA, -10px 30px @blueA, -20px 20px @blueA, -30px 10px @blueA, -30px 0px @blueA, -30px -10px @white, -20px -20px transparent, -10px -30px transparent;

  58. 		}

  59. 

  60. 		43.75% {

  61. 			box-shadow: 0px -30px transparent, 10px -30px transparent, 20px -20px transparent, 30px -10px transparent, 30px 0px transparent, 30px 10px transparent, 20px 20px transparent, 10px 30px @blueD, 0px 30px @blueA, -10px 30px @blueA, -20px 20px @blueA, -30px 10px @blueA, -30px 0px @blueA, -30px -10px @blueA, -20px -20px @white, -10px -30px transparent;

  62. 		}

  63. 

  64. 		50% {

  65. 			box-shadow: 0px -30px transparent, 10px -30px transparent, 20px -20px transparent, 30px -10px transparent, 30px 0px transparent, 30px 10px transparent, 20px 20px transparent, 10px 30px transparent, 0px 30px @blueD, -10px 30px @blueA, -20px 20px @blueA, -30px 10px @blueA, -30px 0px @blueA, -30px -10px @blueA, -20px -20px @blueA, -10px -30px @white;

  66. 		}

  67. 

  68. 		56.25% {

  69. 			box-shadow: 0px -30px @white, 10px -30px transparent, 20px -20px transparent, 30px -10px transparent, 30px 0px transparent, 30px 10px transparent, 20px 20px transparent, 10px 30px transparent, 0px 30px transparent, -10px 30px @blueD, -20px 20px @blueA, -30px 10px @blueA, -30px 0px @blueA, -30px -10px @blueA, -20px -20px @blueA, -10px -30px @blueA;

  70. 		}

  71. 

  72. 		62.5% {

  73. 			box-shadow: 0px -30px @blueA, 10px -30px @white, 20px -20px transparent, 30px -10px transparent, 30px 0px transparent, 30px 10px transparent, 20px 20px transparent, 10px 30px transparent, 0px 30px transparent, -10px 30px transparent, -20px 20px @blueD, -30px 10px @blueA, -30px 0px @blueA, -30px -10px @blueA, -20px -20px @blueA, -10px -30px @blueA;

  74. 		}

  75. 

  76. 		68.75% {

  77. 			box-shadow: 0px -30px @blueA, 10px -30px @blueA, 20px -20px @white, 30px -10px transparent, 30px 0px transparent, 30px 10px transparent, 20px 20px transparent, 10px 30px transparent, 0px 30px transparent, -10px 30px transparent, -20px 20px transparent, -30px 10px @blueD, -30px 0px @blueA, -30px -10px @blueA, -20px -20px @blueA, -10px -30px @blueA;

  78. 		}

  79. 

  80. 		75% {

  81. 			box-shadow: 0px -30px @blueA, 10px -30px @blueA, 20px -20px @blueA, 30px -10px @white, 30px 0px transparent, 30px 10px transparent, 20px 20px transparent, 10px 30px transparent, 0px 30px transparent, -10px 30px transparent, -20px 20px transparent, -30px 10px transparent, -30px 0px @blueD, -30px -10px @blueA, -20px -20px @blueA, -10px -30px @blueA;

  82. 		}

  83. 

  84. 		81.25% {

  85. 			box-shadow: 0px -30px @blueA, 10px -30px @blueA, 20px -20px @blueA, 30px -10px @blueA, 30px 0px @white, 30px 10px transparent, 20px 20px transparent, 10px 30px transparent, 0px 30px transparent, -10px 30px transparent, -20px 20px transparent, -30px 10px transparent, -30px 0px transparent, -30px -10px @blueD, -20px -20px @blueA, -10px -30px @blueA;

  86. 		}

  87. 

  88. 		87.5% {

  89. 			box-shadow: 0px -30px @blueA, 10px -30px @blueA, 20px -20px @blueA, 30px -10px @blueA, 30px 0px @blueA, 30px 10px @white, 20px 20px transparent, 10px 30px transparent, 0px 30px transparent, -10px 30px transparent, -20px 20px transparent, -30px 10px transparent, -30px 0px transparent, -30px -10px transparent, -20px -20px @blueD, -10px -30px @blueA;

  90. 		}

  91. 

  92. 		93.75% {

  93. 			box-shadow: 0px -30px @blueA, 10px -30px @blueA, 20px -20px @blueA, 30px -10px @blueA, 30px 0px @blueA, 30px 10px @blueA, 20px 20px @white, 10px 30px transparent, 0px 30px transparent, -10px 30px transparent, -20px 20px transparent, -30px 10px transparent, -30px 0px transparent, -30px -10px transparent, -20px -20px transparent, -10px -30px @blueD;

  94. 		}

  95. 

  96. 		100% {

  97. 			box-shadow: 0px -30px @blueD, 10px -30px @blueA, 20px -20px @blueA, 30px -10px @blueA, 30px 0px @blueA, 30px 10px @blueA, 20px 20px @blueA, 10px 30px @white, 0px 30px transparent, -10px 30px transparent, -20px 20px transparent, -30px 10px transparent, -30px 0px transparent, -30px -10px transparent, -20px -20px transparent, -10px -30px transparent;

  98. 		}

  99. 

  100. 	}

  101. 

  102. }