GPQAPP

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

20
.pace.pace-active {
21
  -webkit-transform: scale(.25);
22
  -moz-transform: scale(.25);
23
  -ms-transform: scale(.25);
24
  -o-transform: scale(.25);
25
  transform: scale(.25);
26
  opacity: 1;
27
}
28

29
.pace .pace-activity {
30
  width: 140px;
31
  height: 140px;
32
  border-radius: 70px;
33
  background: #fcd25a;
34
  position: absolute;
35
  top: 0;
36
  z-index: 1911;
37
  -webkit-animation: pace-bounce 1s infinite;
38
  -moz-animation: pace-bounce 1s infinite;
39
  -o-animation: pace-bounce 1s infinite;
40
  -ms-animation: pace-bounce 1s infinite;
41
  animation: pace-bounce 1s infinite;
42
}
43

44
.pace .pace-progress {
45
  position: absolute;
46
  display: block;
47
  left: 50%;
48
  bottom: 0;
49
  z-index: 1910;
50
  margin-left: -30px;
51
  width: 60px;
52
  height: 75px;
53
  background: rgba(20, 20, 20, .1);
54
  box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
55
  border-radius: 30px / 40px;
56
  -webkit-transform: scaleY(.3) !important;
57
  -moz-transform: scaleY(.3) !important;
58
  -ms-transform: scaleY(.3) !important;
59
  -o-transform: scaleY(.3) !important;
60
  transform: scaleY(.3) !important;
61
  -webkit-animation: pace-compress .5s infinite alternate;
62
  -moz-animation: pace-compress .5s infinite alternate;
63
  -o-animation: pace-compress .5s infinite alternate;
64
  -ms-animation: pace-compress .5s infinite alternate;
65
  animation: pace-compress .5s infinite alternate;
66
}
67

68
@-webkit-keyframes pace-bounce {
69
  0% {
70
    top: 0;
71
    -webkit-animation-timing-function: ease-in;
72
  }
73
  40% {}
74
  50% {
75
    top: 140px;
76
    height: 140px;
77
    -webkit-animation-timing-function: ease-out;
78
  }
79
  55% {
80
    top: 160px;
81
    height: 120px;
82
    border-radius: 70px / 60px;
83
    -webkit-animation-timing-function: ease-in;
84
  }
85
  65% {
86
    top: 120px;
87
    height: 140px;
88
    border-radius: 70px;
89
    -webkit-animation-timing-function: ease-out;
90
  }
91
  95% {
92
    top: 0;
93
    -webkit-animation-timing-function: ease-in;
94
  }
95
  100% {
96
    top: 0;
97
    -webkit-animation-timing-function: ease-in;
98
  }
99
}
100

101
@-moz-keyframes pace-bounce {
102
  0% {
103
    top: 0;
104
    -moz-animation-timing-function: ease-in;
105
  }
106
  40% {}
107
  50% {
108
    top: 140px;
109
    height: 140px;
110
    -moz-animation-timing-function: ease-out;
111
  }
112
  55% {
113
    top: 160px;
114
    height: 120px;
115
    border-radius: 70px / 60px;
116
    -moz-animation-timing-function: ease-in;
117
  }
118
  65% {
119
    top: 120px;
120
    height: 140px;
121
    border-radius: 70px;
122
    -moz-animation-timing-function: ease-out;}
123
  95% {
124
    top: 0;
125
    -moz-animation-timing-function: ease-in;
126
  }
127
  100% {top: 0;
128
    -moz-animation-timing-function: ease-in;
129
  }
130
}
131

132
@keyframes pace-bounce {
133
  0% {
134
    top: 0;
135
    animation-timing-function: ease-in;
136
  }
137
  50% {
138
    top: 140px;
139
    height: 140px;
140
    animation-timing-function: ease-out;
141
  }
142
  55% {
143
    top: 160px;
144
    height: 120px;
145
    border-radius: 70px / 60px;
146
    animation-timing-function: ease-in;
147
  }
148
  65% {
149
    top: 120px;
150
    height: 140px;
151
    border-radius: 70px;
152
    animation-timing-function: ease-out;
153
  }
154
  95% {
155
    top: 0;
156
    animation-timing-function: ease-in;
157
  }
158
  100% {
159
    top: 0;
160
    animation-timing-function: ease-in;
161
  }
162
}
163

164
@-webkit-keyframes pace-compress {
165
  0% {
166
    bottom: 0;
167
    margin-left: -30px;
168
    width: 60px;
169
    height: 75px;
170
    background: rgba(20, 20, 20, .1);
171
    box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
172
    border-radius: 30px / 40px;
173
    -webkit-animation-timing-function: ease-in;
174
  }
175
  100% {
176
    bottom: 30px;
177
    margin-left: -10px;
178
    width: 20px;
179
    height: 5px;
180
    background: rgba(20, 20, 20, .3);
181
    box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
182
    border-radius: 20px / 20px;
183
    -webkit-animation-timing-function: ease-out;
184
  }
185
}
186

187
@-moz-keyframes pace-compress {
188
  0% {
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
    -moz-animation-timing-function: ease-in;
197
  }
198
  100% {
199
    bottom: 30px;
200
    margin-left: -10px;
201
    width: 20px;
202
    height: 5px;
203
    background: rgba(20, 20, 20, .3);
204
    box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
205
    border-radius: 20px / 20px;
206
    -moz-animation-timing-function: ease-out;
207
  }
208
}
209

210
@keyframes pace-compress {
211
  0% {
212
    bottom: 0;
213
    margin-left: -30px;
214
    width: 60px;
215
    height: 75px;
216
    background: rgba(20, 20, 20, .1);
217
    box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
218
    border-radius: 30px / 40px;
219
    animation-timing-function: ease-in;
220
  }
221
  100% {
222
    bottom: 30px;
223
    margin-left: -10px;
224
    width: 20px;
225
    height: 5px;
226
    background: rgba(20, 20, 20, .3);
227
    box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
228
    border-radius: 20px / 20px;
229
    animation-timing-function: ease-out;
230
  }
231
}