25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

pace-theme-center-atom.css 2.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. /* This is a compiled file, to make changes persist, consider editing under the templates directory */
  2. .pace.pace-inactive {
  3. display: none;
  4. }
  5. .pace {
  6. -webkit-pointer-events: none;
  7. pointer-events: none;
  8. -webkit-user-select: none;
  9. -moz-user-select: none;
  10. user-select: none;
  11. z-index: 2000;
  12. position: fixed;
  13. height: 60px;
  14. width: 100px;
  15. margin: auto;
  16. top: 0;
  17. left: 0;
  18. right: 0;
  19. bottom: 0;
  20. }
  21. .pace .pace-progress {
  22. z-index: 2000;
  23. position: absolute;
  24. height: 60px;
  25. width: 100px;
  26. -webkit-transform: translate3d(0, 0, 0) !important;
  27. -ms-transform: translate3d(0, 0, 0) !important;
  28. transform: translate3d(0, 0, 0) !important;
  29. }
  30. .pace .pace-progress:before {
  31. content: attr(data-progress-text);
  32. text-align: center;
  33. color: #fff;
  34. background: #fcd25a;
  35. border-radius: 50%;
  36. font-family: "Helvetica Neue", sans-serif;
  37. font-size: 14px;
  38. font-weight: 100;
  39. line-height: 1;
  40. padding: 20% 0 7px;
  41. width: 50%;
  42. height: 40%;
  43. margin: 10px 0 0 30px;
  44. display: block;
  45. z-index: 999;
  46. position: absolute;
  47. }
  48. .pace .pace-activity {
  49. font-size: 15px;
  50. line-height: 1;
  51. z-index: 2000;
  52. position: absolute;
  53. height: 60px;
  54. width: 100px;
  55. display: block;
  56. -webkit-animation: pace-theme-center-atom-spin 2s linear infinite;
  57. -moz-animation: pace-theme-center-atom-spin 2s linear infinite;
  58. -o-animation: pace-theme-center-atom-spin 2s linear infinite;
  59. animation: pace-theme-center-atom-spin 2s linear infinite;
  60. }
  61. .pace .pace-activity {
  62. border-radius: 50%;
  63. border: 5px solid #fcd25a;
  64. content: ' ';
  65. display: block;
  66. position: absolute;
  67. top: 0;
  68. left: 0;
  69. height: 60px;
  70. width: 100px;
  71. }
  72. .pace .pace-activity:after {
  73. border-radius: 50%;
  74. border: 5px solid #fcd25a;
  75. content: ' ';
  76. display: block;
  77. position: absolute;
  78. top: -5px;
  79. left: -5px;
  80. height: 60px;
  81. width: 100px;
  82. -webkit-transform: rotate(60deg);
  83. -moz-transform: rotate(60deg);
  84. -o-transform: rotate(60deg);
  85. transform: rotate(60deg);
  86. }
  87. .pace .pace-activity:before {
  88. border-radius: 50%;
  89. border: 5px solid #fcd25a;
  90. content: ' ';
  91. display: block;
  92. position: absolute;
  93. top: -5px;
  94. left: -5px;
  95. height: 60px;
  96. width: 100px;
  97. -webkit-transform: rotate(120deg);
  98. -moz-transform: rotate(120deg);
  99. -o-transform: rotate(120deg);
  100. transform: rotate(120deg);
  101. }
  102. @-webkit-keyframes pace-theme-center-atom-spin {
  103. 0% { -webkit-transform: rotate(0deg) }
  104. 100% { -webkit-transform: rotate(359deg) }
  105. }
  106. @-moz-keyframes pace-theme-center-atom-spin {
  107. 0% { -moz-transform: rotate(0deg) }
  108. 100% { -moz-transform: rotate(359deg) }
  109. }
  110. @-o-keyframes pace-theme-center-atom-spin {
  111. 0% { -o-transform: rotate(0deg) }
  112. 100% { -o-transform: rotate(359deg) }
  113. }
  114. @keyframes pace-theme-center-atom-spin {
  115. 0% { transform: rotate(0deg) }
  116. 100% { transform: rotate(359deg) }
  117. }