cropper.css 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. .cropper-container {
  2. position: relative;
  3. font-size: 0;
  4. line-height: 0;
  5. -webkit-user-select: none;
  6. -moz-user-select: none;
  7. -ms-user-select: none;
  8. user-select: none;
  9. direction: ltr !important; }
  10. .cropper-container img {
  11. display: block;
  12. width: 100%;
  13. min-width: 0 !important;
  14. max-width: none !important;
  15. height: 100%;
  16. min-height: 0 !important;
  17. max-height: none !important;
  18. image-orientation: 0deg !important; }
  19. .cropper-wrap-box, .cropper-canvas, .cropper-drag-box, .cropper-crop-box, .cropper-modal {
  20. position: absolute;
  21. top: 0;
  22. right: 0;
  23. bottom: 0;
  24. left: 0; }
  25. .cropper-wrap-box {
  26. overflow: hidden; }
  27. .cropper-drag-box {
  28. background-color: #fff;
  29. opacity: 0; }
  30. .cropper-modal {
  31. background-color: #000;
  32. opacity: .5; }
  33. .cropper-view-box {
  34. display: block;
  35. width: 100%;
  36. height: 100%;
  37. overflow: hidden;
  38. outline: 1px solid #3e8ef7;
  39. outline-color: rgba(62, 142, 247, 0.75); }
  40. .cropper-dashed {
  41. position: absolute;
  42. display: block;
  43. border: 0 dashed #eee;
  44. opacity: .5; }
  45. .cropper-dashed.dashed-h {
  46. top: 33.3333333333%;
  47. left: 0;
  48. width: 100%;
  49. height: 33.3333333333%;
  50. border-top-width: 1px;
  51. border-bottom-width: 1px; }
  52. .cropper-dashed.dashed-v {
  53. top: 0;
  54. left: 33.3333333333%;
  55. width: 33.3333333333%;
  56. height: 100%;
  57. border-right-width: 1px;
  58. border-left-width: 1px; }
  59. .cropper-center {
  60. position: absolute;
  61. top: 50%;
  62. left: 50%;
  63. display: block;
  64. width: 0;
  65. height: 0;
  66. opacity: .75; }
  67. .cropper-center:before, .cropper-center:after {
  68. position: absolute;
  69. display: block;
  70. content: " ";
  71. background-color: #eee; }
  72. .cropper-center:before {
  73. top: 0;
  74. left: -3px;
  75. width: 7px;
  76. height: 1px; }
  77. .cropper-center:after {
  78. top: -3px;
  79. left: 0;
  80. width: 1px;
  81. height: 7px; }
  82. .cropper-face, .cropper-line, .cropper-point {
  83. position: absolute;
  84. display: block;
  85. width: 100%;
  86. height: 100%;
  87. opacity: .1; }
  88. .cropper-face {
  89. top: 0;
  90. left: 0;
  91. background-color: #fff; }
  92. .cropper-line {
  93. background-color: #3e8ef7; }
  94. .cropper-line.line-e {
  95. top: 0;
  96. right: -3px;
  97. width: 5px;
  98. cursor: e-resize; }
  99. .cropper-line.line-n {
  100. top: -3px;
  101. left: 0;
  102. height: 5px;
  103. cursor: n-resize; }
  104. .cropper-line.line-w {
  105. top: 0;
  106. left: -3px;
  107. width: 5px;
  108. cursor: w-resize; }
  109. .cropper-line.line-s {
  110. bottom: -3px;
  111. left: 0;
  112. height: 5px;
  113. cursor: s-resize; }
  114. .cropper-point {
  115. width: 5px;
  116. height: 5px;
  117. background-color: #3e8ef7;
  118. opacity: .75; }
  119. @media (min-width: 480px) {
  120. .cropper-point.point-se {
  121. width: 15px;
  122. height: 15px; } }
  123. @media (min-width: 768px) {
  124. .cropper-point.point-se {
  125. width: 10px;
  126. height: 10px; } }
  127. @media (min-width: 992px) {
  128. .cropper-point.point-se {
  129. width: 5px;
  130. height: 5px;
  131. opacity: .75; } }
  132. .cropper-point.point-e {
  133. top: 50%;
  134. right: -3px;
  135. margin-top: -3px;
  136. cursor: e-resize; }
  137. .cropper-point.point-n {
  138. top: -3px;
  139. left: 50%;
  140. margin-left: -3px;
  141. cursor: n-resize; }
  142. .cropper-point.point-w {
  143. top: 50%;
  144. left: -3px;
  145. margin-top: -3px;
  146. cursor: w-resize; }
  147. .cropper-point.point-s {
  148. bottom: -3px;
  149. left: 50%;
  150. margin-left: -3px;
  151. cursor: s-resize; }
  152. .cropper-point.point-ne {
  153. top: -3px;
  154. right: -3px;
  155. cursor: ne-resize; }
  156. .cropper-point.point-nw {
  157. top: -3px;
  158. left: -3px;
  159. cursor: nw-resize; }
  160. .cropper-point.point-sw {
  161. bottom: -3px;
  162. left: -3px;
  163. cursor: sw-resize; }
  164. .cropper-point.point-se {
  165. right: -3px;
  166. bottom: -3px;
  167. width: 20px;
  168. height: 20px;
  169. cursor: se-resize;
  170. opacity: 1; }
  171. .cropper-point.point-se:before {
  172. position: absolute;
  173. right: -50%;
  174. bottom: -50%;
  175. display: block;
  176. width: 200%;
  177. height: 200%;
  178. content: " ";
  179. background-color: #3e8ef7;
  180. opacity: 0; }
  181. .cropper-invisible {
  182. opacity: 0; }
  183. .cropper-bg {
  184. background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC"); }
  185. .cropper-hide {
  186. position: absolute;
  187. display: block;
  188. width: 0;
  189. height: 0; }
  190. .cropper-hidden {
  191. display: none !important; }
  192. .cropper-move {
  193. cursor: move; }
  194. .cropper-crop {
  195. cursor: crosshair; }
  196. .cropper-disabled .cropper-drag-box, .cropper-disabled .cropper-face, .cropper-disabled .cropper-line, .cropper-disabled .cropper-point {
  197. cursor: not-allowed; }