1
1
body .compensate-for-scrollbar {
2
- overflow : hidden;
3
- -ms-overflow-style : none; }
2
+ overflow : hidden; }
4
3
5
4
.fancybox-active {
6
5
height : auto; }
@@ -100,16 +99,16 @@ body.compensate-for-scrollbar {
100
99
.fancybox-stage {
101
100
direction : ltr;
102
101
overflow : visible;
103
- -webkit-transform : translate3d ( 0 , 0 , 0 );
104
- transform : translate3d ( 0 , 0 , 0 );
102
+ -webkit-transform : translateZ ( 0 );
103
+ transform : translateZ ( 0 );
105
104
z-index : 99994 ; }
106
105
107
106
.fancybox-is-open .fancybox-stage {
108
107
overflow : hidden; }
109
108
110
109
.fancybox-slide {
111
110
-webkit-backface-visibility : hidden;
112
- backface-visibility : hidden;
111
+ /* Using without prefix would break IE11 */
113
112
display : none;
114
113
height : 100% ;
115
114
left : 0 ;
@@ -145,11 +144,9 @@ body.compensate-for-scrollbar {
145
144
z-index : 99995 ; }
146
145
147
146
.fancybox-slide--image {
147
+ overflow : hidden;
148
148
padding : 44px 0 0 0 ; }
149
149
150
- .fancybox-slide--image {
151
- overflow : visible; }
152
-
153
150
.fancybox-slide--image ::before {
154
151
display : none; }
155
152
@@ -172,7 +169,6 @@ body.compensate-for-scrollbar {
172
169
-webkit-animation-timing-function : cubic-bezier (0.5 , 0 , 0.14 , 1 );
173
170
animation-timing-function : cubic-bezier (0.5 , 0 , 0.14 , 1 );
174
171
-webkit-backface-visibility : hidden;
175
- backface-visibility : hidden;
176
172
background : transparent;
177
173
background-repeat : no-repeat;
178
174
background-size : 100% 100% ;
@@ -286,11 +282,13 @@ body.compensate-for-scrollbar {
286
282
background : rgba (30 , 30 , 30 , 0.6 );
287
283
border : 0 ;
288
284
border-radius : 0 ;
285
+ box-shadow : none;
289
286
cursor : pointer;
290
287
display : inline-block;
291
288
height : 44px ;
292
289
margin : 0 ;
293
290
padding : 10px ;
291
+ position : relative;
294
292
transition : color .2s ;
295
293
vertical-align : top;
296
294
visibility : inherit;
@@ -337,6 +335,25 @@ body.compensate-for-scrollbar {
337
335
.fancybox-button--fsexit svg : nth-child (1 ) {
338
336
display : none; }
339
337
338
+ .fancybox-progress {
339
+ background : # ff5268 ;
340
+ height : 2px ;
341
+ left : 0 ;
342
+ position : absolute;
343
+ right : 0 ;
344
+ top : 0 ;
345
+ -webkit-transform : scaleX (0 );
346
+ -ms-transform : scaleX (0 );
347
+ transform : scaleX (0 );
348
+ -webkit-transform-origin : 0 ;
349
+ -ms-transform-origin : 0 ;
350
+ transform-origin : 0 ;
351
+ transition-property : -webkit-transform;
352
+ transition-property : transform;
353
+ transition-property : transform, -webkit-transform;
354
+ transition-timing-function : linear;
355
+ z-index : 99998 ; }
356
+
340
357
/* Close button on the top right corner of html content */
341
358
.fancybox-close-small {
342
359
background : transparent;
@@ -434,37 +451,31 @@ body.compensate-for-scrollbar {
434
451
435
452
/* Loading indicator */
436
453
.fancybox-loading {
437
- -webkit-animation : fancybox-rotate .8 s infinite linear;
438
- animation : fancybox-rotate .8 s infinite linear;
454
+ -webkit-animation : fancybox-rotate 1 s linear infinite ;
455
+ animation : fancybox-rotate 1 s linear infinite ;
439
456
background : transparent;
440
- border : 6 px solid rgba ( 100 , 100 , 100 , 0.5 ) ;
441
- border-radius : 100 % ;
442
- border-top-color : # fff ;
443
- height : 60 px ;
457
+ border : 4 px solid # 888 ;
458
+ border-bottom-color : # fff ;
459
+ border-radius : 50 % ;
460
+ height : 50 px ;
444
461
left : 50% ;
445
- margin : -30 px 0 0 -30 px ;
446
- opacity : .6 ;
462
+ margin : -25 px 0 0 -25 px ;
463
+ opacity : .7 ;
447
464
padding : 0 ;
448
465
position : absolute;
449
466
top : 50% ;
450
- width : 60 px ;
467
+ width : 50 px ;
451
468
z-index : 99999 ; }
452
469
453
470
@-webkit-keyframes fancybox-rotate {
454
- from {
455
- -webkit-transform : rotate (0deg );
456
- transform : rotate (0deg ); }
457
- to {
458
- -webkit-transform : rotate (359deg );
459
- transform : rotate (359deg ); } }
471
+ 100% {
472
+ -webkit-transform : rotate (360deg );
473
+ transform : rotate (360deg ); } }
460
474
461
475
@keyframes fancybox-rotate {
462
- from {
463
- -webkit-transform : rotate (0deg );
464
- transform : rotate (0deg ); }
465
- to {
466
- -webkit-transform : rotate (359deg );
467
- transform : rotate (359deg ); } }
476
+ 100% {
477
+ -webkit-transform : rotate (360deg );
478
+ transform : rotate (360deg ); } }
468
479
469
480
/* Transition effects */
470
481
.fancybox-animated {
@@ -664,7 +675,7 @@ body.compensate-for-scrollbar {
664
675
665
676
/* Thumbs */
666
677
.fancybox-thumbs {
667
- background : # fff ;
678
+ background : # ddd ;
668
679
bottom : 0 ;
669
680
display : none;
670
681
margin : 0 ;
@@ -737,7 +748,7 @@ body.compensate-for-scrollbar {
737
748
width : 100px ; }
738
749
739
750
.fancybox-thumbs__list a ::before {
740
- border : 4 px solid # 4ea7f9 ;
751
+ border : 6 px solid # ff5268 ;
741
752
bottom : 0 ;
742
753
content : '' ;
743
754
left : 0 ;
0 commit comments