viewerjs 1.10.2 → 1.10.5

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 +73 -45
  3. package/dist/viewer.css +164 -189
  4. package/dist/viewer.esm.js +73 -45
  5. package/dist/viewer.js +73 -45
  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 -0
  10. package/src/css/viewer.scss +1 -0
  11. package/src/index.css +1 -1
  12. package/src/index.scss +1 -1
  13. package/src/js/handlers.js +8 -3
  14. package/src/js/methods.js +24 -6
  15. package/src/js/others.js +13 -8
  16. package/src/js/viewer.js +15 -1
  17. package/CHANGELOG.md +0 -272
package/dist/viewer.css CHANGED
@@ -1,106 +1,93 @@
1
1
  /*!
2
- * Viewer.js v1.10.2
2
+ * Viewer.js v1.10.5
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-10-22T13:59:46.805Z
8
+ * Date: 2022-04-05T08:21:00.150Z
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;
@@ -338,17 +320,17 @@
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
+ -webkit-app-region: no-drag;
333
+ background-color: rgba(0, 0, 0, 50%);
352
334
  border-radius: 50%;
353
335
  cursor: pointer;
354
336
  height: 80px;
@@ -356,27 +338,25 @@
356
338
  position: absolute;
357
339
  right: -40px;
358
340
  top: -40px;
359
- -webkit-transition: background-color 0.15s;
360
341
  transition: background-color 0.15s;
361
- width: 80px;
342
+ width: 80px
362
343
  }
363
344
 
364
345
  .viewer-button:focus,
365
- .viewer-button:hover {
366
- background-color: rgba(0, 0, 0, 0.8);
367
- }
346
+ .viewer-button:hover {
347
+ background-color: rgba(0, 0, 0, 80%);
348
+ }
368
349
 
369
350
  .viewer-button:focus {
370
- -webkit-box-shadow: 0 0 3px #fff;
371
- box-shadow: 0 0 3px #fff;
372
- outline: 0;
373
- }
351
+ box-shadow: 0 0 3px #fff;
352
+ outline: 0;
353
+ }
374
354
 
375
355
  .viewer-button::before {
376
- bottom: 15px;
377
- left: 15px;
378
- position: absolute;
379
- }
356
+ bottom: 15px;
357
+ left: 15px;
358
+ position: absolute;
359
+ }
380
360
 
381
361
  .viewer-fixed {
382
362
  position: fixed;
@@ -395,7 +375,7 @@
395
375
  }
396
376
 
397
377
  .viewer-backdrop {
398
- background-color: rgba(0, 0, 0, 0.5);
378
+ background-color: rgba(0, 0, 0, 50%);
399
379
  }
400
380
 
401
381
  .viewer-invisible {
@@ -417,51 +397,46 @@
417
397
  }
418
398
 
419
399
  .viewer-transition {
420
- -webkit-transition: all 0.3s;
421
400
  transition: all 0.3s;
422
401
  }
423
402
 
424
403
  @-webkit-keyframes viewer-spinner {
425
404
  0% {
426
- -webkit-transform: rotate(0deg);
427
405
  transform: rotate(0deg);
428
406
  }
429
407
 
430
408
  100% {
431
- -webkit-transform: rotate(360deg);
432
409
  transform: rotate(360deg);
433
410
  }
434
411
  }
435
412
 
436
413
  @keyframes viewer-spinner {
437
414
  0% {
438
- -webkit-transform: rotate(0deg);
439
415
  transform: rotate(0deg);
440
416
  }
441
417
 
442
418
  100% {
443
- -webkit-transform: rotate(360deg);
444
419
  transform: rotate(360deg);
445
420
  }
446
421
  }
447
422
 
448
423
  .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
- }
424
+ -webkit-animation: viewer-spinner 1s linear infinite;
425
+ animation: viewer-spinner 1s linear infinite;
426
+ border: 4px solid rgba(255, 255, 255, 10%);
427
+ border-left-color: rgba(255, 255, 255, 50%);
428
+ border-radius: 50%;
429
+ content: "";
430
+ display: inline-block;
431
+ height: 40px;
432
+ left: 50%;
433
+ margin-left: -20px;
434
+ margin-top: -20px;
435
+ position: absolute;
436
+ top: 50%;
437
+ width: 40px;
438
+ z-index: 1;
439
+ }
465
440
 
466
441
  @media (max-width: 767px) {
467
442
  .viewer-hide-xs-down {