1+ // This is a compiled file, you should be editing the file in templates/
2+ .pace {
3+ width : 140px ;
4+ height : 300px ;
5+ position : fixed;
6+ top : -90px ;
7+ right : -20px ;
8+ z-index : 100 ;
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+ cursor : pointer;
19+ }
20+
21+ .pace .pace-active {
22+ -webkit-transform : scale (.25 );
23+ -moz-transform : scale (.25 );
24+ -ms-transform : scale (.25 );
25+ -o-transform : scale (.25 );
26+ transform : scale (.25 );
27+ opacity : 1 ;
28+ cursor : pointer;
29+ }
30+
31+ .pace .pace-activity {
32+ width : 140px ;
33+ height : 140px ;
34+ border-radius : 70px ;
35+ background : # 29d ;
36+ position : absolute;
37+ top : 0 ;
38+ z-index : 11 ;
39+ -webkit-animation : pace-bounce 1s infinite;
40+ -moz-animation : pace-bounce 1s infinite;
41+ -o-animation : pace-bounce 1s infinite;
42+ -ms-animation : pace-bounce 1s infinite;
43+ animation : pace-bounce 1s infinite;
44+ cursor : pointer;
45+ }
46+
47+ .pace .pace-progress {
48+ position : absolute;
49+ display : block;
50+ left : 50% ;
51+ bottom : 0 ;
52+ z-index : 10 ;
53+ margin-left : -30px ;
54+ width : 60px ;
55+ height : 75px ;
56+ background : rgba (20 , 20 , 20 , .1 );
57+ box-shadow : 0 0 20px 35px rgba (20 , 20 , 20 , .1 );
58+ border-radius : 30px / 40px ;
59+ -webkit-transform : scaleY (.3 );
60+ -moz-transform : scaleY (.3 );
61+ -ms-transform : scaleY (.3 );
62+ -o-transform : scaleY (.3 );
63+ transform : scaleY (.3 );
64+ -webkit-animation : pace-compress 1s infinite;
65+ -moz-animation : pace-compress 1s infinite;
66+ -o-animation : pace-compress 1s infinite;
67+ -ms-animation : pace-compress 1s infinite;
68+ animation : pace-compress 1s infinite;
69+ }
70+
71+ @-webkit-keyframes pace-bounce {
72+ 0% {
73+ top : 0 ;
74+ -webkit-animation-timing-function : ease-in;
75+ }
76+ 40% {}
77+ 50% {
78+ top : 140px ;
79+ height : 140px ;
80+ -webkit-animation-timing-function : ease-out;
81+ }
82+ 55% {
83+ top : 160px ;
84+ height : 120px ;
85+ border-radius : 70px / 60px ;
86+ -webkit-animation-timing-function : ease-in;
87+ }
88+ 65% {
89+ top : 120px ;
90+ height : 140px ;
91+ border-radius : 70px ;
92+ -webkit-animation-timing-function : ease-out;
93+ }
94+ 95% {
95+ top : 0 ;
96+ -webkit-animation-timing-function : ease-in;
97+ }
98+ 100% {
99+ top : 0 ;
100+ -webkit-animation-timing-function : ease-in;
101+ }
102+ }
103+
104+ @-moz-keyframes pace-bounce {
105+ 0% {
106+ top : 0 ;
107+ -moz-animation-timing-function : ease-in;
108+ }
109+ 40% {}
110+ 50% {
111+ top : 140px ;
112+ height : 140px ;
113+ -moz-animation-timing-function : ease-out;
114+ }
115+ 55% {
116+ top : 160px ;
117+ height : 120px ;
118+ border-radius : 70px / 60px ;
119+ -moz-animation-timing-function : ease-in;
120+ }
121+ 65% {
122+ top : 120px ;
123+ height : 140px ;
124+ border-radius : 70px ;
125+ -moz-animation-timing-function : ease-out;}
126+ 95% {
127+ top : 0 ;
128+ -moz-animation-timing-function : ease-in;
129+ }
130+ 100% {top : 0 ;
131+ -moz-animation-timing-function : ease-in;
132+ }
133+ }
134+
135+ @keyframes pace-bounce {
136+ 0% {
137+ top : 0 ;
138+ animation-timing-function : ease-in;
139+ }
140+ 50% {
141+ top : 140px ;
142+ height : 140px ;
143+ animation-timing-function : ease-out;
144+ }
145+ 55% {
146+ top : 160px ;
147+ height : 120px ;
148+ border-radius : 70px / 60px ;
149+ animation-timing-function : ease-in;
150+ }
151+ 65% {
152+ top : 120px ;
153+ height : 140px ;
154+ border-radius : 70px ;
155+ animation-timing-function : ease-out;
156+ }
157+ 95% {
158+ top : 0 ;
159+ animation-timing-function : ease-in;
160+ }
161+ 100% {
162+ top : 0 ;
163+ animation-timing-function : ease-in;
164+ }
165+ }
166+
167+ @-webkit-keyframes pace-compress {
168+ 0% {
169+ bottom : 0 ;
170+ margin-left : -30px ;
171+ width : 60px ;
172+ height : 75px ;
173+ background : rgba (20 , 20 , 20 , .1 );
174+ box-shadow : 0 0 20px 35px rgba (20 , 20 , 20 , .1 );
175+ border-radius : 30px / 40px ;
176+ -webkit-animation-timing-function : ease-in;
177+ }
178+ 50% {
179+ bottom : 30px ;
180+ margin-left : -10px ;
181+ width : 20px ;
182+ height : 5px ;
183+ background : rgba (20 , 20 , 20 , .3 );
184+ box-shadow : 0 0 20px 35px rgba (20 , 20 , 20 , .3 );
185+ border-radius : 20px / 20px ;
186+ -webkit-animation-timing-function : ease-out;
187+ }
188+ 100% {
189+ bottom : 0 ;
190+ margin-left : -30px ;
191+ width : 60px ;
192+ height : 75px ;
193+ background : rgba (20 , 20 , 20 , .1 );
194+ box-shadow : 0 0 20px 35px rgba (20 , 20 , 20 , .1 );
195+ border-radius : 30px / 40px ;
196+ -webkit-animation-timing-function : ease-in;
197+ }
198+ }
199+
200+ @-moz-keyframes pace-compress {
201+ 0% {
202+ bottom : 0 ;
203+ margin-left : -30px ;
204+ width : 60px ;
205+ height : 75px ;
206+ background : rgba (20 , 20 , 20 , .1 );
207+ box-shadow : 0 0 20px 35px rgba (20 , 20 , 20 , .1 );
208+ border-radius : 30px / 40px ;
209+ -moz-animation-timing-function : ease-in;
210+ }
211+ 50% {
212+ bottom : 30px ;
213+ margin-left : -10px ;
214+ width : 20px ;
215+ height : 5px ;
216+ background : rgba (20 , 20 , 20 , .3 );
217+ box-shadow : 0 0 20px 35px rgba (20 , 20 , 20 , .3 );
218+ border-radius : 20px / 20px ;
219+ -moz-animation-timing-function : ease-out;
220+ }
221+ 100% {
222+ bottom : 0 ;
223+ margin-left : -30px ;
224+ width : 60px ;
225+ height : 75px ;
226+ background : rgba (20 , 20 , 20 , .1 );
227+ box-shadow : 0 0 20px 35px rgba (20 , 20 , 20 , .1 );
228+ border-radius : 30px / 40px ;
229+ -moz-animation-timing-function : ease-in;
230+ }
231+ }
232+
233+ @keyframes pace-compress {
234+ 0% {
235+ bottom : 0 ;
236+ margin-left : -30px ;
237+ width : 60px ;
238+ height : 75px ;
239+ background : rgba (20 , 20 , 20 , .1 );
240+ box-shadow : 0 0 20px 35px rgba (20 , 20 , 20 , .1 );
241+ border-radius : 30px / 40px ;
242+ animation-timing-function : ease-in;
243+ }
244+ 50% {
245+ bottom : 30px ;
246+ margin-left : -10px ;
247+ width : 20px ;
248+ height : 5px ;
249+ background : rgba (20 , 20 , 20 , .3 );
250+ box-shadow : 0 0 20px 35px rgba (20 , 20 , 20 , .3 );
251+ border-radius : 20px / 20px ;
252+ animation-timing-function : ease-out;
253+ }
254+ 100% {
255+ bottom : 0 ;
256+ margin-left : -30px ;
257+ width : 60px ;
258+ height : 75px ;
259+ background : rgba (20 , 20 , 20 , .1 );
260+ box-shadow : 0 0 20px 35px rgba (20 , 20 , 20 , .1 );
261+ border-radius : 30px / 40px ;
262+ animation-timing-function : ease-in;
263+ }
264+ }
0 commit comments