previewimage.css 3.0 KB

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