index.css 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. .container {
  2. margin-top: 40px;
  3. }
  4. .block {
  5. border-radius: 8px;
  6. cursor: pointer;
  7. padding-top: 16px;
  8. text-align: center;
  9. background: #f9f9f9;
  10. outline: 1px solid #fff;
  11. }
  12. .block.selected, .block.selected:hover {
  13. background: #0069d9;
  14. color: white;
  15. }
  16. .block:hover {
  17. background: #dfd;
  18. }
  19. /* loading */
  20. #loading {
  21. position: absolute;
  22. width: 100%;
  23. height: 100%;
  24. background: white;
  25. top: 0;
  26. opacity: .95;
  27. }
  28. .sk-cube-grid {
  29. width: 120px;
  30. height: 120px;
  31. margin: calc(40vh) auto 0;
  32. }
  33. .sk-cube-grid .sk-cube {
  34. width: 33%;
  35. height: 33%;
  36. background-color: #0069d9;
  37. float: left;
  38. -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
  39. animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
  40. }
  41. .sk-cube-grid .sk-cube1 {
  42. -webkit-animation-delay: 0.2s;
  43. animation-delay: 0.2s;
  44. }
  45. .sk-cube-grid .sk-cube2 {
  46. -webkit-animation-delay: 0.3s;
  47. animation-delay: 0.3s;
  48. }
  49. .sk-cube-grid .sk-cube3 {
  50. -webkit-animation-delay: 0.4s;
  51. animation-delay: 0.4s;
  52. }
  53. .sk-cube-grid .sk-cube4 {
  54. -webkit-animation-delay: 0.1s;
  55. animation-delay: 0.1s;
  56. }
  57. .sk-cube-grid .sk-cube5 {
  58. -webkit-animation-delay: 0.2s;
  59. animation-delay: 0.2s;
  60. }
  61. .sk-cube-grid .sk-cube6 {
  62. -webkit-animation-delay: 0.3s;
  63. animation-delay: 0.3s;
  64. }
  65. .sk-cube-grid .sk-cube7 {
  66. -webkit-animation-delay: 0s;
  67. animation-delay: 0s;
  68. }
  69. .sk-cube-grid .sk-cube8 {
  70. -webkit-animation-delay: 0.1s;
  71. animation-delay: 0.1s;
  72. }
  73. .sk-cube-grid .sk-cube9 {
  74. -webkit-animation-delay: 0.2s;
  75. animation-delay: 0.2s;
  76. }
  77. @-webkit-keyframes sk-cubeGridScaleDelay {
  78. 0%, 70%, 100% {
  79. -webkit-transform: scale3D(1, 1, 1);
  80. transform: scale3D(1, 1, 1);
  81. }
  82. 35% {
  83. -webkit-transform: scale3D(0, 0, 1);
  84. transform: scale3D(0, 0, 1);
  85. }
  86. }
  87. @keyframes sk-cubeGridScaleDelay {
  88. 0%, 70%, 100% {
  89. -webkit-transform: scale3D(1, 1, 1);
  90. transform: scale3D(1, 1, 1);
  91. }
  92. 35% {
  93. -webkit-transform: scale3D(0, 0, 1);
  94. transform: scale3D(0, 0, 1);
  95. }
  96. }