@@ -63,7 +63,7 @@ body.compensate-for-scrollbar {
63
63
direction : ltr;
64
64
opacity : 0 ;
65
65
position : absolute;
66
- transition : opacity .25s , visibility 0s linear .25s ;
66
+ transition : opacity .25s ease , visibility 0s ease .25s ;
67
67
visibility : hidden;
68
68
z-index : 99997 ; }
69
69
@@ -72,7 +72,7 @@ body.compensate-for-scrollbar {
72
72
.fancybox-show-caption .fancybox-caption ,
73
73
.fancybox-show-nav .fancybox-navigation .fancybox-button {
74
74
opacity : 1 ;
75
- transition : opacity .25s , visibility 0s ;
75
+ transition : opacity .25s ease 0 s , visibility 0 s ease 0s ;
76
76
visibility : visible; }
77
77
78
78
.fancybox-infobar {
@@ -293,6 +293,7 @@ body.compensate-for-scrollbar {
293
293
padding : 10px ;
294
294
transition : color .2s ;
295
295
vertical-align : top;
296
+ visibility : inherit;
296
297
width : 44px ; }
297
298
298
299
.fancybox-button ,
@@ -303,19 +304,20 @@ body.compensate-for-scrollbar {
303
304
.fancybox-button : hover {
304
305
color : # fff ; }
305
306
307
+ .fancybox-button : focus {
308
+ outline : none; }
309
+
310
+ .fancybox-button .fancybox-focus {
311
+ outline : 1px dotted; }
312
+
306
313
.fancybox-button .disabled ,
307
314
.fancybox-button .disabled : hover ,
308
315
.fancybox-button [disabled ],
309
316
.fancybox-button [disabled ]: hover {
310
317
color : # 888 ;
311
- cursor : default; }
312
-
313
- .fancybox-button : focus {
318
+ cursor : default;
314
319
outline : none; }
315
320
316
- .fancybox-button .fancybox-focus {
317
- outline : 1px dotted; }
318
-
319
321
.fancybox-button svg {
320
322
display : block;
321
323
height : 100% ;
@@ -350,48 +352,41 @@ body.compensate-for-scrollbar {
350
352
z-index : 401 ; }
351
353
352
354
.fancybox-close-small : hover {
353
- color : # fff ; }
355
+ color : # fff ;
356
+ opacity : 1 ; }
354
357
355
358
.fancybox-slide--html .fancybox-close-small {
356
359
color : currentColor;
357
360
padding : 10px ;
358
361
right : 0 ;
359
362
top : 0 ; }
360
363
361
- .fancybox-slide--html .fancybox-close-small : hover {
362
- color : currentColor;
363
- opacity : 1 ; }
364
-
365
364
.fancybox-is-scaling .fancybox-close-small ,
366
365
.fancybox-is-zoomable .fancybox-can-pan .fancybox-close-small {
367
366
display : none; }
368
367
369
368
/* Navigation arrows */
370
369
.fancybox-navigation .fancybox-button {
371
- height : 38px ;
370
+ background : transparent;
371
+ height : 100px ;
372
372
margin : 0 ;
373
373
opacity : 0 ;
374
- padding : 7px ;
375
374
position : absolute;
376
- top : calc (50% - (38px / 2 ));
377
- width : 38px ; }
378
-
379
- .fancybox-show-nav .fancybox-navigation .fancybox-button {
380
- transition : opacity .25s , visibility 0s , color .25s ; }
381
-
382
- .fancybox-navigation .fancybox-button ::after {
383
- content : '' ;
384
- height : 100px ;
385
- left : -26px ;
386
- position : absolute;
387
- top : -31px ;
375
+ top : calc (50% - 50px );
388
376
width : 70px ; }
389
377
378
+ .fancybox-navigation .fancybox-button div {
379
+ background : rgba (30 , 30 , 30 , 0.6 );
380
+ height : 100% ;
381
+ padding : 7px ; }
382
+
390
383
.fancybox-navigation .fancybox-button--arrow_left {
391
- left : 6px ; }
384
+ left : 0 ;
385
+ padding : 31px 26px 31px 6px ; }
392
386
393
387
.fancybox-navigation .fancybox-button--arrow_right {
394
- right : 6px ; }
388
+ padding : 31px 6px 31px 26px ;
389
+ right : 0 ; }
395
390
396
391
/* Caption */
397
392
.fancybox-caption {
0 commit comments