UNPKG

4.15 kBCSSView Raw
1.lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-img-wrap,
2.lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-image {
3 -webkit-transition-duration: 0ms !important;
4 transition-duration: 0ms !important;
5}
6
7.lg-outer.lg-use-transition-for-zoom .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
8 will-change: transform;
9 -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s;
10 -moz-transition: -moz-transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s;
11 -o-transition: -o-transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s;
12 transition: transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s;
13}
14
15.lg-outer.lg-use-transition-for-zoom.lg-zoom-drag-transition .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
16 will-change: transform;
17 -webkit-transition: -webkit-transform 0.8s cubic-bezier(0, 0, 0.25, 1) 0s;
18 -moz-transition: -moz-transform 0.8s cubic-bezier(0, 0, 0.25, 1) 0s;
19 -o-transition: -o-transform 0.8s cubic-bezier(0, 0, 0.25, 1) 0s;
20 transition: transform 0.8s cubic-bezier(0, 0, 0.25, 1) 0s;
21}
22
23.lg-outer .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
24 -webkit-transform: translate3d(0, 0, 0);
25 transform: translate3d(0, 0, 0);
26 -webkit-backface-visibility: hidden;
27 -moz-backface-visibility: hidden;
28 backface-visibility: hidden;
29}
30
31.lg-outer .lg-item.lg-complete.lg-zoomable .lg-image,
32.lg-outer .lg-item.lg-complete.lg-zoomable .lg-dummy-img {
33 -webkit-transform: scale3d(1, 1, 1);
34 transform: scale3d(1, 1, 1);
35 -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s, opacity 0.15s !important;
36 -moz-transition: -moz-transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s, opacity 0.15s !important;
37 -o-transition: -o-transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s, opacity 0.15s !important;
38 transition: transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s, opacity 0.15s !important;
39 -webkit-backface-visibility: hidden;
40 -moz-backface-visibility: hidden;
41 backface-visibility: hidden;
42}
43
44.lg-outer .lg-item.lg-complete.lg-zoomable .lg-image.no-transition,
45.lg-outer .lg-item.lg-complete.lg-zoomable .lg-dummy-img.no-transition {
46 transition: none !important;
47}
48
49.lg-outer .lg-item.lg-complete.lg-zoomable .lg-image.reset-transition,
50.lg-outer .lg-item.lg-complete.lg-zoomable .lg-dummy-img.reset-transition {
51 transform: scale3d(1, 1, 1) translate3d(-50%, -50%, 0px) !important;
52 max-width: none !important;
53 max-height: none !important;
54 top: 50% !important;
55 left: 50% !important;
56}
57
58.lg-outer .lg-item.lg-complete.lg-zoomable .lg-image.reset-transition-x,
59.lg-outer .lg-item.lg-complete.lg-zoomable .lg-dummy-img.reset-transition-x {
60 transform: scale3d(1, 1, 1) translate3d(-50%, 0, 0px) !important;
61 top: 0 !important;
62 left: 50% !important;
63 max-width: none !important;
64 max-height: none !important;
65}
66
67.lg-outer .lg-item.lg-complete.lg-zoomable .lg-image.reset-transition-y,
68.lg-outer .lg-item.lg-complete.lg-zoomable .lg-dummy-img.reset-transition-y {
69 transform: scale3d(1, 1, 1) translate3d(0, -50%, 0px) !important;
70 top: 50% !important;
71 left: 0% !important;
72 max-width: none !important;
73 max-height: none !important;
74}
75
76.lg-icon.lg-zoom-in:after {
77 content: '\e311';
78}
79
80.lg-actual-size .lg-icon.lg-zoom-in {
81 opacity: 0.5;
82 pointer-events: none;
83}
84
85.lg-icon.lg-actual-size {
86 font-size: 20px;
87}
88
89.lg-icon.lg-actual-size:after {
90 content: '\e033';
91}
92
93.lg-icon.lg-zoom-out {
94 opacity: 0.5;
95 pointer-events: none;
96}
97
98.lg-icon.lg-zoom-out:after {
99 content: '\e312';
100}
101
102.lg-zoomed .lg-icon.lg-zoom-out {
103 opacity: 1;
104 pointer-events: auto;
105}
106
107.lg-outer[data-lg-slide-type='video'] .lg-zoom-in,
108.lg-outer[data-lg-slide-type='video'] .lg-actual-size,
109.lg-outer[data-lg-slide-type='video'] .lg-zoom-out, .lg-outer[data-lg-slide-type='iframe'] .lg-zoom-in,
110.lg-outer[data-lg-slide-type='iframe'] .lg-actual-size,
111.lg-outer[data-lg-slide-type='iframe'] .lg-zoom-out, .lg-outer.lg-first-slide-loading .lg-zoom-in,
112.lg-outer.lg-first-slide-loading .lg-actual-size,
113.lg-outer.lg-first-slide-loading .lg-zoom-out {
114 opacity: 0.75;
115 pointer-events: none;
116}