viewerjs 1.10.0 → 1.10.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/README.md +6 -4
  2. package/dist/viewer.common.js +112 -60
  3. package/dist/viewer.css +164 -190
  4. package/dist/viewer.esm.js +113 -61
  5. package/dist/viewer.js +114 -62
  6. package/dist/viewer.min.css +3 -3
  7. package/dist/viewer.min.js +3 -3
  8. package/package.json +30 -44
  9. package/src/css/viewer.css +1 -1
  10. package/src/css/viewer.scss +1 -1
  11. package/src/index.css +1 -1
  12. package/src/index.scss +1 -1
  13. package/src/js/constants.js +1 -0
  14. package/src/js/handlers.js +9 -4
  15. package/src/js/methods.js +51 -9
  16. package/src/js/render.js +29 -7
  17. package/CHANGELOG.md +0 -261
package/dist/viewer.css CHANGED
@@ -1,106 +1,93 @@
1
1
  /*!
2
- * Viewer.js v1.10.0
2
+ * Viewer.js v1.10.4
3
3
  * https://fengyuanchen.github.io/viewerjs
4
4
  *
5
5
  * Copyright 2015-present Chen Fengyuan
6
6
  * Released under the MIT license
7
7
  *
8
- * Date: 2021-06-12T07:57:06.776Z
8
+ * Date: 2022-02-13T08:39:57.620Z
9
9
  */
10
10
 
11
- .viewer-zoom-in::before,
12
- .viewer-zoom-out::before,
13
- .viewer-one-to-one::before,
14
- .viewer-reset::before,
15
- .viewer-prev::before,
16
- .viewer-play::before,
17
- .viewer-next::before,
18
- .viewer-rotate-left::before,
19
- .viewer-rotate-right::before,
20
- .viewer-flip-horizontal::before,
21
- .viewer-flip-vertical::before,
22
- .viewer-fullscreen::before,
23
- .viewer-fullscreen-exit::before,
24
- .viewer-close::before {
25
- background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAAUCAYAAABWOyJDAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAQPSURBVHic7Zs/iFxVFMa/0U2UaJGksUgnIVhYxVhpjDbZCBmLdAYECxsRFBTUamcXUiSNncgKQbSxsxH8gzAP3FU2jY0kKKJNiiiIghFlccnP4p3nPCdv3p9778vsLOcHB2bfveeb7955c3jvvNkBIMdxnD64a94GHMfZu3iBcRynN7zAOI7TG15gHCeeNUkr8zaxG2lbYDYsdgMbktBsP03jdQwljSXdtBhLOmtjowC9Mg9L+knSlcD8TNKpSA9lBpK2JF2VdDSR5n5J64m0qli399hNFMUlpshQii5jbXTbHGviB0nLNeNDSd9VO4A2UdB2fp+x0eCnaXxWXGA2X0au/3HgN9P4LFCjIANOJdrLr0zzZ+BEpNYDwKbpnQMeAw4m8HjQtM6Z9qa917zPQwFr3M5KgA6J5rTJCdFZJj9/lyvGhsDvwFNVuV2MhhjrK6b9bFiE+j1r87eBl4HDwCF7/U/k+ofAX5b/EXBv5JoLMuILzf3Ap6Z3EzgdqHMCuF7hcQf4HDgeoHnccncqdK/TvSDWffFXI/exICY/xZyqc6XLWF1UFZna4gJ7q8BsRvgd2/xXpo6P+D9dfT7PpECtA3cnWPM0GXGFZh/wgWltA+cDNC7X+AP4GzjZQe+k5dRxuYPeiuXU7e1qwLpDz7dFjXKRaSwuMLvAlG8zZlG+YmiK1HoFqT7wP2z+4Q45TfEGcMt01xLoNZEBTwRqD4BLpnMLeC1A41UmVxsXgXeBayV/Wx20rpTyrpnWRft7p6O/FdqzGrDukPNtkaMoMo3FBdBSQMOnYBCReyf05s126fU9ytfX98+mY54Kxnp7S9K3kj6U9KYdG0h6UdLbkh7poFXMfUnSOyVvL0h6VtIXHbS6nOP+s/Zm9mvyXW1uuC9ohZ72E9uDmXWLJOB1GxsH+DxPftsB8B6wlGDN02TAkxG6+4D3TWsbeC5CS8CDFce+AW500LhhOW2020TRjK3b21HEmgti9m0RonxbdMZeVzV+/4tF3cBpP7E9mKHNL5q8h5g0eYsCMQz0epq8gQrwMXAgcs0FGXGFRcB9wCemF9PkbYqM/Bas7fxLwNeJPdTdpo4itQti8lPMqTpXuozVRVXPpbHI3KkNTB1NfkL81j2mvhDp91HgV9MKuRIqrykj3WPq4rHyL+axj8/qGPmTqi6F9YDlHOvJU6oYcTsh/TYSzWmTE6JT19CtLTJt32D6CmHe0eQn1O8z5AXgT4sx4Vcu0/EQecMydB8z0hUWkTd2t4CrwNEePqMBcAR4mrBbwyXLPWJa8zrXmmLEhNBmfpkuY2102xxrih+pb+ieAb6vGhuA97UcJ5KR8gZ77K+99xxeYBzH6Q3/Z0fHcXrDC4zjOL3hBcZxnN74F+zlvXFWXF9PAAAAAElFTkSuQmCC');
26
- background-repeat: no-repeat;
27
- background-size: 280px;
28
- color: transparent;
29
- display: block;
30
- font-size: 0;
31
- height: 20px;
32
- line-height: 0;
33
- width: 20px;
34
- }
11
+ .viewer-zoom-in::before, .viewer-zoom-out::before, .viewer-one-to-one::before, .viewer-reset::before, .viewer-prev::before, .viewer-play::before, .viewer-next::before, .viewer-rotate-left::before, .viewer-rotate-right::before, .viewer-flip-horizontal::before, .viewer-flip-vertical::before, .viewer-fullscreen::before, .viewer-fullscreen-exit::before, .viewer-close::before {
12
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAAUCAYAAABWOyJDAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAQPSURBVHic7Zs/iFxVFMa/0U2UaJGksUgnIVhYxVhpjDbZCBmLdAYECxsRFBTUamcXUiSNncgKQbSxsxH8gzAP3FU2jY0kKKJNiiiIghFlccnP4p3nPCdv3p9778vsLOcHB2bfveeb7955c3jvvNkBIMdxnD64a94GHMfZu3iBcRynN7zAOI7TG15gHCeeNUkr8zaxG2lbYDYsdgMbktBsP03jdQwljSXdtBhLOmtjowC9Mg9L+knSlcD8TNKpSA9lBpK2JF2VdDSR5n5J64m0qli399hNFMUlpshQii5jbXTbHGviB0nLNeNDSd9VO4A2UdB2fp+x0eCnaXxWXGA2X0au/3HgN9P4LFCjIANOJdrLr0zzZ+BEpNYDwKbpnQMeAw4m8HjQtM6Z9qa917zPQwFr3M5KgA6J5rTJCdFZJj9/lyvGhsDvwFNVuV2MhhjrK6b9bFiE+j1r87eBl4HDwCF7/U/k+ofAX5b/EXBv5JoLMuILzf3Ap6Z3EzgdqHMCuF7hcQf4HDgeoHnccncqdK/TvSDWffFXI/exICY/xZyqc6XLWF1UFZna4gJ7q8BsRvgd2/xXpo6P+D9dfT7PpECtA3cnWPM0GXGFZh/wgWltA+cDNC7X+AP4GzjZQe+k5dRxuYPeiuXU7e1qwLpDz7dFjXKRaSwuMLvAlG8zZlG+YmiK1HoFqT7wP2z+4Q45TfEGcMt01xLoNZEBTwRqD4BLpnMLeC1A41UmVxsXgXeBayV/Wx20rpTyrpnWRft7p6O/FdqzGrDukPNtkaMoMo3FBdBSQMOnYBCReyf05s126fU9ytfX98+mY54Kxnp7S9K3kj6U9KYdG0h6UdLbkh7poFXMfUnSOyVvL0h6VtIXHbS6nOP+s/Zm9mvyXW1uuC9ohZ72E9uDmXWLJOB1GxsH+DxPftsB8B6wlGDN02TAkxG6+4D3TWsbeC5CS8CDFce+AW500LhhOW2020TRjK3b21HEmgti9m0RonxbdMZeVzV+/4tF3cBpP7E9mKHNL5q8h5g0eYsCMQz0epq8gQrwMXAgcs0FGXGFRcB9wCemF9PkbYqM/Bas7fxLwNeJPdTdpo4itQti8lPMqTpXuozVRVXPpbHI3KkNTB1NfkL81j2mvhDp91HgV9MKuRIqrykj3WPq4rHyL+axj8/qGPmTqi6F9YDlHOvJU6oYcTsh/TYSzWmTE6JT19CtLTJt32D6CmHe0eQn1O8z5AXgT4sx4Vcu0/EQecMydB8z0hUWkTd2t4CrwNEePqMBcAR4mrBbwyXLPWJa8zrXmmLEhNBmfpkuY2102xxrih+pb+ieAb6vGhuA97UcJ5KR8gZ77K+99xxeYBzH6Q3/Z0fHcXrDC4zjOL3hBcZxnN74F+zlvXFWXF9PAAAAAElFTkSuQmCC");
13
+ background-repeat: no-repeat;
14
+ background-size: 280px;
15
+ color: transparent;
16
+ display: block;
17
+ font-size: 0;
18
+ height: 20px;
19
+ line-height: 0;
20
+ width: 20px;
21
+ }
35
22
 
36
23
  .viewer-zoom-in::before {
37
24
  background-position: 0 0;
38
- content: 'Zoom In';
25
+ content: "Zoom In";
39
26
  }
40
27
 
41
28
  .viewer-zoom-out::before {
42
29
  background-position: -20px 0;
43
- content: 'Zoom Out';
30
+ content: "Zoom Out";
44
31
  }
45
32
 
46
33
  .viewer-one-to-one::before {
47
34
  background-position: -40px 0;
48
- content: 'One to One';
35
+ content: "One to One";
49
36
  }
50
37
 
51
38
  .viewer-reset::before {
52
39
  background-position: -60px 0;
53
- content: 'Reset';
40
+ content: "Reset";
54
41
  }
55
42
 
56
43
  .viewer-prev::before {
57
44
  background-position: -80px 0;
58
- content: 'Previous';
45
+ content: "Previous";
59
46
  }
60
47
 
61
48
  .viewer-play::before {
62
49
  background-position: -100px 0;
63
- content: 'Play';
50
+ content: "Play";
64
51
  }
65
52
 
66
53
  .viewer-next::before {
67
54
  background-position: -120px 0;
68
- content: 'Next';
55
+ content: "Next";
69
56
  }
70
57
 
71
58
  .viewer-rotate-left::before {
72
59
  background-position: -140px 0;
73
- content: 'Rotate Left';
60
+ content: "Rotate Left";
74
61
  }
75
62
 
76
63
  .viewer-rotate-right::before {
77
64
  background-position: -160px 0;
78
- content: 'Rotate Right';
65
+ content: "Rotate Right";
79
66
  }
80
67
 
81
68
  .viewer-flip-horizontal::before {
82
69
  background-position: -180px 0;
83
- content: 'Flip Horizontal';
70
+ content: "Flip Horizontal";
84
71
  }
85
72
 
86
73
  .viewer-flip-vertical::before {
87
74
  background-position: -200px 0;
88
- content: 'Flip Vertical';
75
+ content: "Flip Vertical";
89
76
  }
90
77
 
91
78
  .viewer-fullscreen::before {
92
79
  background-position: -220px 0;
93
- content: 'Enter Full Screen';
80
+ content: "Enter Full Screen";
94
81
  }
95
82
 
96
83
  .viewer-fullscreen-exit::before {
97
84
  background-position: -240px 0;
98
- content: 'Exit Full Screen';
85
+ content: "Exit Full Screen";
99
86
  }
100
87
 
101
88
  .viewer-close::before {
102
89
  background-position: -260px 0;
103
- content: 'Close';
90
+ content: "Close";
104
91
  }
105
92
 
106
93
  .viewer-container {
@@ -115,37 +102,36 @@
115
102
  -webkit-tap-highlight-color: transparent;
116
103
  top: 0;
117
104
  -ms-touch-action: none;
118
- touch-action: none;
105
+ touch-action: none;
119
106
  -webkit-touch-callout: none;
120
107
  -webkit-user-select: none;
121
- -moz-user-select: none;
122
- -ms-user-select: none;
123
- user-select: none;
108
+ -moz-user-select: none;
109
+ -ms-user-select: none;
110
+ user-select: none
124
111
  }
125
112
 
126
- .viewer-container::-moz-selection,
127
- .viewer-container *::-moz-selection {
128
- background-color: transparent;
129
- }
113
+ .viewer-container::-moz-selection, .viewer-container *::-moz-selection {
114
+ background-color: transparent;
115
+ }
130
116
 
131
117
  .viewer-container::selection,
132
- .viewer-container *::selection {
133
- background-color: transparent;
134
- }
118
+ .viewer-container *::selection {
119
+ background-color: transparent;
120
+ }
135
121
 
136
122
  .viewer-container:focus {
137
- outline: 0;
138
- }
123
+ outline: 0;
124
+ }
139
125
 
140
126
  .viewer-container img {
141
- display: block;
142
- height: auto;
143
- max-height: none !important;
144
- max-width: none !important;
145
- min-height: 0 !important;
146
- min-width: 0 !important;
147
- width: 100%;
148
- }
127
+ display: block;
128
+ height: auto;
129
+ max-height: none !important;
130
+ max-width: none !important;
131
+ min-height: 0 !important;
132
+ min-width: 0 !important;
133
+ width: 100%;
134
+ }
149
135
 
150
136
  .viewer-canvas {
151
137
  bottom: 0;
@@ -153,15 +139,15 @@
153
139
  overflow: hidden;
154
140
  position: absolute;
155
141
  right: 0;
156
- top: 0;
142
+ top: 0
157
143
  }
158
144
 
159
145
  .viewer-canvas > img {
160
- height: auto;
161
- margin: 15px auto;
162
- max-width: 90% !important;
163
- width: auto;
164
- }
146
+ height: auto;
147
+ margin: 15px auto;
148
+ max-width: 90% !important;
149
+ width: auto;
150
+ }
165
151
 
166
152
  .viewer-footer {
167
153
  bottom: 0;
@@ -173,63 +159,61 @@
173
159
  }
174
160
 
175
161
  .viewer-navbar {
176
- background-color: rgba(0, 0, 0, 0.5);
162
+ background-color: rgba(0, 0, 0, 50%);
177
163
  overflow: hidden;
178
164
  }
179
165
 
180
166
  .viewer-list {
181
- -webkit-box-sizing: content-box;
182
167
  box-sizing: content-box;
183
168
  height: 50px;
184
169
  margin: 0;
185
170
  overflow: hidden;
186
- padding: 1px 0;
171
+ padding: 1px 0
187
172
  }
188
173
 
189
174
  .viewer-list > li {
190
- color: transparent;
191
- cursor: pointer;
192
- float: left;
193
- font-size: 0;
194
- height: 50px;
195
- line-height: 0;
196
- opacity: 0.5;
197
- overflow: hidden;
198
- -webkit-transition: opacity 0.15s;
199
- transition: opacity 0.15s;
200
- width: 30px;
201
- }
175
+ color: transparent;
176
+ cursor: pointer;
177
+ float: left;
178
+ font-size: 0;
179
+ height: 50px;
180
+ line-height: 0;
181
+ opacity: 0.5;
182
+ overflow: hidden;
183
+ transition: opacity 0.15s;
184
+ width: 30px
185
+ }
202
186
 
203
187
  .viewer-list > li:focus,
204
- .viewer-list > li:hover {
205
- opacity: 0.75;
206
- }
188
+ .viewer-list > li:hover {
189
+ opacity: 0.75;
190
+ }
207
191
 
208
192
  .viewer-list > li:focus {
209
- outline: 0;
210
- }
193
+ outline: 0;
194
+ }
211
195
 
212
196
  .viewer-list > li + li {
213
- margin-left: 1px;
214
- }
197
+ margin-left: 1px;
198
+ }
215
199
 
216
200
  .viewer-list > .viewer-loading {
217
- position: relative;
218
- }
201
+ position: relative
202
+ }
219
203
 
220
204
  .viewer-list > .viewer-loading::after {
221
- border-width: 2px;
222
- height: 20px;
223
- margin-left: -10px;
224
- margin-top: -10px;
225
- width: 20px;
226
- }
205
+ border-width: 2px;
206
+ height: 20px;
207
+ margin-left: -10px;
208
+ margin-top: -10px;
209
+ width: 20px;
210
+ }
227
211
 
228
212
  .viewer-list > .viewer-active,
229
- .viewer-list > .viewer-active:focus,
230
- .viewer-list > .viewer-active:hover {
231
- opacity: 1;
232
- }
213
+ .viewer-list > .viewer-active:focus,
214
+ .viewer-list > .viewer-active:hover {
215
+ opacity: 1;
216
+ }
233
217
 
234
218
  .viewer-player {
235
219
  background-color: #000;
@@ -240,79 +224,77 @@
240
224
  position: absolute;
241
225
  right: 0;
242
226
  top: 0;
243
- z-index: 1;
227
+ z-index: 1
244
228
  }
245
229
 
246
230
  .viewer-player > img {
247
- left: 0;
248
- position: absolute;
249
- top: 0;
250
- }
231
+ left: 0;
232
+ position: absolute;
233
+ top: 0;
234
+ }
251
235
 
252
236
  .viewer-toolbar > ul {
253
- display: inline-block;
254
- margin: 0 auto 5px;
255
- overflow: hidden;
256
- padding: 6px 3px;
257
- }
237
+ display: inline-block;
238
+ margin: 0 auto 5px;
239
+ overflow: hidden;
240
+ padding: 6px 3px
241
+ }
258
242
 
259
243
  .viewer-toolbar > ul > li {
260
- background-color: rgba(0, 0, 0, 0.5);
261
- border-radius: 50%;
262
- cursor: pointer;
263
- float: left;
264
- height: 24px;
265
- overflow: hidden;
266
- -webkit-transition: background-color 0.15s;
267
- transition: background-color 0.15s;
268
- width: 24px;
269
- }
244
+ background-color: rgba(0, 0, 0, 50%);
245
+ border-radius: 50%;
246
+ cursor: pointer;
247
+ float: left;
248
+ height: 24px;
249
+ overflow: hidden;
250
+ transition: background-color 0.15s;
251
+ width: 24px
252
+ }
270
253
 
271
254
  .viewer-toolbar > ul > li:focus,
272
- .viewer-toolbar > ul > li:hover {
273
- background-color: rgba(0, 0, 0, 0.8);
274
- }
255
+ .viewer-toolbar > ul > li:hover {
256
+ background-color: rgba(0, 0, 0, 80%);
257
+ }
275
258
 
276
259
  .viewer-toolbar > ul > li:focus {
277
- -webkit-box-shadow: 0 0 3px #fff;
278
- box-shadow: 0 0 3px #fff;
279
- outline: 0;
280
- position: relative;
281
- z-index: 1;
282
- }
260
+ box-shadow: 0 0 3px #fff;
261
+ outline: 0;
262
+ position: relative;
263
+ z-index: 1;
264
+ }
283
265
 
284
266
  .viewer-toolbar > ul > li::before {
285
- margin: 2px;
286
- }
267
+ margin: 2px;
268
+ }
287
269
 
288
270
  .viewer-toolbar > ul > li + li {
289
- margin-left: 1px;
290
- }
271
+ margin-left: 1px;
272
+ }
291
273
 
292
274
  .viewer-toolbar > ul > .viewer-small {
293
- height: 18px;
294
- margin-bottom: 3px;
295
- margin-top: 3px;
296
- width: 18px;
297
- }
275
+ height: 18px;
276
+ margin-bottom: 3px;
277
+ margin-top: 3px;
278
+ width: 18px
279
+ }
298
280
 
299
281
  .viewer-toolbar > ul > .viewer-small::before {
300
- margin: -1px;
301
- }
282
+ margin: -1px;
283
+ }
302
284
 
303
285
  .viewer-toolbar > ul > .viewer-large {
304
- height: 30px;
305
- margin-bottom: -3px;
306
- margin-top: -3px;
307
- width: 30px;
308
- }
286
+ height: 30px;
287
+ margin-bottom: -3px;
288
+ margin-top: -3px;
289
+ width: 30px
290
+ }
309
291
 
310
292
  .viewer-toolbar > ul > .viewer-large::before {
311
- margin: 5px;
312
- }
293
+ margin: 5px;
294
+ }
313
295
 
314
296
  .viewer-tooltip {
315
- background-color: rgba(0, 0, 0, 0.8);
297
+ background-color: rgba(0, 0, 0, 80%);
316
298
  border-radius: 10px;
317
299
  color: #fff;
318
300
  display: none;
@@ -332,23 +314,22 @@
332
314
  color: #ccc;
333
315
  display: inline-block;
334
316
  font-size: 12px;
335
- line-height: 1;
317
+ line-height: 1.2;
336
318
  margin: 0 5% 5px;
337
319
  max-width: 90%;
338
320
  opacity: 0.8;
339
321
  overflow: hidden;
340
322
  text-overflow: ellipsis;
341
- -webkit-transition: opacity 0.15s;
342
323
  transition: opacity 0.15s;
343
- white-space: nowrap;
324
+ white-space: nowrap
344
325
  }
345
326
 
346
327
  .viewer-title:hover {
347
- opacity: 1;
348
- }
328
+ opacity: 1;
329
+ }
349
330
 
350
331
  .viewer-button {
351
- background-color: rgba(0, 0, 0, 0.5);
332
+ background-color: rgba(0, 0, 0, 50%);
352
333
  border-radius: 50%;
353
334
  cursor: pointer;
354
335
  height: 80px;
@@ -356,27 +337,25 @@
356
337
  position: absolute;
357
338
  right: -40px;
358
339
  top: -40px;
359
- -webkit-transition: background-color 0.15s;
360
340
  transition: background-color 0.15s;
361
- width: 80px;
341
+ width: 80px
362
342
  }
363
343
 
364
344
  .viewer-button:focus,
365
- .viewer-button:hover {
366
- background-color: rgba(0, 0, 0, 0.8);
367
- }
345
+ .viewer-button:hover {
346
+ background-color: rgba(0, 0, 0, 80%);
347
+ }
368
348
 
369
349
  .viewer-button:focus {
370
- -webkit-box-shadow: 0 0 3px #fff;
371
- box-shadow: 0 0 3px #fff;
372
- outline: 0;
373
- }
350
+ box-shadow: 0 0 3px #fff;
351
+ outline: 0;
352
+ }
374
353
 
375
354
  .viewer-button::before {
376
- bottom: 15px;
377
- left: 15px;
378
- position: absolute;
379
- }
355
+ bottom: 15px;
356
+ left: 15px;
357
+ position: absolute;
358
+ }
380
359
 
381
360
  .viewer-fixed {
382
361
  position: fixed;
@@ -395,7 +374,7 @@
395
374
  }
396
375
 
397
376
  .viewer-backdrop {
398
- background-color: rgba(0, 0, 0, 0.5);
377
+ background-color: rgba(0, 0, 0, 50%);
399
378
  }
400
379
 
401
380
  .viewer-invisible {
@@ -417,51 +396,46 @@
417
396
  }
418
397
 
419
398
  .viewer-transition {
420
- -webkit-transition: all 0.3s;
421
399
  transition: all 0.3s;
422
400
  }
423
401
 
424
402
  @-webkit-keyframes viewer-spinner {
425
403
  0% {
426
- -webkit-transform: rotate(0deg);
427
404
  transform: rotate(0deg);
428
405
  }
429
406
 
430
407
  100% {
431
- -webkit-transform: rotate(360deg);
432
408
  transform: rotate(360deg);
433
409
  }
434
410
  }
435
411
 
436
412
  @keyframes viewer-spinner {
437
413
  0% {
438
- -webkit-transform: rotate(0deg);
439
414
  transform: rotate(0deg);
440
415
  }
441
416
 
442
417
  100% {
443
- -webkit-transform: rotate(360deg);
444
418
  transform: rotate(360deg);
445
419
  }
446
420
  }
447
421
 
448
422
  .viewer-loading::after {
449
- -webkit-animation: viewer-spinner 1s linear infinite;
450
- animation: viewer-spinner 1s linear infinite;
451
- border: 4px solid rgba(255, 255, 255, 0.1);
452
- border-left-color: rgba(255, 255, 255, 0.5);
453
- border-radius: 50%;
454
- content: '';
455
- display: inline-block;
456
- height: 40px;
457
- left: 50%;
458
- margin-left: -20px;
459
- margin-top: -20px;
460
- position: absolute;
461
- top: 50%;
462
- width: 40px;
463
- z-index: 1;
464
- }
423
+ -webkit-animation: viewer-spinner 1s linear infinite;
424
+ animation: viewer-spinner 1s linear infinite;
425
+ border: 4px solid rgba(255, 255, 255, 10%);
426
+ border-left-color: rgba(255, 255, 255, 50%);
427
+ border-radius: 50%;
428
+ content: "";
429
+ display: inline-block;
430
+ height: 40px;
431
+ left: 50%;
432
+ margin-left: -20px;
433
+ margin-top: -20px;
434
+ position: absolute;
435
+ top: 50%;
436
+ width: 40px;
437
+ z-index: 1;
438
+ }
465
439
 
466
440
  @media (max-width: 767px) {
467
441
  .viewer-hide-xs-down {