通用评论

ImagePreviewer.css 2.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. .container .toolbar {
  2. border-bottom: 1px solid #f2f2f2;
  3. margin: 0 5px;
  4. padding-bottom: 10px;
  5. }
  6. .container .toolbar .button {
  7. padding: 5px 10px;
  8. cursor: pointer;
  9. }
  10. .container .toolbar .button.reversal i {
  11. transform: rotate3d(0, 1, 0, 180deg);
  12. }
  13. .container .pictureWrapper {
  14. position: relative;
  15. text-align: center;
  16. margin-top: 15px;
  17. padding: 0 5px;
  18. }
  19. .container .pictureWrapper .tools {
  20. position: absolute;
  21. left: 0;
  22. top: 0;
  23. bottom: 0;
  24. right: 0;
  25. }
  26. .container .pictureWrapper .tools .item {
  27. width: 33%;
  28. display: inline-block;
  29. height: 100%;
  30. }
  31. .container .pictureWrapper .tools .item.left {
  32. cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/73_yM_fx-.undefined"),
  33. auto;
  34. }
  35. .container .pictureWrapper .tools .item.shrink {
  36. cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/oGPpbJ7Rk.undefined"),
  37. auto;
  38. }
  39. .container .pictureWrapper .tools .item.right {
  40. cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/S8obecP1d.undefined"),
  41. auto;
  42. }
  43. .container .pictureWrapper .picture {
  44. max-width: 100%;
  45. max-height: 400px;
  46. }
  47. .container .pictureWrapper .prev {
  48. position: absolute;
  49. width: 50px;
  50. background-color: transparent;
  51. z-index: 100;
  52. opacity: 0.5;
  53. font-size: 50px;
  54. text-align: left;
  55. cursor: pointer;
  56. left: 5px;
  57. top: 0;
  58. bottom: 0;
  59. }
  60. .container .pictureWrapper .prev:hover {
  61. background-color: #fff;
  62. }
  63. .container .pictureWrapper .next {
  64. position: absolute;
  65. width: 50px;
  66. background-color: transparent;
  67. z-index: 100;
  68. opacity: 0.5;
  69. font-size: 50px;
  70. text-align: left;
  71. cursor: pointer;
  72. right: 5px;
  73. top: 0;
  74. bottom: 0;
  75. }
  76. .container .pictureWrapper .next:hover {
  77. background-color: #fff;
  78. }
  79. .container .pictureWrapper .middle {
  80. position: absolute;
  81. top: 50%;
  82. transform: translateY(-50%);
  83. }
  84. .container .list {
  85. font-size: 0;
  86. margin-top: 25px;
  87. }
  88. .container .list .wrapper {
  89. width: 11.1%;
  90. height: 0;
  91. padding-bottom: 11.1%;
  92. position: relative;
  93. display: inline-block;
  94. border-radius: 5px;
  95. border: 1px solid transparent;
  96. opacity: 0.5;
  97. }
  98. .container .list .wrapper.active {
  99. border: 1px solid #fc4747;
  100. opacity: 1;
  101. }
  102. .container .list .wrapper .thumbnail {
  103. position: absolute;
  104. top: 5px;
  105. bottom: 5px;
  106. left: 5px;
  107. right: 5px;
  108. background-size: cover;
  109. background-position: center;
  110. border-radius: 5px;
  111. cursor: pointer;
  112. }