lg-zoom.css 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  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. will-change: opacity, transform;
  32. -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s, opacity 0.15s !important;
  33. -moz-transition: -moz-transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s, opacity 0.15s !important;
  34. -o-transition: -o-transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s, opacity 0.15s !important;
  35. transition: transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s, opacity 0.15s !important;
  36. -webkit-transform-origin: 0 0;
  37. -moz-transform-origin: 0 0;
  38. -ms-transform-origin: 0 0;
  39. transform-origin: 0 0;
  40. -webkit-backface-visibility: hidden;
  41. -moz-backface-visibility: hidden;
  42. backface-visibility: hidden;
  43. }
  44. .lg-icon.lg-zoom-in:after {
  45. content: '\e311';
  46. }
  47. .lg-icon.lg-actual-size {
  48. font-size: 20px;
  49. }
  50. .lg-icon.lg-actual-size:after {
  51. content: '\e033';
  52. }
  53. .lg-icon.lg-zoom-out {
  54. opacity: 0.5;
  55. pointer-events: none;
  56. }
  57. .lg-icon.lg-zoom-out:after {
  58. content: '\e312';
  59. }
  60. .lg-zoomed .lg-icon.lg-zoom-out {
  61. opacity: 1;
  62. pointer-events: auto;
  63. }
  64. .lg-outer[data-lg-slide-type='video'] .lg-zoom-in,
  65. .lg-outer[data-lg-slide-type='video'] .lg-actual-size,
  66. .lg-outer[data-lg-slide-type='video'] .lg-zoom-out, .lg-outer[data-lg-slide-type='iframe'] .lg-zoom-in,
  67. .lg-outer[data-lg-slide-type='iframe'] .lg-actual-size,
  68. .lg-outer[data-lg-slide-type='iframe'] .lg-zoom-out, .lg-outer.lg-first-slide-loading .lg-zoom-in,
  69. .lg-outer.lg-first-slide-loading .lg-actual-size,
  70. .lg-outer.lg-first-slide-loading .lg-zoom-out {
  71. opacity: 0.75;
  72. pointer-events: none;
  73. }