mui.previmg.css 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. .mui-preview-image.mui-fullscreen {
  2. position: fixed;
  3. z-index: 10001;
  4. background-color: #000;
  5. }
  6. .mui-preview-header,
  7. .mui-preview-footer {
  8. position: absolute;
  9. width: 100%;
  10. left: 0;
  11. z-index: 10;
  12. }
  13. .mui-preview-header {
  14. height: 0;
  15. top: 0;
  16. }
  17. .mui-preview-footer {
  18. height: 50px;
  19. bottom: 0px;
  20. }
  21. .mui-preview-header .mui-preview-indicator {
  22. display: block;
  23. line-height: 25px;
  24. color: #fff;
  25. text-align: center;
  26. margin: 15px auto 4;
  27. width: 70px;
  28. background-color: rgba(0, 0, 0, 0.4);
  29. border-radius: 12px;
  30. font-size: 16px;
  31. }
  32. .mui-preview-image {
  33. display: none;
  34. -webkit-animation-duration: 0.5s;
  35. animation-duration: 0.5s;
  36. -webkit-animation-fill-mode: both;
  37. animation-fill-mode: both;
  38. }
  39. .mui-preview-image.mui-preview-in {
  40. -webkit-animation-name: fadeIn;
  41. animation-name: fadeIn;
  42. }
  43. .mui-preview-image.mui-preview-out {
  44. background: none;
  45. -webkit-animation-name: fadeOut;
  46. animation-name: fadeOut;
  47. }
  48. .mui-preview-image.mui-preview-out .mui-preview-header,
  49. .mui-preview-image.mui-preview-out .mui-preview-footer {
  50. display: none;
  51. }
  52. .mui-zoom-scroller {
  53. position: absolute;
  54. display: -webkit-box;
  55. display: -webkit-flex;
  56. display: flex;
  57. -webkit-box-align: center;
  58. -webkit-align-items: center;
  59. align-items: center;
  60. -webkit-box-pack: center;
  61. -webkit-justify-content: center;
  62. justify-content: center;
  63. left: 0;
  64. right: 0;
  65. bottom: 0;
  66. top: 0;
  67. width: 100%;
  68. height: 100%;
  69. margin: 0;
  70. -webkit-backface-visibility: hidden;
  71. }
  72. .mui-zoom {
  73. -webkit-transform-style: preserve-3d;
  74. transform-style: preserve-3d;
  75. }
  76. .mui-slider .mui-slider-group .mui-slider-item img {
  77. width: auto;
  78. height: auto;
  79. max-width: 100%;
  80. max-height: 100%;
  81. }
  82. .mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
  83. width: 100%;
  84. }
  85. .mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
  86. display: inline-table;
  87. }
  88. .mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
  89. display: table-cell;
  90. vertical-align: middle;
  91. }
  92. .mui-preview-loading {
  93. position: absolute;
  94. width: 100%;
  95. height: 100%;
  96. top: 0;
  97. left: 0;
  98. display: none;
  99. }
  100. .mui-preview-loading.mui-active {
  101. display: block;
  102. }
  103. .mui-preview-loading .mui-spinner-white {
  104. position: absolute;
  105. top: 50%;
  106. left: 50%;
  107. margin-left: -25px;
  108. margin-top: -25px;
  109. height: 50px;
  110. width: 50px;
  111. }
  112. .mui-preview-image img.mui-transitioning {
  113. -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
  114. transition: transform 0.5s ease, opacity 0.5s ease;
  115. }
  116. @-webkit-keyframes fadeIn {
  117. 0% {
  118. opacity: 0;
  119. }
  120. 100% {
  121. opacity: 1;
  122. }
  123. }
  124. @keyframes fadeIn {
  125. 0% {
  126. opacity: 0;
  127. }
  128. 100% {
  129. opacity: 1;
  130. }
  131. }
  132. @-webkit-keyframes fadeOut {
  133. 0% {
  134. opacity: 1;
  135. }
  136. 100% {
  137. opacity: 0;
  138. }
  139. }
  140. @keyframes fadeOut {
  141. 0% {
  142. opacity: 1;
  143. }
  144. 100% {
  145. opacity: 0;
  146. }
  147. }
  148. p img {
  149. max-width: 100%;
  150. height: auto;
  151. }