lg-zoom.css 4.0 KB

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