pace-theme-bounce.css 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  1. /* This is a compiled file, to make changes persist, consider editing under the templates directory */
  2. .pace {
  3. width: 140px;
  4. height: 300px;
  5. position: fixed;
  6. top: -90px;
  7. right: -20px;
  8. z-index: 2000;
  9. -webkit-transform: scale(0);
  10. -moz-transform: scale(0);
  11. -ms-transform: scale(0);
  12. -o-transform: scale(0);
  13. transform: scale(0);
  14. opacity: 0;
  15. -webkit-transition: all 2s linear 0s;
  16. -moz-transition: all 2s linear 0s;
  17. transition: all 2s linear 0s;
  18. }
  19. .pace.pace-active {
  20. -webkit-transform: scale(.25);
  21. -moz-transform: scale(.25);
  22. -ms-transform: scale(.25);
  23. -o-transform: scale(.25);
  24. transform: scale(.25);
  25. opacity: 1;
  26. }
  27. .pace .pace-activity {
  28. width: 140px;
  29. height: 140px;
  30. border-radius: 70px;
  31. background: #000000;
  32. position: absolute;
  33. top: 0;
  34. z-index: 1911;
  35. -webkit-animation: pace-bounce 1s infinite;
  36. -moz-animation: pace-bounce 1s infinite;
  37. -o-animation: pace-bounce 1s infinite;
  38. -ms-animation: pace-bounce 1s infinite;
  39. animation: pace-bounce 1s infinite;
  40. }
  41. .pace .pace-progress {
  42. position: absolute;
  43. display: block;
  44. left: 50%;
  45. bottom: 0;
  46. z-index: 1910;
  47. margin-left: -30px;
  48. width: 60px;
  49. height: 75px;
  50. background: rgba(20, 20, 20, .1);
  51. box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
  52. border-radius: 30px / 40px;
  53. -webkit-transform: scaleY(.3) !important;
  54. -moz-transform: scaleY(.3) !important;
  55. -ms-transform: scaleY(.3) !important;
  56. -o-transform: scaleY(.3) !important;
  57. transform: scaleY(.3) !important;
  58. -webkit-animation: pace-compress .5s infinite alternate;
  59. -moz-animation: pace-compress .5s infinite alternate;
  60. -o-animation: pace-compress .5s infinite alternate;
  61. -ms-animation: pace-compress .5s infinite alternate;
  62. animation: pace-compress .5s infinite alternate;
  63. }
  64. @-webkit-keyframes pace-bounce {
  65. 0% {
  66. top: 0;
  67. -webkit-animation-timing-function: ease-in;
  68. }
  69. 40% {}
  70. 50% {
  71. top: 140px;
  72. height: 140px;
  73. -webkit-animation-timing-function: ease-out;
  74. }
  75. 55% {
  76. top: 160px;
  77. height: 120px;
  78. border-radius: 70px / 60px;
  79. -webkit-animation-timing-function: ease-in;
  80. }
  81. 65% {
  82. top: 120px;
  83. height: 140px;
  84. border-radius: 70px;
  85. -webkit-animation-timing-function: ease-out;
  86. }
  87. 95% {
  88. top: 0;
  89. -webkit-animation-timing-function: ease-in;
  90. }
  91. 100% {
  92. top: 0;
  93. -webkit-animation-timing-function: ease-in;
  94. }
  95. }
  96. @-moz-keyframes pace-bounce {
  97. 0% {
  98. top: 0;
  99. -moz-animation-timing-function: ease-in;
  100. }
  101. 40% {}
  102. 50% {
  103. top: 140px;
  104. height: 140px;
  105. -moz-animation-timing-function: ease-out;
  106. }
  107. 55% {
  108. top: 160px;
  109. height: 120px;
  110. border-radius: 70px / 60px;
  111. -moz-animation-timing-function: ease-in;
  112. }
  113. 65% {
  114. top: 120px;
  115. height: 140px;
  116. border-radius: 70px;
  117. -moz-animation-timing-function: ease-out;}
  118. 95% {
  119. top: 0;
  120. -moz-animation-timing-function: ease-in;
  121. }
  122. 100% {top: 0;
  123. -moz-animation-timing-function: ease-in;
  124. }
  125. }
  126. @keyframes pace-bounce {
  127. 0% {
  128. top: 0;
  129. animation-timing-function: ease-in;
  130. }
  131. 50% {
  132. top: 140px;
  133. height: 140px;
  134. animation-timing-function: ease-out;
  135. }
  136. 55% {
  137. top: 160px;
  138. height: 120px;
  139. border-radius: 70px / 60px;
  140. animation-timing-function: ease-in;
  141. }
  142. 65% {
  143. top: 120px;
  144. height: 140px;
  145. border-radius: 70px;
  146. animation-timing-function: ease-out;
  147. }
  148. 95% {
  149. top: 0;
  150. animation-timing-function: ease-in;
  151. }
  152. 100% {
  153. top: 0;
  154. animation-timing-function: ease-in;
  155. }
  156. }
  157. @-webkit-keyframes pace-compress {
  158. 0% {
  159. bottom: 0;
  160. margin-left: -30px;
  161. width: 60px;
  162. height: 75px;
  163. background: rgba(20, 20, 20, .1);
  164. box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
  165. border-radius: 30px / 40px;
  166. -webkit-animation-timing-function: ease-in;
  167. }
  168. 100% {
  169. bottom: 30px;
  170. margin-left: -10px;
  171. width: 20px;
  172. height: 5px;
  173. background: rgba(20, 20, 20, .3);
  174. box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
  175. border-radius: 20px / 20px;
  176. -webkit-animation-timing-function: ease-out;
  177. }
  178. }
  179. @-moz-keyframes pace-compress {
  180. 0% {
  181. bottom: 0;
  182. margin-left: -30px;
  183. width: 60px;
  184. height: 75px;
  185. background: rgba(20, 20, 20, .1);
  186. box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
  187. border-radius: 30px / 40px;
  188. -moz-animation-timing-function: ease-in;
  189. }
  190. 100% {
  191. bottom: 30px;
  192. margin-left: -10px;
  193. width: 20px;
  194. height: 5px;
  195. background: rgba(20, 20, 20, .3);
  196. box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
  197. border-radius: 20px / 20px;
  198. -moz-animation-timing-function: ease-out;
  199. }
  200. }
  201. @keyframes pace-compress {
  202. 0% {
  203. bottom: 0;
  204. margin-left: -30px;
  205. width: 60px;
  206. height: 75px;
  207. background: rgba(20, 20, 20, .1);
  208. box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
  209. border-radius: 30px / 40px;
  210. animation-timing-function: ease-in;
  211. }
  212. 100% {
  213. bottom: 30px;
  214. margin-left: -10px;
  215. width: 20px;
  216. height: 5px;
  217. background: rgba(20, 20, 20, .3);
  218. box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
  219. border-radius: 20px / 20px;
  220. animation-timing-function: ease-out;
  221. }
  222. }